@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


:root {
    --main-color: #776468;
    --secondary-color: #c7b47f;
    /* neutrals */
    --color-white: #fff;
    --color-black: #000;
    --color-muted: #62565a;
    --color-background: #faf8f5;
    --border-color: #e2dce0;
    --border-color-mid: #cfc5cb;
    --border-color-strong: #62565a;
    --border-color-accent: #2e2629;
    --surface-subtle: #f1eef4;
    --on-main-color: var(--color-white);
    --on-secondary-color: #2e2629;

    --selection-background: var(--main-color);
    --selection-color: var(--color-white);

    --body-font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    --body-mono-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --body-font-size: 17px;
    --body-color: #2e2629;
    --body-line-height: 1.7;
    --body-background: var(--color-background);
    --container-background : transparent;
    --container: 1240px;
    --content-spacing: clamp(40px, 5vw, 75px);
    --mobile-paddings: 5vw;
    --paragraph-spacing: 16px;
    --pill-radius: 0;      

    --header-top-bottom-spacing: 19px;
    --top-bar-height: 88px;
    /* Overridden for body.admin-bar below — WP's bar is 32px, but 46px under
       783px, and it stops being fixed under 601px (it scrolls away, so 0). */
    --admin-bar-height: 0px;

    --menu-link-font-size: 15px;
    --menu-link-color: var(--body-color);
    --menu-link-hover-color: var(--main-color);   /* was #966F4E — 4.49:1 on white, just under AA */
    --menu-link-active-color: var(--main-color);
    /* These three were consumed by #menu a but never declared, so each
       declaration was invalid and fell back to the property's initial value.
       Declared at exactly those initial values — no visual change. */
    --menu-link-background-color: transparent;
    --menu-link-hover-background-color: transparent;
    --menu-link-border-radius: 0;
    /* Casing is split in two: top-level items are uppercase, submenu items are
       not. One token could not express that — the rule for top-level links
       hardcoded `uppercase` and silently beat the token on specificity. */
    --menu-link-text-transform: none;
    --menu-top-link-text-transform: none;
    --menu-link-padding-top-bottom: 6px;
    --menu-link-padding-left-right: 0px;
    --menu-submenu-background: var(--color-background);
    --menu-submenu-color: var(--body-color);
    --menu-desktop-spacing: 34px;
    /* Where the mega-menu opens, measured from the top of #top-header > .container
       (its positioned ancestor). Flush with the bottom edge of the header. */
    --menu-submenu-offset: var(--top-bar-height);
    --header-z-index: 950;
    /* #site-menu and the sub-menus are children of #top-header, so they sit
       inside its stacking context. This only orders them against each other —
       it does not need to clear --header-z-index. */
    --menu-z-index: 100;

    /* Optional menu override hooks. These are deliberately NOT declared here:
       each is read with an inline fallback at its single use site, so the
       default lives with the rule it styles and setting one here (or in a child
       theme) overrides it. Listed so the set is discoverable — grep the name to
       find the rule.

         --menu-font-family .............. var(--body-font-family)
         --menu-link-font-weight ......... 500
         --menu-shadow ................... 0 8px 24px rgba(0,0,0,.10)
         --menu-submenu-padding .......... 8px 0
         --menu-submenu-border-color ..... var(--border-color)
         --menu-submenu-border-radius .... 12px
         --menu-submenu-font-size ........ var(--menu-link-font-size)
         --menu-submenu-link-padding ..... 9px 20px
         --menu-submenu-hover-color ...... var(--menu-link-hover-color)
         --menu-submenu-hover-background . rgba(0,0,0,.04)
         --menu-mobile-width ............. 380px
         --menu-mobile-background ........ var(--body-background)
         --menu-mobile-link-color ........ var(--body-color)
         --menu-mobile-link-font-size .... 18px

       Anything consumed WITHOUT a fallback must be declared in this block —
       an undeclared var() makes the whole declaration invalid, which falls back
       to the inherited or initial value rather than to nothing. */

    --hamburger-color: var(--body-color);
    --hamburger-size: 44px;
    --hamburger-bar-width: 26px;
    --hamburger-bar-height: 2px;
    --hamburger-bar-gap: 8px;


    --link-color: var(--main-color);
    --link-hover-color: #5b4b50;
    /* headings */
    --headings-weight: 400;
    --heading-spacing: 16px;
    /* These three were consumed by the shared h1–h6 rule but never declared.
       Set to the values that were already resolving by inheritance, so making
       them real changes nothing on screen — tune them here from now on. */
    --headings-font: 'Ubuntu Condensed', 'Arial Narrow', sans-serif;
    --headings-line-height: 1.1;
    --headings-color: #2e2629;
    --h1-size: clamp(36px, 4.6vw, 56px);
    --h1-weight: var(--headings-weight);
    --h1-color: var(--headings-color);
    --h2-size: clamp(30px, 3.4vw, 44px);
    --h2-weight: var(--headings-weight);
    --h2-color: var(--headings-color);
    --h3-size: clamp(24px, 2.2vw, 30px);
    --h3-weight: var(--headings-weight);
    --h3-color: var(--headings-color);
    --h4-size: 22px;
    --h4-weight: var(--headings-weight);
    --h4-color: var(--headings-color);
    --h5-size: 19px;
    --h5-weight: var(--headings-weight);
    --h5-color: var(--headings-color);
    --h6-size: 17px;
    --h6-weight: var(--headings-weight);
    --h6-color: var(--headings-color);
    


    --transition-time: 350ms;

    --form-label-color: var(--body-color);
    /* `initial` in a custom property is the guaranteed-invalid value: var()
       would fail and text-transform would fall back to *inherit*, letting
       labels pick up a parent's casing. `none` is the real reset. */
    --form-label-text-transform: none;
    --form-font-size: 16px;
    /* Was consumed by the input/select/textarea rule but never declared, so the
       declaration was invalid and line-height silently inherited the body's
       1.420. Declared at that same value — nothing moves, but it is now a real
       knob rather than an accident. */
    --form-line-height: var(--body-line-height);
    --form-color: var(--body-color);
    --form-border-radius: 0;
    --form-border-width: 1px;
    --form-border-color: var(--border-color-mid);
    --form-background-color: var(--color-white);
    --form-padding: 12px 14px;
    --placeholder-color: #767676;   /* was #aeaeae — 2.2:1 on white, well under AA */
    /* <option> highlight. Kept separate from --selection-background so the
       list highlight and the page's text selection can differ.
       Selected = main, hover = secondary. */
    --option-checked-background: var(--main-color);
    --option-checked-color: var(--on-main-color);
    --option-hover-background: #e1e1e1;
    --option-hover-color: var(--color-black);
    /* Selected + hovered. Defaults to the plain checked pair so selection is
       never lost; the @supports block below deepens it slightly where
       color-mix() is available. */
    --option-checked-hover-background: var(--option-checked-background);
    --option-checked-hover-color: var(--option-checked-color);
    --form-hover-border-color: var(--main-color);
    --form-invalid-border-color: var(--secondary-color);

    --button-font-size: 15px;
    --button-font-weight: 500;
    --button-color: var(--color-white);
    --button-text-transform: none;
    --button-border-radius: 0;
    --button-border-width: 1px;
    --button-border-color: var(--main-color);
    --button-background-color: var(--main-color);
    --button-padding: 16px 28px;

    --button-hover-background-color: #5b4b50;
    --button-hover-color: var(--on-main-color);
    --button-hover-border-color: #5b4b50;

    --disabled-opacity: 0.5;

    --focus-color: var(--main-color);
    --focus-contrast-color: var(--color-white);   /* outer halo of the two-tone ring */
    --focus-style: solid;
    --focus-px: 2px;
    --focus-offset: 2px;

    /* WOOCOMMERCE */
    --woo-loop-product-title-color: var(--main-color);
    --woo-price-font-size: 20px;
    --woo-price-color: var(--main-color);
    /* LOOP */
    --woo-loop-product-title-size: 22px;
    /* SINGLE */
    --woo-single-product-title-size: 32px;

    --scrollbar-color-thumb: var(--main-color);
    --scrollbar-color-track: var(--body-background);
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;

    /*START DESIGN TOKENS*/
    --display-size: clamp(44px, 6.2vw, 72px);
    --card-title-size: clamp(22px, 1.9vw, 26px);
    --band-lavender: #f1eef4;
    --band-sand: #f4efe4;
    --border-on-band: rgba(46, 38, 41, .16);
    --hero-scrim: linear-gradient(90deg, rgba(46, 38, 41, .8) 0%, rgba(46, 38, 41, .52) 38%, rgba(46, 38, 41, 0) 66%);
    --hero-scrim-mobile: linear-gradient(0deg, rgba(46, 38, 41, .86) 0%, rgba(46, 38, 41, .58) 48%, rgba(46, 38, 41, .12) 82%);
    --utility-bar-height: 40px;
    --brand-logo-height: 50px;
    --ease-soft: cubic-bezier(.22, 1, .36, 1);
    --transition-slow: 700ms;
    --image-grade: saturate(.94) contrast(1.03);
    /*END DESIGN TOKENS*/

}
/* Deepen the selected+hover fill where color-mix() exists, so it tracks
   --main-color instead of being a hardcoded second blue. Declared separately
   because an unsupported color-mix() inside a custom property would only fail
   at use time, blanking the background rather than falling back. */
