/*
 * Ifatis — Design System & Shared Chrome
 * Loaded globally. Contains: design tokens, base typography, buttons,
 * header/nav, footer + lead form, floating contact button, loader.
 * Palette and font are unchanged from the original brand; the redesign
 * expresses itself through scale, rhythm, depth and motion.
 */

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
    /* Brand palette (unchanged) + derived tints/shades */
    --c-plum:        #61495f;   /* brand primary */
    --c-plum-deep:   #47344654; /* placeholder overwritten below */
    --c-plum-deep:   #46334a;   /* darker plum for gradients / hovers */
    --c-plum-soft:   #7d647b;   /* muted plum for secondary text on light */
    --c-rose:        #d3b9c6;   /* dusty pink */
    --c-blush:       #eecec3;   /* warm blush */
    --c-peach:       #f6e9e2;   /* derived pale peach — soft section wash */
    --c-cream:       #f4f1ee;   /* warm off-white page base */
    --c-cream-2:     #f2f2f2;   /* original light */
    --c-white:       #ffffff;
    --c-ink:         #322b31;   /* primary text (warm near-black) */
    --c-ink-soft:    #6a6169;   /* secondary text */
    --c-gold:        #f2b705;   /* stars / accents (AA on white) */
    --c-gold-soft:   #ffd985;   /* original star gold for large fills */

    /* Semantic */
    --bg-page:       var(--c-cream);
    --text-body:     var(--c-ink);
    --text-muted:    var(--c-ink-soft);
    --brand:         var(--c-plum);

    /* Gradients */
    --grad-plum: linear-gradient(135deg, #6d5169 0%, #4d3850 100%);
    --grad-rose: linear-gradient(135deg, #e7cdd7 0%, #d3b9c6 55%, #c9a7ba 100%);
    --grad-blush: linear-gradient(160deg, #f6e9e2 0%, #eecec3 100%);

    /* Fluid type scale (Assistant). 1.25 ratio, clamped for mobile→desktop */
    --fs-100: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
    --fs-200: clamp(0.9rem,  0.86rem + 0.25vw, 1rem);
    --fs-300: clamp(1rem,    0.94rem + 0.4vw,  1.15rem);   /* body */
    --fs-400: clamp(1.2rem,  1.05rem + 0.7vw,  1.45rem);
    --fs-500: clamp(1.45rem, 1.2rem + 1.2vw,   1.95rem);
    --fs-600: clamp(1.8rem,  1.4rem + 2vw,     2.6rem);
    --fs-700: clamp(2.2rem,  1.6rem + 3vw,     3.4rem);
    --fs-800: clamp(2.7rem,  1.8rem + 4.5vw,   4.6rem);    /* hero */

    /* Spacing scale */
    --sp-1: 0.375rem;
    --sp-2: 0.75rem;
    --sp-3: 1.15rem;
    --sp-4: 1.75rem;
    --sp-5: 2.5rem;
    --sp-6: 3.5rem;
    --sp-7: 5rem;
    --sp-8: 7rem;
    --section-y: clamp(3rem, 6vw, 6.5rem);

    /* Radii — small, clean, gentle */
    --r-sm: 5px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;
    --r-organic: 42% 58% 62% 38% / 45% 40% 60% 55%;

    /* Shadows — small, clean, gentle (plum-tinted) */
    --sh-sm: 0 1px 3px rgba(70, 51, 74, 0.07);
    --sh-md: 0 3px 10px -4px rgba(70, 51, 74, 0.15);
    --sh-lg: 0 6px 18px -8px rgba(70, 51, 74, 0.18);
    --sh-glow: 0 4px 14px -6px rgba(97, 73, 95, 0.22);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.5s;

    /* Layout */
    --container-max: 1240px;
    --focus-ring: 0 0 0 3px rgba(97, 73, 95, 0.25), 0 0 0 1px var(--c-plum);

    /* Fixed-header height. Refined at runtime by App.setupCssVars(); this
       static default keeps var()-dependent rules (body offset, mobile drawer
       max-height) valid before JS runs and if JS is unavailable. */
    --menu-h: 90px;
    --f-b-h: 64px;   /* floating contact bar height (also set at runtime) */
}

/* ============================================================
   2. Base / reset layer
   ============================================================ */
* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* smooth-scroll handled in JS (App.smoothScrollTo) for snappy, controlled timing */
    scroll-behavior: auto;
}

body,
html {
    margin: 0;
    min-height: 100%;
    font-family: 'Assistant', sans-serif;
    /* fluid base type replaces the fixed 22px */
    font-size: clamp(17px, 15px + 0.5vw, 20px);
    line-height: 1.65;
    direction: ltr;
}

body {
    direction: rtl;
    text-align: right;
    padding-top: var(--menu-h, 90px);
    color: var(--text-body);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.rtl {
    direction: rtl;
    font-family: 'Assistant', sans-serif;
}

img { max-width: 100%; }

a {
    text-decoration: none !important;
    color: var(--c-plum);
    transition: color 0.25s var(--ease);
}

button { cursor: pointer; font-family: inherit; }

h1, h2, h3, h4, h5 {
    font-family: 'Assistant', sans-serif;
    line-height: 1.15;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}

p { margin-top: 0; }

::selection { background: var(--c-rose); color: var(--c-plum-deep); }

/* Accessible, visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
.hamburger:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-sm);
}

/* Skip link for keyboard / screen-reader users */
.skip-link {
    position: fixed;
    top: -100px;
    right: 1rem;
    z-index: 100000;
    background: var(--c-plum);
    color: #fff !important;
    padding: 0.7rem 1.2rem;
    border-radius: 0 0 var(--r-md) var(--r-md);
    font-weight: 700;
    transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 0; }

/* Utilities carried over from the original theme */
ul.non-list { list-style: none; padding: 0; margin: 0; }
.bold  { font-weight: 700; }
.light { font-weight: 300; }
.link  { cursor: pointer; }
.h-100 { height: 100%; }

/* text available to screen readers / crawlers but not painted on screen */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   3. Section titles (with the brand underline accent "udl")
   ============================================================ */
.section-title {
    font-size: var(--fs-600);
    font-weight: 800;
    color: var(--c-plum);
    margin: 0 0 var(--sp-3);
}

h1.udl:after, h2.udl:after, h3.udl:after, h4.udl:after {
    content: '';
    width: 68px;
    height: 6px;
    display: block;
    margin: 0.75rem auto 0;
    border-radius: var(--r-pill);
    background: var(--grad-rose);
}
h1.udl.text-right:after, h2.udl.text-right:after, h3.udl.text-right:after, h4.udl.text-right:after,
h1.udl.text-left:after,  h2.udl.text-left:after,  h3.udl.text-left:after,  h4.udl.text-left:after { margin-inline: 0; }

/* ============================================================
   4. Buttons
   ============================================================ */
.btn-ifatis,
a.btn-ifatis {
    --btn-bg: var(--c-plum);
    --btn-fg: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    width: auto;
    min-width: 190px;
    max-width: 100%;
    padding: 0.72em 1.6em;
    font-size: var(--fs-200);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
    color: var(--btn-fg) !important;
    background: var(--btn-bg);
    border: 1.5px solid var(--c-plum);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease);
}
/* sliding sheen fill on hover */
.btn-ifatis::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grad-plum);
    transform: translateX(-101%);
    transition: transform 0.5s var(--ease);
}
body.rtl .btn-ifatis::before { transform: translateX(101%); }
.btn-ifatis:hover,
.btn-ifatis:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sh-glow);
    color: #fff !important;
}
.btn-ifatis:hover::before,
.btn-ifatis:focus-visible::before { transform: translateX(0); }
.btn-ifatis:active { transform: translateY(0); }

