/* ==========================================================================
   Legacy Self Storage — main.css
   Plain CSS only. Single font: Inter. Tan/beige brand palette.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    /* Brand — warm tan / khaki, matching live site */
    --primary-color:      #c4b5a0;
    --primary-color-dark: #b3a48f;
    --primary-color-soft: #ead7b7;
    --primary-color-tint: #f4ead8;

    --secondary-color:    #ffffff;
    --white-color:        #ffffff;
    --accent-color:       #c4a574;

    /* Neutrals */
    --ink-1000:#2d2d2d;
    --ink-900: #111111;
    --ink-800: #1a1a1a;
    --ink-700: #232323;
    --ink-600: #4a4a4a;
    --ink-500: #6b6b6b;
    --ink-550: #666666;
    --ink-400: #9a9a9a;
    --ink-300: #cfcfcf;
    --ink-200: #e6e6e6;
    --ink-100: #f5f4f1;
    --ink-80: #f3f4f6;
    --ink-50:  #faf8f4;

    /* Surfaces */
    --bg-body:    #ffffff;
    --bg-grey:    #f9f9f9;
    --bg-muted:   #faf8f4;
    --bg-section: #f5f3ee;
    --bg-dark:    #1a1a1a;
    --bg-darker:  #0e0e0e;

    /* Typography — single family per spec */
    --font-body: "Inter", sans-serif;;

    --fs-body:    1rem;
    --fs-small:   0.875rem;
    --fs-tiny:    0.75rem;
    --fs-h1:      clamp(2.25rem, 5vw, 3.75rem);
    --fs-h2:      clamp(1.875rem, 1.7rem + 0.9vw, 2.25rem);
    --fs-h3:      clamp(1.05rem, 1.4vw, 1.25rem);
    --fs-sub:     0.875rem;

    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.6;

    /* Spacing */
    --section-space:    clamp(3.75rem, 3.2rem + 2vw, 5rem);
    --section-space-sm: clamp(36px, 4.5vw, 64px);

    --radius-sm:    0.25rem;
    --radius:       0.375rem;
    --radius-lg:    0.75rem;
    --radius-xl:    1.125;
    --radius-wide:  50px;
    --radius-pill:  999px;

    --shadow-sm: 0 1px 2px rgba(15,15,15,.05);
    --shadow:    0 6px 22px -10px rgba(15,15,15,.18), 0 2px 6px -2px rgba(15,15,15,.06);
    --shadow-lg: 0 24px 60px -22px rgba(15,15,15,.4);

    --transition-fast: 150ms ease;
    --transition:      220ms ease;
    --transition-slow: 380ms ease;
}

/* 2. Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg-body);
    color: var(--ink-700);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.is-modal-open,
body.is-nav-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-color); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-color-dark); }
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--font-body);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--ink-900);
    letter-spacing: -0.01em;
    letter-spacing: 0;
}
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* 3. Wrapper / container — per live site spec ---------------------------- */
.wrapper, .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 40rem) { .wrapper, .container { max-width: 40rem; } }
@media (min-width: 48rem) { .wrapper, .container { max-width: 48rem; } }
@media (min-width: 64rem) { .wrapper, .container { max-width: 64rem; } }
@media (min-width: 80rem) { .wrapper, .container { max-width: 80rem; } }
@media (min-width: 96rem) { .wrapper, .container { max-width: 96rem; } }
@media (min-width:640px) {
    .wrapper, .container {
      padding-left:1.5rem;
      padding-right:1.5rem
    }
}
@media (min-width:1024px) {
    .wrapper, .container {
    padding-left:2rem;
    padding-right:2rem
}
}

/* 4. Utilities ------------------------------------------------------------ */
.flex { display: flex; }
.f-row { flex-direction: row; }
.f-col { flex-direction: column; }
.f-wrap { flex-wrap: wrap; }
.jc-start { justify-content: flex-start; }
.jc-center { justify-content: center; }
.jc-end { justify-content: flex-end; }
.jc-between { justify-content: space-between; }
.ai-start { align-items: flex-start; }
.ai-center { align-items: center; }
.ai-end { align-items: flex-end; }
.ai-baseline { align-items: baseline; }
.ai-stretch { align-items: stretch; }

.grid { display: grid; }
.g-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.g-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }

.c-gap__10 { column-gap: .625rem; }
.c-gap__15 { column-gap: .9375rem; }
.c-gap__20 { column-gap: 1.25rem; }
.c-gap__30 { column-gap: 1.875rem; }
.c-gap__40 { column-gap: 2.5rem; }
.c-gap__50 { column-gap: 3.125rem; }
.c-gap__60 { column-gap: 3.75rem; }

.r-gap__10 { row-gap: .625rem; }
.r-gap__15 { row-gap: .9375rem; }
.r-gap__20 { row-gap: 1.25rem; }
.r-gap__30 { row-gap: 1.875rem; }
.r-gap__40 { row-gap: 2.5rem; }
.r-gap__50 { row-gap: 3.125rem; }

.gap__15 { gap: .9375rem; }
.gap__20 { gap: 1.25rem; }
.gap__30 { gap: 1.875rem; }

.text-center { text-align: center; }

.absolute {position: absolute;}
.top-left {top: 0; left: 0;}
.top-right {top: 0; right: 0;}
.bottom-left {bottom: 0; left: 0;}
.bottom-right {bottom: 0; right: 0;}
.top-center {top: 0; left: 50%; transform: translateX(-50%);}
.bottom-center {bottom: 0; left: 50%; transform: translateX(-50%);}
.center {top: 50%; left: 50%; transform: translate(-50%, -50%);}

.w-full { width: 100%; }

/* 5. Reusable components ------------------------------------------------- */
.green__color, .gold__color, .accent__color { color: var(--primary-color); }

.sub_sec__heading {
    font-size: var(--fs-sub);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}
.sub_sec__heading--inverse { color: var(--primary-color); }