@supports (background: color-mix(in srgb, #000 50%, #fff)) {
    :root {
        --option-checked-hover-background:
            color-mix(in srgb, var(--option-checked-background) 86%, var(--color-black));
    }
}

/*START RESET*/

::selection {
    background: var(--selection-background);
    color: var(--selection-color);
}
::-moz-selection {
    background: var(--selection-background);
    color: var(--selection-color);
}

@supports (scrollbar-width: auto) {
    html {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

@supports selector(::-webkit-scrollbar) {
    html::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    html::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    html::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}
@layer reset {

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

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        /* so #anchor links don't land underneath the sticky header */
        scroll-padding-top: calc(var(--top-bar-height) + 20px);
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        min-height: 100svh;
        /* `clip` instead of `hidden`: kills horizontal overflow without
           turning <body> into a scroll container (which breaks position:sticky
           in some layouts). Still: find what's actually overflowing. */
        overflow-x: clip;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    :where(p, figure, blockquote, dl, dd, fieldset) {
        margin: 0;
    }

    :where(ul, ol, menu) {
        margin: 0;
        padding-inline-start: 25px;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        font-size: inherit;
        font-weight: inherit;
    }

    :where(img, svg, video, canvas, picture) {
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }

    :where(iframe, embed, object) {
        max-width: 100%;
        border: 0;
    }

    :where(input, button, textarea, select) {
        font: inherit;
        color: inherit;
    }

    /* Long Greek compounds and raw URLs shouldn't blow out the layout */
    :where(p, li, dd, h1, h2, h3, h4, h5, h6, td, th, figcaption) {
        overflow-wrap: break-word;
    }

    :where(fieldset) {
        border: 0;
        padding: 0;
    }

    :where(legend) {
        padding: 0;
    }

    :where(table) {
        border-collapse: collapse;
        border-spacing: 0;
    }

    :where(hr) {
        border: 0;
        border-top: 1px solid currentColor;
        opacity: 0.2;
        margin-block: var(--content-spacing);
    }

    :where(abbr[title]) {
        text-decoration: underline dotted;
        cursor: help;
    }

    :where(summary) {
        cursor: pointer;
    }

    :where(dialog) {
        border: 0;
        padding: 0;
    }
}



html {
    font-family: var(--body-font-family);
}

body {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    background-color: var(--body-background);
    color: var(--body-color);
}

code,
kbd,
samp,
pre {
    font-family: var(--body-mono-family);
    font-size: 0.9375em;
}

pre {
    overflow-x: auto;
    padding: 15px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

pre code {
    font-size: inherit;
    background: none;
    padding: 0;
}

p:not(:last-child),
ul:not(:last-child),
ol:not(:last-child),
menu:not(:last-child),
figure:not(:last-child),
table:not(:last-child) {
    margin-bottom: var(--paragraph-spacing);
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-time) ease-in-out;
}

a:hover {
    color: var(--link-hover-color);
}


:focus-visible {
    outline: var(--focus-px) var(--focus-style) var(--focus-color);
    outline-offset: var(--focus-offset);
    box-shadow: 0 0 0 calc(var(--focus-px) + var(--focus-offset) + 2px) var(--focus-contrast-color);
}

@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: var(--focus-px) var(--focus-style) var(--focus-color);
        outline-offset: var(--focus-offset);
    }
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--heading-spacing);
    font-family: var(--headings-font);
    font-weight: var(--headings-weight);
    line-height: var(--headings-line-height);
    color: var(--headings-color);
    text-wrap: balance;   /* ignored where unsupported */
}