/* Inverted (light on dark) */
.btn-ifatis.inverted {
    --btn-bg: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.85);
}
.btn-ifatis.inverted::before { background: #fff; }
.btn-ifatis.inverted:hover,
.btn-ifatis.inverted:focus-visible { color: var(--c-plum) !important; }

/* Ghost / outline on light */
.btn-ifatis.ghost {
    --btn-bg: transparent;
    color: var(--c-plum) !important;
}
.btn-ifatis.ghost::before { background: var(--c-plum); }
.btn-ifatis.ghost:hover,
.btn-ifatis.ghost:focus-visible { color: #fff !important; }

/* very narrow screens: relax the pill so long Hebrew labels can wrap cleanly */
@media (max-width: 400px) {
    .btn-ifatis, a.btn-ifatis { border-radius: var(--r-lg); min-width: 0; }
}

/* ============================================================
   5. Loader
   ============================================================ */
#loader {
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-cream);
    transition: opacity 0.5s var(--ease), visibility 0.5s;
}
/* brand-plum heart on the light canvas (was an invisible near-white gif) */
#loader .loader-heart { width: 76px; height: auto; display: block; color: var(--c-plum-soft); animation: heartBeat 1.3s var(--ease) infinite; }
#loader .loader-heart path { stroke: currentColor; }
body.loaded #loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { #loader .loader-heart { animation: none; } }

