/* ============================================================
   CYP POWER LANDING PAGE — FAST SMOOTH PIPING INC. 快順通水管
   Palette carries over the client's existing van + print identity
   (blue field, red phone number) so returning customers recognise it.
   Cloning = change the --brand-* and --act-* values only.
   ============================================================ */
:root {
    /* Opt out of automatic dark-mode inversion. Android Chrome's force-dark and
     several in-app browsers (WeChat, Facebook, Instagram) will otherwise
     re-tint this page on mobile only, while desktop renders as authored.
     This is the fix for "colours look different on my phone". */
    color-scheme: only light;
    --brand: #0078F0;
    /* sampled from the FS mark — core blue */
    --brand-deep: #001848;
    /* sampled from the FS mark — outline navy */
    --brand-wash: #EAF4FE;
    /* ACTION COLOUR — red, DECIDED (Phase 1). Not a brand colour: the 2026 FS
     logo contains 0% red (measured). Red is the action accent because on an
     otherwise all-blue page only a hue-distant colour reads as "click" —
     luminance contrast alone does not achieve that. Measures 5.65:1 with white
     text, passing WCAG AA for normal text.
     Monochrome-blue was implemented and measured as an alternative (#0052AD,
     7.47:1) and then reverted by decision. Do NOT use #00A6FF — 2.66:1, fails
     AA outright. */
    --act: #D10008;
    --act-deep: #9C0006;
    /* ALERT COLOUR — kept as a separate token even though it currently matches
     --act. This is deliberate: errors, required markers and the review blocker
     panel are alert semantics, not action semantics. Keeping them separate means
     a future CTA colour change cannot silently turn error messages the wrong
     colour — the failure mode found when monochrome-blue was trialled. */
    --alert: #D10008;
    --alert-deep: #9C0006;

    --ink: #151C26;
    --ink-2: #4F5D6E;
    --paper: #FFFFFF;
    --line: #D9E2EE;
    --ok: #12734F;

    --f-body: "Noto Sans TC", "Noto Sans", sans-serif;
    --measure: 64ch;
    --pad: clamp(1.15rem, 4vw, 2.25rem);
    --gap: clamp(2.9rem, 6.4vw, 5.1rem);
    --radius: 10px;
}

html[lang="en"] {
    --f-body: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

html[lang="zh-Hant"] {
    --f-body: "Noto Sans TC", "Noto Sans", sans-serif;
}

html[lang="zh-Hans"] {
    --f-body: "Noto Sans SC", "Noto Sans", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--f-body);
    color: var(--ink);
    background: var(--paper);
    font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--bar-h, 44px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--brand);
}

:focus-visible {
    outline: 3px solid var(--act);
    outline-offset: 2px;
    border-radius: 3px;
}

.wrap {
    width: min(100% - 2*var(--pad), 1140px);
    margin-inline: auto;
}

.sec {
    padding-block: var(--gap);
}

.sec--wash {
    background: var(--brand-wash);
}

.sec--ink {
    background: var(--brand-deep);
    color: #E7F0FB;
}

.sec--ink h2 {
    color: #fff;
}

h1,
h2,
h3 {
    margin: 0 0 .5em;
    line-height: 1.28;
    letter-spacing: 0;
    font-weight: 800;
}

/* section headers scaled +30%; h3 (card titles) +8% so the scale stays even */
h1 {
    font-size: clamp(2.5rem, 1.7rem + 3vw, 2.6rem);
    line-height: 1.16;
}

h2 {
    font-size: clamp(1.7rem, 1.3rem + 2vw, 2rem);
    line-height: 1.2;
    margin-bottom: .4em;
}

h3 {
    font-size: clamp(1.14rem, 1rem + .44vw, 1.3rem);
}

/* negative tracking helps large Latin, harms CJK — so Latin only */
html[lang="en"] h1,
html[lang="en"] h2 {
    letter-spacing: -.022em;
}

p {
    margin: 0 0 1rem;
    /*max-width: var(--measure);*/
}

.lede {
    font-size: clamp(1.04rem, 1rem + .36vw, 1.2rem);
    color: var(--ink-2);
}

.sec--ink .lede {
    color: #B7CDE8;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 .75rem;
}

.eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 48px;
    height: 6px;
    border-radius: 3px;
    background: var(--act);
}

html[lang="zh-Hant"] .eyebrow,
html[lang="zh-Hans"] .eyebrow {
    letter-spacing: .1em;
    font-size: 1.3rem;
}

.sec--ink .eyebrow {
    color: #7FB3EC;
}

.sec--wash .eyebrow {
    color: var(--brand-deep);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    padding: .92rem 1.5rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    min-height: 54px;
    transition: transform .12s ease, background-color .12s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn--call {
    background: var(--act);
    color: #fff;
    box-shadow: 0 2px 0 var(--act-deep);
}

.btn--call:hover {
    background: var(--act-deep);
}

.btn--quote {
    background: transparent;
    /*color: var(--brand-deep);*/
    border-color: var(--brand);
}

.btn--quote:hover {
    background: #DEE9F8;
}

.sec--ink .btn--quote {
    color: #fff;
    border-color: #6F9FD8;
}

.sec--ink .btn--quote:hover {
    background: rgba(255, 255, 255, .1);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.site-head {
    position: sticky;
    top: var(--bar-h, 44px);
    z-index: 60;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(6px);
}

.site-head__in {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    line-height: 1.2;
    font-size: 1.02rem;
    text-decoration: none;
    color: var(--ink);
}

.brand__mark {
    width: auto;
    height: 42px;
    flex: 0 0 auto;
    display: block;
}

.brand__txt {
    display: block;
}

/* brand text is now live HTML (not an image) — visible from 480px up */
@media(max-width:479px) {
    .brand__txt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.brand small {
    display: block;
    font-size: .66rem;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: .04em;
}

.foot-logo {
    height: 66px;
    width: auto;
    margin-bottom: .9rem;
}

.thanks__logo {
    height: 56px;
    width: auto;
    margin: 0 auto 1.1rem;
}

/* ── Position Blocker registry ─────────────────────────────────────────────
   One source of truth for every un-made Gate 0A decision. Each blocker has a
   stable ID, its option set, a status, and (where relevant) an inline chip on
   the exact spot it controls. Fill in = change status + swap the value; the
   build proceeds around them because every gap is visible and inventoried. */
.blockers {
    border: 2px solid var(--alert);
    border-radius: 14px;
    background: #FFF7F7;
    padding: 1.25rem 1.4rem;
    margin: 1.5rem 0;
}

.blockers__h {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0 0 .3rem;
}

.blockers__h b {
    font-size: 1.05rem;
    color: var(--act-deep);
    font-weight: 800;
}

.blockers__tally {
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: var(--alert);
    border-radius: 999px;
    padding: .15rem .7rem;
}

.blockers__sub {
    font-size: .85rem;
    color: var(--ink-2);
    margin: .1rem 0 1rem;
    line-height: 1.6;
}

.blk {
    border-top: 1px solid #F0D8D8;
    padding: .7rem 0;
}

.blk:last-child {
    padding-bottom: 0;
}

.blk__top {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}

.blk__id {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-deep);
    border-radius: 5px;
    padding: .12rem .5rem;
    flex: 0 0 auto;
}

.blk__id.is-prov {
    background: #0A7C42;
}

.blk__q {
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
}

.blk__status {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: .12rem .55rem;
    border-radius: 999px;
    flex: 0 0 auto;
}

.blk__status.pending {
    background: #FCE9C8;
    color: #8A5A00;
}

.blk__status.prov {
    background: #DCF3E6;
    color: #0A6B3C;
}

.blk__status.decided {
    background: #0A7C42;
    color: #fff;
}

.blk__status.reconfirm {
    background: #FBE0DE;
    color: #A02219;
}

.blk__id.is-decided {
    background: #0A7C42;
}

.blk__id.is-hold {
    background: #A02219;
}

.blk__val {
    font-size: .85rem;
    color: #0A5C2E;
    font-weight: 700;
    margin: .3rem 0 0;
}

.blk__hold {
    font-size: .83rem;
    color: #A02219;
    background: #FBE0DE;
    border: 1px dashed #E0A9A3;
    border-radius: 8px;
    padding: .5rem .7rem;
    margin: .35rem 0 0;
    line-height: 1.6;
}

.blk__opts {
    font-size: .85rem;
    color: var(--ink-2);
    margin: .3rem 0 0;
    line-height: 1.6;
}

.blk__opts b {
    color: var(--ink);
    font-weight: 700;
}

.blk__rec {
    font-size: .85rem;
    color: #0A5C2E;
    margin: .25rem 0 0;
    line-height: 1.6;
}

.blk__fill {
    display: inline-block;
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--ink-2);
    background: #fff;
    border: 1px dashed #C9B79A;
    border-radius: 6px;
    padding: .2rem .6rem;
}

/* inline "pending decision" chip, sits next to the content a blocker controls */
.pend {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    vertical-align: middle;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #8A5A00;
    background: #FCE9C8;
    border: 1px solid #E7C685;
    border-radius: 999px;
    padding: .22rem .5rem;
    margin-left: .4rem;
    text-decoration: none;
}

.pend::before {
    content: "⧗";
    font-size: .85em;
}

.pend.is-done {
    color: #0A6B3C;
    background: #DCF3E6;
    border-color: #9AD9B8;
}

.pend.is-done::before {
    content: "✓";
}

.pend.is-hold {
    color: #A02219;
    background: #FBE0DE;
    border-color: #E0A9A3;
}

.pend.is-hold::before {
    content: "!";
    font-weight: 800;
}

.pend:hover {
    background: #F8DCA6;
}

/* FAQ category tabs — real buttons, filter the accordion list below */
.faq-tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 1.1rem;
}