h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); color: var(--h1-color); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); color: var(--h2-color); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); color: var(--h3-color); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); color: var(--h4-color); }
h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); color: var(--h5-color); }
h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); color: var(--h6-color); }

blockquote {
    margin: 0 0 var(--paragraph-spacing);
    padding-inline-start: 20px;
    border-inline-start: 3px solid var(--secondary-color);
    font-size: 1.125em;
}

figcaption {
    font-size: 0.875em;
    color: var(--color-muted);
    margin-top: 8px;
}



label {
    color: var(--form-label-color);
    text-transform: var(--form-label-text-transform);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input,
select,
textarea {
    font-family: var(--body-font-family);
    font-size: var(--form-font-size);
    line-height: var(--form-line-height);
    color: var(--form-color);
    background-color: var(--form-background-color);
    border: var(--form-border-width) solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: var(--form-padding);
    max-width: 100%;
    accent-color: var(--main-color);
}

textarea {
    resize: vertical;
    line-height: var(--body-line-height);
}

::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
    box-shadow: none;
}

progress,
meter {
    accent-color: var(--main-color);
}


::file-selector-button {
    font-family: var(--body-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    color: var(--button-color);
    background-color: var(--button-background-color);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    padding: var(--button-padding);
    margin-inline-end: 10px;
    text-transform: var(--button-text-transform);
    cursor: pointer;
    transition:
        background-color var(--transition-time) ease-in-out,
        border-color var(--transition-time) ease-in-out,
        color var(--transition-time) ease-in-out;
}

input:hover::file-selector-button,
input:focus-visible::file-selector-button {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-color);
    border-color: var(--button-hover-border-color);
}


input:not([type="submit"]):not([type="button"]):not([type="reset"]):hover:not(:disabled):not([readonly]):not(:user-invalid),
select:hover:not(:disabled):not(:user-invalid),
textarea:hover:not(:disabled):not([readonly]):not(:user-invalid) {
    border-color: var(--form-hover-border-color);
}


input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    border-color: var(--form-invalid-border-color);
}


select:focus > option:checked,
select:focus > optgroup > option:checked {
    background-color: var(--option-checked-background);
    color: var(--option-checked-color);
}

select[multiple] option:checked,
select[size]:not([size="1"]) option:checked {
    background: var(--option-checked-background)
        linear-gradient(
            0deg,
            var(--option-checked-background) 0%,
            var(--option-checked-background) 100%
        );
    color: var(--option-checked-color);
}


select[multiple] option:hover,
select[size]:not([size="1"]) option:hover {
    background: var(--option-hover-background)
        linear-gradient(
            0deg,
            var(--option-hover-background) 0%,
            var(--option-hover-background) 100%
        );
    color: var(--option-hover-color);
}


select[multiple] option:checked:hover,
select[size]:not([size="1"]) option:checked:hover {
    background: var(--option-checked-hover-background)
        linear-gradient(
            0deg,
            var(--option-checked-hover-background) 0%,
            var(--option-checked-hover-background) 100%
        );
    color: var(--option-checked-hover-color);
}

option:disabled {
    color: var(--color-muted);
}

optgroup {
    font-style: normal;
    font-weight: 700;
    color: var(--form-color);
}


input[type="checkbox"],
input[type="radio"] {
    position: relative;
    -webkit-appearance: none;
    appearance: none;   /* the unprefixed form was missing */
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

input[type="radio"] {
    border-radius: 50%;
}


input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    cursor: not-allowed;
}

input[type="checkbox"]::before {
    content: "\2714";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    line-height: 1;
    font-size: 85%;
    color: var(--main-color);
    transform: translate(-50%, -50%) scale(0);
    transform-origin: bottom;
    transition: transform var(--transition-time) ease-in-out;
}

input[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

input[type="radio"]::before {
    content: '';
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--main-color);
    transform: scale(0);
    transition: transform var(--transition-time) ease-in-out;
}

input[type="radio"]:checked::before {
    transform: scale(1);
}