/* ============================================================
   6. Header / top menu
   ============================================================ */
.admin-bar header#menu { top: 32px; }

header#menu {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    inset-inline: 0;
    padding: 0.5rem clamp(1rem, 3vw, 2.25rem);
    z-index: 999;
    background: rgba(97, 73, 95, 0.92);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    box-shadow: 0 6px 24px -12px rgba(70, 51, 74, 0.5);
    transition: padding 0.35s var(--ease), background 0.35s var(--ease);
}
/* subtle shrink once the page scrolls (class toggled in App.js) */
body.is-scrolled header#menu { padding-top: 0.15rem; padding-bottom: 0.15rem; background: rgba(70, 51, 74, 0.96); }

header#menu .header-logo {
    max-width: 100%;
    width: auto;
    max-height: 64px;
    display: block;
    transition: max-height 0.35s var(--ease);
}
body.is-scrolled header#menu .header-logo { max-height: 52px; }

.menu-wrapper .menu-items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 0.15rem clamp(0.35rem, 0.9vw, 0.85rem);
}
.menu-wrapper .menu-items .menu-item { margin-left: 0; }

.menu-wrapper .menu-items .menu-item a {
    color: #f4eef2;
    font-weight: 400;
    font-size: clamp(0.82rem, 0.7rem + 0.5vw, 0.98rem);
    position: relative;
    padding: 0.35rem 0.15rem;
    display: inline-block;
}
/* animated underline instead of text-decoration */
.menu-wrapper .menu-items .menu-item a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--c-rose);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s var(--ease);
    border-radius: var(--r-pill);
}
.menu-wrapper .menu-items .menu-item a:hover::after,
.menu-wrapper .menu-items .menu-item a:focus-visible::after,
.menu-wrapper .menu-items .menu-item.is-current a::after { transform: scaleX(1); }

@media (min-width: 1200px) {
    /* single row, dividers as borders (pseudo-element separators could wrap) */
    .menu-wrapper .menu-items { flex-wrap: nowrap; gap: 0; }
    .menu-wrapper .menu-items .menu-item { display: inline-flex; align-items: center; margin: 0; }
    .menu-wrapper .menu-items .menu-item a { white-space: nowrap; padding-inline: clamp(0.5rem, 1vw, 1.05rem); }
    .menu-wrapper .menu-items .menu-item + .menu-item { border-inline-start: 1px solid rgba(244, 238, 242, 0.28); }
}

#menu .social-icons-col .social-icons { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
#menu .social-icons-col .social-icons .social-link {
    width: 38px;
    display: block;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
#menu .social-icons-col .social-icons .social-link:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
#menu .menu-wrapper .social-icons-col .social-icons { justify-content: flex-start; padding: 1rem 0 1.25rem; }

/* Hamburger */
.hamburger {
    padding: 10px;
    display: none;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    font: inherit;
    color: inherit;
    background-color: transparent;
    border: 0;
    overflow: visible;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after { background-color: #fff; }
.hamburger-box { width: 34px; height: 22px; display: inline-block; position: relative; }
.hamburger-inner { display: block; top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 34px; height: 3px; background-color: #fff; border-radius: 4px; position: absolute;
    transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -9px; }
.hamburger-inner::after  { bottom: -9px; }
.hamburger--elastic .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55); }
.hamburger--elastic .hamburger-inner::before { top: 9px; transition: opacity 0.125s 0.275s ease; }
.hamburger--elastic .hamburger-inner::after  { top: 18px; transition: transform 0.275s cubic-bezier(0.68,-0.55,0.265,1.55); }
.hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0,9px,0) rotate(135deg); transition-delay: 0.075s; }
.hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; }
.hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0,-18px,0) rotate(-270deg); transition-delay: 0.075s; }