.faq-tabs button {
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    padding: .55rem 1rem;
    min-height: 44px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.faq-tabs button:hover {
    border-color: var(--brand);
    color: var(--brand-deep);
}

.faq-tabs button[aria-selected="true"] {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    color: #fff;
}

.faq-count {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
    margin: 0 0 1rem;
}

.faq details[hidden] {
    display: none;
}

.faq-cta {
    display: inline-block;
    margin-top: .6rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--act);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
}

.faq-cta:hover {
    color: var(--act-deep);
}

/* skip-link: hidden until keyboard focus, then pinned top-left above everything */
.skip-link {
    position: fixed;
    top: -60px;
    left: 8px;
    z-index: 300;
    background: var(--brand-deep);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    text-decoration: none;
    transition: top .15s;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--act);
    outline-offset: 2px;
}

/* In-page section nav — desktop only. Real <a href="#id"> anchors (crawlable, no JS
   required to function); JS below only adds scroll-spy active-state highlighting.
   WordPress: build as a Custom Menu (Appearance > Menus) in a "header-nav" location,
   or as manual anchor links in an Elementor Nav Menu widget — each target section
   just needs its CSS ID set to match (svc-offer / svc-process / svc-area / quote).
   No nav plugin needed. */
.site-nav {
    display: none;
    flex: 0 0 auto;
}

@media(min-width:1220px) {
    .site-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex: 1;
    }
}

.site-nav a {
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    padding: .5rem;
    white-space: nowrap;
}

.site-nav a:hover {
    color: var(--brand);
}

.site-nav a[aria-current="true"] {
    color: var(--act);
}

.site-nav a[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: var(--act);
}

.head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 0 0 auto;
}

/* CYP Select — directory-membership badge; header pill bookmarks to the footer panel */
.cypselect {
    display: flex;
    align-items: center;
    gap: .36rem;
    flex: 0 0 auto;
    text-decoration: none;
    padding: .45rem .6rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-deep);
}

.cypselect:hover {
    border-color: var(--act);
    background: #FFF6F6;
}

.cypselect__ic {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--act);
}

.cypselect__ic svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    margin-bottom: 6px;
}

.cypselect__txt {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}

.cypselect__txt sup {
    font-size: .62em;
}

.cypselect__cap {
    display: none;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}

@media(min-width:760px) {
    .cypselect__cap {
        display: inline;
    }
}

@media(max-width:599px) {

    .cypselect__txt,
    .cypselect__cap {
        display: none;
    }

    .cypselect {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .cypselect__ic {
        width: 18px;
        height: 18px;
    }
}

@media(max-width:600px) {
    .brand__txt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .head-tel span {
        display: none;
    }

    .head-tel {
        font-size: .95rem;
    }
}

/* Below ~336px, badge + CYP Select + language + phone number no longer all fit
   (measured: badge 42 + select 36 + lang ~92 + phone ~103 + gaps > 320px content box).
   Drop the header phone number here — the sticky bottom call bar (.callbar) already
   shows the number and stays reachable on every mobile width, so nothing is lost. */
@media(max-width:359px) {
    .head-tel {
        display: none;
    }
}

#cyp-select,
#svc-offer,
#svc-process,
#svc-area,
#quote {
    scroll-margin-top: calc(var(--bar-h, 44px) + 96px);
}

.head-tel {
    font-weight: 800;
    color: var(--act);
    text-decoration: none;
    white-space: nowrap;
    font-size: 1.02rem;
}

.head-tel span {
    display: block;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ink-2);
}

.head-cta {
    display: none;
}

@media(min-width:900px) {
    .head-cta {
        display: inline-flex;
        padding: .6rem 1.05rem;
        min-height: 46px;
    }
}

/* nav replaces the CTA button at this width (must come after the 900px rule above,
   since equal-specificity rules resolve by source order, not by which media query
   is "wider") */
@media(min-width:1220px) {
    .head-cta {
        display: none;
    }
}

.lang {
    display: flex;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    flex: 0 0 auto;
}

.lang button {
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    padding: .4rem .6rem;
    border: 0;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
    border-left: 1px solid var(--line);
}

.lang button:first-child {
    border-left: 0;
}

.lang button:hover {
    background: var(--brand-wash);
    color: var(--brand-deep);
}

.lang button[aria-pressed="true"] {
    background: var(--brand);
    color: #fff;
}

.lang__sm {
    display: none;
}

@media(max-width:600px) {
    .lang__lg {
        display: none;
    }

    .lang__sm {
        display: inline;
    }

    .lang button {
        padding: .4rem .5rem;
    }
}

/*.hero {*/
/*    padding-block: clamp(2rem, 5vw, 3.5rem) var(--gap);*/
/*}*/

.hero__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
}