button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button {
    font-family: var(--body-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: normal;
    color: var(--button-color);
    background-color: var(--button-background-color);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    padding: var(--button-padding);
    max-width: 100%;
    text-transform: var(--button-text-transform);
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition:
        background-color var(--transition-time) ease-in-out,
        border-color var(--transition-time) ease-in-out,
        color var(--transition-time) ease-in-out;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
button:focus-visible,
input[type="submit"]:focus-visible,
.button:focus-visible {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-color);
    border-color: var(--button-hover-border-color);
}


:is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .button
):is(:hover, :focus-visible, :active) {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-color);
    border-color: var(--button-hover-border-color);
}

.button_outline {
    background-color: transparent;
    color: var(--main-color);
    border: var(--button-border-width) solid var(--main-color);
}

.button_outline:hover,
.button_outline:focus-visible {
    background-color: var(--main-color);
    /* was --secondary-color: red on dark blue is 1.79:1, effectively unreadable.
       This mirrors the primary button, which also inverts on hover. */
    color: var(--on-main-color);
    border-color: var(--secondary-color);
}

.button svg,
button svg {
    height: 1rem;
    width: auto;
    flex: 0 0 auto;
}


:disabled,
[aria-disabled="true"],
.disabled {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
}


:is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .button
):is(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :focus-visible, :active) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
}


input:is(
    [type="text"], [type="search"], [type="url"], [type="tel"], [type="email"],
    [type="password"], [type="number"], [type="date"], [type="month"],
    [type="week"], [type="time"], [type="datetime-local"]
):read-only,
input:not([type]):read-only,
textarea:read-only {
    background-color: var(--surface-subtle);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
    text-align: start;
    border-bottom: 1px solid var(--border-color);
}

th {
    font-weight: 700;
}

/*END RESET*/

/*START GENERAL STYLE*/

.container {
    max-width: calc(var(--container) + var(--mobile-paddings) * 2);
    background-color: var(--container-background);
    margin-inline: auto;
    padding-block: var(--content-spacing);
    padding-inline: var(--mobile-paddings);
}

section > .container {
    padding-block: calc(var(--content-spacing) * 2);
}
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pagination {
    margin: 30px 0;
    text-align: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 5px;
    border: 1px solid var(--link-color);
    color: var(--link-color);
}

.pagination .page-numbers.current {
    background: var(--main-color);
    color: var(--on-main-color);
    cursor: default;
}

.pagination .prev.page-numbers {
    margin-right: 10px;
    border: 0;
}

.pagination .next.page-numbers {
    margin-left: 10px;
    border: 0;
}


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.no-scroll {
    overflow: hidden;
}
/*#main-wrap,
#Footer {
    transition: all var(--transition-time) ease-in-out;
}*/
/*END GENERAL STYLE*/



/*START WORDPRESS CORE CLASSES*/
.alignleft,
img.alignleft {
    margin-right: 1.5em;
    margin-bottom: 0.5em;
    display: inline;
    float: left;
}

.alignright,
img.alignright {
    margin-left: 1.5em;
    margin-bottom: 0.5em;
    display: inline;
    float: right;
}

.aligncenter,
img.aligncenter {
    margin-inline: auto;
    display: block;
    clear: both;
}

.alignwide {
    max-width: min(100%, calc(var(--container) + 200px));
    margin-inline: auto;
}

.alignfull {
    max-width: 100vw;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.alignnone {
    margin-inline: 0;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: var(--paragraph-spacing);
}

.wp-caption img {
    display: block;
    margin-inline: auto;
}

.wp-caption-text,
.gallery-caption,
.wp-block-image figcaption {
    font-size: 0.875em;
    color: var(--color-muted);
    text-align: center;
    margin-top: 8px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--paragraph-spacing);
}

.gallery-item {
    flex: 1 1 150px;
    text-align: center;
}

.sticky,
.bypostauthor {
    position: relative;
}

.wp-block-embed__wrapper iframe,
.wp-embed-responsive iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    width: auto;
    left: 5px;
    top: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    z-index: 100000;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 5px;
    z-index: 100000;
    background: var(--body-background);
    padding: 10px 20px;
}

.skip-link:focus {
    top: 5px;
}
/*END WORDPRESS CORE CLASSES*/

/*START PRINT*/

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    .pagination,
    nav,
    footer {
        display: none;
    }
}
/*END PRINT*/



/*START HEADER*/
#top-header {
    position: sticky;
    top: 0;
    background-color: var(--menu-submenu-background);
    transition: all var(--transition-time) ease-in-out;
    z-index: var(--header-z-index);
}

body.admin-bar {
    --admin-bar-height: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --admin-bar-height: 46px;
    }
}

@media (max-width: 600px) {
    body.admin-bar {
        --admin-bar-height: 0px;
    }
}

.admin-bar #top-header {
    top: var(--admin-bar-height);
}
#top-header > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-top: var(--header-top-bottom-spacing);
    padding-bottom: var(--header-top-bottom-spacing);
}
#brand a {
    font-size: var(--h1-size);
    display: flex;
}
#brand .site-title{
    margin-bottom: 0;
}
#brand .custom-logo {
    width: auto;
    height: 40px;
}
/*END HEADER*/

/*START MAIN MENU*/
#site-menu {
    display: flex;
    align-items: center;
}

#menu ul.menu,
#menu ul.sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu > ul.menu {
    display: flex;
    align-items: center;
    gap: var(--menu-desktop-spacing);
}