.sec__heading {
    font-size: var(--fs-h2);
    color: var(--ink-900);
    margin: 0;
    font-weight: 700;
}
.sec__heading--inverse { color: #fff; }
h1.sec__heading { font-size: var(--fs-h1); }

.body__text {
    color: var(--ink-600);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
}
.body__text p:last-child { margin-bottom: 0; }
.body__text--center { margin-left: auto; margin-right: auto; text-align: center; }
.body__text--inverse { color: rgba(255,255,255,.8); }
.body__text--inverse p { color: inherit; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0.937rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    line-height: 1;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
    border: 1.5px solid transparent;
    cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-block;
    object-fit: contain;
    transition: transform var(--transition);
    color: inherit;
}
svg.btn__icon { vertical-align: middle; }
.btn--icon-left  .btn__icon { order: -1; margin-right: .15rem; }
.btn--icon-right .btn__icon { order: 2;  margin-left: .15rem; }
/* .btn--icon-right:hover .btn__icon { transform: translateX(3px); }
.btn--icon-left:hover  .btn__icon { transform: translateX(-2px); } */
.btn__primary {
    background: var(--primary-color);
    color: var(--ink-1000);
    border-color: var(--primary-color);
}
.btn__primary:hover { background: var(--primary-color-dark); border-color: var(--primary-color-dark); color: var(--ink-1000); }
.btn__secondary {
    background: var(--ink-1000);
    color: #fff;
    border-color: var(--ink-1000);
}
.btn__secondary:hover { background: var(--ink-800); color: #fff;  border-color: var(--ink-800);}
.btn__outline {
    background: transparent;
    color: var(--ink-900);
    border-color: var(--ink-300);
}
.btn__outline:hover { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.btn__white {
    background: #fff;
    color: var(--ink-900);
    border-color: #fff;
}
.btn__white:hover { background: rgba(255,255,255,.88); color: var(--ink-900); border-color: rgba(255,255,255,.88); }
.is-dark .btn__white,
.cta-sec--dark .btn__white,
.prot-sec .btn__white,
.hero-sec .btn__white,
.early-sec .btn__white { background: #fff; color: var(--ink-900); border-color: #fff; }
.is-dark .btn__white:hover,
.cta-sec--dark .btn__white:hover,
.prot-sec .btn__white:hover,
.hero-sec .btn__white:hover,
.early-sec .btn__white:hover { background: rgba(255,255,255,.9); color: var(--ink-900); border-color: rgba(255,255,255,.9); }

.is-dark .btn__outline,
.cta-sec--dark .btn__outline,
.prot-sec .btn__outline,
.hero-sec .btn__outline,
.early-sec .btn__outline {
    color: #fff;
    border-color: rgba(255,255,255,.5);
    background: transparent;
}
.is-dark .btn__outline:hover,
.cta-sec--dark .btn__outline:hover,
.prot-sec .btn__outline:hover,
.hero-sec .btn__outline:hover,
.early-sec .btn__outline:hover { background: rgba(255,255,255,0.1); color: #fff;}

.btn__wrap { flex-wrap: wrap; }

/* Per-section background-color overrides (driven by ACF select) */
.bg--white       { background-color: var(--bg-body) !important; color: var(--ink-700); }
.bg--grey        { background-color: var(--bg-grey) !important; color: var(--ink-700); }
.bg--muted       { background-color: var(--bg-muted) !important; color: var(--ink-700); }
.bg--section     { background-color: var(--bg-section) !important; color: var(--ink-700); }
.bg--accent      { background-color: var(--accent-color) !important; color: var(--ink-1000); }
.bg--accent-tint { background-color: var(--primary-color-tint) !important; color: var(--ink-700); }
.bg--dark        { background-color: var(--ink-1000) !important; color: #fff; }
.bg--darker      { background-color: var(--bg-darker) !important; color: #fff; }
.bg--dark .sec__heading,
.bg--darker .sec__heading,
.bg--accent .sec__heading { color: #fff; }
.bg--dark .body__text,
.bg--darker .body__text { color: rgba(255,255,255,.78); }

/* 6. Top bar / Header / Mobile nav --------------------------------------- */
.top-bar {
    background: var(--ink-900);
    color: rgba(255,255,255,.7);
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.525rem 0;
}
.top-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: 0.2rem 1rem; flex-wrap: wrap; }
.top-bar__group { display: inline-flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.top-bar__item { display: inline-flex; align-items: center; gap: .4rem; color: inherit; }
.top-bar__item { color: inherit; }
a.top-bar__item:hover {color: var(--white-color);}
.top-bar__icon { display: inline-flex; opacity: .8; }
.top-bar__icon svg, .top-bar__icon img { width: 12px; height: 12px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: #fff;
    border-bottom: 1px solid var(--ink-200);
    transition: box-shadow var(--transition);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner { padding: 0.75rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { max-height: 48px; width: auto; }
.logo-text { color: var(--ink-900); font-weight: 800; font-size: 1.05rem; }
.logo--sticky { display: none; }

.site-header__nav-wrap { display: flex; align-items: center; gap: 0.75rem; }

.primary-menu {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}
.primary-menu li a {
    color: var(--ink-600);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.562rem 0.75rem;
    position: relative;
    border-radius: var(--radius);
}
.primary-menu li a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a { color: var(--ink-1000);background-color: #f5f0e8;}

.site-header__cta { display: inline-flex; align-items: center; gap: .85rem; }
.site-header__cta .btn {font-size: 0.875rem;padding: 0.625rem 1.2rem;}

.site-header__toggle {
    display: none;
    width: 40px; height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px;
}
.site-header__toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink-900);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.site-header.is-open .site-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .site-header__toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .site-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* MOBILE NAV — full-screen overlay -------------------------------------- */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__topbar {
    background: var(--ink-900);
    color: rgba(255,255,255,.85);
    padding: .65rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    font-weight: 500;
}
.mobile-nav__topbar-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: inherit;
}
.mobile-nav__topbar-item svg { color: rgba(255,255,255,.7); flex: 0 0 auto; }
.mobile-nav__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ink-200);
}
.mobile-nav__logo img { max-height: 44px; width: auto; }
.mobile-nav__close {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-900);
    border-radius: var(--radius);
}
.mobile-nav__close:hover { background: var(--bg-grey); }
.mobile-nav__nav {
    padding: .25rem 1rem;
    border-bottom: 1px solid var(--ink-200);
}
.mobile-nav .mobile-menu { flex-direction: column; gap: 0; padding: 0; }
.mobile-nav .mobile-menu li a {
    display: block;
    padding: 0.75rem;
    color: var(--ink-1000);
    font-weight: 600;
    font-size: 1rem;
    list-style: 1.44;;
}
.mobile-nav .mobile-menu li a:hover {background-color: #f5f0e8;border-radius: var(--radius);}
.mobile-nav .mobile-menu li:last-child a { border-bottom: 0; }
.mobile-nav__contact {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ink-200);
}
.mobile-nav__contact li {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--ink-700);
    font-size: .95rem;
}
.mobile-nav__contact li svg { color: var(--primary-color); flex: 0 0 auto; }
.mobile-nav__contact li a { color: inherit; }
.mobile-nav__contact li a:hover {color: var(--primary-color);}
.mobile-nav__cta { padding: 1rem 1.25rem 1.5rem; }
.mobile-nav__cta .btn { width: 100%; }

/* 7. Footer -------------------------------------------------------------- */
.site-footer {
    background: var(--ink-1000);
    color: rgba(255,255,255,.7);
    padding: 4rem 0;
    font-size: 0.875rem;
}
.site-footer__top { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3rem; }
.site-footer__heading {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 1rem;
    text-transform: uppercase;
}
.site-footer__logo { display: inline-block; margin-bottom: 0.75rem; }
.site-footer__logo img { max-height: 48px;filter: brightness(0) invert(1); }
.site-footer__tagline { color: rgba(255,255,255,.8); margin: 0 0 .75rem; font-weight: 600; }
.site-footer__desc { color: rgba(255,255,255,.7); font-size: 0.875rem;}
.site-footer__desc.body__text { max-width: 320px; }
.site-footer .footer-menu {display: flex; flex-direction: column; gap: .65rem; }
.site-footer .footer-menu a { color: rgba(255,255,255,.7); font-weight: 400; }
.site-footer .footer-menu a:hover { color: var(--primary-color); }

.site-footer__contact { display: flex; flex-direction: column; gap: .65rem; color: rgba(255,255,255,.7); }
.site-footer__contact li { display: flex; align-items: center; gap: .65rem; }
.site-footer__contact a { color: inherit; }
.site-footer__contact a:hover { color: var(--primary-color); }
.site-footer__hours { color: rgba(255,255,255,.45); font-size: .85rem; }
.site-footer__contact-icon {
    flex: 0 0 auto;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.site-footer__contact-icon-img { width: 14px; height: 14px; flex: 0 0 auto; color: inherit; }

.site-footer__unit-group { margin-bottom: .9rem; }
.site-footer__unit-label {
	display: block;
	color: var( --primary-color);
	font-weight: 600;
	font-size: 0.75rem;
	margin-bottom: .25rem;
	text-transform: uppercase;
}
.site-footer__unit-sizes { color: rgba(255,255,255,.7); font-size: 0.875rem;display: block;max-width: 220px; }

.social-links {
    display: flex;
    flex-direction: row;
    gap: .65rem;
    margin-top: 1rem;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: #fff;
    transition: background var(--transition), color var(--transition);
}
.social-links a:hover { background: var(--primary-color); color: #fff; }

.site-footer__bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.45);
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.site-footer__legal { display: flex; flex-direction: row; gap: 1.25rem; }
.site-footer__legal a { color: rgba(255,255,255,.45); }
.site-footer__legal a:hover { color: #fff; }

/* 8. Sections ------------------------------------------------------------ */

/* HERO ---------------------------------- */
.hero-sec {
    position: relative;
    color: #fff;
    background-image: linear-gradient(to right,rgba(0, 0, 0, var(--hero-overlay, 0.75)) 0%,rgba(0, 0, 0, 0.55) 50%,rgba(0, 0, 0, 0.3) 100%),var(--hero-bg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: clamp(3rem, 6vw, 5rem) 0;
    overflow: hidden;
    min-height: clamp(15.625rem, 30vw, 31.25rem);
}
.hero-sec.hero-sec--big {
    background-image:linear-gradient(to right,rgba(0, 0, 0, var(--hero-overlay, 0.7)) 0%,rgba(0, 0, 0, 0.45) 50%,rgba(0, 0, 0, 0.25) 100%),var(--hero-bg);
    min-height: 85vh;
}
.hero-sec__inner { max-width: 48rem; }
.hero-sec__sub {
    color: var(--primary-color);
    font-weight: 600;
    font-size: var(--fs-sub);
    letter-spacing: 0.0875rem;
    text-transform: uppercase;
    line-height: 1.25rem;
}
.hero-sec__heading { color: #fff; font-size: var(--fs-h1); font-weight: 700; line-height: 1.2; }
.hero-sec__heading .green__color { color: var(--primary-color); }
.hero-sec__desc { color: rgba(255,255,255,.85); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);margin-bottom: 1rem;}
.hero-sec--big .hero-sec__desc { max-width: 36rem;}
.hero-sec:not(.hero-sec--big) .sec__heading {font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);}
.hero-sec__links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.75rem;
    row-gap: .35rem;
    margin-top: .5rem;
}
.hero-sec__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--primary-color);
    font-size: .9375rem;
    font-weight: 600;
    transition: gap var(--transition), color var(--transition);
}
.hero-sec__link:hover { color: #fff; gap: .55rem; }
.hero-sec__link-arrow { width: 16px; height: 16px; }

/* FLOATING RESERVE BADGE (fixed bottom-right viewport) ---- */
.floating-badge {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: 0.75rem 1.25rem;
    background: var(--ink-1000);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 12px 32px -10px rgba(0,0,0,.45);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.floating-badge:hover { background: #000;  box-shadow: 0 18px 38px -12px rgba(0,0,0,.55); color: #fff;}
.floating-badge__icon svg { width: 16px; height: 16px;}
.floating-badge__arrow {
    color: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
}
.floating-badge__arrow svg { width: 14px; height: 14px; }
body.is-modal-open .floating-badge { display: none; }
/* EARLY RESERVERS BANNER ----------------- */
.early-sec {
    color: #fff;
    padding: 1rem 0;
}
.early-sec__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    text-align: center;
}
.early-sec__text {
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 700;
    color: rgba(255,255,255,.92);
}
.early-sec__text strong {
    color: var(--accent-color);
    font-weight: 800;
    font-size: 1.15rem;
    margin: 0 .15rem;
}
.early-sec .btn {
    padding: 0.5rem 1.436rem;
    font-size: 0.875rem;
    border-radius: var(--radius-wide);
}

/* ICON BLURBS STRIP ---------------------- */
.iblurb-sec {
    padding: 3rem 0;
}
.iblurb-sec__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1.5rem;
}
.iblurb {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .85rem;
    color: var(--ink-1000);
    padding: 16px;
}
.iblurb__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #c4b5a01a;
    color: var(--primary-color);
    box-shadow: 0 1px 2px rgba(15,15,15,.04);
}
.iblurb__icon img, .iblurb__icon svg { width: 24px; height: 24px; flex: 0 0 auto; }
.iblurb__icon svg { color: inherit; }
.iblurb__text { font-size: 0.875rem; font-weight: 600; line-height: 1.42; }

/* IMAGE + CONTENT (Not Your Average …) --- */
.imgcnt-sec { padding: var(--section-space) 0;}
.imgcnt-sec__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.imgcnt-sec--image-left .imgcnt-sec__inner { direction: rtl; }
.imgcnt-sec--image-left .imgcnt-sec__content,
.imgcnt-sec--image-left .imgcnt-sec__image { direction: ltr; }
.imgcnt-sec__content { display: flex; flex-direction: column; gap: 1.25rem; }
.imgcnt-sec__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* PRICING TABLE -------------------------- */
.pricing-sec { padding: var(--section-space) 0; }
.pricing-sec__head { text-align: center; margin-bottom: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.pricing-sec__tables { display: flex; flex-direction: column; gap: 2rem; }

.pricing-table {overflow: hidden;}
.pricing-table--premium {
    background: linear-gradient(to right in oklab, rgb(45, 45, 45) 0%, rgb(58, 57, 56) 100%);    
    color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem;
}
.pricing-table--premium .pricing-table__title { color: #fff; }
.pricing-table--premium .pricing-table__sub { color: rgba(255,255,255,.6); }

/* Head — title + subtitle on same line, fixed style */
.pricing-table__head {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .65rem;
    padding: 1.25rem 0;
}
.pricing-table--premium .pricing-table__head {padding: 0;flex-direction: column;margin-bottom: 1.5rem;}
.pricing-table__title {
    font-size: 1.125rem;
    line-height: 1.2;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink-900);
    font-weight: 700;

}
.pricing-table__title-tag {
    display: inline-flex;
    flex-wrap: wrap;
    row-gap: 5px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-color);
    border-radius: var(--radius-sm);
}
.pricing-table__title-tag svg {width: 14px;margin-right: 3px;;}
.pricing-table__sub {
    color: var(--ink-500);
    font-size: 0.875rem;
    margin: 0;
    flex: 1 1 auto;
}

/* Native <table> grid */
.pricing-table__scroll { background: #fff;border-radius: var(--radius-lg);overflow: hidden;box-shadow: var(--shadow-sm);overflow-x: auto; }
.pricing-table--premium .pricing-table__scroll {background-color: transparent;border-radius: 0;}
.pricing-table__grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}
.pricing-table__grid th,
.pricing-table__grid td {
    padding: .95rem 1.5rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--ink-80);
    color: var(--ink-550);
}
.pricing-table__grid tr:nth-child(even) td {background-color: #fcfcfd;}
.pricing-table__grid thead th {
    background: var(--ink-1000);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    border-bottom: 0;
}
.pricing-table__grid tbody tr:hover,
.pricing-table__grid tbody tr:nth-child(2n):hover {background-color: #c4b5a00d;}
.pricing-table--premium .pricing-table__grid thead th {
    background: transparent;
}
.pricing-table--premium .pricing-table__grid th,
.pricing-table--premium .pricing-table__grid td {padding: 0.875rem 1rem;}
.pricing-table--premium .pricing-table__grid tr:nth-child(2n) td {background: transparent;}
.pricing-table--premium .pricing-table__grid tbody tr:hover,
.pricing-table--premium .pricing-table__grid tbody tr:nth-child(2n):hover {background-color: rgba(255, 255, 255, 0.05);}
.pricing-table--premium .pricing-table__grid td:first-child {color: #fff;}
.pricing-table--premium .pricing-table__grid .pricing-table__rate {color: var(--primary-color);}
.pricing-table--premium .pricing-table__grid .pricing-table__rate span {color: rgba(255, 255, 255, 0.5);}
.pricing-table__grid tbody tr:last-child td { border-bottom: 0; }
.pricing-table--premium .pricing-table__grid td {
    border-bottom-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
}
.pricing-table__grid td:first-child {color: var(--ink-1000);}

.pricing-table__size {
    font-weight: 700;
    color: var(--ink-900);
    white-space: nowrap;
}
.pricing-table--premium .pricing-table__size { color: #fff; }
.pricing-table__grid .pricing-table__rate {
    color: var(--accent-color);
    font-weight: 700;
    white-space: nowrap;
}
.pricing-table__grid .pricing-table__rate span { font-size: 0.75rem; font-weight: 600; color: var(--ink-550); }
/* .pricing-table__grid tbody tr.is-popular td { background: rgba(196,165,116,.06); } */

.pricing-pill {
    display: inline-block;
    padding: .15rem .55rem;
    margin-left: .5rem;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: var(--radius-pill);
    font-style: normal;
    line-height: 1.1;
    vertical-align: middle;
}

.pricing-table__cta { margin-top: 2.5rem; text-align: center; }
.pricing-table__cta .btn {
    font-size: 0.875rem;
}

/* PRICING-EMBEDDED FAQ ------------------- */
.pricing-faq {margin-top: 3rem;
}
.pricing-faq__head {
    text-align: center;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.pricing-faq__heading { font-size: 1.125rem; margin: 0; }
.pricing-faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.pricing-faq__more { text-align: center; margin-top: 1.5rem; }
.pricing-faq__more a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--accent-color);
    font-weight: 600;
    transition: color var(--transition);
    font-size: 0.875rem;
}
.pricing-faq__more a:hover { color: var(--primary-color-dark); }
.pricing-faq__more a svg { transition: transform var(--transition); }
.pricing-faq__more a:hover svg { transform: translateX(3px); }

/* FAQ ----------------------------------- */
.faq-sec { padding: var(--section-space) 0; background: #fff; }
.faq-sec__head { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.faq-sec__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;border: 1px solid #e8eaee;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--ink-900);
    font-size: 0.875rem;
}
.faq-item__icon {
    width: 16px; height: 16px;
    transition: transform var(--transition);
    color: var(--primary-color);
}
.faq-item.is-open .faq-item__icon { transform: rotate(180deg); }
.faq-item__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
    padding: 0 1.25rem;
    color: var(--ink-600);
    font-size: 0.875rem;
}
.faq-item.is-open .faq-item__a { max-height: unset; padding-bottom: 1rem; padding-top: 0.75rem;border-top: 1px solid #e8eaee;}
.faq-item:hover .faq-item__q {background: #f8f9fb;}
.faq-sec__more { text-align: center; margin-top: 1.5rem; }
.faq-sec__more a { font-weight: 600; color: var(--primary-color); display: inline-flex; align-items: center; gap: .35rem;}
.faq-sec__more a::after { content: '›'; font-size: 1.1em; }

/* HOW IT WORKS / STEPS ------------------- */
.steps-sec { padding: var(--section-space) 0;}
.steps-sec__head { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.steps-sec__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.5rem; padding: 20px 0 0; }
.step-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
}
.step-card__icon-wrap {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .25rem;
}
.step-card__icon-img { width: 30px; height: 30px; flex: 0 0 auto; }
.step-card__icon-wrap svg.step-card__icon-img { color: inherit; }
.step-card__num {
    position: absolute;
    top: -8px; right: -20px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ink-1000);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.step-card__title { font-size: 1.125rem; margin: 0; color: var(--ink-1000); font-weight: 700; }
.step-card__desc { color: var(--ink-550); font-size: 0.875rem; margin: 0;}

/* WHO STORES WITH US (features-grid) ----- */
.fgrid-sec { padding: var(--section-space) 0;}
.fgrid-sec__head { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.fgrid-sec__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem;margin: 0 auto; }
.feature-card {
    background: var(--bg-grey);
    border-radius: var(--radius);
    padding: 2rem;border: 1px solid #e8eaee;
    transition: background var(--transition);
}
.feature-card:hover { box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);}
.feature-card__title { font-size: 1.125rem; margin: 0 0 .5rem; color: var(--ink-1000); font-weight: 700; }
.feature-card__desc { color: var(--ink-550); margin: 0; font-size: 0.875rem; }
.fgrid-sec__cta { text-align: center; margin-top: 2.5rem; }
.fgrid-sec__cta .btn {font-size: 0.875rem;}

/* MAP + LOCATION ------------------------- */
.mloc-sec { color: #fff; padding: var(--section-space) 0; }
.mloc-sec .sec__heading { color: #fff; margin-bottom: 1.5rem;}
.mloc-sec .body__text { color: rgba(255, 255, 255, 0.8); }
.mloc-sec__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.mloc-sec__map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.mloc-sec__map iframe { width: 100%; height: 320px; border: 0; display: block; }
.mloc-sec__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.mloc-pill {
    display: inline-block;
    padding: .35rem .85rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
}

/* CHECKLIST (What You Get With Every Unit) */
.chk-sec { padding: var(--section-space) 0;}
.chk-sec__head { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.chk-sec__list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem;  margin: 0 auto; }
.chk-item {
    display: flex;
    /* align-items: center; */
    gap: .85rem;
    background: var(--bg-grey);
    border-radius: var(--radius);
    padding: 1.5rem;border: 1px solid #e8eaee;
}
.chk-item__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: #c4b5a01a;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chk-item__icon-img { width: 18px; height: 18px; flex: 0 0 auto; }
.chk-item__icon svg.chk-item__icon-img { color: inherit; }
.chk-item__text { color: var(--ink-800); font-size: 0.875rem; line-height: 1.35; font-weight: 500; }

/* PROTECTED BANNER ----------------------- */
.prot-sec {
    position: relative;
    color: #fff;
    background-image: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)), var(--prot-bg);
    background-size: cover;
    background-position: center;
    padding: var(--section-space) 0;
    text-align: center;
}
.prot-sec .sec__heading { color: #fff; }
.prot-sec__inner { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.prot-sec__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.5rem, 1.9rem + 2.5vw, 3.7rem); height: clamp(2.5rem, 1.9rem + 2.5vw, 3.7rem);
    border-radius: 50%;
    color: var(--primary-color);
}
.prot-sec__icon-img { width: 100%; height: 100%; flex: 0 0 auto; }
.prot-sec__icon svg.prot-sec__icon-img { color: inherit; }
.prot-sec .body__text {max-width: 672px;margin: 0 auto;}

/* TESTIMONIALS --------------------------- */
.tst-sec { padding: var(--section-space) 0;}
.tst-sec__head { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.tst-sec__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; }
.tst-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;border: 1px solid #e8eaee;
    display: flex;
    flex-direction: column;
    gap: 1rem;box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.tst-card__rating { display: inline-flex; gap: 2px; color: var(--ink-300); }
.tst-card__star { color: var(--ink-300); display: inline-flex; }
.tst-card__star svg {width: 18px;height: 18px;}
.tst-card__star.is-on { color: var(--primary-color); }
.tst-card__quote { margin: 0; color: var(--ink-550); font-size: 0.875rem; line-height: 1.55;margin-bottom: 10px;}
.tst-card__author { margin-top: auto; display: flex; flex-direction: column; gap: .15rem; }
.tst-card__author-info {line-height: 1.2;}
.tst-card__name { color: var(--ink-1000); font-weight: 700; font-size: 0.875rem;display: block;}
.tst-card__meta { color: var(--ink-550); font-style: normal;font-size: 0.75rem; }
.tst-card__rating__quote {color: #c4b5a033;display: inline-flex;align-items: center;}
.tst-card__rating__quote > svg {margin-left: auto;width: 28px;height: 28px;}
/* CTA BANNER ----------------------------- */
.cta-sec {
    padding: var(--section-space) 0;
    text-align: center;
}
.cta-sec--dark { background: var(--ink-1000); color: #fff; }
.cta-sec--dark.has-bg {
    background-image: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.78)), var(--cta-bg);
    background-size: cover;
    background-position: center;
}
.cta-sec--dark .sec__heading { color: #fff; }
.cta-sec--dark .body__text { color: rgba(255,255,255,.8); max-width: 672px;margin: 0 auto;}
.cta-sec--light { background: #fff; }
.cta-sec__inner {margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.cta-sec__meta {
    color: rgba(255,255,255,.5);
    font-size: 0.875rem;
    margin-top: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.cta-sec--light .cta-sec__meta { color: var(--ink-500); }
.cta-sec__meta-icon { width: 14px; height: 14px; flex: 0 0 auto;}
.cta-sec__meta--icon-right .cta-sec__meta-icon { order: 2; }
.cta-sec .btn__wrap {margin-top: 10px;}
.page-default-sec { padding: var(--section-space) 0; }

/* 9. Reserve Now Modal --------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem 1rem;
}
.modal.is-open { display: flex; }
.modal__panel {
    background: #fff;
    width: 100%;
    max-width: 512px;
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow-lg);
    margin: auto;
    overflow: hidden;
    animation: modalIn .25s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal__close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: rgba(255,255,255,.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background-color: #302f2f;
    transition: background var(--transition), color var(--transition);
}
.modal__close:hover { color: #fff; background: #2b2b2a; }
.modal__head {
    background: linear-gradient(
        to right bottom in oklab,
        rgb(45, 45, 45) 0%,
        rgb(58, 57, 56) 100%
      );
    color: #fff;
    padding: 2.5rem 2rem;
    text-align: center;
}
.modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    background: var(--ink-1000);
    border-radius: var(--radius-pill);
    padding: .4rem .8rem;
    margin-bottom: .9rem;
}
.modal__title { font-size: 1.875rem; margin: 0 0 .35rem; color: #fff; font-weight: 700; line-height: 1.2; }
.modal__sub {color: rgba(255,255,255,0.7);font-size: 0.875rem; margin: 0; }

.modal__body { padding: 1.5rem 2rem; }
.modal__intro { color: var(--ink-600); line-height: 1.55; margin: 0 0 1rem; }

.modal__bullets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .55rem .75rem;
    margin: 0 0 1.25rem;
    padding: 0;
}
.modal__bullets li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-600);
}
.modal__bullets li svg { color: var(--accent-color); flex: 0 0 auto; }
.modal__bullets li::before { content: none; }

.modal__pricing { display: flex; flex-direction: column; gap: 1rem; margin: 0 -.5rem 1rem; padding: 1rem;background: #f9fafb;border: 1px solid #e5e7eb; border-radius: var(--radius); }
.modal__price-block-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 700;
    margin: 0 0 .35rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.modal__price-star { color: var(--accent-color); font-size: .9rem; }
.modal__price-list { display: flex; flex-direction: column; }
.modal__price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem 0;
    font-size: .82rem;
    border: 0;
}
.modal__price-row:last-child { border-bottom: 0; }
.modal__price-size { color: var(--ink-1000); font-weight: 500; }
.modal__price-rate { color: var(--primary-color); font-weight: 700; }
.modal__price-rate em { font-style: normal; font-weight: 600; }

.modal__deposit-card {
    background: #fcfbfa;border: 1px solid #f0ece8;
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}
.modal__deposit-card strong { display: block; color: var(--ink-900); font-weight: 700; margin-bottom: .25rem; font-size: .9rem; }
.modal__deposit-card p { margin: 0; color: var(--ink-500); font-size: .82rem; line-height: 1.45; }

.modal__actions { display: flex; flex-direction: column; gap: .55rem; }
.modal__actions .btn { width: 100%; padding: .85rem 1.25rem; }
.modal__browse-btn { border: 1px solid var(--ink-200); }
.modal__browse-btn:hover { background: var(--bg-grey); }

/* RESERVE-FORM MODAL ----------------------------------------------------- */
.modal__panel--form { max-width: 560px; }
.modal__head--compact {
    padding: 1.5rem 1.75rem 1.4rem;
    text-align: left;
    border-bottom: 0;
}
.modal__head--compact .modal__title { font-size: 1.5rem; margin-bottom: .25rem; }
.modal__sub--muted { color: rgba(255,255,255,.7); font-size: .9rem; }
.modal__close--on-dark { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }
.modal__close--on-dark:hover { background: rgba(255,255,255,.16); color: #fff; }
.modal__body--form { padding: 1.5rem 1.75rem 1.75rem; }

/* Native form fallback (matches screenshot) */
.reserve-form { display: flex; flex-direction: column; gap: 1rem; }
.reserve-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.reserve-form__field { display: flex; flex-direction: column; gap: .35rem; }
.reserve-form__field label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-900);
}
.reserve-form__req { color: #d04444; margin-left: .15rem; }
.reserve-form__optional { color: var(--ink-500); font-weight: 400; font-size: .85rem; }
.reserve-form__field input,
.reserve-form__field select,
.reserve-form__field textarea {
    width: 100%;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: .7rem .85rem;
    font: inherit;
    font-size: .9rem;
    color: var(--ink-900);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.reserve-form__field input::placeholder,
.reserve-form__field textarea::placeholder { color: var(--ink-400); }
.reserve-form__field input:focus,
.reserve-form__field select:focus,
.reserve-form__field textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(196,165,116,.18);
}
.reserve-form__field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.reserve-form__deposit {
    background: #f5f0e8;
    border: 1px solid #ebe4d9;
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-top: .25rem;
}
.reserve-form__deposit strong { display: block; color: var(--ink-900); font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.reserve-form__deposit p { margin: 0; color: var(--ink-500); font-size: .82rem; line-height: 1.5; }
.reserve-form__submit { width: 100%; padding: .95rem 1.25rem; margin-top: .25rem; }

/* Style Gravity Forms output to match the design when shortcode is wired */
.modal__body--form .gform_wrapper { margin: 0; }
.modal__body--form .gform_wrapper .gform_fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal__body--form .gform_wrapper .gfield {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.modal__body--form .gform_wrapper .gfield_label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0;
}
.modal__body--form .gform_wrapper .gfield_required { color: #d04444; }
.modal__body--form .gform_wrapper input[type="text"],
.modal__body--form .gform_wrapper input[type="email"],
.modal__body--form .gform_wrapper input[type="tel"],
.modal__body--form .gform_wrapper select,
.modal__body--form .gform_wrapper textarea {
    width: 100%;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: .7rem .85rem;
    font: inherit;
    font-size: 1rem;;
    color: var(--ink-900);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.modal__body--form .gform_wrapper input:focus,
.modal__body--form .gform_wrapper select:focus,
.modal__body--form .gform_wrapper textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(196,165,116,.18);
}
.modal__body--form .gform_wrapper textarea { min-height: 90px; resize: vertical; }
.modal__body--form .gform_wrapper select {background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%20640%20640%27%3E%3Cpath%20d%3D%27M297.4%20438.6C309.9%20451.1%20330.2%20451.1%20342.7%20438.6L502.7%20278.6C515.2%20266.1%20515.2%20245.8%20502.7%20233.3C490.2%20220.8%20469.9%20220.8%20457.4%20233.3L320%20370.7L182.6%20233.4C170.1%20220.9%20149.8%20220.9%20137.3%20233.4C124.8%20245.9%20124.8%20266.2%20137.3%20278.7L297.3%20438.7z%27%20fill%3D%27%23646566%27/%3E%3C/svg%3E") !important;background-repeat: no-repeat !important;background-position: center right 10px !important;background-size: 15px !important;appearance: none !important;-webkit-appearance: none !important;-moz-appearance: none !important;padding-right: 26px !important;}
/* Side-by-side row for half-width fields */
.modal__body--form .gform_wrapper .gfield--type-email,
.modal__body--form .gform_wrapper .gfield--type-phone {
    flex: 1 1 calc(50% - .5rem);
}
.modal__body--form .gform_wrapper .gform_fields { flex-flow: row wrap; }
.modal__body--form .gform_wrapper .gfield { flex: 1 1 100%; }
.modal__body--form .gform_wrapper .gfield--type-email,
.modal__body--form .gform_wrapper .gfield--type-phone { flex: 1 1 calc(50% - .5rem); min-width: 0; }
/* GF HTML field used as the deposit card */
.modal__body--form .gform_wrapper .gfield--type-html .reserve-form__deposit { margin: 0; }
.modal__body--form .gform_wrapper .gform_footer {
    margin: 1rem 0 0;
    padding: 0;
}
.modal__body--form .gform_wrapper .gform_footer input[type="submit"],
.modal__body--form .gform_wrapper .gform_button {
    width: 100% !important;
    background: var(--ink-1000) !important;
    color: #fff !important;
    border: 0  !important;
    border-radius: var(--radius) !important;
    padding: 0.937rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem) !important;
    cursor: pointer;
    transition: background var(--transition);
}
.modal__body--form .gform_wrapper .gform_footer input[type="submit"]:hover,
.modal__body--form .gform_wrapper .gform_button:hover { background: var(--ink-800) !important; }

@media (max-width: 520px) {
    .reserve-form__row { grid-template-columns: 1fr; }
    .modal__body--form .gform_wrapper .gfield--type-email,
    .modal__body--form .gform_wrapper .gfield--type-phone { flex: 1 1 100%; }
}

/* 10. Reveal animations + reduced-motion --------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Stagger children of [data-stagger] — JS sets `--i` on each child */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease, transform 500ms ease;
    transition-delay: calc(var(--i, 0) * 90ms);
}
[data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .reveal, [data-stagger] > * { opacity: 1; transform: none; }
}

/* 11. Responsive --------------------------------------------------------- */
@media (min-width: 768px){
    .pricing-table__sqft span {
        display: none;
    }
}
@media (min-width: 640px){
    .top-bar .top-bar__mobile-text {
        display: none;
    }
}
@media (max-width: 1024px) {
    .site-header__nav-wrap { display: none; }
    .site-header__toggle { display: inline-flex; }
    .top-bar { font-size: .75rem; }
    .top-bar__group { justify-content: center; }

    .imgcnt-sec__inner,
    .mloc-sec__inner { grid-template-columns: 1fr; }
    .imgcnt-sec--image-left .imgcnt-sec__inner { direction: ltr; }

    .iblurb-sec__grid { grid-template-columns: repeat(2, 1fr); }
    .steps-sec__grid { grid-template-columns: repeat(2, 1fr); }
    .fgrid-sec__grid { grid-template-columns: repeat(2, 1fr); }
    .chk-sec__list  { grid-template-columns: repeat(2, 1fr); }
    .tst-sec__grid  { grid-template-columns: 1fr; }

    .site-footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .pricing-table__grid { font-size: .875rem; }
    .pricing-table__grid th,
    .pricing-table__grid td { padding: .75rem .9rem; }
    .iblurb-sec__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {

    .btn {padding: 0.837rem 1.3rem;}

    .steps-sec__grid,
    .fgrid-sec__grid,
    .chk-sec__list { grid-template-columns: 1fr; }
    .site-footer__top { grid-template-columns: 1fr; }
    .modal__bullets { grid-template-columns: 1fr; }
    .hero-sec--big { min-height: 0; padding-top: 4rem; padding-bottom: 4rem; }

    .pricing-table__head { padding: 1rem 1.1rem; }

    .floating-badge { right: .75rem; bottom: .75rem; padding: .55rem .75rem .55rem .65rem; }
    .floating-badge__action { font-size: .8rem; }
    .floating-badge__label { font-size: .58rem; }

    /* Mobile pricing tables — collapse rows into stacked cards. */
    .pricing-table__scroll { overflow-x: visible; }
    .pricing-table__grid,
    .pricing-table__grid thead,
    .pricing-table__grid tbody,
    .pricing-table__grid tr,
    .pricing-table__grid td { display: block; width: 100%; }
    .pricing-table__grid thead { display: none; }
    .pricing-table__grid tbody {
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }
    .pricing-table--premium .pricing-table__grid th, .pricing-table--premium .pricing-table__grid td {padding: 0;}
    .pricing-table--standard .pricing-table__grid tbody { padding: .75rem 1rem 1rem; }
    .pricing-table__grid tr {
        background: #fff;
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-lg);
        padding: 1rem 1.15rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: .75rem;
        row-gap: .25rem;
    }
    .pricing-table--premium .pricing-table__grid tr {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2)
    }
    .pricing-table--standard .pricing-table__grid tr.is-popular {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 1px var(--accent-color) inset;
    }
    .pricing-table__grid td { padding: 0; border: 0; }

    /* Layout: place every td via grid-column, hide nothing, no labels rendered */
    .pricing-table__grid td.pricing-table__size {
        width: 50%;
        order: 1;
        font-weight: 700;
        font-size: 1rem;
        color: var(--ink-900);
        white-space: normal;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem;
    }
    .pricing-table--premium .pricing-table__grid td.pricing-table__size { color: #fff; }
    .pricing-table__grid td.pricing-table__rate {
        width: calc(50% - .75rem);
        order: 2;
        text-align: right;
        font-weight: 700;
        font-size: 1rem;
    }
    .pricing-table__grid td.pricing-table__sqft {
        width:100%;order: 3;
        font-size: .82rem;
        color: var(--ink-500);
        line-height: 1.3;
    }
    .pricing-table--premium .pricing-table__grid td.pricing-table__sqft { color: rgba(255,255,255,.65); width: auto;}
    /* Combine sqft + doors line on premium */
    .pricing-table__grid td.pricing-table__doors {
        order: 4;
        width: auto;
        font-size: .82rem;
        color: rgba(255,255,255,.65);
    }
    .pricing-table--premium .pricing-table__grid td.pricing-table__sqft::after {
        content: ' \00b7 ';
        opacity: .6;
    }
    .pricing-table--premium .pricing-table__grid td.pricing-table__sqft,
    .pricing-table--premium .pricing-table__grid td.pricing-table__doors {
        display: inline;
        margin-right: 0;
    }
    /* Door + Walk on the same row for Standard */
    .pricing-table__grid td.pricing-table__door,
    .pricing-table__grid td.pricing-table__walk {
        font-size: .82rem;
        color: var(--ink-550);
    }
    .pricing-table__grid td.pricing-table__door {
        order: 4;
        width: auto;
    }
    .pricing-table__grid td.pricing-table__door::before {
        content: 'Door: ';
        font-weight: 600;
        color: var(--ink-700);
    }
    .pricing-table__grid td.pricing-table__walk {
        order: 5;width: auto;
        display: inline;
    }
    .pricing-table__grid td.pricing-table__walk::before {
        content: 'Walk Door: ';
        font-weight: 600;
        color: var(--ink-700);
    }
    /* Move .walk onto same row as .door using sibling trick */
    .pricing-table__grid td.pricing-table__door + td.pricing-table__walk {
        order: 5;width: auto;
    }
    /* Best For: hidden on standard, visible on premium */
    .pricing-table--standard .pricing-table__grid td.pricing-table__best { display: none; }
    .pricing-table--premium .pricing-table__grid td.pricing-table__best {
        order: 7;
        font-size: .85rem;
        color: rgba(255,255,255,.78);
        line-height: 1.45;
        margin-top: .5rem;
    }

    .step-card__icon-wrap {position: static;}
    .step-card__num {top: 0;right: 0;}
}
@media (max-width: 639px) {
    .floating-badge .floating-badge__label {display: none;}
    .top-bar .top-bar__text {display: none;}
}
@media (max-width: 520px) {
    .btn {  justify-content: center; }
    .btn__wrap, .hero-sec__btns { flex-direction: column; align-items: stretch; }
    .top-bar__group { gap: .75rem; }
}
@media (max-width: 380px) {
    .top-bar__group.top-bar__group--right > span:last-child  {display: none;}
}

/* ==========================================================================
   12. New page layouts — FAQs, Features, Contact
   These rules are scoped to new BEM prefixes (.flist-*, .cinfo-*, .contact-form)
   plus parent-scoped overrides under .faq-sec so the home page's embedded
   .pricing-faq is not affected.
   ========================================================================== */

/* FAQ list — page-level overrides scoped under .faq-sec only */
.faq-sec .faq-sec__list { max-width: 44rem; gap: .75rem; }
.faq-sec .faq-item { border-radius: var(--radius-lg); }
.faq-sec .faq-item__q {
    padding: 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    gap: 1rem;
}
.faq-sec .faq-item__q > span:first-child { padding-right: .5rem; }
.faq-sec .faq-item__icon { width: 20px; height: 20px; }
.faq-sec .faq-item__a { padding: 0 1.5rem; font-size: 1rem; line-height: 1.65; }
.faq-sec .faq-item.is-open .faq-item__a { padding-bottom: 1.5rem; padding-top: 1rem; }
.faq-sec .faq-item__a p { margin: 0 0 .75rem; }
.faq-sec .faq-item__a p:last-child { margin-bottom: 0; }
.faq-sec .faq-item__a ul { margin: .25rem 0 .75rem; padding-left: 1.25rem; }
.faq-sec .faq-item__a li { list-style: disc; margin-bottom: .25rem; }
@media (max-width: 768px) {
    .faq-sec .faq-item__q { padding: 1.25rem; font-size: 1rem; }
    .faq-sec .faq-item__a { padding: 0 1.25rem; font-size: .9375rem; }
    .faq-sec .faq-item.is-open .faq-item__a { padding-bottom: 1.25rem; padding-top: .85rem; }
}


/* FEATURE LIST (Features page) ----------------------------------------- */
.flist-sec { padding: var(--section-space) 0; }
.flist-sec__head {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.flist-sec__list {
    max-width: 51.44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.flist-row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: #fff;
    border: 1px solid #e8eaee;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    /* Longhand so the stagger rule below can override only opacity/transform delays */
    transition-property: opacity, transform, box-shadow;
    transition-duration: 500ms, 500ms, 220ms;
    transition-timing-function: ease, ease, ease;
    transition-delay: 0ms, 0ms, 0ms;
}
.flist-row:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06); }
/* Inside a [data-stagger] parent, fan opacity + transform in per --i index;
 * box-shadow keeps a 0ms delay so hover stays snappy. */
[data-stagger] > .flist-row {
    transition-delay:
        calc(var(--i, 0) * 90ms),
        calc(var(--i, 0) * 90ms),
        0ms;
}
.flist-row__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: #c4b5a01a;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.flist-row__icon-img { width: 24px; height: 24px; flex: 0 0 auto; }
.flist-row__icon svg.flist-row__icon-img { color: inherit; }
.flist-row__content { flex: 1 1 auto; min-width: 0; }
.flist-row__title {
    font-size: 1.25rem;
    margin: 0 0 .65rem;
    color: var(--ink-1000);
    font-weight: 700;
    line-height: 1.3;
}
.flist-row__body { color: var(--ink-550); font-size: 1rem; line-height: 1.65; }
.flist-row__body p:last-child { margin-bottom: 0; }

/* Dark accent row (e.g. Honest Note) */
.flist-row--dark {
    background: var(--ink-1000);
    border-color: var(--ink-1000);
    color: #fff;
}
.flist-row--dark .flist-row__icon {
    background: rgba(255,255,255,.1);
    color: var(--primary-color);
}
.flist-row--dark .flist-row__title { color: #fff; }
.flist-row--dark .flist-row__body { color: rgba(255,255,255,.8); }
.flist-row--dark .flist-row__body strong { color: #fff; font-weight: 600; }

/* CONTACT INFO (Contact page) ----------------------------------------- */
.cinfo-sec { padding: var(--section-space) 0; }
.cinfo-sec__grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
    align-items: start;
}
.cinfo-card {
    background: #fff;
    border: 1px solid #e8eaee;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}
.cinfo-card--details { padding: 2rem; }
.cinfo-card--map { padding: 0; overflow: hidden; }

/* Form card head */
.cinfo-card__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.cinfo-card__head-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: var(--radius);
    background: #c4b5a01a;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cinfo-card__head-icon-img { width: 20px; height: 20px; }
.cinfo-card__head-icon svg.cinfo-card__head-icon-img { color: inherit; }
.cinfo-card__title {
    font-size: 1.5rem;
    margin: 0;
    color: var(--ink-1000);
    font-weight: 700;
    line-height: 1.2;
}
.cinfo-card__title--details { font-size: 1.25rem; margin-bottom: 1.5rem; }
.cinfo-card__sub { font-size: .875rem; color: var(--ink-550); margin: .15rem 0 0; }
.cinfo-card__footnote {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ink-100);
    font-size: .875rem;
    color: var(--ink-550);
}
.cinfo-card__footnote a { color: var(--primary-color); font-weight: 600; }
.cinfo-card__footnote a:hover { text-decoration: underline; }
.cinfo-card__footnote strong { color: var(--ink-1000); }

/* Gravity Forms styling inside the contact card */
.cinfo-card__form .gform_wrapper { margin: 0; }
/* Hide the auto-generated "* indicates required fields" legend */
.cinfo-card__form .gform_required_legend { display: none !important; }
/* Two-column grid so half-width fields (Name + Email) sit side by side */
.cinfo-card__form .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.cinfo-card__form .gform_wrapper .gfield { display: flex; flex-direction: column; gap: .35rem; grid-column: span 2; min-width: 0; }
.cinfo-card__form .gform_wrapper .gfield.lss-half { grid-column: span 1; }
@media (max-width: 520px) {
    .cinfo-card__form .gform_wrapper .gfield.lss-half { grid-column: span 2; }
}
.cinfo-card__form .gform_wrapper .gfield_label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink-1000);
    margin: 0;
}
.cinfo-card__form .gform_wrapper .gfield_required { color: #d04444; margin-left: .15rem; }
.cinfo-card__form .gform_wrapper input[type="text"],
.cinfo-card__form .gform_wrapper input[type="email"],
.cinfo-card__form .gform_wrapper input[type="tel"],
.cinfo-card__form .gform_wrapper textarea {
    width: 100%;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: .75rem .9rem;
    font: inherit;
    font-size: .95rem;
    color: var(--ink-900);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cinfo-card__form .gform_wrapper input::placeholder,
.cinfo-card__form .gform_wrapper textarea::placeholder { color: var(--ink-400); }
.cinfo-card__form .gform_wrapper input:focus,
.cinfo-card__form .gform_wrapper textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(196,165,116,.18);
}
.cinfo-card__form .gform_wrapper textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.cinfo-card__form .gform_wrapper .gfield_description { font-size: .8rem;  margin-top: .25rem; }
.cinfo-card__form .gform_wrapper .gform_footer { margin: 1.25rem 0 0; padding: 0; }
.cinfo-card__form .gform_wrapper .gform_footer .gform_button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--ink-1000) !important;
    color: #fff !important;
    border: 0  !important;
    border-radius: var(--radius) !important;
    padding: .937rem 1.5rem  !important;
    font-weight: 600  !important;
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem) !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background var(--transition);
}
.cinfo-card__form .gform_wrapper .gform_footer .gform_button:hover { background: var(--ink-800) !important; }
.cinfo-card__form .gform_wrapper .gform_footer .gform_button .btn__icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* Validation — red copy + red field outline */
.cinfo-card__form .gfield_validation_message,
.cinfo-card__form .gform_validation_errors,
.cinfo-card__form .gform_validation_errors h2,
.cinfo-card__form .gfield_error .gfield_label,
.cinfo-card__form .gfield_required { color: #d04444; }
.cinfo-card__form .gfield_error input,
.cinfo-card__form .gfield_error textarea {
    border-color: #d04444 !important;
    box-shadow: 0 0 0 3px rgba(208, 68, 68, .15) !important;
}
.cinfo-card__form .gform_validation_errors {
    background: rgba(208, 68, 68, .08);
    border: 1px solid rgba(208, 68, 68, .25);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin: 0 0 1rem;
    font-size: .9rem;
}
.cinfo-card__form .gform_confirmation_message {
    background: #f5f0e8;
    border: 1px solid #ebe4d9;
    color: var(--ink-900);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    font-size: .95rem;
}
.cinfo-card__placeholder {
    color: var(--ink-500);
    font-size: .9rem;
    background: var(--bg-grey);
    border: 1px dashed var(--ink-200);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0;
}

/* Details list */
.cinfo-details { display: flex; flex-direction: column; gap: 1.25rem;line-height: 1.2; }
.cinfo-detail { display: flex; align-items: flex-start; gap: 1rem; }
.cinfo-detail__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: var(--radius);
    background: #c4b5a01a;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cinfo-detail__icon-img { width: 18px; height: 18px; flex: 0 0 auto; }
.cinfo-detail__icon svg.cinfo-detail__icon-img { color: inherit; }
.cinfo-detail__text { min-width: 0; }
.cinfo-detail__label { font-size: .875rem; font-weight: 600; color: var(--ink-1000); margin: 0 0 .15rem; }
.cinfo-detail__value { color: var(--ink-550);font-size: .95rem; margin: 0; word-break: break-word; }
a.cinfo-detail__value {color: var(--primary-color);}
a.cinfo-detail__value:hover { text-decoration: underline;color: var(--ink-550); }
.cinfo-detail__meta { color: var(--ink-500); font-size: .8rem; margin: .15rem 0 0; }

/* Map card */
.cinfo-map iframe,
.cinfo-map > * { width: 100%; height: 224px; min-height: 224px; border: 0; display: block; }
.cinfo-map__link {
    display: block;
    padding: 1rem;
    text-align: center;
    font-size: .875rem;
    font-weight: 600;
    color: var(--primary-color);
}
.cinfo-map__link:hover { text-decoration: underline; }

/* Callout */
.cinfo-callout {
    background: rgba(196,181,160,.08);
    border: 1px solid rgba(196,181,160,.25);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    color: var(--ink-1000);
    font-size: .9rem;
    line-height: 1.55;
}
.cinfo-callout p:last-child { margin-bottom: 0; }
.cinfo-callout a { color: var(--primary-color); font-weight: 600; }
.cinfo-callout a:hover { text-decoration: underline; }

.cinfo-aside { display: flex; flex-direction: column; gap: 1.5rem; }

/* Responsive — reuse same breakpoints as the rest of the system */
@media (max-width: 1024px) {
    .cinfo-sec__grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
    .flist-row { padding: 1.5rem; gap: 1rem; }
    .flist-row__title { font-size: 1.125rem; }
    .cinfo-card { padding: 1.5rem; }
    .cinfo-card__form .gform_wrapper .gform_footer input[type="submit"],
    .cinfo-card__form .gform_wrapper .gform_button { width: 100% !important; }
}


/* UNITS LIST (Units & Pricing page) ----------------------------------- */
.units-sec { padding: var(--section-space) 0; }
.units-sec__head {
    text-align: left;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.units-sec__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    font-size: clamp(1.375rem, 1.15rem + 0.55vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var()var(--ink-1000);
    margin: 0;
}
.units-sec__heading-text { display: inline; }
.units-sec__sub {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--primary-color);
    font-size:0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}
.units-sec__sub-icon { display: inline-flex; align-items: center; line-height: 0; }
.units-sec__sub-icon-svg { width: 14px; height: 14px; color: var(--primary-color); }
.units-sec__heading .green__color { color: var(--primary-color); }
.units-sec__aside {
    color: var(--ink-550);
    font-weight: 400;
    font-size: 1rem;
    margin-left: -.15rem;
}
.units-sec__desc {
    color: var(--ink-550);
    max-width: 60rem;
    font-size: .9375rem;
    line-height: 1.6;
}
.units-sec--premium .units-sec__heading { color: #fff; }
.units-sec--premium .units-sec__desc { color: rgba(255,255,255,.72); }
.units-sec--premium .units-sec__aside { color: rgba(255,255,255,.6); }
.units-sec--premium .units-sec__sub {
    color: var(--primary-color);
}

.units-sec__list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Card */
.unit-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
    transition-property: opacity, transform, box-shadow, border-color;
    transition-duration: 500ms, 500ms, 220ms, 220ms;
    transition-timing-function: ease, ease, ease, ease;
    transition-delay: 0ms, 0ms, 0ms, 0ms;
    color: var(--ink-700);
}
[data-stagger] > .unit-card {
    transition-delay:
        calc(var(--i, 0) * 90ms),
        calc(var(--i, 0) * 90ms),
        0ms, 0ms;
}
.unit-card:hover {
    box-shadow: 0 8px 20px -8px rgba(0,0,0,.12);
    border-color: #d9d9d9;
}

.units-sec--premium .unit-card {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255,255,255,.82);
}

/* "Most Popular" ribbon — bar across the top of the popular card */
.unit-card--popular {
    border-color: var(--primary-color);
    overflow: hidden;
    padding-top: 0;
}
.unit-card__ribbon {
    display: block;
    background: var(--ink-1000);
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: .5rem 1rem;
    margin: 0 -2rem 2rem;
}

.unit-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1rem;
}
.unit-card__top-left {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.unit-card__top-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
    text-align: right;
    width: 12.5rem;
}

.unit-card__size-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .55rem;
    width: 100%;
}
.unit-card__size-row .unit-card__price { margin-left: auto; }
.unit-card__size {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.units-sec--premium .unit-card__size { color: #ffffff; }

.unit-pill {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
}
/* Sq ft pill — soft tan/cream on every variant */
.unit-pill--sqft {
    background: #c4b5a01a;
    color: #a08055;
}
/* Accent pills (Walk Door, 2 Overhead Doors, Partition + Walk Door):
 * dark chip on light cards, soft tan chip on dark cards. */
.unit-pill--accent {
    background: #2d2d2d1a;
    color: var(--ink-1000);
}
.units-sec--premium .unit-pill--sqft {
    background: rgba(196,165,116,.18);
    color: var(--primary-color);
}
.units-sec--premium .unit-pill--accent {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.unit-card__title {
    color: var(--ink-550);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}
.units-sec--premium .unit-card__title {color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
    font-weight: 700;}

.unit-card__price {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    letter-spacing: -0.015em;
    text-align: right;
    margin: 0;
}
.unit-card__price-unit {
    color: #8a8a8a;
    font-size: .8125rem;
    font-weight: 500;
    margin-left: .15rem;
    letter-spacing: 0;
}
.units-sec--premium .unit-card__price-unit { color: rgba(255,255,255,.45); }

.unit-card__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .45rem;
    width: 100%;
}
.unit-card__btn {
    width: 100%;
    padding: .6rem .85rem;
    font-size: 0.875rem;
    line-height: 1;
    border-radius: var(--radius);
    justify-content: center;
}
.unit-card__btn.btn__secondary {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}
.unit-card__btn.btn__secondary:hover { background: #000; border-color: #000; color: #fff; }
.unit-card__btn.btn__outline {
    background: #fff;
    color: #4a4a4a;
    border-color: #d8d8d8;
}
.unit-card__btn.btn__outline:hover { background: #f5f5f5; color: #1a1a1a; border-color: #c0c0c0; }
.unit-card__btn--call { gap: .4rem; }
.unit-card__btn--call .btn__icon { width: 13px; height: 13px; }
.units-sec--premium .unit-card__btn.btn__secondary {
    background: #1f1f1f;
    border-color: #2a2a2a;
    color: #fff;
}
.units-sec--premium .unit-card__btn.btn__secondary:hover {
    background: #000;
    border-color: #1a1a1a;
    color: #fff;
}
.units-sec--premium .unit-card__btn.btn__outline {
    background: transparent;
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.18);
}
.units-sec--premium .unit-card__btn.btn__outline:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
    border-color: rgba(255,255,255,.32);
}

.unit-card__desc {
    color: var(--ink-550);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    max-width: none;
    text-align: left;
}
.units-sec--premium .unit-card__desc {
    color: rgba(255,255,255,.65);
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 600;
}

.unit-card__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem 1.5rem;
    margin-bottom: 1rem;
}
.unit-card__specs-col {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.unit-card__spec {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #4a4a4a;
    font-size: .875rem;
    line-height: 1.45;
}
.units-sec--premium .unit-card__spec { color: rgba(255,255,255,.78); }
.unit-card__spec-tick {
    flex: 0 0 auto;
    color: var(--primary-color);
    display: inline-flex;
    margin-top: .15rem;
}

.unit-card__best {
    margin: 0;
    padding-top: .25rem;
    color: #5a5a5a;
    font-size: 0.875rem;
    line-height: 1.5;
}
.unit-card__best-label {
    color: #1a1a1a;
    font-weight: 700;
}
.units-sec--premium .unit-card__best { border-top-color: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.units-sec--premium .unit-card__best-label { color: #ffffff; }

/* Units list responsive */
@media (max-width: 900px) {
    .unit-card__top { flex-direction: column; gap: 1rem; }
    .unit-card__top-right { align-items: stretch; text-align: left; width: 100%; }
    .unit-card__cta { width: 100%; }
    .unit-card__price { font-size: 1.5rem; text-align: left; }
    .unit-card__specs { grid-template-columns: 1fr; gap: .4rem; }
}
@media (max-width: 768px) {
    .unit-card { padding: 1.25rem; }
    .unit-card__ribbon { margin: 0 -1.25rem 1.25rem; }
    .unit-card--popular { padding-top: 0; }
    .unit-card__size { font-size: 1.25rem; }
    .units-sec__heading { font-size: 1.375rem; gap: .5rem; }
}


/* SIZE GUIDE (Units page — "Not Sure What Size You Need?") -------------- */
.sguide-sec { padding: var(--section-space) 0; }
.sguide-sec__head {
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.sguide-sec__heading { color: #1a1a1a; }
.sguide-sec__heading .green__color { color: var(--primary-color); }
.sguide-sec__list {
    max-width: 44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sguide-card {
    background: var(--bg-grey);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.4rem 1.25rem;
    box-shadow: none;
    transition-property: opacity, transform, background-color, border-color;
    transition-duration: 500ms, 500ms, 220ms, 220ms;
    transition-timing-function: ease, ease, ease, ease;
    transition-delay: 0ms, 0ms, 0ms, 0ms;
}
[data-stagger] > .sguide-card {
    transition-delay:
        calc(var(--i, 0) * 90ms),
        calc(var(--i, 0) * 90ms),
        0ms, 0ms;
}
.sguide-card__head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .25rem;
}
.sguide-card__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sguide-card__icon-img { width: 20px; height: 20px; }
.sguide-card__icon svg.sguide-card__icon-img { color: inherit; }
.sguide-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-1000);
    line-height: 1.4;
}
.sguide-card__body {
    color: var(--ink-550);;
    font-size: 1rem;
    line-height: 1.6;
    margin-left: calc(22px + .65rem);
}
.sguide-card__body p { margin: 0 0 .35rem; }
.sguide-card__body p:last-child { margin-bottom: 0; }

.sguide-sec__foot {
    margin: 1.5rem auto 0;
    max-width: 44rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
}
.sguide-sec__cta {
	margin-top: 1rem;
}
.sguide-sec__footnote {
    color: var(--ink-1000);
    font-size: 1rem;
    line-height: 1.65;font-weight: 700;
}

.sguide-sec__footnote p { margin: 0; }
.sguide-sec__footnote p + p { margin-top: .5rem; }
.sguide-sec__footnote strong { color: #1a1a1a; font-weight: 700; }

@media (max-width: 768px) {
    .sguide-card { padding: 1rem 1.15rem 1.1rem; }
    .sguide-card__body { margin-left: 0; }
}


/* NORMAL SECTION (generic long-form content) -------------------------- */
.normal-sec { padding: var(--section-space) 0; }
.normal-sec__inner {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.normal-sec__head {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.normal-sec__body { font-size: 1.0625rem; line-height: 1.7; }
.normal-sec__body h2,
.normal-sec__body h3,
.normal-sec__body h4 {
    color: var(--ink-1000);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.75rem 0 .75rem;
}
.normal-sec__body h2 { font-size: 1.5rem; }
.normal-sec__body h3 { font-size: 1.25rem; }
.normal-sec__body h4 { font-size: 1.125rem; }
.normal-sec__body p { margin: 0 0 1rem; }
.normal-sec__body ul,
.normal-sec__body ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.normal-sec__body li { margin-bottom: .35rem; }
.normal-sec__body ul li { list-style: disc; }
.normal-sec__body ol li { list-style: decimal; }
.normal-sec__body a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.normal-sec__body a:hover { color: var(--primary-color-dark); }
.normal-sec__buttons { margin-top: .75rem; }

/* Text alignment variants (left default) */
.normal-sec--align-left  .normal-sec__inner { text-align: left; }
.normal-sec--align-left  .normal-sec__buttons { justify-content: flex-start; }

.normal-sec--align-center .normal-sec__inner { text-align: center; align-items: center; }
.normal-sec--align-center .normal-sec__head { align-items: center; }
.normal-sec--align-center .normal-sec__body ul,
.normal-sec--align-center .normal-sec__body ol { display: inline-block; text-align: left; padding-left: 1.25rem; }
.normal-sec--align-center .normal-sec__buttons { justify-content: center; }

.normal-sec--align-right .normal-sec__inner { text-align: right; align-items: flex-end; }
.normal-sec--align-right .normal-sec__head { align-items: flex-end; }
.normal-sec--align-right .normal-sec__body ul,
.normal-sec--align-right .normal-sec__body ol { display: inline-block; text-align: left; padding-left: 1.25rem; }
.normal-sec--align-right .normal-sec__buttons { justify-content: flex-end; }

@media (max-width: 768px) {
    .normal-sec__body { font-size: 1rem; }
    .normal-sec__body h2 { font-size: 1.25rem; }
    .normal-sec__body h3 { font-size: 1.125rem; }
}


/* 404 page ------------------------------------------------------------- */
.nf-sec {
    background: var(--bg-grey);
    padding: clamp(4rem, 9vw, 7rem) 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.nf-sec__inner {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.nf-sec__code {
    font-size: clamp(4.5rem, 4rem + 5vw, 7.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--primary-color);
    letter-spacing: -0.04em;
    margin: 0;
}
.nf-sec__heading {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    font-weight: 700;
    color: var(--ink-1000);
    line-height: 1.2;
    margin: 0;
}
.nf-sec__heading .green__color { color: var(--primary-color); }
.nf-sec__desc {
    color: var(--ink-550);
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 36rem;
    margin: 0;
}
.nf-sec__btns { margin-top: .25rem; }