@media(min-width:940px) {
    .hero__grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.hero h1 .hl {
    color: var(--brand-deep);
    display: block;
}

.hero__place {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .04em;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    padding: .36rem .9rem;
    margin-bottom: 1rem;
}

.trustline {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-weight: 600;
    color: var(--ink-2);
    font-size: .95rem;
}

.trustline b {
    color: var(--ink);
}

/* SIGNATURE: dispatch ticket — replaces stock photography until licensed files arrive */
.ticket {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 14px 34px -22px rgba(7, 53, 113, .55);
}

.ticket__rail {
    height: 5px;
    background: linear-gradient(90deg, var(--brand), var(--act));
}

.ticket__head {
    background: var(--brand-deep);
    color: #fff;
    padding: .85rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ticket__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4BE08F;
    flex: 0 0 auto;
}

.ticket__head strong {
    font-size: .9rem;
    letter-spacing: .05em;
}

.ticket__body {
    padding: .1rem 1.3rem;
}

.ticket__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: .95rem;
}

.ticket__row:last-of-type {
    border-bottom: 0;
}

.ticket__row dt {
    color: var(--ink-2);
    margin: 0;
}

.ticket__row dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.ticket__foot {
    background: var(--brand-wash);
    padding: .85rem 1.15rem;
    font-size: .83rem;
    color: var(--ink-2);
    max-width: 100%;
}

.grid {
    display: grid;
    gap: 1rem;
}

@media(min-width:680px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width:880px) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.35rem;
}

.card p:last-child {
    margin-bottom: 0;
}

.card__ic {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--brand-wash);
    color: var(--brand-deep);
    display: grid;
    place-items: center;
    font-weight: 800;
    margin-bottom: .85rem;
    font-size: .95rem;
}

.trustbar {
    background: var(--brand-deep);
    color: #fff;
}

.trustbar ul {
    list-style: none;
    margin: 0;
    padding: 1.1rem 0;
    display: grid;
    gap: .7rem 1.5rem;
}

@media(min-width:680px) {
    .trustbar ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trustbar li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .94rem;
}

.tick {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4BE08F;
    color: #073571;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.ctaband {
    background: var(--act);
    color: #fff;
}

.ctaband h2 {
    color: #fff;
    margin-bottom: .35rem;
}

.ctaband p {
    color: #FFDCDC;
}

.ctaband .btn--call {
    background: #fff;
    color: var(--act-deep);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.ctaband .btn--quote {
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
}

.ctaband .btn--quote:hover {
    background: rgba(255, 255, 255, .12);
}

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    counter-reset: s;
}

@media(min-width:880px) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.steps li {
    counter-increment: s;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.6rem 1.6rem 3.6rem;
    position: relative;
}

.steps li::before {
    content: counter(s);
    position: absolute;
    left: 1.2rem;
    top: 1.35rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1rem;
    line-height: 28px;
}

.steps li p {
    margin-bottom: 0rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 1.1rem 0 0;
    list-style: none;
}

.chips li {
    margin: 0;
    padding: 0;
}

.area-chip {
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    padding: .48rem .95rem;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.area-chip:hover {
    border-color: var(--brand);
    color: var(--brand-deep);
}

.area-chip.is-focus,
.area-chip[aria-pressed="true"] {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.quote {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 1.35rem;
}

.quote footer {
    font-size: .87rem;
    color: var(--ink-2);
    font-weight: 600;
}

.faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .95rem 1.15rem;
    margin-bottom: .7rem;
}

.faq summary {
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .2rem 0rem;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    font-weight: 800;
    color: var(--brand);
    font-size: 1.3rem;
    line-height: 1;
}

.faq details[open] summary::after {
    content: "\2212";
}

.faq details p {
    margin: .8rem 0 0;
    color: var(--ink-2);
}

.formwrap {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
}

.fsp-faq-answer {
    padding: .2rem 0rem;
    color: #666666;
}

@media(min-width:940px) {
    .formwrap {
        grid-template-columns: .9fr 1.1fr;
        align-items: start;
    }
}

.form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: clamp(1.2rem, 3vw, 1.9rem);
}

.field {
    margin-bottom: .5rem;
}

.field label {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .3rem;
}

.req {
    color: var(--alert);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    font: inherit;
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    min-height: 48px;
    font-size: .9rem;
}

.field textarea {
    min-height: 94px;
    resize: vertical;
    margin-top: 0.7rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--brand);
}

.two {
    display: grid;
    gap: .95rem;
}

@media(min-width:560px) {
    .two {
        grid-template-columns: 1fr 1fr;
    }
}

.consent {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .9rem;
    color: var(--ink-2);
    font-weight: 400;
}

.consent input {
    width: 16px;
    height: 16px;
    min-height: 0;
    flex: 0 0 auto;
    margin-top: .25rem;
}

.err {
    color: var(--alert);
    font-size: .84rem;
    font-weight: 600;
    margin-top: .3rem;
    display: none;
}

.field.is-bad input,
.field.is-bad select {
    border-color: var(--act);
}

.field.is-bad .err {
    display: block;
}

.site-foot {
    background: var(--brand-deep);
    color: #B7CDE8;
    padding-block: 2.5rem 3rem;
    font-size: .92rem;
}

.site-foot a {
    color: #fff;
}

.site-foot h3 {
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.foot-grid {
    display: grid;
    gap: 1.75rem;
}

@media(min-width:760px) {
    .foot-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

.foot-legal {
    border-top: 1px solid rgba(255, 255, 255, .16);
    margin-top: 2rem;
    padding-top: 1.2rem;
    font-size: .82rem;
}

.foot-legal__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.foot-legal__copy {
    margin: 0;
    flex: 1 1 300px;
    padding-top: .3rem;
    font-size: .9rem;
}

/* CYP Select — reserved on the right of the copyright line (bookmark target) */
.cyp-select-panel {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    flex: 0 0 auto;
    /*max-width: 360px;*/
    padding: .75rem .9rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
}

.cyp-select-panel__ic {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: #F0B429;
    margin-top: .1rem;
}

.cyp-select-panel__ic svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.cyp-select-panel__ttl {
    margin: 0 0 .3rem;
    font-weight: 800;
    font-size: .86rem;
    color: #fff;
}

.cyp-select-panel__ttl sup {
    font-size: .62em;
}

.cyp-select-panel__ttl span {
    font-weight: 600;
    color: #9AB4D6;
    font-size: .78rem;
}

.cyp-select-panel__txt {
    margin: 0 0 .45rem;
    font-size: .76rem;
    line-height: 1.6;
    color: #B9D3D9;
}

.cyp-select-panel__links {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    font-size: .74rem;
}

.cyp-select-panel__links a {
    color: #8FCBFF;
    font-weight: 700;
    text-decoration: none;
}

.cyp-select-panel__links a:hover {
    text-decoration: underline;
}

@media(max-width:520px) {
    .cyp-select-panel {
        max-width: none;
        width: 100%;
    }
}

.callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    gap: .6rem;
    padding: .6rem;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
}

.callbar .btn {
    flex: 1;
    padding: .8rem 1rem;
    min-height: 52px;
    font-size: .98rem;
}

@media(min-width:800px) {
    .callbar {
        display: none;
    }
}

@media(max-width:799px) {
    body {
        padding-bottom: 78px;
    }
}

.ph {
    border: 1.5px dashed #C2A24E;
    background: #FDF8EA;
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    color: #6B551C;
    font-size: .9rem;
}

.ph b {
    color: #4E3D0F;
}

.imgslot {
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    background: var(--brand-wash);
    aspect-ratio: 16/10;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.2rem;
    color: var(--ink-2);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.7;
}

/* ---- WeChat block + smarter form controls ---- */
.wechat {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 1.2rem;
    margin-top: 1.35rem;
}

.wechat__top {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .9rem;
}

.wechat__ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #07C160;
    color: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.wechat__ic svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.wechat__ttl {
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.3;
}

.wechat__ttl small {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink-2);
}