#menu a {
    display: block;
    padding: var(--menu-link-padding-top-bottom) var(--menu-link-padding-left-right);
    font-family: var(--menu-font-family, var(--body-font-family));
    font-size: var(--menu-link-font-size);
    font-weight: var(--menu-link-font-weight, 500);
    line-height: 1.2;
    text-transform: var(--menu-link-text-transform);
    text-decoration: none;
    background-color: var(--menu-link-background-color);
    color: var(--menu-link-color);
    border-radius: var(--menu-link-border-radius);
    transition: all var(--transition-time) ease-in-out;
}
#menu > ul.menu > li > a {
    text-transform: var(--menu-top-link-text-transform);
}
#menu > ul.menu > li:hover > a,
#menu > ul.menu > li.current-product_cat-ancestor > a {
    background-color: var(--menu-link-hover-background-color);
    color: var(--menu-link-hover-color);
}


#menu a:focus-visible {
    outline: var(--focus-px) var(--focus-style) var(--focus-color);
    outline-offset: var(--focus-offset);
}


#main-menu > li > ul.sub-menu {
    position: absolute;
    /*width: min(var(--container), 100% - var(--mobile-paddings) * 2);*/
    top: var(--menu-submenu-offset);
    left: 50%;
    z-index: var(--menu-z-index, 100);
    padding: var(--menu-submenu-padding, 8px 0);
    background: var(--menu-submenu-background);
    border: 1px solid var(--menu-submenu-border-color, var(--border-color));
    border-radius: var(--menu-submenu-border-radius, 12px);
    box-shadow: var(--menu-shadow, 0 8px 24px rgba(0, 0, 0, 0.10));
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%);
    transition: all var(--transition-time) ease-in-out;
}
#main-menu > li > ul.sub-menu::before {
    content: '';
    position: absolute;
    top: calc(var(--top-bar-height) - var(--menu-submenu-offset) - calc( var(--top-bar-height) / 2 ) + var(--menu-link-padding-top-bottom) * 1.5);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#menu li.menu-item:hover > ul.sub-menu,
#menu li.menu-item:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
}

#menu ul.sub-menu a {
    padding: var(--menu-submenu-link-padding, 9px 20px);
    font-size: var(--menu-submenu-font-size, var(--menu-link-font-size));
    color: var(--menu-submenu-color);
    white-space: nowrap;
    transition: all var(--transition-time) ease-in-out;
    font-weight: 700;
}

#menu ul.sub-menu li.current-menu-item > a,
#menu ul.sub-menu a:hover,
#menu ul.sub-menu a:focus-visible {
    color: var(--menu-submenu-hover-color, var(--menu-link-hover-color));
    background-color: var(--menu-submenu-hover-background, rgba(0, 0, 0, 0.04));
}

#main-menu > li > ul.sub-menu > li > a{
    font-weight: 900;
}

#menu ul.sub-menu ul.sub-menu {
    margin-top: 10px
}
#menu .brands-menu > ul > li > a {
    display: flex;
    gap: 20px;
    align-items: center;
}
.brand-menu-name {
    border-bottom: 1px solid var(--border-color-strong);
    min-width: 300px;
    padding-bottom: 30px;
}
.brand-menu-image {
    aspect-ratio: 1/1;
    object-fit: contain;
    border: 1px solid var(--border-color-strong);
    border-radius: 50%;
    padding: 5px;
    width: 70px;
    transition: all var(--transition-time) ease-in-out;
}
#menu .brands-menu > ul > li > a:hover .brand-menu-name,
#menu .brands-menu > ul > li > a:hover .brand-menu-image  {
    border-color: var(--secondary-color);
}


.submenu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    padding: 0;
    cursor: pointer;
}


.submenu-toggle,
.submenu-toggle:hover,
.submenu-toggle:focus,
.submenu-toggle:focus-visible {
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
}

.submenu-toggle::before {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-time) ease-in-out;
}

.menu-item-has-children.is-open > .submenu-toggle::before {
    transform: translateY(2px) rotate(-135deg);
}


#menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--hamburger-size, 44px);
    height: var(--hamburger-size, 44px);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: calc(var(--menu-z-index) + 1);
}

#menu-toggle span {
    position: relative;
}

#menu-toggle span,
#menu-toggle span::before,
#menu-toggle span::after {
    display: block;
    width: var(--hamburger-bar-width, 26px);
    height: var(--hamburger-bar-height, 2px);
    background: var(--hamburger-color);
    transition: all var(--transition-time) ease-in-out;

}

#menu-toggle span::before,
#menu-toggle span::after {
    content: '';
    position: absolute;
}

#menu-toggle span::before { transform: translateY(calc(var(--hamburger-bar-gap, 8px) * -1)); }
#menu-toggle span::after  { transform: translateY(var(--hamburger-bar-gap, 8px)); }

body.menu-open #menu-toggle span { background: transparent; }
body.menu-open #menu-toggle span::before { transform: rotate(45deg); }
body.menu-open #menu-toggle span::after  { transform: rotate(-45deg); }



