/* ===== KBC FX layer =====
   1) Colour scheme: dark header + hero, one light body, dark footer, soft gradient blends between.
   2) Interaction styles for fx.js (cursor, progress, hairlines).
   Hero = first child of <main> on every template. Everything after it is the light body. */

body.kbc-fx{--fx-ink:#0c0c0c;--fx-cream:#f7f2ed;--fx-terra:#c9876a;--fx-terra-dark:#9c5a3d;--fx-text:#3a3a3a;--fx-muted:#6a6a6a;--fx-line:rgba(12,12,12,.12);--fx-blend:clamp(5rem,4rem + 6vw,10rem);--fx-ease:cubic-bezier(.2,.7,.2,1);
 --b-cream:var(--fx-cream);background:var(--fx-cream)!important;overflow-x:clip}

/* ---------- 1. Dark hero ---------- */
body.kbc-fx.kbc-look-bespoke main>:first-child{background-color:var(--fx-ink)!important;color:#f2efec}
body.kbc-fx.kbc-look-bespoke main>:first-child :is(h1,h2,h3){color:#f2efec}
body.kbc-fx.kbc-look-bespoke main>:first-child em{color:#a8a29d}
body.kbc-fx.kbc-look-bespoke main>:first-child p:not(.kbc-label){color:#d6d1cc}
body.kbc-fx.kbc-look-bespoke main>:first-child .kbc-label{color:var(--fx-terra)}
body.kbc-fx.kbc-look-bespoke main>:first-child .kbc-text-link{color:#f2efec}
/* Hero sections constrained by .kbc-wrap still get a full-bleed dark backdrop */
body.kbc-fx.kbc-look-bespoke main>:first-child.kbc-wrap{position:relative;isolation:isolate;background:none!important}
body.kbc-fx.kbc-look-bespoke main>:first-child.kbc-wrap::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--fx-ink)}

/* Blend: hero → light body. Lives above the second section, full-bleed, never overlaps content. */
body.kbc-fx main>:first-child+*{position:relative;margin-top:var(--fx-blend)!important}
body.kbc-fx main>:first-child+*::after{content:"";position:absolute;left:50%;bottom:100%;width:100vw;height:var(--fx-blend);transform:translateX(-50%);pointer-events:none;
 background:linear-gradient(180deg,var(--fx-ink) 0%,#1b1917 18%,#4a4440 42%,#a39b94 70%,#e6dfd8 88%,var(--fx-cream) 100%)}

/* ---------- 2. Light body ---------- */
body.kbc-fx.kbc-look-bespoke main>:not(:first-child){background-color:transparent!important;color:var(--fx-text)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(h1,h2,h3,h4,blockquote){color:var(--fx-ink)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(p,li,dd,td,figcaption,small){color:var(--fx-text)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) em{color:var(--fx-muted)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-label,
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(.kbc-steps span,.kbc-service-number,.kbc-hover-num,.kbc-drop-num){color:var(--fx-terra-dark)!important}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(.kbc-text-link,.kbc-adv-card-more,.kbc-hover-link){color:var(--fx-ink)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(a:not(.kbc-button):not(.kbc-hover-card)){color:var(--fx-ink)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-button{color:var(--fx-ink)}
/* Hairlines and dividers switch to dark-on-light */
body.kbc-fx.kbc-look-bespoke main>:not(:first-child),
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(div,article,section,ul,ol,li,a,button,details,summary,hr,aside,nav,header,footer,figure,span){border-color:var(--fx-line)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(.kbc-rule,hr){background-color:var(--fx-line)}
/* Dark sub-surfaces inside the body become light cards */
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(.kbc-service-panels,.kbc-service-panel,.kbc-adv-related,.kbc-adv-faq,.kbc-about-pin,.kbc-about-scrub,.kbc-about-statement,.kbc-home-journal,.kbc-cta,.kbc-journal-notice){background-color:transparent!important}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-panel-symbol{color:rgba(12,12,12,.08)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-service-tabs button{color:var(--fx-muted)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-service-tabs button:is(.is-active,:hover,:focus-visible){color:var(--fx-ink)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-faq-icon{background:transparent}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-faq-icon::before,
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-faq-icon::after{background:var(--fx-ink)}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-about-pin-progress{background:var(--fx-line)}
/* dist/styles.css sets this colour as a layered !important; important rules in the first-declared layer win */
@layer theme{body.kbc-fx main>:not(:first-child) a.kbc-cta-phone{color:#0c0c0c!important}}
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) .kbc-about-pin-num{color:var(--fx-terra-dark)}
/* Hover cards keep their ink fill on hover */
body.kbc-fx.kbc-look-bespoke main .kbc-hover-card:is(:hover,:focus-visible) :is(h3,p,span,.kbc-hover-link){color:#f2efec!important}
body.kbc-fx.kbc-look-bespoke main .kbc-hover-card:is(:hover,:focus-visible) .kbc-hover-num{color:var(--fx-terra)!important}
/* Journal covers are artwork, keep their own colours */
body.kbc-fx.kbc-look-bespoke main .kbc-cover :is(span,p,h2,h3){color:inherit}
/* Form fields readable on light */
body.kbc-fx.kbc-look-bespoke main>:not(:first-child) :is(input,textarea,select){background:#fff;color:var(--fx-ink);border-color:rgba(12,12,12,.2)}

/* ---------- 3. Footer: blend light → dark ---------- */
body.kbc-fx .kbc-footer{position:relative;margin-top:var(--fx-blend);background:var(--fx-ink)!important}
body.kbc-fx .kbc-footer::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--fx-blend);pointer-events:none;
 background:linear-gradient(180deg,var(--fx-cream) 0%,#e6dfd8 12%,#a39b94 30%,#4a4440 58%,#1b1917 82%,var(--fx-ink) 100%)}

/* Header stays dark everywhere (it floats over the light body once scrolled) */
body.kbc-fx.kbc-look-bespoke .kbc-header.is-scrolled{background:rgba(12,12,12,.9)}

/* Page-transition curtain: same ink as hero/header so it reads as one continuous surface */
.kbc-fx-curtain{background:var(--fx-ink,#0c0c0c)}

/* ---------- Interaction styles ---------- */
.kbc-fx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100001;background:var(--fx-terra);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

.kbc-fx-cursor,.kbc-fx-cursor-dot{position:fixed;top:0;left:0;z-index:100002;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.kbc-fx-cursor{width:2.6rem;height:2.6rem;margin:-1.3rem 0 0 -1.3rem;border:1px solid var(--fx-terra);display:grid;place-items:center;transition:opacity .3s,width .45s var(--fx-ease),height .45s var(--fx-ease),margin .45s var(--fx-ease),background-color .35s}
.kbc-fx-cursor-dot{width:.35rem;height:.35rem;margin:-.175rem 0 0 -.175rem;background:var(--fx-terra)}
.kbc-fx-cursor-label{font:500 .58rem/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--fx-ease)}
html.kbc-fx-cursor-on .kbc-fx-cursor,html.kbc-fx-cursor-on .kbc-fx-cursor-dot{opacity:1}
html.kbc-fx-cursor-hover .kbc-fx-cursor{width:4rem;height:4rem;margin:-2rem 0 0 -2rem;background:rgba(201,135,106,.14)}
html.kbc-fx-cursor-view .kbc-fx-cursor{width:5.5rem;height:5.5rem;margin:-2.75rem 0 0 -2.75rem;background:var(--fx-terra-dark);border-color:var(--fx-terra-dark)}
html.kbc-fx-cursor-view .kbc-fx-cursor-label{opacity:1;transform:scale(1)}
html.kbc-fx-cursor-view .kbc-fx-cursor-dot,html.kbc-fx-cursor-text .kbc-fx-cursor,html.kbc-fx-cursor-text .kbc-fx-cursor-dot{opacity:0}
html.kbc-fx-cursor-down .kbc-fx-cursor{scale:.85}
html.kbc-fx-cursor-on,html.kbc-fx-cursor-on :is(a,button,[role=tab],summary){cursor:none}
html.kbc-fx-cursor-on :is(input,textarea,select,[contenteditable],iframe){cursor:auto}

.kbc-button svg,.kbc-text-link svg{transition:transform .5s var(--fx-ease)}
.kbc-button:hover svg,.kbc-text-link:hover svg{transform:translateX(.3em)}
body.kbc-fx .kbc-desktop-nav>ul>li>a{background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/0 1px;transition:background-size .5s var(--fx-ease)}
body.kbc-fx .kbc-desktop-nav>ul>li>a:is(:hover,:focus-visible){background-position:0 100%;background-size:100% 1px}

body.kbc-fx .kbc-about-photo{overflow:hidden}
body.kbc-fx .kbc-about-photo img{transition:scale 1.2s var(--fx-ease)}
body.kbc-fx .kbc-about-photo:hover img{scale:1.03}
body.kbc-fx .kbc-steps article{position:relative}
/* Full-screen photo heroes (home + about): exactly one viewport tall; grows only if its text needs more room */
body.kbc-fx.kbc-look-bespoke :is(.kbc-hero,.kbc-about-hero){min-height:100vh!important;min-height:100svh!important;height:auto!important;max-height:none!important}
body.kbc-fx.kbc-look-bespoke :is(.kbc-hero-art,.kbc-about-hero-art){top:0!important;bottom:0!important;height:auto!important}
body.kbc-fx.kbc-look-bespoke :is(.kbc-hero-art,.kbc-about-hero-art) img{width:100%;height:100%!important;object-fit:cover}
.kbc-fx-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--fx-terra);transform:scaleX(0);transform-origin:0 50%}

/* ---------- Mobile stability ---------- */
@media (max-width:800px){
 body.kbc-fx{--fx-blend:clamp(3.5rem,14vw,5.5rem)}
 /* Use the small-viewport unit so the hero doesn't jump when the mobile URL bar shows/hides */
 /* Calm motion on phones: reveals fade in place only — no sliding, blurring, clipping or parallax drift.
    !important beats GSAP's inline transforms/filters while leaving its opacity fades intact. */
 body.kbc-fx :is([data-reveal],[data-anim],.kbc-hero-enter,.kbc-hero-foot,.kbc-hero-art,.kbc-hero-art img,.kbc-hero-copy,.kbc-about-hero-art img,.kbc-line,[data-anim] .kbc-line>*,.kbc-steps article){transform:none!important;translate:none!important;scale:none!important;rotate:none!important;filter:none!important}
 body.kbc-fx :is([data-anim="reveal-img"],[data-anim="scene"]){clip-path:none!important}
 body.kbc-fx .kbc-hero-copy{opacity:1!important}
 body.kbc-fx [data-anim="scrub"] *{opacity:1!important}
}
@media (prefers-reduced-motion:reduce){.kbc-fx-progress,.kbc-fx-cursor,.kbc-fx-cursor-dot{display:none}}