.wechat__body {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr;
    align-items: center;
}

@media(max-width:420px) {
    .wechat__body {
        grid-template-columns: 1fr;
    }
}

.wechat__qr {
    width: 108px;
    height: 108px;
    border: 1.5px dashed #9FB6CE;
    border-radius: 10px;
    background: var(--brand-wash);
    display: grid;
    place-items: center;
    text-align: center;
    font-size: .68rem;
    color: var(--ink-2);
    padding: .5rem;
    line-height: 1.45;
    font-weight: 600;
}

.wechat__lbl {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0 0 .2rem;
}

.wechat__id {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--brand-deep);
    word-break: break-all;
    margin: 0 0 .6rem;
}

.wechat__copy {
    font: inherit;
    font-weight: 700;
    font-size: .85rem;
    padding: .5rem .9rem;
    min-height: 40px;
    border-radius: 8px;
    border: 1.5px solid #07C160;
    background: #fff;
    color: #0A7C42;
    cursor: pointer;
}

.wechat__copy:hover {
    background: #E9F9F0;
}

.wechat__copy.is-done {
    background: #07C160;
    color: #fff;
}

.wechat__note {
    font-size: .78rem;
    color: var(--ink-2);
    margin: .75rem 0 0;
    line-height: 1.6;
}

.field__hint {
    font-size: .82rem;
    color: var(--ink-2);
    margin: .32rem 0 0;
    line-height: 1.6;
}

.field.is-hidden {
    display: none;
}

.pick {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}

.pick button {
    font: inherit;
    font-size: .8rem;
    font-weight: normal;
    padding: .3rem .5rem;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
    text-align: left;
}

.pick button:hover {
    border-color: var(--brand);
    color: var(--brand-deep);
}

.pick button[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pick button[aria-pressed="true"]::before {
    content: "\2713  ";
    font-weight: 800;
}


/* ---- manual process-photo carousel: arrows only, never auto-advances ---- */
.process-carousel {
    min-width: 0;
}

.process-carousel__viewport {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.process-carousel__track {
    display: flex;
    transition: transform .28s ease;
    will-change: transform;
}

@media (prefers-reduced-motion:reduce) {
    .process-carousel__track {
        transition: none;
    }
}

.process-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.process-carousel__slide figure {
    margin: 0;
}

.hero__grid h2 {
    margin-bottom: 25px;
}

.process-carousel__slide img,
.process-carousel__empty {
    display: block;
    width: 100%;
    height: 367px;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: var(--brand-wash);
}

.process-carousel__slide figcaption {
    padding: .7rem .9rem;
    font-size: .86rem;
    color: var(--ink-2);
    background: #fff;
}

.process-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.process-carousel__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--brand-deep);
    font: inherit;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.process-carousel__btn:hover:not(:disabled) {
    background: var(--brand-wash);
    border-color: var(--brand);
}

.process-carousel__btn:disabled {
    opacity: .35;
    cursor: default;
}

.process-carousel__dots {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 12px;
}

.process-carousel__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
}

.process-carousel__dot[aria-current="true"] {
    width: 24px;
    border-radius: 5px;
    background: var(--act);
}

/* ---- photo album (CSS scroll-snap: native touch + momentum, no library) ---- */
.album__viewport {
    position: relative;
    margin-top: 1.5rem;
}

.album__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .25rem .25rem 1rem;
    margin: -.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.album__track::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion:reduce) {
    .album__track {
        scroll-behavior: auto;
    }
}

.album__slide {
    flex: 0 0 84%;
    scroll-snap-align: center;
}

@media(min-width:680px) {
    .album__slide {
        flex-basis: 47%;
    }
}

@media(min-width:1020px) {
    .album__slide {
        flex-basis: 31.5%;
    }
}

.album__fig {
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.album__shot {
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: var(--brand-wash);
    border-bottom: 1px solid var(--line);
}

.album__slot {
    aspect-ratio: 4/3;
    background: var(--brand-wash);
    border-bottom: 1px solid var(--line);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.1rem;
    gap: .4rem;
    align-content: center;
    color: var(--ink-2);
}

.album__no {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .9rem;
}

.album__brief {
    font-weight: 700;
    color: var(--brand-deep);
    font-size: .95rem;
    line-height: 1.45;
}

.album__hint {
    font-size: .78rem;
    line-height: 1.5;
}

.album__cap {
    padding: .85rem 1rem;
    font-size: 1rem;
    color: var(--ink-2);
    line-height: 1.6;
    /*min-height: 3.6rem;*/
}

.album__nav {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .4rem;
    flex-wrap: wrap;
}

.album__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--brand-deep);
    font: inherit;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.album__btn:hover {
    background: var(--brand-wash);
    border-color: var(--brand);
}

.album__btn[disabled] {
    opacity: .35;
    cursor: default;
}

.album__dots {
    display: flex;
    gap: .4rem;
    margin-left: .2rem;
}

.album__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: var(--line);
}

.album__dot[aria-current="true"] {
    background: var(--act);
    width: 24px;
    border-radius: 5px;
}

.album__count {
    margin-left: auto;
    font-size: .83rem;
    color: var(--ink-2);
    font-weight: 600;
}

/* ============ PREVIEW HARNESS — remove before production ============ */
.pbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #0E1722;
    color: #D7E3EA;
    font-family: var(--f-body);
    font-size: .77rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .7rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.pbar__tag {
    background: var(--alert);
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .2rem .5rem;
    border-radius: 5px;
    font-size: .67rem;
}

.pbar__sp {
    margin-left: auto;
}

.pbar button {
    font: inherit;
    font-weight: 700;
    background: #22303F;
    color: #D7E3EA;
    border: 1px solid #38495B;
    border-radius: 6px;
    padding: .3rem .58rem;
    cursor: pointer;
}

.pbar button[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pbar code {
    color: #7FD8C4;
    font-size: .73rem;
}

.panel {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 190;
    width: min(390px, calc(100vw - 24px));
    max-height: 56vh;
    overflow: auto;
    background: #0E1722;
    color: #D7E3EA;
    border-radius: 10px;
    border: 1px solid #2A3A4A;
    padding: .8rem .9rem;
    font-size: .78rem;
    display: none;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .75);
    line-height: 1.65;
}

.panel.is-on {
    display: block;
}

.panel h4 {
    margin: 0 0 .5rem;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7FD8C4;
}

.log__i {
    border-top: 1px solid #22303E;
    padding: .42rem 0;
}

.log__i b {
    color: #FFC08A;
}

.log__i span {
    color: #8FA3B4;
}

.log__empty {
    color: #7B8C9B;
    margin: 0;
}

.claim {
    border-top: 1px solid #22303E;
    padding: .55rem 0;
}

.claim b {
    display: block;
    color: #fff;
}

.claim em {
    font-style: normal;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .1rem .4rem;
    border-radius: 4px;
    margin-right: .4rem;
}

.claim .s-stop {
    background: #CE1B1B;
    color: #fff;
}

.claim .s-check {
    background: #C77D1A;
    color: #fff;
}

.claim .s-miss {
    background: #3E5872;
    color: #fff;
}

.claim span {
    color: #93A6B7;
    display: block;
    margin-top: .15rem;
}

body.spec .sec,
body.spec .site-head,
body.spec .site-foot,
body.spec .trustbar,
body.spec .ctaband {
    position: relative;
    outline: 1px dashed rgba(206, 27, 27, .45);
    outline-offset: -1px;
}