@media (max-width: 767px) {

    #menu-toggle {
        display: flex;
    }

    #site-menu {
        position: fixed;
        top: var(--admin-bar-height);
        right: 0;
        bottom: 0;
        z-index: var(--menu-z-index);
        width: min(var(--menu-mobile-width, 380px), 100%);
        padding: calc(var(--top-bar-height) + var(--mobile-paddings)) var(--mobile-paddings) var(--mobile-paddings);
        background: var(--menu-mobile-background, var(--body-background));
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: all var(--transition-time) ease-in-out;
    }

    body.menu-open {
        overflow: hidden;
    }

    body.menu-open #site-menu {
        transform: translateX(0);
        visibility: visible;
    }

    #menu > ul.menu {
        display: block;
    }

    #menu > ul.menu > li.menu-item + li.menu-item {
        border-top: 1px solid var(--border-color);
    }

    #menu a {
        padding: 12px 0;
        font-size: var(--menu-mobile-link-font-size, 18px);
        color: var(--menu-mobile-link-color, var(--body-color));
    }

    #menu li.menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    #menu li.menu-item-has-children > a {
        flex: 1 1 auto;
    }

    #menu .submenu-toggle {
        display: inline-flex;
    }

    #menu ul.sub-menu,
    #main-menu > li > ul.sub-menu {
        position: static;
        width: auto;
        min-width: 0;
        padding: 0 0 10px 16px;
        gap: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    #menu li.menu-item-has-children > ul.sub-menu,
    #main-menu > li.menu-item-has-children > ul.sub-menu {
        flex: 1 0 100%;
        display: none;
    }

    #menu li.menu-item-has-children.is-open > ul.sub-menu,
    #main-menu > li.menu-item-has-children.is-open > ul.sub-menu {
        display: block;
    }

    #main-menu > li > ul.sub-menu::before {
        content: none;
    }

    #main-menu > li.menu-item > ul.sub-menu > li:not(:last-child) {
        border-right: 0;
        padding-right: 0;
    }

    #menu .brand-menu-name {
        min-width: 0;
        padding-bottom: 0;
    }

    #menu .current-menu-item > a,
    #menu .current-menu-ancestor > a,
    #menu .current_page_item > a {
        color: var(--menu-link-active-color);
        font-weight: 700;
    }

    #menu ul.sub-menu a {
        padding: 8px 0;
        font-size: var(--menu-mobile-link-font-size, 18px);
        color: var(--menu-mobile-link-color, var(--body-color));
        white-space: normal;
    }

    #menu ul.sub-menu ul.sub-menu {
        left: auto;
    }
}

/*END MAIN MENU*/







/* 
START FOOTER
*/
#Footer {
    background-color: var(--main-color);
    font-size: 14px;
    color: var(--on-main-color);
    position: relative;
}



#Footer .menu {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#Footer .menu li{margin-bottom: 5px;}
#Footer .menu a{padding: 4px 5px;}
#Footer .devbyngx {
    padding: 10px;
}
#Footer .devbyngx a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    color: var(--color-white);
    padding: 0.5em 1em;
    width: fit-content;
    margin: auto;
    border: 1px solid var(--color-white);
    border-radius: var(--pill-radius);
}
#Footer .devbyngx a:hover {
    opacity: 0.7;
}
#Footer .devbyngx img {
    height: 16px;
}
#back-to-top {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    font-size: 22px;
    padding: 0;
    cursor: pointer;
    color: var(--color-white);
}
/* 
END FOOTER
*/





@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*START DESIGN*/
/* ALMA Real Estate — Luxury Editorial (Brand bands, canvas C) — 2026-09-27 */

/* == fonts ==================================================== */
/* The files live in assets/fonts/; the preview build inlines them. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ubuntu Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ubuntu-condensed-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* == base ===================================================== */
.band-lavender { background-color: var(--band-lavender); }
.band-sand { background-color: var(--band-sand); }
.muted { color: var(--color-muted); }

/* Buttons fill from the left instead of swapping colour at once. */
.button { position: relative; isolation: isolate; overflow: hidden; min-height: 52px; letter-spacing: .02em; white-space: nowrap; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--button-hover-background-color); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-time) var(--ease-soft); }
.button:is(:hover, :focus-visible, :active) { background-color: var(--button-background-color); color: var(--button-hover-color); }
.button:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.button.button_outline { background-color: transparent; color: var(--body-color); border-color: var(--body-color); }
.button.button_outline::before { background-color: var(--body-color); }
.button.button_outline:is(:hover, :focus-visible, :active) { background-color: transparent; color: var(--color-background); border-color: var(--body-color); }

.text-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; font-size: 15px; font-weight: 500; color: var(--link-color); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.text-link svg { width: 20px; height: 20px; transition: transform var(--transition-time) var(--ease-soft); }
.text-link:is(:hover, :focus-visible) svg.icon-arrow { transform: translateX(4px); }
.text-link--light, .text-link--light:hover { color: var(--color-white); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 40px; align-items: end; }
.section-head h2 { grid-column: 1 / span 5; margin-bottom: 0; }
.section-head p { grid-column: 7 / span 5; }
.section-head--center { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.section-head--center p { max-width: 620px; }

/* == header =================================================== */
.utility-bar { background-color: var(--band-sand); font-size: 13px; }
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--utility-bar-height); padding-block: 0; }
.utility-bar ul { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.utility-bar a { color: var(--body-color); }
.utility-bar a:hover { color: var(--link-color); }
.utility-bar__lang { color: var(--color-muted); font-weight: 600; letter-spacing: .06em; }

#top-header { border-bottom: 1px solid var(--border-color); }
#top-header > .container { min-height: calc(var(--top-bar-height) - 1px); padding-block: 0; gap: 32px; }
#brand a { font-size: inherit; }
#brand .custom-logo { display: block; width: auto; height: var(--brand-logo-height); }
/* The last α closes into ∞ on load and again on hover (.inf is the lavender half). */
#brand .custom-logo .inf { transform-box: fill-box; transform-origin: 0 50%; animation: alma-inf-in 1.2s .35s var(--ease-soft) both; }
#brand a:is(:hover, :focus-visible) .custom-logo .inf { animation: alma-inf-again 1.1s var(--ease-soft) both; }
@keyframes alma-inf-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes alma-inf-again { 0% { transform: scaleX(1); opacity: 1; } 45% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } }

#site-menu { gap: 32px; }
#menu > ul.menu > li > a { position: relative; }
#menu > ul.menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--transition-time) var(--ease-soft); }
#menu > ul.menu > li:hover > a::after,
#menu > ul.menu > li > a:focus-visible::after,
#menu > ul.menu > li.current-menu-item > a::after { transform: scaleX(1); }
#menu > ul.menu > li.current-menu-item > a { color: var(--menu-link-active-color); }
#menu-toggle:is(:hover, :focus-visible, :active) { background: none; border-color: transparent; }