@media (max-width: 1200px) {
    .hamburger { display: block; }
    header#menu .mobile-toggle .menu-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
    /* open drawer fills the screen below the bar, with inner scroll only if needed */
    header#menu .mobile-toggle .menu-wrapper.active {
        max-height: calc(100svh - var(--menu-h, 90px));
        height: calc(100svh - var(--menu-h, 90px));
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    /* solid bar when the menu is open so the drawer isn't a separate opaque block */
    header#menu:has(.menu-wrapper.active) {
        background: var(--c-plum-deep);
        box-shadow: none;
    }
    .menu-wrapper .menu-items { display: block; padding-bottom: 1.25rem; }
    .menu-wrapper .menu-items .menu-item {
        border-bottom: 1px solid rgba(244, 238, 242, 0.2);
        padding: 0.9rem 0;
        line-height: 1;
        margin-left: 0;
    }
    .menu-wrapper .menu-items .menu-item:last-child { border-color: transparent; }
    .menu-wrapper .menu-items .menu-item a { font-size: 1.35rem; }
    .menu-wrapper .menu-items .menu-item a::after { display: none; }
    /* underline is hidden in the drawer — mark the current item with colour + weight */
    .menu-wrapper .menu-items .menu-item.is-current a { color: var(--c-blush); font-weight: 700; }
}

/* ============================================================
   7. Floating contact button
   ============================================================ */
.floating-contact-btn {
    position: fixed;
    bottom: 18px;
    left: 0;
    z-index: 998;
    width: auto;
    max-width: 100%;
    background: var(--grad-plum);
    padding: 8px 10px;
    box-shadow: 0 12px 30px -8px rgba(43, 34, 48, 0.6);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    transform: translateX(-110%);
    opacity: 0;
    animation: slideRight 0.8s 0.9s forwards var(--ease);
}
body.scrolled-to-footer .floating-contact-btn { opacity: 0; transform: translateX(-110%); transition: opacity 0.5s, transform 0.5s; z-index: -1; }
.floating-contact-btn .icons-wrap { display: flex; align-items: center; gap: 8px; }
.floating-contact-btn .icons-wrap .icon-link {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.floating-contact-btn .icons-wrap .icon-link:hover,
.floating-contact-btn .icons-wrap .icon-link:focus-visible { transform: translateY(-3px); background: rgba(255,255,255,0.22); }
.floating-contact-btn .icons-wrap .icon-link .icon { width: 22px; height: 22px; display: block; color: #fff; }
/* hover tooltip (desktop) */
.floating-contact-btn .icons-wrap .icon-link::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--c-plum-deep);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--sh-md);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.floating-contact-btn .icons-wrap .icon-link:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 991px) {
    .floating-contact-btn {
        bottom: 0; width: 100%; left: 0; border-radius: 0;
        border-inline: none; border-bottom: none;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .floating-contact-btn .icons-wrap { justify-content: center; flex-wrap: nowrap; gap: clamp(10px, 5vw, 26px); max-width: 480px; margin-inline: auto; }
    .floating-contact-btn .icons-wrap .icon-link { width: 44px; height: 44px; }
    .floating-contact-btn .icons-wrap .icon-link::after { display: none; }
}

/* Accessibility helper for screen readers */
nagishli#NagishLiTag > #NagishLiBar { margin-bottom: 60px; }

/* ============================================================
   8. Footer
   ============================================================ */
#footer {
    padding-top: clamp(3rem, 7vw, 7rem);
    padding-bottom: 0;
    background: var(--grad-plum);
    position: relative;
    overflow: hidden;
}
#footer::before {
    content: '';
    position: absolute;
    top: -140px; left: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(211,185,198,0.4) 0%, transparent 70%);
    pointer-events: none;
}

#footer .details-col .footer-details { list-style: none; padding: 0; margin: 0; }
#footer .details-col .footer-details .item a {
    display: flex; align-items: flex-start; color: #fff; justify-content: flex-start;
    margin-bottom: 0.9rem; font-size: 1rem;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
#footer .details-col .footer-details .item a:hover { transform: translateX(-4px); opacity: 0.85; }
#footer .details-col .footer-details .item .icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: 14px; flex: 0 0 40px;
    background: rgba(255,255,255,0.12); border-radius: 50%;
}
#footer .details-col .footer-details .item .icon img { display: block; width: 19px; height: 19px; filter: brightness(0) invert(1); }
#footer .details-col .footer-details .item .txt { flex: 1 1 auto; min-width: 0; align-self: center; overflow-wrap: anywhere; }