body.spec [data-sec]::before {
    content: attr(data-sec);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: var(--act);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: .2rem .5rem;
    border-bottom-right-radius: 6px;
    white-space: nowrap;
    font-family: var(--f-body);
}

.only-spec {
    display: none;
}

.only-review {
    display: block;
}

body.spec .only-spec {
    display: block;
}

.thanks {
    display: none;
    padding-block: clamp(3rem, 9vw, 6rem);
    text-align: center;
}

body.thanks-on .thanks {
    display: block;
}

body.thanks-on .lp {
    display: none;
}

.thanks__mark {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    display: grid;
    place-items: center;
    margin: 0 auto 1.35rem;
    font-size: 1.9rem;
    font-weight: 800;
}

.thanks .wrap {
    max-width: 640px;
}

.thanks p {
    margin-inline: auto;
}

/* ---- CLIENT VIEW: preview harness + review-only blockers hidden. ---- */
:root {
    --bar-h: 0px;
}

.pbar,
.panel {
    display: none !important;
}

body {
    padding-top: 0 !important;
}

.site-head {
    top: 0 !important;
}

.only-spec,
.only-review {
    display: none !important;
}

/* WordPress production adjustments */
.admin-bar .site-head {
    top: 32px !important;
}

@media(max-width:782px) {
    .admin-bar .site-head {
        top: 46px !important;
    }
}

/* v1.2.8 interaction/alignment fixes */
.consent {
    align-items: center;
    line-height: 1.45;
    min-height: 32px;
}

.consent input {
    margin: 0;
    align-self: center;
}

.consent span {
    display: block;
}

.pick {
    align-items: center;
}

.pick li {
    margin: 0;
    padding: 0;
}

.pick button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.35;
}

/* ============================================================
   v1.3.0 interaction/layout refinements
   Appended as overrides so existing site-specific CSS stays intact.
   ============================================================ */

/* English header: shorter labels + tighter layout to prevent wrapping. */
@media (min-width:1220px) {
  html[lang="en"] .site-head__in { gap:.55rem; }
  html[lang="en"] .site-nav { gap:.7rem; }
  html[lang="en"] .site-nav a { font-size:inherit; letter-spacing:0; }
  html[lang="en"] .cypselect { padding:.4rem .48rem; }
  html[lang="en"] .cypselect__cap { display:none; }
  html[lang="en"] .head-actions { gap:.4rem; }
  html[lang="en"] .head-tel { font-size:.9rem; }
  html[lang="en"] .head-tel span { display:none; }
  html[lang="en"] .lang button { padding: .4rem .6rem; font-size:.82rem; }
}
@media (min-width:1220px) and (max-width:1320px) {
  html[lang="en"] .brand__txt { display:none; }
}

/* Process photos are image-only; no text caption under the image. */
.process-carousel__slide figcaption { display:none !important; }

/* Work-gallery controls: previous arrow | indicators | next arrow. */
.album__nav {
  justify-content:center;
  flex-wrap:nowrap;
  gap:.65rem;
  margin-top:.85rem;
}
.album__btn {
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.55rem;
}
.album__dots {
  margin-left:0;
  align-items:center;
  justify-content:center;
  min-height:44px;
}
.album__count {
  margin-left:.35rem;
  min-width:3.4rem;
}
.album__fig {
  box-sizing:border-box;
  border:2px solid var(--line);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.album__slide.is-active .album__fig {
  border-color:var(--act);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--act) 18%, transparent);
}
@supports not (color: color-mix(in srgb, red 20%, transparent)) {
  .album__slide.is-active .album__fig { box-shadow:0 0 0 1px rgba(209,0,8,.18); }
}

/* Keep FAQ "All" first/default visually consistent. */
.faq-tabs button[aria-selected="true"] { white-space:nowrap; }


/* v1.3.2 hard overrides: cache-busted UI fixes */
html[lang="en"] .site-nav a { font-size:1.1rem; }
.process-carousel__dot[aria-current="true"] { background:var(--act) !important; }
.album__dot[aria-current="true"] { background:var(--act) !important; }