/* == hero ===================================================== */
.home-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: max(560px, calc(100svh - var(--top-bar-height) - var(--utility-bar-height))); color: var(--color-white); }
.home-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--image-grade); }
.home-hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-scrim); }
.home-hero > .container { position: relative; z-index: 1; width: 100%; padding-block: var(--content-spacing); display: flex; flex-direction: column; align-items: flex-start; }
.home-hero h1 { max-width: 640px; margin-bottom: 0; font-size: var(--display-size); line-height: 1.02; letter-spacing: -.01em; color: var(--color-white); }
.home-hero p { max-width: 500px; margin-top: 24px; font-size: 19px; line-height: 1.6; }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 40px; }

/* == sections ================================================= */
/* Section rhythm comes from the theme: section > .container = 2 × --content-spacing. */

/* featured carousel */
.home-featured__body { position: relative; margin-top: 64px; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 80px) / 3); gap: 40px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > li { scroll-snap-align: start; }
.carousel-button { width: 52px; height: 52px; padding: 0; border: 1px solid var(--border-color-mid); border-radius: 0; background-color: var(--color-background); color: var(--body-color); }
.carousel-button:is(:hover, :focus-visible, :active):not(:disabled) { background-color: var(--body-color); border-color: var(--body-color); color: var(--color-background); }
.carousel-button:disabled:is(:hover, :focus-visible, :active) { background-color: var(--color-background); border-color: var(--border-color-mid); color: var(--body-color); }
.carousel-button svg { width: 20px; height: 20px; }
.carousel-button--side { position: absolute; z-index: 2; top: calc((min(100vw - 2 * var(--mobile-paddings), var(--container)) - 80px) / 8); left: -84px; transform: translateY(-50%); }
.carousel-button--side.carousel-button--next { left: auto; right: -84px; }
.home-featured__foot { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.carousel-controls { display: flex; align-items: center; gap: 16px; }
.carousel-progress { position: relative; width: 160px; height: 3px; overflow: hidden; background-color: var(--border-color-mid); }
.carousel-progress span { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background-color: var(--main-color); transition: transform .3s var(--ease-soft); }

/* about */
.home-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-about__media { min-height: 700px; }
.home-about__media img, .home-cta__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--image-grade); }
.home-about__body { align-self: center; max-width: calc(560px + 96px + max(var(--mobile-paddings), (100vw - var(--container)) / 2)); padding: calc(var(--content-spacing) * 2) max(var(--mobile-paddings), calc((100vw - var(--container)) / 2)) calc(var(--content-spacing) * 2) 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.home-about__body h2 { margin-bottom: 0; }
.home-about__body .text-link { margin-top: 8px; }

/* services */
.services-grid { margin: 64px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
.service-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--image-grade); }
.service-card h3 { margin: 22px 0 0; line-height: 1.15; }
.service-card p { margin-top: 8px; }

/* buying steps — the order is carried by <ol>, never by printed numbers */
.steps { position: relative; margin: 72px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background-color: var(--border-on-band); }
.step { position: relative; }
.step::before { content: ""; position: relative; display: block; width: 15px; height: 15px; background-color: var(--secondary-color); }
.step h3 { margin: 28px 0 0; font-size: clamp(22px, 1.8vw, 25px); line-height: 1.15; }
.step p { margin-top: 10px; font-size: 15px; line-height: 1.65; }

/* faq */
.faq { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
.faq__col { border-bottom: 1px solid var(--border-color); }
.faq__item { border-top: 1px solid var(--border-color); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: var(--card-title-size); line-height: 1.2; transition: color var(--transition-time); }
.faq__item summary:hover h3 { color: var(--link-color); }
.faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: calc(50% - .75px); height: 1.5px; background-color: currentColor; transition: transform var(--transition-time) var(--ease-soft); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__answer { margin-top: -6px; padding-bottom: 30px; color: var(--color-muted); }

/* closing band */
.home-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-cta__body { padding: 120px 96px 120px max(var(--mobile-paddings), calc((100vw - var(--container)) / 2)); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; }
.home-cta__body h2 { margin-bottom: 0; font-size: var(--h1-size); line-height: 1.02; }
.home-cta__body p { max-width: 460px; }
.home-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 12px; }
.home-cta__media { min-height: 560px; }

/* == cards ==================================================== */
.property-card__link { display: block; color: var(--body-color); }
.property-card__link:hover { color: var(--body-color); }
.property-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.property-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--image-grade); }
.property-card__price { position: absolute; left: 0; bottom: 0; padding: 10px 16px; background-color: var(--main-color); color: var(--on-main-color); font-size: 16px; font-weight: 600; line-height: 1; }
.property-card__title { margin: 22px 0 0; font-size: var(--card-title-size); line-height: 1.15; transition: color var(--transition-time); }
.property-card__link:is(:hover, :focus-visible) .property-card__title { color: var(--link-color); }
.property-card__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--color-muted); }
.property-card__facts li { display: inline-flex; align-items: center; gap: 7px; }
.property-card__facts .icon { width: 18px; height: 18px; }

/* == forms ==================================================== */
/* No forms on the homepage; Contact Form 7 styling arrives with the contact page. */