#footer .form-title { font-size: var(--fs-500); margin-bottom: 1.5rem; color: #fff; line-height: 1.25; font-weight: 700; }
#footer .form-title a { white-space: nowrap; color: var(--c-blush); text-decoration: underline !important; }

#footer #lead_form { position: relative; }
#footer #lead_form .field-wrapper { position: relative; padding-bottom: 0; margin-bottom: 10px; }
#footer #lead_form .field-wrapper .form-field {
    background: rgba(255,255,255,0.96);
    border: 1.5px solid transparent;
    color: var(--c-ink);
    display: block; width: 100%;
    font-size: 1.05rem; padding: 0.75rem 1.1rem;
    border-radius: var(--r-md);
    text-align: right; direction: rtl;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
#footer #lead_form .field-wrapper .form-field::placeholder { color: var(--c-ink-soft); }
#footer #lead_form .field-wrapper .form-field:focus { outline: none; border-color: var(--c-rose); box-shadow: 0 0 0 4px rgba(211,185,198,0.35); }
#footer #lead_form .field-wrapper .form-field.has-error { border-color: #ff6b6b; }
#footer #lead_form .field-wrapper .error-wrapper { position: static; margin-top: 4px; text-align: right; font-size: 0.82rem; line-height: 1.3; white-space: normal; color: #ffd2d2; }
#footer #lead_form .field-wrapper .error-wrapper:empty { margin-top: 0; }

#footer #lead_form .from-submit {
    background: #fff; color: var(--c-plum);
    width: auto; min-width: 170px; border: none;
    padding: 0.7rem 1.8rem; font-size: 1.15rem; font-weight: 800;
    border-radius: var(--r-pill); box-shadow: var(--sh-md);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
#footer #lead_form .from-submit:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
#footer #lead_form #thankyou { display: none; position: absolute; inset: 0; z-index: 10; background: var(--c-plum-deep); color: #fff; border-radius: var(--r-lg); }
#footer #lead_form.sent #thankyou { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
#footer #lead_form.sent .fields { opacity: 0; position: relative; z-index: -10; visibility: hidden; }
#footer #lead_form.loading .from-submit { cursor: wait; opacity: 0.7; }

#footer .under-footer {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    margin-inline: 0;
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 6rem);
    background: rgba(0, 0, 0, 0.16);
}
#footer .under-footer ul { list-style: none; padding: 0; margin: 0; }
#footer .under-footer a { color: rgba(255,255,255,0.82); transition: color 0.2s var(--ease); }
#footer .under-footer a:hover { color: #fff; }
#footer .under-footer .footer-nav h3 { color: #fff; font-weight: 800; margin-bottom: 0.9rem; font-size: 1.2rem; }
#footer .under-footer .footer-nav .menu-item { margin-bottom: 0.6rem; }

@media (max-width: 991px) {
    #footer { padding-top: 2.5rem; }
    #footer .details-col { order: 1; margin-top: 2.5rem; }
    #footer #lead_form .field-wrapper { margin-bottom: 8px; padding-bottom: 0; }
    /* reserve space for the fixed full-width contact bar so it never covers the
       submit / footer links; --f-b-h is refined at runtime, 64px static fallback */
    #footer .under-footer { padding-bottom: calc(clamp(3rem, 6vw, 6rem) + var(--f-b-h, 64px)); }
    body.scrolled-to-footer #footer .under-footer { padding-bottom: clamp(3rem, 6vw, 6rem); }
}

/* ============================================================
   8b. Site credit strip (very end of the document)
   ============================================================ */
.site-credit {
    padding: 15px 1rem;
    text-align: center;
    background: #F2DBD1;
}
.site-credit a {
    color: #61495f;
    font-size: 0.95rem;
    font-weight: 500;
}
.site-credit a:hover { text-decoration: underline !important; }

/* ============================================================
   9. Breadcrumbs (shared)
   ============================================================ */
#breadcrumbs { margin-bottom: 0; }
#breadcrumbs * { color: var(--c-ink); }
#breadcrumbs a { font-weight: 700; text-decoration: underline !important; }

/* ============================================================
   10. Keyframes
   ============================================================ */
@keyframes slideRight { to { transform: translateX(0); opacity: 1; } }
@keyframes blink { 50% { transform: translateY(-2px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0,40px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.fadeInUp { animation: fadeInUp 0.6s both var(--ease); }

/* ============================================================
   11. Reduced motion — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .floating-contact-btn { opacity: 1; transform: none; }
}