/* v1.3.3 content/blog refinements */
.problem-media-card{position:relative;min-height:206px;border-radius:var(--radius);overflow:hidden;background:var(--brand-deep);box-shadow:0 8px 28px rgba(8,48,102,.10)}
.problem-media-card img{display:block;width:100%;height:206px;object-fit:cover;transition:transform .35s ease}
.problem-media-card__overlay{position:absolute;left:0;right:0;bottom:0;padding:3.5rem 1.2rem 1.2rem;color:#fff;background:linear-gradient(transparent,rgba(2,28,67,.92));transform:translateY(42%);transition:transform .28s ease}
.problem-media-card__overlay h3,.problem-media-card__overlay p{color:#fff;margin-bottom:.35rem}.problem-media-card__overlay p{opacity:0;transition:opacity .28s ease;margin:0}
.problem-media-card:hover img,.problem-media-card:focus-within img{transform:scale(1.04)}.problem-media-card:hover .problem-media-card__overlay,.problem-media-card:focus-within .problem-media-card__overlay{transform:none}.problem-media-card:hover .problem-media-card__overlay p,.problem-media-card:focus-within .problem-media-card__overlay p{opacity:1}
.fsp-selectable-card{box-sizing:border-box;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;border:2px solid transparent!important;outline:none}.fsp-selectable-card:hover,.fsp-selectable-card:focus-visible{border-color:var(--brand)!important;transform:translateY(-2px)}.fsp-selectable-card.is-selected{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}.fsp-selectable-card.is-selected h3,.fsp-selectable-card.is-selected p{color:#fff!important}.fsp-selectable-card.is-selected::before{background:#fff!important;color:var(--brand)!important}
.wechat__help{margin-top:.9rem;padding:.85rem 1rem;border-radius:10px;background:#f5f8fc;border:1px solid var(--line);font-size:.82rem;color:var(--ink-2);line-height:1.6}.wechat__help strong{display:block;color:var(--brand-deep);margin-bottom:.35rem}.wechat__help ol{margin:.25rem 0 0;padding-left:1.25rem}.wechat__help li+li{margin-top:.2rem}
#f-msg{min-height:160px}
.final-cta{position:relative;overflow:hidden}.final-cta::after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-130px;top:-170px}.final-cta__inner{display:grid;gap:1.5rem;align-items:center;position:relative;z-index:1}.final-cta__copy .eyebrow{color:#9fc8ff}.final-cta__copy h2{max-width:720px}.final-cta__actions{display:flex;flex-direction:column;gap:1rem}.final-phone{display:flex;flex-direction:column;text-decoration:none;padding:1rem 1.2rem;border:1px solid rgba(255,255,255,.25);border-radius:14px;background:rgba(255,255,255,.08);color:#fff}.final-phone span{font-size:.82rem;opacity:.75}.final-phone strong{font-size:clamp(1.45rem,3vw,2rem);color:#fff}.final-cta .btn-row{margin-top:0}@media(min-width:900px){.final-cta__inner{grid-template-columns:1.25fr .75fr}.final-cta__actions{align-items:stretch}}
.blog-section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.5rem}.blog-section-head p{max-width:680px}.blog-more{font-weight:800;text-decoration:none;white-space:nowrap}.blog-grid{display:grid;gap:1.15rem}.blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.blog-card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 12px 28px rgba(8,48,102,.10)}.blog-card>a{text-decoration:none;color:inherit;display:block;height:100%}.blog-card img,.blog-card__placeholder{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.blog-card__placeholder{display:grid;place-items:center;background:var(--brand-wash);color:var(--brand-deep);font-weight:800}.blog-card__body{padding:1.15rem}.blog-card__body h3{margin:.2rem 0 .55rem}.blog-card__body p{color:var(--ink-2)}.blog-card__meta{font-size:.78rem!important;margin:0!important}.blog-card__body span{font-weight:800;color:var(--brand)}@media(min-width:760px){.blog-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.blog-section-head{align-items:flex-start;flex-direction:column}}
.blog-shell{min-height:100vh;background:#fff}.blog-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.blog-head__in{display:flex;align-items:center;gap:1rem;min-height:76px}.blog-head__logo{height:46px;width:auto}.blog-head__nav{margin-left:auto;display:flex;gap:.9rem;align-items:center}.blog-head__nav a{text-decoration:none;font-weight:700;color:var(--ink)}.blog-hero{padding:clamp(3rem, 7vw, 3rem) 0 3rem;background:linear-gradient(135deg,var(--brand-wash),#fff)}.blog-list-wrap{padding:2.5rem 0 4rem}.blog-list-grid{display:grid;gap:1.25rem}@media(min-width:760px){.blog-list-grid{grid-template-columns:repeat(3,1fr)}}.blog-pagination{margin-top:2rem}.blog-pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap}.blog-pagination a,.blog-pagination span{padding:.55rem .8rem;border:1px solid var(--line);border-radius:8px;text-decoration:none}.blog-pagination .current{background:var(--brand);color:#fff;border-color:var(--brand)}
.article-wrap{max-width:1140px;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) 1.25rem}.article-breadcrumb{font-size:.86rem;color:var(--ink-2);margin-bottom:1rem}.article-wrap h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.12}.article-meta{color:var(--ink-2);margin-bottom:1.6rem}.article-cover{width:100%;border-radius:18px;margin:0 0 2rem;max-height:520px;object-fit:cover}.article-content{font-size:1.05rem;line-height:1.85}.article-content h2,.article-content h3{margin-top:2.2rem}.article-content img{max-width:100%;height:auto;border-radius:12px}.article-cta{margin-top:3rem;padding:1.5rem;border-radius:16px;background:var(--brand-deep);color:#fff}.article-cta h2,.article-cta p{color:#fff}.article-cta .btn-row{margin-top:1rem}

/* v1.3.4 fixes */
.fsp-selectable-card{box-sizing:border-box!important;border:1px solid var(--line)!important;background:#fff}.fsp-selectable-card:hover,.fsp-selectable-card:focus-visible{border-color:var(--brand)!important}.fsp-selectable-card.is-selected{border-color:var(--brand)!important;background:var(--brand)!important}
.final-cta{padding-block:clamp(2.2rem,5vw,3.8rem)}.final-cta__inner{grid-template-columns:1fr!important;gap:1.25rem}.final-cta__actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:.8rem;align-items:center}.final-cta__actions .btn{min-width:210px;justify-content:center}.final-cta__note{margin:.8rem 0 0;color:#bfd3ed;font-weight:700;font-size:.9rem}.site-foot{padding-block:2.2rem 2.5rem}.foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:2rem}.foot-brand .foot-logo{max-width:180px;margin-bottom:.8rem}.foot-brand p{margin:.2rem 0 .65rem}.foot-phone{font-size:1.25rem;font-weight:800;text-decoration:none}.site-foot h3{font-size:.9rem;letter-spacing:.08em;margin-bottom:.75rem}.site-foot p{line-height:1.7}.foot-legal{margin-top:1.6rem}.cyp-select-panel{max-width:520px}.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}.article-nav>div:last-child{text-align:right}.article-nav a{font-weight:800;text-decoration:none;color:var(--brand)}@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr!important}.final-cta__actions{flex-direction:column;align-items:stretch}.final-cta__actions .btn{width:100%}}@media(max-width:520px){.foot-grid{grid-template-columns:1fr!important}.article-nav{grid-template-columns:1fr}.article-nav>div:last-child{text-align:left}}


/* ============================================================
   v1.3.5 footer reference layout + card interaction polish
   ============================================================ */
.fsp-selectable-card{box-sizing:border-box!important}

.final-cta{
  padding:3.6rem 0 2.6rem!important;
  background:linear-gradient(135deg,#041c49 0%,#062b68 100%)!important;
}
.final-cta::after{
  width:360px;height:360px;right:-145px;top:-235px;
  border-color:rgba(255,255,255,.10);
}
.final-cta__inner{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(420px,.85fr)!important;
  gap:2.4rem!important;
  align-items:center!important;
}
.final-cta__copy .eyebrow{display:none}
.final-cta__copy h2{font-size:clamp(2rem,3.4vw,3.15rem);margin:0 0 .75rem;color:#fff}
.final-cta__copy .lede{max-width:760px;color:#d9e6fb;margin:0}
.final-cta__note{margin:1rem 0 0!important;color:#fff!important;font-size:1rem!important;font-weight:800!important}
.final-cta__actions{display:grid!important;grid-template-columns:1fr 1fr;gap:1rem!important;align-items:stretch!important}
.final-cta__actions .btn{min-height:74px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.02rem;font-weight:800;border-radius:12px;box-sizing:border-box}
.final-cta__actions .btn--call{background:#e00000;border-color:#e00000;color:#fff}
.final-cta__actions .btn--quote{background:transparent;border:2px solid #91b5e9;color:#fff}
.final-cta__actions .btn--quote:hover{background:rgba(255,255,255,.08)}

.site-foot{
  background:linear-gradient(135deg,#041c49 0%,#062b68 100%)!important;
  padding:0 0 2.2rem!important;
  color:#dbe7f8;
}
.site-foot>.wrap:first-child{border-top:1px solid rgba(255,255,255,.28);padding-top:3rem}
.foot-grid{grid-template-columns:1.05fr .92fr 1.18fr .85fr!important;gap:clamp(2rem,4vw,4.5rem)!important;align-items:start}
.foot-brand .foot-logo{display:block;width:auto;max-width:190px;max-height:66px;object-fit:contain;margin:0 0 1.05rem!important}
.foot-brand p{color:#dbe7f8!important;margin:.2rem 0 .7rem!important;line-height:1.7}
.foot-brand p strong{font-size:1.08rem;color:#fff}
.foot-phone{display:inline-block;color:#fff!important;font-size:1.35rem!important;font-weight:900!important;letter-spacing:.02em;margin-top:.15rem}
.site-foot h3{margin:0 0 1rem!important;color:#fff!important;font-size:1.05rem!important;letter-spacing:.04em!important}
.site-foot p{color:#dbe7f8!important;line-height:1.8!important;margin-top:0}
.site-foot a{color:#fff}
.foot-legal{margin-top:2.7rem!important;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.28)}
.foot-legal__row{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:2rem;align-items:start}
.foot-legal__copy{margin:0!important;color:#dbe7f8!important}
.cyp-select-panel{max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.cyp-select-panel>div{display:grid;grid-template-columns:auto 1px 1fr;gap:1.3rem;align-items:start}
.cyp-select-panel>div::before{content:"";grid-column:2;grid-row:1;display:block;width:1px;height:42px;background:rgba(255,255,255,.45)}
.cyp-select-panel__ttl{grid-column:1;grid-row:1;margin:0!important;white-space:nowrap;color:#fff!important;font-weight:800}
.cyp-select-panel__txt{grid-column:3;grid-row:1;margin:0!important;color:#dbe7f8!important;line-height:1.65!important}

@media(max-width:980px){
  .final-cta__inner{grid-template-columns:1fr!important}
  .final-cta__actions{max-width:650px}
  .foot-grid{grid-template-columns:1fr 1fr!important}
  .foot-legal__row{grid-template-columns:1fr}
}
@media(max-width:620px){
  .final-cta{padding-top:2.7rem!important}
  .final-cta__actions{grid-template-columns:1fr!important}
  .foot-grid{grid-template-columns:1fr!important}
  .site-foot>.wrap:first-child{padding-top:2.3rem}
  .cyp-select-panel>div{display:block}
  .cyp-select-panel>div::before{display:none}
  .cyp-select-panel__ttl{margin-bottom:.55rem!important}
}


/* v1.3.6 service-area heading + WeChat scan note + larger logos */
.area-heading-row{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.area-heading-row h2,.area-heading-row p{margin:0}
.area-heading-row p{color:var(--ink-2);font-size:.98rem}
.wechat__scan{margin:.65rem 0 .8rem;color:var(--ink-2);font-size:.9rem;line-height:1.6}
.brand__mark{height:56px;max-width:230px;object-fit:contain}
.foot-brand .foot-logo{max-width:250px!important;max-height:92px!important}
@media(max-width:760px){.brand__mark{height:48px;max-width:190px}.area-heading-row{display:block}.area-heading-row p{margin-top:.55rem}.foot-brand .foot-logo{max-width:220px!important;max-height:84px!important}}

/* v1.3.6 text-only blog cards */
.home-blog .blog-grid,.blog-list-grid{display:grid;gap:1rem}
.blog-card{box-sizing:border-box}
.blog-card>a{display:flex!important;flex-direction:column;height:100%}
.blog-card__body{padding:1.3rem 1.35rem!important;display:flex;flex-direction:column;min-height:220px}
.blog-card__body h2,.blog-card__body h3{margin:.45rem 0 .65rem}
.blog-card__body p:not(.blog-card__meta){flex:1}
.blog-card__meta{color:var(--ink-2)!important}
.blog-card__read{margin-top:.65rem;font-weight:800;color:var(--brand)}
.article-lang[hidden]{display:none!important}


/* ============================================================
   v1.3.7 WeChat guided card + optional article images
   ============================================================ */
.wechat-guide{padding:1.35rem;border:1px solid var(--line);border-radius:18px;background:#fff;box-sizing:border-box}
.wechat-guide .wechat__top{margin-bottom:1rem}
.wechat-guide__tabs{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:.8rem 0 .55rem}
.wechat-guide__tab{min-height:52px;padding:.75rem 1rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-weight:800;cursor:pointer;box-sizing:border-box}
.wechat-guide__tab.is-active{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.wechat-guide__hint{font-size:.82rem;color:var(--ink-2);margin:.3rem 0 1rem}
.wechat-guide__panel[hidden]{display:none!important}
.wechat-guide__steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.wechat-guide__steps>li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:.7rem;padding:1rem 0;border-top:1px solid #e7edf5}
.wechat-guide__steps>li:first-child{border-top:0}
.wechat-guide__num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e8f4ee;color:#087541;font-weight:900;line-height:1}
.wechat-guide__steps small{display:block;color:var(--ink-2);font-size:.78rem;margin-bottom:.15rem}
.wechat-guide__steps strong{display:block;color:var(--ink);font-size:1rem;line-height:1.5}
.wechat-guide__steps p{margin:.35rem 0 0;color:var(--ink-2);font-size:.88rem;line-height:1.65}
.wechat-guide__idrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:center;margin-top:.65rem}
.wechat-guide .wechat__id{margin:0;padding:.75rem .9rem;border-radius:9px;background:#f6f9fc;font-size:1.2rem;line-height:1.35;user-select:text;overflow-wrap:anywhere}
.wechat-guide .wechat__copy{width:auto;min-width:150px;margin:0;padding:.75rem 1rem;border-radius:9px;background:#087541;border:1px solid #087541;color:#fff;font-weight:800;min-height:48px}
.wechat-guide .wechat__copy:hover{background:#065f35;border-color:#065f35}
.wechat-guide__sample{margin:.75rem 0 .25rem;padding:.85rem 1rem;border-left:3px solid #087541;background:#f5f8f6;border-radius:0 8px 8px 0}
.wechat-guide__sample small{color:var(--ink-2)}
.wechat-guide__sample p{margin:.2rem 0 0;color:var(--ink)}
.wechat-guide__qrwrap{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);gap:1.25rem;align-items:center;padding:.85rem 0}
.wechat-guide .wechat__qr{display:grid;place-items:center;min-height:210px;border:1px dashed var(--line);border-radius:12px;background:#f8fbff;color:var(--ink-2);text-align:center;overflow:hidden}
.wechat-guide .wechat__qr img{display:block;width:100%;max-width:240px;aspect-ratio:1/1;object-fit:contain;background:#fff;padding:.5rem}
.wechat-guide__qrsteps{display:grid;gap:.8rem}
.wechat-guide__qrsteps>div{display:grid;grid-template-columns:36px 1fr;gap:.6rem;align-items:start}
.wechat-guide__qrsteps p{margin:.2rem 0;color:var(--ink);line-height:1.6}
.wechat-guide__trouble{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem;color:var(--ink-2)}
.wechat-guide__trouble summary{cursor:pointer;font-weight:800;color:var(--ink)}
.wechat-guide__trouble p{font-size:.85rem;line-height:1.65}

.blog-card__image{display:block!important;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--brand-wash)}
.blog-card__body{min-height:0!important}
.article-cover-wrap{margin:0 0 2rem}
.article-cover{display:block!important;width:100%;max-height:520px;object-fit:cover;border-radius:18px;margin:0}
@media(min-width:760px){.home-blog .blog-card__image{aspect-ratio:16/10}}
@media(max-width:620px){
  .wechat-guide{padding:1rem}
  .wechat-guide__tabs{grid-template-columns:1fr}
  .wechat-guide__idrow{grid-template-columns:1fr}
  .wechat-guide .wechat__copy{width:100%}
  .wechat-guide__qrwrap{grid-template-columns:1fr}
}

/* v1.3.8 supplied full wordmark logo */
.brand__mark{width:auto;height:64px;max-width:300px;object-fit:contain}
.foot-brand .foot-logo{width:auto;max-width:300px;max-height:92px;object-fit:contain}
@media(max-width:760px){.brand__mark{height:52px;max-width:245px}.foot-brand .foot-logo{max-width:255px!important;max-height:82px!important}}


/* v1.3.12 safe overlay — square WeChat QR */
.wechat-guide .wechat__qr{
  width:min(100%,260px)!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  min-height:0!important;
  padding:.65rem!important;
  box-sizing:border-box!important;
  justify-self:center!important;
}
.wechat-guide .wechat__qr img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  padding:0!important;
  background:#fff;
  box-sizing:border-box!important;
}
@media(max-width:520px){
  .wechat-guide .wechat__qr{width:min(100%,240px)!important;}
}

/* === v1.3.16 footer: based on client-provided footer reference === */
.fsp-footer{--fsp-navy:#0B1E4E;--fsp-line:rgba(255,255,255,.14);--fsp-label:rgba(255,255,255,.58);--fsp-body:rgba(255,255,255,.82);--fsp-meta:rgba(255,255,255,.60);--fsp-strip:rgba(255,255,255,.68);--fsp-legal:rgba(255,255,255,.55);--fsp-chip-bg:rgba(255,255,255,.07);--fsp-chip-br:rgba(255,255,255,.18);--fsp-ok:#8FE3C0;--fsp-ok-bg:rgba(122,224,180,.13);--fsp-ok-br:rgba(122,224,180,.38);--fsp-star:#E8B84B;background:var(--fsp-navy);font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;color:#fff}
.fsp-footer,.fsp-footer *{box-sizing:border-box}.fsp-footer a{color:inherit}.fsp-footer a:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:3px;border-radius:3px}
.fsp-footer a:hover {
    color: #ffffff;
}
.fsp-footer__inner{max-width:1200px;margin:0 auto;padding:8px 20px 26px}.fsp-footer__grid{display:grid;gap:26px;border-top:1px solid var(--fsp-line);padding-top:24px}.fsp-footer__grid>*{min-width:0}
.fsp-footer__lockup{display:flex;align-items:center;gap:12px;min-height:52px}.fsp-footer__logo{display:block;width:auto;height:60px;max-width:100%;object-fit:contain;object-position:left center}
.fsp-footer__label{color:var(--fsp-label);font-size:15px;font-weight:500;letter-spacing:.12em;line-height:1.4;margin:0 0 12px}.fsp-footer__val{color:var(--fsp-body);font-size:15px;line-height:1.75;margin:12px 0 0}.fsp-footer__note{color:var(--fsp-label);font-size:13px;line-height:1.75;margin:12px 0 0}
.fsp-footer__tel{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:8px;color:#fff;font-size:20px;font-weight:500;text-decoration:none;line-height:1}.fsp-footer__tel svg{flex:none;width:18px;height:18px;stroke:rgba(255,255,255,.7)}
.fsp-footer__pill{display:inline-block;margin-top:12px;padding:5px 11px;border-radius:20px;background:var(--fsp-ok-bg);border:1px solid var(--fsp-ok-br);color:var(--fsp-ok);font-size:13px;line-height:1.3}
.fsp-footer__chips{display:flex;flex-wrap:wrap;gap:8px}.fsp-footer__chip{display:inline-flex;align-items:center;padding:6px 11px;border-radius:4px;background:var(--fsp-chip-bg);border:1px solid var(--fsp-chip-br);color:rgba(255,255,255,.9);font-size:13px;line-height:1.3}
.fsp-footer-cyp{border-top:1px solid var(--fsp-line);background:rgba(255,255,255,.035)}.fsp-footer-cyp__in{max-width:1200px;margin:0 auto;padding:11px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-size:14px;line-height:1.75}.fsp-footer-cyp__id{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0;color:var(--fsp-strip)}.fsp-footer-cyp__id svg{flex:none;width:14px;height:14px;fill:var(--fsp-star)}.fsp-footer-cyp__name{color:#fff;font-weight:500}.fsp-footer-cyp__legal-row{max-width:1200px;margin:0 auto;padding:8px 20px 12px;border-top:1px solid rgba(255,255,255,.08);text-align:center}.fsp-footer-cyp__legal{color:var(--fsp-legal);font-size:14px;line-height:1.75;text-align:center}.fsp-footer-cyp__legal a{color:rgba(255,255,255,.72)}.fsp-footer-sep{color:rgba(255,255,255,.26)}
@media(min-width:560px){.fsp-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media(min-width:900px){.fsp-footer__inner{padding:8px 40px 30px}.fsp-footer__grid{grid-template-columns:236px minmax(0,1fr) minmax(0,1.25fr) minmax(0,.8fr);gap:32px;align-items:start}.fsp-footer__tel{font-weight: bold;margin-top:6px;display:inline-flex;min-height:0;padding:0;border:0;border-radius:0;gap:8px}.fsp-footer__chips--stack{flex-direction:column;align-items:flex-start}.fsp-footer-cyp__in{padding:11px 40px;flex-wrap:nowrap}.fsp-footer-cyp__legal-row{padding:8px 40px 12px}.fsp-footer-cyp__legal{text-align:center}}


/* v1.3.20 — restore the full pre-footer call-to-action shown in the approved reference. */
.fsp-footer-cta{
  background:#0B1E4E;
  color:#fff;
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.fsp-footer-cta,.fsp-footer-cta *{box-sizing:border-box}
.fsp-footer-cta__inner{
  max-width:1200px;
  margin:0 auto;
  padding:52px 20px 34px;
  display:grid;
  gap:26px;
  align-items:center;
}
.fsp-footer-cta__copy h2{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.02em;
}
.fsp-footer-cta__copy p{
  margin:0;
  max-width:730px;
  color:rgba(255,255,255,.68);
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.75;
}
.fsp-footer-cta__actions{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.fsp-footer-cta__btn{
  min-height:72px;
  padding:15px 24px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  font-size:17px;
  line-height:1.35;
  font-weight:800;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.fsp-footer-cta__btn:hover{transform:translateY(-1px)}
.fsp-footer-cta__btn--call{background:#e00000;border:2px solid #e00000;color:#fff}
.fsp-footer-cta__btn--call:hover{background:#c90000;border-color:#c90000}
.fsp-footer-cta__btn--quote{background:transparent;border:2px solid #87ace0;color:#fff}
.fsp-footer-cta__btn--quote:hover{background:rgba(255,255,255,.08);border-color:#a9c6ef}
.fsp-footer-cta__btn strong{font:inherit;color:inherit}
@media(min-width:900px){
  .fsp-footer-cta__inner{
    padding:68px 40px 44px;
    grid-template-columns:minmax(0,1.45fr) minmax(430px,.9fr);
    gap:46px;
  }
  .fsp-footer-cta__actions{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:560px){
  .fsp-footer-cta__inner{padding-top:42px}
  .fsp-footer-cta__actions{width:100%}
  .fsp-footer-cta__btn{width:100%;min-height:62px}
}

/* v1.3.23 — spread the CYP membership strip across the full content row on desktop. */
@media(min-width:900px){
  .fsp-footer-cyp__in{display:block;padding:11px 40px}
  .fsp-footer-cyp__id{width:100%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:14px}
  .fsp-footer-cyp__id > *{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:899px){
  .fsp-footer-cyp__id{justify-content:center;text-align:center}
}


/* v1.3.24 — blog list hero mirrors the homepage Blog intro; article detail cleanup. */
.blog-index-hero{padding-block:clamp(3.2rem,7vw,5.6rem)!important;background:var(--brand-wash)!important}
.blog-index-hero .wrap{max-width:1200px}
.blog-index-hero .eyebrow{margin-bottom:1.25rem}
.blog-index-hero h1{margin:0 0 1.15rem;font-size:clamp(2.5rem,5vw,4.8rem);line-height:1.06;letter-spacing:-.035em;color:var(--ink)}
.blog-index-hero .lede{max-width:1000px;margin:0;color:var(--ink-2);font-size:clamp(1.05rem,1.8vw,1.45rem);line-height:1.75}
@media(max-width:640px){.blog-index-hero{padding-block:2.7rem!important}.blog-index-hero h1{font-size:clamp(2.2rem,11vw,3.2rem)}}

/* v1.3.25 — homepage problem cards: image-only mode.
   Overlay/title/description markup is preserved in functions.php as commented code for future restoration. */
.problem-media-card--image-only img{
  transform:none !important;
  transition:none !important;
}
.problem-media-card--image-only:hover img,
.problem-media-card--image-only:focus-within img{
  transform:none !important;
}