/* == footer =================================================== */
#Footer { background-color: var(--band-lavender); color: var(--body-color); font-size: 15px; border-top: 1px solid var(--border-color); }
#Footer .footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; padding-block: 96px 0; }
.footer-grid__brand { grid-column: 1 / span 4; }
.footer-grid__pages { grid-column: 6 / span 2; }
.footer-grid__contact { grid-column: 8 / span 3; }
.footer-grid__hours { grid-column: 11 / span 2; }
.footer-grid__brand img { width: auto; height: 56px; }
.footer-grid__brand p { max-width: 300px; margin-top: 24px; }
#Footer h2 { margin-bottom: 20px; font-size: 22px; line-height: 1.2; }
#Footer .footer-grid ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
#Footer .footer-grid .menu li { margin-bottom: 0; }
#Footer .footer-grid .menu a { padding: 0; }
#Footer .footer-grid a { color: var(--body-color); }
#Footer .footer-grid a:hover { color: var(--link-color); }
#Footer .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 80px; padding-block: 24px 40px; border-top: 1px solid var(--border-on-band); font-size: 14px; color: var(--color-muted); }
#Footer .devbyngx { padding: 0; }
#Footer .devbyngx a { margin: 0; color: var(--color-muted); border-color: var(--border-color-mid); }
#Footer .devbyngx a:hover { opacity: 1; color: var(--body-color); border-color: var(--body-color); }
#back-to-top { top: auto; right: var(--mobile-paddings); bottom: 108px; transform: none; width: 44px; height: 44px; border: 1px solid var(--border-color-mid); color: var(--body-color); font-size: 18px; }
#back-to-top:is(:hover, :focus-visible, :active) { background-color: var(--body-color); border-color: var(--body-color); color: var(--color-background); }

/* == motion =================================================== */
/* The hidden start state exists only under .ngx-motion, which ngx-motion.js adds —
   without the script, or with reduced motion, everything is simply visible. */
.ngx-motion [data-reveal]:not([data-reveal="stagger"]),
.ngx-motion [data-reveal="stagger"] > * { opacity: 0; transform: translateY(18px); transition: opacity var(--transition-slow) var(--ease-soft), transform var(--transition-slow) var(--ease-soft); }
.ngx-motion [data-reveal].is-in,
.ngx-motion [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
.ngx-motion [data-reveal="stagger"] > :nth-child(2) { transition-delay: 90ms; }
.ngx-motion [data-reveal="stagger"] > :nth-child(3) { transition-delay: 180ms; }
.ngx-motion [data-reveal="stagger"] > :nth-child(4) { transition-delay: 270ms; }
.ngx-motion [data-reveal="stagger"] > :nth-child(5) { transition-delay: 360ms; }
.ngx-motion [data-reveal="stagger"] > :nth-child(n+6) { transition-delay: 450ms; }
.ngx-motion .home-hero__image { animation: alma-hero-in 1.8s var(--ease-soft) both; }
@keyframes alma-hero-in { from { transform: scale(1.06); } to { transform: none; } }

/* == mobile =================================================== */
@media (max-width: 1419px) {
    .carousel-button--side { display: none; }
}
@media (min-width: 1420px) {
    .carousel-controls .carousel-button { display: none; }
}
@media (max-width: 1200px) {
    :root { --menu-desktop-spacing: 22px; }
}
@media (max-width: 1199px) and (min-width: 768px) {
    .header-cta { display: none; }
}
@media (max-width: 1024px) {
    .utility-bar__note { display: none; }
    .utility-bar .container { justify-content: flex-end; }
    .carousel-track { grid-auto-columns: calc((100% - 40px) / 2); }
    .home-about, .home-cta { grid-template-columns: 1fr; }
    .home-about__media { min-height: 0; aspect-ratio: 4 / 3; }
    .home-about__body, .home-cta__body { max-width: none; padding: calc(var(--content-spacing) * 2) var(--mobile-paddings); }
    .home-cta__media { min-height: 0; aspect-ratio: 16 / 9; }
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: 1fr; gap: 0; }
    .steps::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
    .step { padding: 0 0 36px 44px; }
    .step::before { position: absolute; left: 0; top: 6px; }
    .step h3 { margin-top: 0; }
    .step:last-child { padding-bottom: 0; }
    #Footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #Footer .footer-grid > * { grid-column: auto; }
    .footer-grid__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    :root { --menu-link-font-size: 14px; --menu-desktop-spacing: 10px; --brand-logo-height: 40px; }
    #top-header > .container { gap: 16px; }
    .faq { grid-template-columns: 1fr; }
    .faq__col:first-child { border-bottom: 0; }
}
@media (max-width: 767px) {
    :root { --top-bar-height: 72px; --brand-logo-height: 42px; --menu-link-font-size: 15px; }
    .utility-bar__email { display: none; }
    #site-menu { padding-top: calc(var(--top-bar-height) + var(--utility-bar-height) + var(--mobile-paddings)); gap: 32px; }
    #menu a { font-family: var(--headings-font); font-size: 28px; font-weight: 400; line-height: 1.2; }
    #menu > ul.menu > li > a::after { display: none; }
    .header-cta { align-self: flex-start; }
    .home-hero { align-items: flex-end; }
    .home-hero::after { background: var(--hero-scrim-mobile); }
    .home-hero > .container { padding-block: 120px 56px; }
    .home-hero p { margin-top: 18px; font-size: 17px; }
    .home-hero__actions { margin-top: 32px; }
    .section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
    .section-head--center { align-items: center; }
    .home-featured__body { margin-top: 40px; }
    .carousel-track { grid-auto-columns: 85%; gap: 20px; }
    .services-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
    .steps { margin-top: 48px; }
    .faq { margin-top: 40px; }
    #Footer .footer-grid { grid-template-columns: 1fr; padding-block: 72px 0; }
    #Footer .footer-bottom { margin-top: 56px; padding-bottom: 88px; }
    #back-to-top { bottom: 24px; }
}
/*END DESIGN*/