/* =========================================================
   CLASSII CLEANING — BRAND CSS
   Scoped to active snippets: Hero (01), Blog Feature (10),
   Reliability (11) and Thoroughness (12), both using the
   reusable Spotlight pattern with a mirror modifier.
   All selectors target only brand/component classes.
   Webware wrapper classes are never targeted or overridden.
   ========================================================= */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,700&display=swap');

/* ---------- Brand tokens ---------- */
:root {
    --brand-navy:        #0B1B3B;
    --brand-gold:        #C9A227;
    --brand-gold-light:  #EBC966;
    --brand-cream:       #FBF6EC;
    --brand-black:       #0A0F12;
    --brand-white:       #FFFFFF;

    --brand-body:        #2B2B2B;
    --brand-muted:       #8A8A8A;
    --brand-rule:        #E5E5E5;

    --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Background utility ---------- */
/* !important is needed to defeat Webware's `.is-wrapper > div { background: transparent; }`,
   which has specificity (0,1,1) — higher than these single-class utilities (0,1,0). */
.bg-white { background-color: var(--brand-white) !important; }
.bg-navy  { background-color: var(--brand-navy)  !important; color: var(--brand-white); }
.bg-cream { background-color: var(--brand-cream) !important; }
.bg-black { background-color: var(--brand-black) !important; color: var(--brand-white); }

/* ---------- Blog Feature (editorial promo, no image) ---------- */
.blog-feature {
    background-color: var(--brand-cream) !important; /* defeats .is-wrapper > div transparent override */
    overflow: hidden;
    position: relative;
}

.blog-feature__content {
    padding: 36px 12px 36px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-feature__aside {
    padding: 36px 0 36px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.blog-feature__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-black);
    margin: 0 0 28px;
}
.blog-feature__kicker-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background: var(--brand-gold);
    transition: width .5s var(--ease-out);
}
.blog-feature:hover .blog-feature__kicker-line {
    width: 64px;
}

.blog-feature__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--brand-black);
    margin: 0 0 28px;
    max-width: 560px;
}
.blog-feature__mark {
    color: var(--brand-gold);
    font-style: italic;
    display: inline-block;
    transform-origin: center bottom;
    transition: transform .5s var(--ease-out), color .3s ease;
}
.blog-feature__heading:hover .blog-feature__mark {
    transform: rotate(-8deg) translateY(-2px) scale(1.05);
}

.blog-feature__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.75;
    color: var(--brand-body);
    margin: 0;
    max-width: 520px;
}

.blog-feature__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--brand-white);
    color: var(--brand-black);
    padding: 36px 36px 32px;
    border-radius: 4px;
    text-decoration: none;
    width: 100%;
    max-width: 440px;
    min-height: 340px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(11, 27, 59, 0.06), 0 1px 2px rgba(11, 27, 59, 0.04);
    transition: transform .45s var(--ease-out), box-shadow .45s ease;
    will-change: transform;
}
.blog-feature__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: border-color .45s ease;
    pointer-events: none;
    z-index: 2;
}
.blog-feature__card:hover,
.blog-feature__card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(11, 27, 59, 0.16), 0 1px 2px rgba(11, 27, 59, 0.04);
    outline: none;
}
.blog-feature__card:hover::before,
.blog-feature__card:focus-visible::before {
    border-color: var(--brand-gold);
}

/* Top kicker — anchors the top of the card */
.blog-feature__card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 32px;
    position: relative;
    z-index: 1;
}
.blog-feature__card-kicker-line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--brand-gold);
    transition: width .5s var(--ease-out);
}
.blog-feature__card:hover .blog-feature__card-kicker-line,
.blog-feature__card:focus-visible .blog-feature__card-kicker-line {
    width: 48px;
}

/* Body — title, rule, subtitle */
.blog-feature__card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.blog-feature__card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: var(--brand-black);
    margin: 0 0 18px;
    transition: color .35s ease;
}
.blog-feature__card:hover .blog-feature__card-title,
.blog-feature__card:focus-visible .blog-feature__card-title {
    color: var(--brand-gold);
}

.blog-feature__card-rule {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--brand-gold);
    margin: 0 0 20px;
    transition: width .5s var(--ease-out);
}
.blog-feature__card:hover .blog-feature__card-rule,
.blog-feature__card:focus-visible .blog-feature__card-rule {
    width: 64px;
}

.blog-feature__card-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
    color: var(--brand-body);
    margin: 0;
    max-width: 100%;
}

/* Bottom CTA — hairline divider above, text + arrow */
.blog-feature__card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 28px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--brand-rule);
    position: relative;
    z-index: 1;
    transition: border-top-color .45s ease;
}
.blog-feature__card:hover .blog-feature__card-cta,
.blog-feature__card:focus-visible .blog-feature__card-cta {
    border-top-color: var(--brand-gold);
}

.blog-feature__card-cta-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-navy);
    transition: color .35s ease;
}
.blog-feature__card:hover .blog-feature__card-cta-text,
.blog-feature__card:focus-visible .blog-feature__card-cta-text {
    color: var(--brand-gold);
}

.blog-feature__card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-gold);
    color: var(--brand-white);
    flex-shrink: 0;
    transition: background-color .45s ease, transform .45s var(--ease-out);
}
.blog-feature__card-arrow svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: transform .45s var(--ease-out);
}
.blog-feature__card:hover .blog-feature__card-arrow,
.blog-feature__card:focus-visible .blog-feature__card-arrow {
    background: var(--brand-navy);
}
.blog-feature__card:hover .blog-feature__card-arrow svg,
.blog-feature__card:focus-visible .blog-feature__card-arrow svg {
    transform: translateX(4px);
}

/* ---------- Spotlight (editorial composition with overlapping testimonial) ---------- */
/* Default direction: media on left, content on right.                                 */
/* Add .spotlight--mirror on the section to flip the layout (media on right).          */
.spotlight {
    position: relative;
    overflow: hidden;
}

/* Media column (image + overlapping testimonial) */
.spotlight__media-col {
    position: relative;
    padding: 24px 24px 40px 0;
}
.spotlight__media-col::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
    border: 3px solid var(--brand-gold);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
    transition: transform .6s var(--ease-out);
}
.spotlight__media-col:hover::before {
    transform: translate(8px, -8px);
}

.spotlight__media {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 24px 50px rgba(11, 27, 59, 0.14);
}
.spotlight__media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .9s var(--ease-out);
}
.spotlight__media-col:hover .spotlight__media img {
    transform: scale(1.04);
}

/* Overlapping testimonial card */
.spotlight__quote {
    position: relative;
    z-index: 2;
    background: var(--brand-white);
    padding: 30px 32px 28px;
    margin: -70px 0 0 56px;
    max-width: 380px;
    box-shadow: 0 22px 45px rgba(11, 27, 59, 0.14);
    border-radius: 2px;
    transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.spotlight__quote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--brand-gold);
}
.spotlight__quote:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(11, 27, 59, 0.18);
}

.spotlight__quote-mark {
    position: absolute;
    top: 4px;
    right: 22px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 90px;
    line-height: 1;
    color: var(--brand-gold);
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
}

.spotlight__quote-text {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 19px;
    line-height: 1.5;
    color: var(--brand-black);
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    position: relative;
    z-index: 1;
}

.spotlight__quote-author {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.spotlight__quote-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-gold);
    color: var(--brand-white);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    transition: background-color .35s ease, transform .35s var(--ease-out);
}
.spotlight__quote:hover .spotlight__quote-avatar {
    background: var(--brand-navy);
    transform: rotate(-6deg);
}
.spotlight__quote-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-style: normal;    /* override <cite> default italic */
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-black);
}

/* Content column */
.spotlight__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 0 36px 24px;
}

.spotlight__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-black);
    margin: 0 0 28px;
}
.spotlight__kicker-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background: var(--brand-gold);
}

.spotlight__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--brand-black);
    margin: 0 0 28px;
}
.spotlight__heading em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
}

.spotlight__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.75;
    color: var(--brand-body);
    margin: 0;
    max-width: 500px;
}

/* Mirror modifier — flips the layout so media sits on the right.
   Flips: media-col padding, gold accent corner, testimonial overlap direction,
   content column padding, and the hover translate of the accent. */
.spotlight--mirror .spotlight__media-col {
    padding: 24px 0 40px 24px;
}
.spotlight--mirror .spotlight__media-col::before {
    right: auto;
    left: 0;
}
.spotlight--mirror .spotlight__media-col:hover::before {
    transform: translate(-8px, -8px);
}
.spotlight--mirror .spotlight__quote {
    margin: -70px 56px 0 0;
}
.spotlight--mirror .spotlight__quote::before {
    left: auto;
    right: 0;
}
.spotlight--mirror .spotlight__quote-mark {
    right: auto;
    left: 22px;
}
.spotlight--mirror .spotlight__content {
    padding: 36px 24px 36px 0;
}

/* ---------- Atlas (service areas — editorial magazine layout, reusable across pages) ---------- */
.atlas {
    position: relative;
    overflow: hidden;
}
.atlas::before {
    content: "SA";
    position: absolute;
    bottom: -40px;
    right: 25px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 460px;
    line-height: 1;
    color: var(--brand-gold);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: transform .8s var(--ease-out), opacity .6s ease;
}
.atlas:hover::before {
    transform: translate(-12px, -12px);
    opacity: 0.09;
}

.atlas__header,
.atlas__main,
.atlas__aside {
    position: relative;
    z-index: 1;
}

/* Header band */
.atlas__header {
    text-align: center;
    padding: 36px 12px 32px;
}
.atlas__ornament {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--brand-gold);
    margin-bottom: 18px;
}
.atlas__ornament-line {
    display: inline-block;
    width: 50px;
    height: 1.5px;
    background: var(--brand-gold);
}
.atlas__ornament-mark {
    width: 10px;
    height: 10px;
    fill: var(--brand-gold);
    transition: transform .6s var(--ease-out);
}
.atlas:hover .atlas__ornament-mark {
    transform: rotate(45deg);
}
.atlas__kicker {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brand-muted);
    margin: 0 0 16px;
}
.atlas__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--brand-black);
    margin: 0 auto;
    max-width: 800px;
}

/* Main column */
.atlas__main {
    padding: 24px 36px 36px 0;
}
.atlas__lead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.8;
    color: var(--brand-body);
    margin: 0;
    text-align: justify;
    hyphens: auto;
}
.atlas__lead::first-letter {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 92px;
    line-height: 0.85;
    color: var(--brand-gold);
    float: left;
    margin: 8px 14px -4px 0;
    padding: 0;
}

/* Value proposition — styled as a pull-quote */
.atlas__vprop {
    margin: 36px 0 0;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--brand-gold);
}
.atlas__vprop-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin: 0 0 14px;
}
.atlas__vprop-text {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 20px;
    line-height: 1.55;
    color: var(--brand-black);
    letter-spacing: -0.2px;
}

/* Aside column — typographic location list */
.atlas__aside {
    padding: 24px 0 36px 36px;
    border-left: 1px solid rgba(11, 27, 59, 0.08);
}
.atlas__aside-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-muted);
    margin: 0 0 6px;
}
.atlas__aside-label--secondary {
    margin-top: 28px;
}
.atlas__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.atlas__list li { margin: 0; }
.atlas__location {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.2;
    color: var(--brand-black);
    text-decoration: none;
    border-bottom: 1px solid var(--brand-rule);
    transition: padding-left .4s var(--ease-out), color .3s ease, border-bottom-color .3s ease;
}
.atlas__list li:last-child .atlas__location {
    border-bottom: 0;
}
.atlas__location:hover,
.atlas__location:focus-visible {
    padding-left: 12px;
    color: var(--brand-gold);
    border-bottom-color: var(--brand-gold);
    outline: none;
}
.atlas__pin {
    width: 14px;
    height: 14px;
    stroke: var(--brand-gold);
    flex-shrink: 0;
    transition: transform .35s var(--ease-out);
}
.atlas__location:hover .atlas__pin,
.atlas__location:focus-visible .atlas__pin {
    transform: translateY(-2px) scale(1.15);
}

/* ---------- Our Story (Editorial Founder's Note) ---------- */
.story {
    position: relative;
    overflow: hidden;
}

/* Dual italic-quote watermarks — open quote top-left, close quote bottom-right.
   The entire essay reads as visually "quoted" between them. Both drift slightly
   on section hover, like the frame breathing in. */
.story::before,
.story::after {
    position: absolute;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 460px;
    line-height: 1;
    color: var(--brand-gold);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: transform .9s var(--ease-out), opacity .6s ease;
}
.story::before {
    content: "\201C"; /* left double quote */
    top: -22px;
    left: -40px;
}
.story::after {
    content: "\201D"; /* right double quote */
    bottom: -175px;
    right: 20px;
}
.story:hover::before {
    transform: translate(12px, 12px);
    opacity: 0.1;
}
.story:hover::after {
    transform: translate(-12px, -12px);
    opacity: 0.1;
}

.story__inner {
    position: relative;
    z-index: 1;
    padding: 64px 0 72px;
}

.story__rule {
    display: block;
    width: 80px;
    height: 3px;
    background: var(--brand-gold);
    margin: 0 0 36px;
    transition: width .6s var(--ease-out);
}
.story:hover .story__rule {
    width: 140px;
}

/* Heading — stacked two-line, dramatic scale, "Our" regular / "Story" italic gold */
.story__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 96px;
    line-height: 0.95;
    letter-spacing: -3px;
    color: var(--brand-black);
    margin: 0 0 48px;
    text-align: left;
}
.story__heading-word {
    display: block;
}
.story__heading-em {
    display: block;
    position: relative;
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    margin-left: 0.45em;
}
/* Body paragraphs */
.story__lead,
.story__para {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.85;
    color: var(--brand-body);
    margin: 0 0 24px;
    text-align: left;
}
.story__para:last-of-type { margin-bottom: 0; }

/* Magazine "lede" — opening sentence bolder + darker for a leading-edge read */
.story__opener {
    font-weight: 600;
    color: var(--brand-black);
    letter-spacing: 0.1px;
}

/* Drop cap — bigger, more dramatic */
.story__lead::first-letter {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 132px;
    line-height: 0.85;
    color: var(--brand-gold);
    float: left;
    margin: 12px 18px -6px -4px;
    padding: 0;
}

/* Closing CTA */
.story__cta-wrap {
    text-align: center;
    margin-top: 56px;
}
.story__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.story__cta:hover,
.story__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.story__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.story__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.story__cta:hover .story__cta-arrow,
.story__cta:focus-visible .story__cta-arrow {
    transform: translateX(6px);
}

/* ---------- Mission (typographic manifesto on near-black) ---------- */
.mission {
    position: relative;
    overflow: hidden;
}

/* Massive italic "M" monogram centered behind the statement.
   Different glyph from atlas ("C"), story (""), and the previous "&" — feels
   like a watermark monogram on a luxury hotel wall. Very faint, brightens on hover. */
.mission::before {
    content: "M";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 720px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.035;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: transform 1.4s var(--ease-out), opacity .8s ease;
}
.mission:hover::before {
    opacity: 0.06;
    transform: translate(-50%, -50%) scale(1.04);
}

/* Soft gold radial glow at the top — atmospheric warmth on the near-black */
.mission::after {
    content: "";
    position: absolute;
    top: -260px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 680px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.16) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.mission__inner {
    position: relative;
    z-index: 1;
    padding: 96px 24px 104px;
    text-align: center;
}

/* Kicker with a soft glowing gold dot — refined, jewel-like detail */
.mission__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-gold-light);
    margin: 0 auto 44px;
}
.mission__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 14px rgba(201, 162, 39, 0.7);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.mission:hover .mission__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 22px rgba(201, 162, 39, 0.9);
}

/* The statement — display-scale Playfair, white on near-black */
.mission__statement {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.22;
    letter-spacing: -1px;
    color: var(--brand-white);
    margin: 0 auto;
    max-width: 1080px;
    text-align: center;
}

/* Three italic-gold emphases — each value gets editorial treatment.
   On section hover they lift in a staggered cascade for kinetic rhythm. */
.mission__emphasis {
    color: var(--brand-gold-light);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .45s ease, transform .55s var(--ease-out);
}
.mission:hover .mission__emphasis {
    color: var(--brand-gold);
    transform: translateY(-4px);
}
.mission:hover .mission__emphasis--1 { transition-delay: 0s, 0s; }
.mission:hover .mission__emphasis--2 { transition-delay: 0.1s, 0.1s; }
.mission:hover .mission__emphasis--3 { transition-delay: 0.2s, 0.2s; }

/* Horizontal divider below the statement — line + diamond + line.
   Lines extend on hover, diamond rotates. Acts as elegant section break. */
.mission__divider {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 56px auto 0;
    color: var(--brand-gold);
}
.mission__divider-line {
    display: inline-block;
    width: 64px;
    height: 1.5px;
    background: var(--brand-gold);
    transition: width .65s var(--ease-out);
}
.mission__divider-mark {
    width: 12px;
    height: 12px;
    fill: var(--brand-gold);
    transition: transform .85s var(--ease-out);
}
.mission:hover .mission__divider-line { width: 96px; }
.mission:hover .mission__divider-mark { transform: rotate(135deg); }

/* Closing CTA */
.mission__cta-wrap {
    margin-top: 44px;
}
.mission__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-black);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(201, 162, 39, 0.28);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.mission__cta:hover,
.mission__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 22px 48px rgba(201, 162, 39, 0.22);
    outline: none;
}
.mission__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.mission__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.mission__cta:hover .mission__cta-arrow,
.mission__cta:focus-visible .mission__cta-arrow {
    transform: translateX(6px);
}

/* ---------- Founder Letter (navy background, portrait + signed letter) ---------- */
.founder {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
}

/* Massive italic "F" monogram in the top-right, opposite the portrait.
   Different glyph from atlas (C), story (""), mission (M) so each
   section's watermark feels signature. */
.founder::before {
    content: "F";
    position: absolute;
    top: -75px;
    right: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 560px;
    line-height: 1;
    color: var(--brand-gold);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: transform 1.2s var(--ease-out), opacity .6s ease;
}
.founder:hover::before {
    transform: translate(-14px, 14px);
    opacity: 0.1;
}

/* Soft gold radial glow bottom-left — counter-balances the F monogram top-right */
.founder::after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -100px;
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.14) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Portrait — rectangular with offset gold accent, sits left.
   Echoes the spotlight image treatment for system cohesion. */
.founder__media {
    position: relative;
    z-index: 1;
    padding: 80px 40px 40px 0;
}
.founder__portrait {
    position: relative;
    margin: 0;
    display: block;
}
.founder__portrait-accent {
    position: absolute;
    top: -18px;
    left: -18px;
    width: 100%;
    height: 100%;
    background: var(--brand-gold);
    z-index: 0;
    transition: transform .65s var(--ease-out);
}
.founder__portrait-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
    transition: transform .8s var(--ease-out);
}
.founder:hover .founder__portrait-accent {
    transform: translate(-8px, -8px);
}
.founder:hover .founder__portrait-img {
    transform: translate(4px, 4px);
}

/* Intro card — kicker + tagline + hello paragraph on the right */
.founder__intro {
    position: relative;
    z-index: 1;
    padding: 80px 0 40px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.founder__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-gold-light);
    margin: 0 0 32px;
    align-self: flex-start;
}
.founder__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 14px rgba(201, 162, 39, 0.7);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.founder:hover .founder__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 22px rgba(201, 162, 39, 0.95);
}

/* Tagline — H2, large Playfair with italic-gold "clean space" */
.founder__tagline {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.12;
    letter-spacing: -1.4px;
    color: var(--brand-white);
    margin: 0 0 32px;
    text-align: left;
}
.founder__tagline-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.founder:hover .founder__tagline-em {
    color: var(--brand-gold-light);
    transform: translateY(-3px);
}

/* Hello intro paragraph — slightly larger and lighter than letter body */
.founder__hello {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 580px;
}

/* Letter body — narrow centered column, full bio with drop cap */
.founder__letter {
    position: relative;
    z-index: 1;
    padding: 32px 0 80px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Horizontal divider between intro and letter body */
.founder__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 48px;
    color: var(--brand-gold);
}
.founder__divider-line {
    display: inline-block;
    width: 64px;
    height: 1.5px;
    background: var(--brand-gold);
    transition: width .65s var(--ease-out);
}
.founder__divider-mark {
    width: 12px;
    height: 12px;
    fill: var(--brand-gold);
    transition: transform .85s var(--ease-out);
}
.founder:hover .founder__divider-line { width: 96px; }
.founder:hover .founder__divider-mark { transform: rotate(135deg); }

/* Letter paragraphs */
.founder__para {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 22px;
    text-align: left;
}
.founder__para:last-of-type { margin-bottom: 0; }

/* Lede — first sentence stronger weight, brighter, magazine convention */
.founder__opener {
    font-weight: 600;
    color: var(--brand-white);
    letter-spacing: 0.1px;
}

/* Gold drop cap on the first letter of the lead paragraph */
.founder__para--lead::first-letter {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 110px;
    line-height: 0.88;
    color: var(--brand-gold);
    float: left;
    margin: 10px 18px -4px -2px;
    padding: 0;
}

/* Signature — italic Playfair "Faith Gray" + small uppercase title */
.founder__signature {
    margin: 48px 0 0;
    text-align: right;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}
.founder__signature-name {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    color: var(--brand-gold);
    margin: 0 0 10px;
    transition: transform .5s var(--ease-out);
}
.founder:hover .founder__signature-name {
    transform: translateX(-6px);
}
.founder__signature-title {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

/* CTA */
.founder__cta-wrap {
    margin-top: 48px;
    text-align: center;
}
.founder__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-navy);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(201, 162, 39, 0.28);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.founder__cta:hover,
.founder__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 22px 48px rgba(201, 162, 39, 0.22);
    outline: none;
}
.founder__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.founder__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.founder__cta:hover .founder__cta-arrow,
.founder__cta:focus-visible .founder__cta-arrow {
    transform: translateX(6px);
}

/* ---------- Client Voices (testimonials grid on cream) ---------- */
.voices {
    position: relative;
    overflow: hidden;
}

/* Soft gold radial glow at the top — atmospheric warmth, no letter watermark
   in this section because the cards themselves carry the visual focus. */
.voices::before {
    content: "";
    position: absolute;
    top: -300px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 720px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.1) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.voices__intro {
    position: relative;
    z-index: 1;
    padding: 80px 0 48px;
    text-align: center;
}

.voices__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 28px;
}
.voices__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.voices:hover .voices__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

.voices__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0 0 32px;
    text-align: center;
}
.voices__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.voices:hover .voices__heading-em {
    transform: translateY(-3px);
}

.voices__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.85;
    color: var(--brand-body);
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* ---------- Testimonial cards ---------- */
.voices__card {
    position: relative;
    background: var(--brand-white);
    padding: 64px 36px 36px;
    margin: 24px 0;
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 36px rgba(11, 27, 59, 0.06);
    border-top: 3px solid transparent;
    transition: transform .55s var(--ease-out), box-shadow .55s ease, border-top-color .4s ease;
    z-index: 1;
}
.voices__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px rgba(11, 27, 59, 0.12);
    border-top-color: var(--brand-gold);
}

/* Big italic quote mark in the top-left corner of each card */
.voices__quote-mark {
    position: absolute;
    top: 8px;
    left: 24px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 110px;
    line-height: 1;
    color: var(--brand-gold);
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
    transition: opacity .5s ease, transform .55s var(--ease-out);
}
.voices__card:hover .voices__quote-mark {
    opacity: 0.4;
    transform: translateY(-4px);
}

/* The quote text itself — Playfair italic, premium editorial feel */
.voices__quote-text {
    position: relative;
    z-index: 1;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.6;
    color: var(--brand-black);
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    flex: 1;
}

/* Small gold rule separator between quote and author */
.voices__card-rule {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--brand-gold);
    margin: 0 0 24px;
    transition: width .55s var(--ease-out);
}
.voices__card:hover .voices__card-rule {
    width: 72px;
}

/* Author block */
.voices__author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}
.voices__avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--brand-gold);
    color: var(--brand-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
    transition: transform .5s var(--ease-out);
}
.voices__card:hover .voices__avatar {
    transform: rotate(-6deg) scale(1.05);
}
.voices__author-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
}
.voices__author-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-style: normal;          /* override <cite> default italic */
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--brand-black);
}
.voices__author-sector {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--brand-muted);
}

/* Closing CTA */
.voices__cta-wrap {
    text-align: center;
    padding: 56px 0 80px;
    position: relative;
    z-index: 1;
}
.voices__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.voices__cta:hover,
.voices__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.voices__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.voices__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.voices__cta:hover .voices__cta-arrow,
.voices__cta:focus-visible .voices__cta-arrow {
    transform: translateX(6px);
}

/* ---------- Services Grid (image-led cards on white) ---------- */
.services {
    position: relative;
    overflow: hidden;
}

/* Soft gold radial glow at the top for atmosphere */
.services::before {
    content: "";
    position: absolute;
    top: -300px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 720px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.services__intro {
    position: relative;
    z-index: 1;
    padding: 80px 0 56px;
    text-align: center;
}

.services__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 28px;
}
.services__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.services:hover .services__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

.services__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0;
    text-align: center;
}
.services__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.services:hover .services__heading-em {
    transform: translateY(-3px);
}

/* ---------- Service card (entire <a> wrapping image + body) ---------- */
.services__card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 18px 0;
    height: calc(100% - 36px);
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(11, 27, 59, 0.05);
    transition:
        border-color .45s ease,
        transform .55s var(--ease-out),
        box-shadow .55s ease;
}
.services__card:hover,
.services__card:focus-visible {
    border-color: var(--brand-gold);
    transform: translateY(-10px);
    box-shadow: 0 28px 60px rgba(11, 27, 59, 0.14);
    outline: none;
}

/* Bottom gold accent bar that grows left-to-right on hover */
.services__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .65s var(--ease-out);
    z-index: 3;
}
.services__card:hover::after,
.services__card:focus-visible::after {
    transform: scaleX(1);
}

/* ---------- Image figure ---------- */
.services__card-figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--brand-cream); /* placeholder color until image loads */
}
.services__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out), filter .55s ease;
}
.services__card:hover .services__card-image,
.services__card:focus-visible .services__card-image {
    transform: scale(1.08);
    filter: saturate(1.08) contrast(1.04);
}

/* Gold corner triangle — slides in from off-card on hover */
.services__card-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 56px 56px 0;
    border-color: transparent var(--brand-gold) transparent transparent;
    opacity: 0;
    transform: translate(18px, -18px);
    transition: opacity .5s ease, transform .6s var(--ease-out);
    z-index: 2;
    pointer-events: none;
}
.services__card:hover .services__card-corner,
.services__card:focus-visible .services__card-corner {
    opacity: 1;
    transform: translate(0, 0);
}

/* ---------- Card body ---------- */
.services__card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 32px 30px 34px;
}

/* Gold rule above title (animates wider on hover) */
.services__card-rule {
    display: block;
    width: 36px;
    height: 2px;
    background: var(--brand-gold);
    margin: 0 0 20px;
    transition: width .55s var(--ease-out);
}
.services__card:hover .services__card-rule,
.services__card:focus-visible .services__card-rule {
    width: 60px;
}

.services__card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.28;
    letter-spacing: -0.4px;
    color: var(--brand-black);
    margin: 0 0 16px;
    text-align: left;
    transition: color .35s ease;
}
.services__card:hover .services__card-title,
.services__card:focus-visible .services__card-title {
    color: var(--brand-gold);
}

.services__card-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: var(--brand-body);
    margin: 0 0 26px;
    flex: 1;
}

.services__card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin-top: auto;
}
.services__card-arrow {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    transition: transform .35s var(--ease-out);
}
.services__card:hover .services__card-arrow,
.services__card:focus-visible .services__card-arrow {
    transform: translateX(6px);
}

/* ---------- Closing CTA ---------- */
.services__cta-wrap {
    text-align: center;
    padding: 56px 0 80px;
    position: relative;
    z-index: 1;
}
.services__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.services__cta:hover,
.services__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.services__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.services__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.services__cta:hover .services__cta-arrow,
.services__cta:focus-visible .services__cta-arrow {
    transform: translateX(6px);
}


/* ---------- Promise / Residential value-prop (quiet editorial on white) ---------- */
.promise {
    position: relative;
    overflow: hidden;
}

/* Soft gold radial glow at the top — atmosphere without busy decoration */
.promise::before {
    content: "";
    position: absolute;
    top: -260px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 640px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.09) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.promise__inner {
    position: relative;
    z-index: 1;
    padding: 88px 0 96px;
    text-align: center;
}

/* Gold rule opener — section's visual lead-in. Extends on section hover. */
.promise__rule {
    display: block;
    width: 80px;
    height: 3px;
    background: var(--brand-gold);
    margin: 0 auto 36px;
    transition: width .65s var(--ease-out);
}
.promise:hover .promise__rule {
    width: 140px;
}

.promise__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 28px;
}
.promise__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.promise:hover .promise__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

/* H2 — Playfair display scale, italic-gold em on closing pull-phrase */
.promise__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0 0 40px;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.promise__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.promise:hover .promise__heading-em {
    transform: translateY(-3px);
}

/* Body — narrow centered column for editorial line-length */
.promise__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.85;
    color: var(--brand-body);
    margin: 0 auto;
    max-width: 720px;
    text-align: left;
}

/* Magazine "lede" — opening sentence in heavier weight, darker color */
.promise__opener {
    font-weight: 600;
    color: var(--brand-black);
    letter-spacing: 0.1px;
}

/* CTA */
.promise__cta-wrap {
    margin-top: 48px;
    text-align: center;
}
.promise__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.promise__cta:hover,
.promise__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.promise__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.promise__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.promise__cta:hover .promise__cta-arrow,
.promise__cta:focus-visible .promise__cta-arrow {
    transform: translateX(6px);
}


/* ---------- Features / Why-Us pillars (2x2 benefit grid on cream) ---------- */
.features {
    position: relative;
    overflow: hidden;
}

/* Soft gold radial glow at the top */
.features::before {
    content: "";
    position: absolute;
    top: -280px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 680px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.features__intro {
    position: relative;
    z-index: 1;
    padding: 72px 0 40px;
    text-align: center;
}

.features__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 28px;
}
.features__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.features:hover .features__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

.features__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0;
    text-align: center;
}
.features__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.features:hover .features__heading-em {
    transform: translateY(-3px);
}

/* ---------- Individual pillar card ---------- */
.features__card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 24px 26px;
    margin: 0;
    height: 100%;                /* fill the cell — equal heights across the row */
    position: relative;
    z-index: 1;
    text-align: left;
    background: var(--brand-white);
    border: 1px solid rgba(11, 27, 59, 0.07);
    /* Multi-layer shadow — close + medium + far gives premium depth */
    box-shadow:
        0 2px 4px rgba(11, 27, 59, 0.03),
        0 8px 16px rgba(11, 27, 59, 0.04),
        0 16px 32px rgba(11, 27, 59, 0.04);
    overflow: hidden;
    transition:
        transform .55s var(--ease-out),
        box-shadow .55s ease,
        border-color .4s ease;
}

/* Gold accent bar on the left edge — grows top-to-bottom on hover */
.features__card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .65s var(--ease-out);
    z-index: 2;
}

.features__card:hover {
    transform: translateY(-8px);
    border-color: var(--brand-gold);
    /* Deeper multi-layer shadow on hover */
    box-shadow:
        0 4px 8px rgba(11, 27, 59, 0.05),
        0 16px 32px rgba(11, 27, 59, 0.08),
        0 32px 60px rgba(11, 27, 59, 0.1);
}
.features__card:hover::before {
    transform: scaleY(1);
}

/* Gold-ringed icon — distinct on the white card bg via 2px gold border */
.features__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-white);
    border: 2px solid var(--brand-gold);
    color: var(--brand-gold);
    margin: 0;
    transition: transform .55s var(--ease-out), box-shadow .5s ease, background-color .35s ease, color .35s ease;
}

/* Expanding ripple ring around icon on hover */
.features__icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--brand-gold);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .55s ease, transform .7s var(--ease-out);
    pointer-events: none;
}
.features__card:hover .features__icon {
    transform: rotate(-6deg) scale(1.08);
    background: var(--brand-gold);
    color: var(--brand-white);
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.3);
}
.features__card:hover .features__icon::after {
    opacity: 0.35;
    transform: scale(1.35);
}
.features__icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
}

/* Content column — fills remaining horizontal space */
.features__card-content {
    flex: 1;
    min-width: 0;
}

.features__card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.28;
    letter-spacing: -0.3px;
    color: var(--brand-black);
    margin: 0 0 10px;
    text-align: left;
    transition: color .35s ease;
}
.features__card:hover .features__card-title {
    color: var(--brand-gold);
}

.features__card-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--brand-body);
    margin: 0;
}


/* ---------- Routine / Service-detail (5/7 split, image + content + check list) ---------- */
.routine {
    position: relative;
    overflow: hidden;
}

.routine::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -120px;
    width: 760px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- Image side ---------- */
.routine__media-wrap {
    padding: 60px 30px 60px 0;
    position: relative;
    z-index: 1;
}
.routine__media {
    position: relative;
    margin: 0;
    height: 100%;
    min-height: 480px;
}
.routine__media-accent {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 100%;
    height: 100%;
    background: var(--brand-gold);
    z-index: 0;
    transition: transform .65s var(--ease-out);
}
.routine__media-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    transition: transform .9s var(--ease-out);
}
.routine:hover .routine__media-accent {
    transform: translate(-8px, -8px);
}
.routine:hover .routine__media-img {
    transform: translate(4px, 4px);
}

/* ---------- Content side ---------- */
.routine__content {
    padding: 60px 0 60px 32px;
    position: relative;
    z-index: 1;
}

.routine__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 26px;
}
.routine__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.routine:hover .routine__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

.routine__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0 0 28px;
    text-align: left;
}
.routine__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.routine:hover .routine__heading-em {
    transform: translateY(-3px);
}

.routine__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.78;
    color: var(--brand-body);
    margin: 0 0 20px;
    max-width: 620px;
}

/* ---------- Bullet list with gold checkmarks ---------- */
.routine__list {
    list-style: none;
    padding: 0;
    margin: 28px 0 36px;
}
.routine__list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.55;
    color: var(--brand-black);
    margin: 0 0 14px;
    transition: transform .4s var(--ease-out);
}
.routine__list-item:last-child { margin-bottom: 0; }
.routine__list-item:hover {
    transform: translateX(4px);
}
.routine__list-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--brand-gold);
    stroke: currentColor;
    fill: none;
}

/* ---------- CTA ---------- */
.routine__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.routine__cta:hover,
.routine__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.routine__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.routine__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.routine__cta:hover .routine__cta-arrow,
.routine__cta:focus-visible .routine__cta-arrow {
    transform: translateX(6px);
}


/* ---------- Deep Cleaning / Service-detail MIRROR (image right, content left) ---------- */
.deep {
    position: relative;
    overflow: hidden;
}

/* Radial glow positioned top-left (opposite of routine's top-right) for visual rhythm */
.deep::before {
    content: "";
    position: absolute;
    top: -260px;
    left: -120px;
    width: 760px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- Image side (renders on the right via order on large viewports) ---------- */
.deep__media-wrap {
    padding: 60px 0 60px 30px;
    position: relative;
    z-index: 1;
}
.deep__media {
    position: relative;
    margin: 0;
    height: 100%;
    min-height: 480px;
}
/* Accent positioned top-RIGHT (mirrored from routine's top-left) */
.deep__media-accent {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 100%;
    height: 100%;
    background: var(--brand-gold);
    z-index: 0;
    transition: transform .65s var(--ease-out);
}
.deep__media-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    transition: transform .9s var(--ease-out);
}
/* Mirrored hover translates — accent moves up-RIGHT, image moves toward it (down-LEFT) */
.deep:hover .deep__media-accent {
    transform: translate(8px, -8px);
}
.deep:hover .deep__media-img {
    transform: translate(-4px, 4px);
}

/* ---------- Flip cell order on large viewports — content shows on LEFT visually ---------- */
@media (min-width: 1025px) {
    .deep .grid-x > .deep__media-wrap { order: 2; }
    .deep .grid-x > .deep__content { order: 1; }
}

/* ---------- Content side ---------- */
.deep__content {
    padding: 60px 32px 60px 0;
    position: relative;
    z-index: 1;
}

.deep__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 26px;
}
.deep__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.deep:hover .deep__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

.deep__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0 0 28px;
    text-align: left;
}
.deep__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.deep:hover .deep__heading-em {
    transform: translateY(-3px);
}

.deep__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.78;
    color: var(--brand-body);
    margin: 0 0 20px;
    max-width: 620px;
}

/* ---------- Bullet list with gold checkmarks ---------- */
.deep__list {
    list-style: none;
    padding: 0;
    margin: 28px 0 36px;
}
.deep__list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.55;
    color: var(--brand-black);
    margin: 0 0 14px;
    transition: transform .4s var(--ease-out);
}
.deep__list-item:last-child { margin-bottom: 0; }
.deep__list-item:hover {
    transform: translateX(4px);
}
.deep__list-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--brand-gold);
    stroke: currentColor;
    fill: none;
}

/* ---------- CTA ---------- */
.deep__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.deep__cta:hover,
.deep__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.deep__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.deep__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.deep__cta:hover .deep__cta-arrow,
.deep__cta:focus-visible .deep__cta-arrow {
    transform: translateX(6px);
}


/* ---------- Move-In / Move-Out (service-detail, image left, content right) ---------- */
.move {
    position: relative;
    overflow: hidden;
}

.move::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -120px;
    width: 760px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.move__media-wrap {
    padding: 60px 30px 60px 0;
    position: relative;
    z-index: 1;
}
.move__media {
    position: relative;
    margin: 0;
    height: 100%;
    min-height: 480px;
}
.move__media-accent {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 100%;
    height: 100%;
    background: var(--brand-gold);
    z-index: 0;
    transition: transform .65s var(--ease-out);
}
.move__media-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    transition: transform .9s var(--ease-out);
}
.move:hover .move__media-accent {
    transform: translate(-8px, -8px);
}
.move:hover .move__media-img {
    transform: translate(4px, 4px);
}

.move__content {
    padding: 60px 0 60px 32px;
    position: relative;
    z-index: 1;
}

.move__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 26px;
}
.move__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.move:hover .move__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

.move__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0 0 28px;
    text-align: left;
}
.move__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.move:hover .move__heading-em {
    transform: translateY(-3px);
}

.move__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.78;
    color: var(--brand-body);
    margin: 0 0 20px;
    max-width: 620px;
}

.move__list {
    list-style: none;
    padding: 0;
    margin: 28px 0 36px;
}
.move__list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.55;
    color: var(--brand-black);
    margin: 0 0 14px;
    transition: transform .4s var(--ease-out);
}
.move__list-item:last-child { margin-bottom: 0; }
.move__list-item:hover {
    transform: translateX(4px);
}
.move__list-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--brand-gold);
    stroke: currentColor;
    fill: none;
}

.move__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.move__cta:hover,
.move__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.move__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.move__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.move__cta:hover .move__cta-arrow,
.move__cta:focus-visible .move__cta-arrow {
    transform: translateX(6px);
}


/* ---------- Rental Turnover / Airbnb (service-detail MIRROR, image right) ---------- */
.rental {
    position: relative;
    overflow: hidden;
}

.rental::before {
    content: "";
    position: absolute;
    top: -260px;
    left: -120px;
    width: 760px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.rental__media-wrap {
    padding: 60px 0 60px 30px;
    position: relative;
    z-index: 1;
}
.rental__media {
    position: relative;
    margin: 0;
    height: 100%;
    min-height: 480px;
}
.rental__media-accent {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 100%;
    height: 100%;
    background: var(--brand-gold);
    z-index: 0;
    transition: transform .65s var(--ease-out);
}
.rental__media-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    transition: transform .9s var(--ease-out);
}
.rental:hover .rental__media-accent {
    transform: translate(8px, -8px);
}
.rental:hover .rental__media-img {
    transform: translate(-4px, 4px);
}

/* Flip cell order on large viewports — content shows on LEFT visually */
@media (min-width: 1025px) {
    .rental .grid-x > .rental__media-wrap { order: 2; }
    .rental .grid-x > .rental__content { order: 1; }
}

.rental__content {
    padding: 60px 32px 60px 0;
    position: relative;
    z-index: 1;
}

.rental__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 26px;
}
.rental__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.rental:hover .rental__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

.rental__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0 0 28px;
    text-align: left;
}
.rental__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.rental:hover .rental__heading-em {
    transform: translateY(-3px);
}

.rental__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.78;
    color: var(--brand-body);
    margin: 0 0 20px;
    max-width: 620px;
}

.rental__list {
    list-style: none;
    padding: 0;
    margin: 28px 0 36px;
}
.rental__list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.55;
    color: var(--brand-black);
    margin: 0 0 14px;
    transition: transform .4s var(--ease-out);
}
.rental__list-item:last-child { margin-bottom: 0; }
.rental__list-item:hover {
    transform: translateX(4px);
}
.rental__list-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--brand-gold);
    stroke: currentColor;
    fill: none;
}

.rental__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.rental__cta:hover,
.rental__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.rental__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.rental__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.rental__cta:hover .rental__cta-arrow,
.rental__cta:focus-visible .rental__cta-arrow {
    transform: translateX(6px);
}


/* ---------- Apartment / Small Space (service-detail, image left, content right) ---------- */
.apartment {
    position: relative;
    overflow: hidden;
}

.apartment::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -120px;
    width: 760px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.apartment__media-wrap {
    padding: 60px 30px 60px 0;
    position: relative;
    z-index: 1;
}
.apartment__media {
    position: relative;
    margin: 0;
    height: 100%;
    min-height: 480px;
}
.apartment__media-accent {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 100%;
    height: 100%;
    background: var(--brand-gold);
    z-index: 0;
    transition: transform .65s var(--ease-out);
}
.apartment__media-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    transition: transform .9s var(--ease-out);
}
.apartment:hover .apartment__media-accent {
    transform: translate(-8px, -8px);
}
.apartment:hover .apartment__media-img {
    transform: translate(4px, 4px);
}

.apartment__content {
    padding: 60px 0 60px 32px;
    position: relative;
    z-index: 1;
}

.apartment__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 26px;
}
.apartment__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
    transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.apartment:hover .apartment__kicker-dot {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(201, 162, 39, 0.8);
}

.apartment__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: var(--brand-black);
    margin: 0 0 28px;
    text-align: left;
}
.apartment__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.apartment:hover .apartment__heading-em {
    transform: translateY(-3px);
}

.apartment__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.78;
    color: var(--brand-body);
    margin: 0 0 20px;
    max-width: 620px;
}

.apartment__list {
    list-style: none;
    padding: 0;
    margin: 28px 0 36px;
}
.apartment__list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.55;
    color: var(--brand-black);
    margin: 0 0 14px;
    transition: transform .4s var(--ease-out);
}
.apartment__list-item:last-child { margin-bottom: 0; }
.apartment__list-item:hover {
    transform: translateX(4px);
}
.apartment__list-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--brand-gold);
    stroke: currentColor;
    fill: none;
}

.apartment__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.apartment__cta:hover,
.apartment__cta:focus-visible {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.18);
    outline: none;
}
.apartment__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.apartment__cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.apartment__cta:hover .apartment__cta-arrow,
.apartment__cta:focus-visible .apartment__cta-arrow {
    transform: translateX(6px);
}


/* ---------- FAQ Accordion (native details/summary, cream background) ---------- */
.faq {
    position: relative;
    overflow: hidden;
}

.faq::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- Intro ---------- */
.faq__intro {
    text-align: center;
    padding: 60px 0 40px;
    position: relative;
    z-index: 1;
}
.faq__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 26px;
}
.faq__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
}
.faq__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -1.4px;
    color: var(--brand-black);
    margin: 0 0 36px;
    text-align: center;
}
.faq__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
}
.faq__rule {
    display: block;
    width: 60px;
    height: 2px;
    background: var(--brand-gold);
    margin: 0 auto;
}

/* ---------- Accordion list ---------- */
.faq__list {
    padding: 40px 0 60px;
    position: relative;
    z-index: 1;
}

/* ---------- Single item ---------- */
.faq__item {
    position: relative;
    border-top: 1px solid rgba(11, 27, 59, 0.12);
    transition: border-color .35s ease;
}
.faq__item:last-child {
    border-bottom: 1px solid rgba(11, 27, 59, 0.12);
}
.faq__item:hover {
    border-top-color: var(--brand-gold);
}
.faq__item:hover + .faq__item {
    border-top-color: var(--brand-gold);
}
.faq__item[open] {
    border-top-color: var(--brand-gold);
}
.faq__item[open] + .faq__item {
    border-top-color: var(--brand-gold);
}

/* Gold left-edge accent bar — appears when open */
.faq__item::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--brand-gold);
    transition: transform .45s var(--ease-out);
    transform-origin: center;
}
.faq__item[open]::before {
    transform: translateY(-50%) scaleY(1);
}

/* ---------- Summary (clickable question row) ---------- */
.faq__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 12px;
    outline: none;
    transition: padding .3s ease;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { display: none; }
.faq__summary:focus-visible {
    background: rgba(201, 162, 39, 0.06);
}
.faq__item[open] .faq__summary {
    padding-bottom: 16px;
}

/* Decorative gold numeral */
.faq__numeral {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    color: var(--brand-gold);
    flex-shrink: 0;
    width: 36px;
    line-height: 1;
    letter-spacing: 0.5px;
    transition: transform .4s var(--ease-out), color .35s ease;
}
.faq__item:hover .faq__numeral,
.faq__item[open] .faq__numeral {
    transform: scale(1.15);
}

/* Question text */
.faq__question {
    flex: 1;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.4px;
    color: var(--brand-black);
    transition: color .35s ease;
}
.faq__item:hover .faq__question,
.faq__item[open] .faq__question {
    color: var(--brand-gold);
}

/* Plus → × toggle */
.faq__toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(11, 27, 59, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-navy);
    transition: transform .45s var(--ease-out), border-color .35s ease, background-color .35s ease, color .35s ease;
}
.faq__toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.faq__item:hover .faq__toggle {
    border-color: var(--brand-gold);
    color: var(--brand-gold);
}
.faq__item[open] .faq__toggle {
    transform: rotate(45deg);
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-white);
}

/* ---------- Answer panel ---------- */
.faq__answer {
    padding: 0 12px 32px 72px;
    max-width: 820px;
    animation: faqAnswerFadeIn .45s var(--ease-out);
}
.faq__answer p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.78;
    color: var(--brand-body);
    margin: 0;
}

@keyframes faqAnswerFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ---------- Contact Page Section ---------- */
.contact {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
}

/* Gold radial glow top-right */
.contact::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -160px;
    width: 880px;
    height: 660px;
    background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Decorative italic Playfair "C" monogram */
.contact__monogram {
    position: absolute;
    bottom: -120px;
    left: -80px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 520px;
    line-height: 1;
    color: var(--brand-gold);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ---------- ROW 1: Asymmetric intro ---------- */
.contact__intro {
    padding: 60px 0 40px;
    position: relative;
    z-index: 1;
}
.contact__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 26px;
}
.contact__kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
}
.contact__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -1.6px;
    color: var(--brand-black);
    margin: 0 0 32px;
    text-align: left;
}
.contact__heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    transition: transform .5s var(--ease-out);
}
.contact:hover .contact__heading-em {
    transform: translateY(-3px);
}
.contact__rule {
    display: block;
    width: 80px;
    height: 2px;
    background: var(--brand-gold);
    transition: width .6s var(--ease-out);
}
.contact__intro:hover .contact__rule {
    width: 140px;
}

.contact__lede-cell {
    padding: 60px 0 40px 32px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}
.contact__lede {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.85;
    color: var(--brand-body);
    margin: 0;
    max-width: 600px;
}

/* ---------- ROW 2: Contact cards ---------- */
.contact__card-cell {
    padding: 16px 12px 32px;
    position: relative;
    z-index: 1;
}
.contact__card {
    position: relative;
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    padding: 40px 28px 36px;
    height: 100%;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.02),
        0 6px 16px rgba(0, 0, 0, 0.04),
        0 16px 40px rgba(0, 0, 0, 0.04);
    transition: transform .5s var(--ease-out), box-shadow .5s ease, border-color .4s ease;
    overflow: hidden;
}

/* Gold top-edge accent bar — appears on hover */
.contact__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s var(--ease-out);
}
.contact__card:hover,
.contact__card:focus-within {
    transform: translateY(-8px);
    border-color: var(--brand-gold);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.02),
        0 10px 24px rgba(0, 0, 0, 0.06),
        0 24px 60px rgba(11, 27, 59, 0.08);
}
.contact__card:hover::before,
.contact__card:focus-within::before {
    transform: scaleX(1);
}

/* Icon circle */
.contact__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--brand-gold);
    background: var(--brand-white);
    color: var(--brand-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    transition: background-color .4s ease, color .4s ease, transform .55s var(--ease-out);
}
.contact__icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}
.contact__card:hover .contact__icon,
.contact__card:focus-within .contact__icon {
    background: var(--brand-gold);
    color: var(--brand-white);
    transform: scale(1.08) rotate(-6deg);
}

/* Label */
.contact__label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brand-muted);
    margin: 0 0 14px;
}

/* Value — text variant (Address) */
.contact__value {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 19px;
    line-height: 1.45;
    color: var(--brand-black);
    margin: 0;
    transition: color .35s ease;
    word-break: break-word;
}
.contact__value--text {
    display: block;
}

/* Value — link variant (Phone / Email) */
.contact__value--link {
    display: inline-block;
    text-decoration: none;
    position: relative;
    cursor: pointer;
}
.contact__value--link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 1.5px;
    background: var(--brand-gold);
    transition: width .45s var(--ease-out), left .45s var(--ease-out);
}
.contact__value--link:hover,
.contact__value--link:focus-visible {
    color: var(--brand-gold);
    outline: none;
}
.contact__value--link:hover::after,
.contact__value--link:focus-visible::after {
    width: 80%;
    left: 10%;
}

/* ---------- ROW 3: Service Areas band ---------- */
.contact__areas {
    padding: 50px 0 40px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.contact__areas-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 0 36px;
}
.contact__areas-rule {
    flex: 0 1 120px;
    height: 1px;
    background: var(--brand-rule);
}
.contact__areas-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    flex-shrink: 0;
}
.contact__pins {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.contact__pin {
    display: inline-flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--brand-navy);
    background: var(--brand-cream);
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: 100px;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out);
}
.contact__pin:hover {
    background: var(--brand-white);
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    transform: translateY(-2px);
}
.contact__pin--county {
    background: transparent;
    border-color: var(--brand-rule);
    color: var(--brand-muted);
}
.contact__pin--county:hover {
    background: var(--brand-white);
    color: var(--brand-gold);
    border-color: var(--brand-gold);
}


/* ====================================================================
   Blog Listing Page (Webware blog widget) — BOLD MAGAZINE
   ====================================================================
   Editorial composition: image-left horizontal cards on desktop, large
   editorial numerals, featured first article with overlay text on hero
   image, sticky sidebar with rotated wordmark, dramatic Playfair titles.

   Safety: no rules target locked Foundation classes (.grid-container,
   .grid-x, .grid-padding-x, .row, .columns). Grid layout is applied to
   .blog-article (a child of .columns) with explicit grid-template-areas
   so children land in named slots regardless of Foundation's defaults.
   ==================================================================== */

.main-blog-widget {
    position: relative;
    background:
        radial-gradient(ellipse 1100px 600px at 50% -160px, rgba(201, 162, 39, 0.11) 0%, transparent 60%),
        var(--brand-cream);
    padding: 64px 0 96px;
    overflow: hidden;
}

/* Decorative "JOURNAL" wordmark watermark bottom-right — pure CSS, sits behind content */
.main-blog-widget::before {
    content: "Journal";
    position: absolute;
    bottom: 77px;
    right: 33px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 260px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -8px;
}

/* ---------- Search bar — magazine masthead style ---------- */
.main-blog-widget .blog-search-container {
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}
.main-blog-widget .position-relative {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
}
.blog-search-container #search-input-blog {
    margin-top: 0;
    margin-bottom: 0;
    padding: 8px 16px 8px 16px;
}
.main-blog-widget .search-input-blog {
    width: 100%;
    padding: 22px 64px 22px 28px;
    border: 2px solid var(--brand-black);
    border-radius: 0;
    background: transparent;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--brand-black);
    box-shadow: none;
    transition: border-color .35s ease, padding-left .35s var(--ease-out);
}
.main-blog-widget .search-input-blog:focus {
    border-color: var(--brand-gold);
    outline: none;
    padding-left: 32px;
}
.main-blog-widget .search-input-blog::placeholder {
    color: var(--brand-muted);
    font-style: italic;
}
.main-blog-widget .blog-search-button {
    position: absolute;
    right: 8px !important;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--brand-black);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--brand-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .35s ease, transform .35s var(--ease-out);
}
.main-blog-widget .blog-search-button:hover,
.main-blog-widget .blog-search-button:focus-visible {
    background: var(--brand-gold);
    outline: none;
    transform: translateY(-50%) rotate(-8deg);
}
.main-blog-widget .blog-search-button svg path {
    fill: currentColor;
}

/* ---------- Categories heading ---------- */
.main-blog-widget .filter-h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 24px;
    padding-bottom: 18px;
    position: relative;
}
.main-blog-widget .filter-h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: var(--brand-gold);
}

/* ---------- Mobile collapsible Categories header ---------- */
.main-blog-widget .mobile-category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    margin: 0;
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-navy);
    transition: border-color .3s ease;
}
.main-blog-widget .mobile-category-title:hover {
    border-color: var(--brand-gold);
}
.main-blog-widget .mobile-category-title svg path {
    fill: var(--brand-gold);
}
.main-blog-widget .mobile-categories {
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    border-top: 0;
    padding: 6px 20px 12px;
}

/* ---------- Category list — outlined pill tags ---------- */
.main-blog-widget .ps-blog-category {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.main-blog-widget .ps-blog-category li {
    margin: 0;
    border: 0;
    position: relative;
    display: inline-block;
}
.main-blog-widget .ps-blog-category li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.5px;
    color: var(--brand-navy);
    text-decoration: none;
    text-transform: capitalize;
    background: var(--brand-white);
    border: 1.5px solid rgba(11, 27, 59, 0.15);
    border-radius: 100px;
    overflow: hidden;
    transition: color .3s ease, border-color .3s ease, transform .35s var(--ease-out), box-shadow .35s ease;
    z-index: 1;
}
/* The gold fill that sweeps in from left on hover */
.main-blog-widget .ps-blog-category li a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--ease-out);
    z-index: -1;
}
/* Small arrow that appears on the right on hover */
.main-blog-widget .ps-blog-category li a::after {
    content: "→";
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity .35s ease, max-width .45s var(--ease-out), transform .35s var(--ease-out);
    color: currentColor;
}
.main-blog-widget .ps-blog-category li a:hover,
.main-blog-widget .ps-blog-category li a:focus-visible {
    color: var(--brand-white);
    border-color: var(--brand-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(201, 162, 39, 0.28);
    outline: none;
}
.main-blog-widget .ps-blog-category li a:hover::before,
.main-blog-widget .ps-blog-category li a:focus-visible::before {
    transform: scaleX(1);
}
.main-blog-widget .ps-blog-category li a:hover::after,
.main-blog-widget .ps-blog-category li a:focus-visible::after {
    opacity: 1;
    max-width: 20px;
    transform: translateX(2px);
}

/* Active state — pre-filled gold */
.main-blog-widget .ps-blog-category li.active > a {
    color: var(--brand-white);
    border-color: var(--brand-gold);
    box-shadow: 0 6px 16px rgba(201, 162, 39, 0.32);
}
.main-blog-widget .ps-blog-category li.active > a::before {
    transform: scaleX(1);
}

/* "All" button — distinct as the lead/reset pill, navy-filled */
.main-blog-widget .ps-blog-category li a.all-blogs.button {
    padding: 10px 20px;
    margin: 0;
    background: var(--brand-navy);
    color: var(--brand-white);
    border-color: var(--brand-navy);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 11px;
}
.main-blog-widget .ps-blog-category li a.all-blogs.button::before {
    background: var(--brand-gold);
}
.main-blog-widget .ps-blog-category li a.all-blogs.button:hover,
.main-blog-widget .ps-blog-category li a.all-blogs.button:focus-visible {
    border-color: var(--brand-gold);
}
.main-blog-widget .ps-blog-category li.active > a.all-blogs.button {
    background: var(--brand-gold);
    color: var(--brand-black);
    border-color: var(--brand-gold);
}
.main-blog-widget .ps-blog-category li.active > a.all-blogs.button::before {
    display: none;
}

/* ---------- Article list ---------- */
.main-blog-widget .blog-articles {
    position: relative;
    z-index: 1;
}
.main-blog-widget .blog-ul,
.new-blog-page-type .blog-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px 30px;
}
.main-blog-widget .blog-li {
    position: relative;
    margin: 0;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(11, 27, 59, 0.1);
    transition: border-bottom-color .35s ease;
    /* CSS counter for editorial numerals — increments per article */
    counter-increment: blog-counter;
}
.main-blog-widget .blog-articles {
    counter-reset: blog-counter;
}
.main-blog-widget .blog-li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.main-blog-widget .blog-li:hover {
    border-bottom-color: var(--brand-gold);
}

/* ---------- Article grid layout (image-left, content-right on desktop) ---------- */
/*@media (min-width: 769px) {
    .main-blog-widget .blog-li:not(.blog-li-1) .blog-article {
        display: grid;
        grid-template-columns: 280px 1fr;
        grid-template-areas:
            "img category"
            "img title"
            "img body"
            "img readmore";
        column-gap: 40px;
        align-items: start;
    }
    .main-blog-widget .blog-li:not(.blog-li-1) .ps-article-img { grid-area: img; }
    .main-blog-widget .blog-li:not(.blog-li-1) .article-category { grid-area: category; padding: 0; }
    .main-blog-widget .blog-li:not(.blog-li-1) .article-title { grid-area: title; padding: 0; }
    .main-blog-widget .blog-li:not(.blog-li-1) .article-body { grid-area: body; padding: 0; }
    .main-blog-widget .blog-li:not(.blog-li-1) p.pb-0,
    .main-blog-widget .blog-li:not(.blog-li-1) p.mb-0 { grid-area: readmore; padding: 0; }
}*/

/* ---------- Featured article (.blog-li-1) — full-width hero with overlay ---------- */
.main-blog-widget .blog-li {
    margin-bottom: 30px;
    padding-bottom: 30px;
}
.main-blog-widget .blog-li .blog-article {
    position: relative;
}
.main-blog-widget .blog-li .ps-article-img {
    aspect-ratio: 21 / 9;
    border-radius: 2px;
    margin-bottom: 28px;
}
/* FEATURED ribbon — top-left badge over image */
.main-blog-widget .blog-l1::before {
    content: "Featured";
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-black);
    background: var(--brand-gold);
    padding: 9px 16px;
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(201, 162, 39, 0.4);
}
/* Featured article content sits below image, larger typography */
.main-blog-widget .blog-li .article-category {
    padding: 0;
}
.main-blog-widget .blog-li .article-title {
    padding: 0;
    margin: 16px 0 20px;
}
.main-blog-widget .blog-li .article-title a {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--brand-black);
    text-decoration: none;
    transition: color .35s ease;
}
.main-blog-widget .blog-li .article-title a:hover {
    color: var(--brand-gold);
}
.main-blog-widget .blog-li .article-body {
    padding: 0;
    margin: 0 0 28px;
    max-width: 720px;
}
.main-blog-widget .blog-li .article-body p {
    font-size: 17px;
    line-height: 1.7;
}
.main-blog-widget .blog-li p.pb-0,
.main-blog-widget .blog-li p.mb-0 {
    padding: 0;
    margin: 0;
}

/* ---------- Article image (standard cards) ---------- */
/*.main-blog-widget .ps-article-img {
    position: relative;
    overflow: hidden;
    background: var(--brand-cream);
    aspect-ratio: 4 / 3;
    line-height: 0;
}
.main-blog-widget .ps-article-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out), filter .5s ease;
}
.main-blog-widget .blog-li:hover .ps-article-img img {
    transform: scale(1.06);
    filter: saturate(1.08) contrast(1.03);
}*/
/* Featured article image keeps the 21:9 — already set above */

/* ---------- Editorial numeral on each non-featured article ---------- */
/*.main-blog-widget .blog-li:not(.blog-li-1) .blog-article::before {
    content: counter(blog-counter, decimal-leading-zero);
    position: absolute;
    top: -8px;
    right: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 72px;
    line-height: 1;
    color: var(--brand-gold);
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
    transition: opacity .45s ease, transform .55s var(--ease-out);
    z-index: 0;
}
.main-blog-widget .blog-li:not(.blog-li-1):hover .blog-article::before {
    opacity: 0.4;
    transform: translateY(-4px);
}*/


.main-blog-widget .article-category {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 24px 0 0;
    margin: 0;
    line-height: 1.2;
}
/* "Categories:" label — small uppercase eyebrow, separated from chips */
.main-blog-widget .article-category .categories_text {
    display: inline-flex;
    align-items: center;
    margin: 0 4px 0 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-muted);
    position: relative;
}
.main-blog-widget .article-category .categories_text::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 1px;
    background: var(--brand-gold);
    margin-left: 10px;
    flex-shrink: 0;
}
/* Each category is wrapped in a <span class="slug">...<a>label</a><span>,</span></span>
   The outer span is the chip container. */
.main-blog-widget .article-category > span:not(.categories_text) {
    display: inline-flex;
    align-items: center;
    color: inherit;
    margin: 0;
    padding: 0;
}
/* The link itself becomes the visible chip */
.main-blog-widget .article-category > span:not(.categories_text) > a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-navy);
    text-decoration: none;
    background: var(--brand-white);
    border: 1px solid rgba(11, 27, 59, 0.15);
    border-radius: 100px;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .35s var(--ease-out);
}
.main-blog-widget .article-category > span:not(.categories_text) > a:hover,
.main-blog-widget .article-category > span:not(.categories_text) > a:focus-visible {
    color: var(--brand-white);
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    transform: translateY(-1px);
    outline: none;
}
/* HIDE the trailing comma inside each category span */
.main-blog-widget .article-category > span:not(.categories_text) > span {
    display: none;
}

/* ---------- Article title — large editorial Playfair ---------- */
.main-blog-widget .article-title {
    padding: 0;
    margin: 14px 0 18px;
    position: relative;
}
.main-blog-widget .article-title::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--brand-gold);
    margin: 0 0 18px;
    transition: width .55s var(--ease-out);
}
.main-blog-widget .blog-li:hover .article-title::before {
    width: 72px;
}
.main-blog-widget .article-title a {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: var(--brand-black);
    text-decoration: none;
    transition: color .35s ease;
}
.main-blog-widget .article-title a:hover {
    color: var(--brand-gold);
}

/* ---------- Excerpt ---------- */
.main-blog-widget .article-body {
    padding: 0;
    margin: 0 0 24px;
}
.main-blog-widget .article-body p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.75;
    color: var(--brand-body);
    margin: 0;
    max-width: 60ch;
}

/* ---------- Read more ---------- */
.main-blog-widget .blog-li p.pb-0,
.main-blog-widget .blog-li p.mb-0 {
    padding: 0;
    margin: 0;
}
.main-blog-widget .blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--brand-black);
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--brand-gold);
    transition: color .35s ease, gap .35s var(--ease-out), border-bottom-color .35s ease;
}
.main-blog-widget .blog-read-more::after {
    content: "→";
    display: inline-block;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    transition: transform .35s var(--ease-out);
    color: var(--brand-gold);
}
.main-blog-widget .blog-read-more:hover,
.main-blog-widget .blog-read-more:focus-visible {
    color: var(--brand-gold);
    gap: 18px;
    outline: none;
}
.main-blog-widget .blog-read-more:hover::after,
.main-blog-widget .blog-read-more:focus-visible::after {
    transform: translateX(8px);
}

/* ---------- Sidebar — sticky vertical wordmark module ---------- */
.main-blog-widget .blog-sidebar {
    padding-left: 32px;
    position: relative;
    z-index: 1;
}
.main-blog-widget .blog-sidebar .articles-filter-container {
    position: sticky;
    top: 0;
    background: var(--brand-white);
    border: 1px solid rgba(11, 27, 59, 0.08);
    padding: 36px 30px 22px;
    box-shadow: 0 4px 20px rgba(11, 27, 59, 0.05);
}
.main-blog-widget .blog-sidebar .ps-blog-category.newScroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}
.main-blog-widget .blog-sidebar .ps-blog-category.newScroll::-webkit-scrollbar {
    width: 4px;
}
.main-blog-widget .blog-sidebar .ps-blog-category.newScroll::-webkit-scrollbar-track {
    background: var(--brand-cream);
}
.main-blog-widget .blog-sidebar .ps-blog-category.newScroll::-webkit-scrollbar-thumb {
    background: var(--brand-gold);
    border-radius: 2px;
}

/* ---------- Featured Articles (hidden by default) ---------- */
.main-blog-widget .featured-articles h5 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--brand-black);
    margin: 0 0 20px;
}

/* ---------- Pagination ---------- */
.main-blog-widget .ps-pagination-bar {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--brand-rule);
    text-align: center;
    position: relative;
    z-index: 1;
}
.main-blog-widget .ps-pagination-bar p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--brand-muted);
    margin: 0;
}



/* ---------- CTA Banner (site-wide closing CTA, reusable across pages) ---------- */
.cta-banner {
    position: relative;
    overflow: hidden;
}
.cta-banner::before,
.cta-banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.cta-banner::before {
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.18) 0%, transparent 70%);
}
.cta-banner::after {
    bottom: -140px;
    left: -140px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.12) 0%, transparent 70%);
}

.cta-banner__content {
    position: relative;
    z-index: 1;
    padding: 64px 24px;
    text-align: center;
}

.cta-banner__rule {
    display: block;
    width: 80px;
    height: 3px;
    background: var(--brand-gold);
    margin: 0 auto 32px;
}

.cta-banner__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--brand-white);
    margin: 0 auto 24px;
    max-width: 720px;
}
.cta-banner__heading em {
    color: var(--brand-gold-light);
    font-style: italic;
    font-weight: 700;
}

.cta-banner__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 36px;
    max-width: 100%;
}

.cta-banner__button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(201, 162, 39, 0.25);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.cta-banner__button:hover,
.cta-banner__button:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(201, 162, 39, 0.4);
    background: var(--brand-white);
    color: var(--brand-navy);
    border-color: var(--brand-white);
    outline: none;
}
.cta-banner__button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s var(--ease-out);
}
.cta-banner__button-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.cta-banner__button:hover .cta-banner__button-arrow,
.cta-banner__button:focus-visible .cta-banner__button-arrow {
    transform: translateX(6px);
}


/* ====================================================================
   Site Header — Webware new-header module
   ====================================================================
   Scope: .new-header / #header and their non-locked children.
   Never targets locked Foundation classes (.grid-x, .grid-padding-x,
   .grid-padding-y, .row, .columns, .container, .is-section, .is-box,
   .is-boxes, .is-box-centered).
   ==================================================================== */

.new-header {
    background:
        linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-light) 50%, var(--brand-gold) 100%) top center / 100% 3px no-repeat,
        #0e192b;
}

/* ---------- Logo ---------- */
.new-header .logo-container {
    padding: 18px 0;
}
.new-header .logo-container a {
    display: inline-block;
    transition: opacity .3s ease, transform .35s var(--ease-out);
}
.new-header .logo-container a:hover {
    opacity: 0.9;
}
.new-header .logo-container img {
    max-height: 130px;
    width: auto;
    display: block;
}

/* ---------- Top contact bar (Email / Phone / Contact Us) ---------- */
.new-header .contact-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    margin: 0;
    padding: 14px 0 14px;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.new-header .contact-section li {
    margin: 0;
}

/* Phone — icon circle + 2-line text (dark header) */
.new-header .head-contact-links {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--brand-white);
    transition: color .3s ease;
}
.new-header .head-contact-links .icon-part {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding-right: 0 !important;
    border-radius: 50%;
    border: 1.5px solid var(--brand-gold);
    background: transparent;
    color: var(--brand-gold);
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color .35s ease, color .35s ease, transform .4s var(--ease-out);
}
.new-header .head-contact-links .icon-part i,
.new-header .head-contact-links .icon-part .fa,
.new-header .head-contact-links .icon-part .fas,
.new-header .head-contact-links .icon-part .far,
.new-header .head-contact-links .icon-part .fal {
    display: block;
    font-size: 18px !important;
    line-height: 1;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    text-align: center;
}
.new-header .head-contact-links:hover .icon-part {
    background: var(--brand-gold);
    color: #0e192b;
    transform: rotate(-6deg) scale(1.06);
}
.new-header .head-contact-links .text-part {
    line-height: 1.2;
    text-align: left;
}
.new-header .head-contact-links .heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 4px;
}
.new-header .head-contact-links .below-text,
.new-header .head-contact-links .siteDisplayNumber {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--brand-white);
    transition: color .3s ease;
}
.new-header .head-contact-links:hover .below-text,
.new-header .head-contact-links:hover .siteDisplayNumber {
    color: var(--brand-gold-light);
}

/* Contact Us button — gold, brand-aligned */
.new-header .contact-section .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    padding: 14px 26px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.new-header .contact-section .button:hover,
.new-header .contact-section .button:focus-visible {
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(201, 162, 39, 0.18);
    outline: none;
}

/* ---------- Main navigation ---------- */
.new-header .menu-container,
.new-header-6 .menu-container {
    padding: 10px 0 14px;
    border-top: 0;
}
.new-header #mainNav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.new-header #mainNav > li {
    margin: 0;
    position: relative;
}
.new-header #mainNav > li > a {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-white);
    text-decoration: none;
    position: relative;
    transition: color .3s ease;
}
/* Wrap label in positioning context for the underline below */
.new-header #mainNav > li > a > span[itemprop="name"] {
    position: relative;
    display: inline-block;
}
/* Gold underline accent — anchored to the SPAN, not the <a>.
   When Webware hides the Home span via display:none, this disappears
   with it (fixes the orphan dash showing left of "ABOUT"). */
.new-header #mainNav > li > a > span[itemprop="name"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s var(--ease-out);
}
.new-header #mainNav > li:hover > a,
.new-header #mainNav > li > a:focus-visible {
    color: var(--brand-gold-light);
    outline: none;
}
.new-header #mainNav > li:hover > a > span[itemprop="name"]::before,
.new-header #mainNav > li > a:focus-visible > span[itemprop="name"]::before {
    transform: scaleX(1);
}

/* Active page state — pre-filled gold underline + gold text.
   Covers both: (a) top-level link is active, AND (b) any submenu
   descendant is active (Foundation marks parent .active when on a
   child page, but as a safety net we also catch :has() — for browsers
   that support it). */
.new-header #mainNav > li.active > a {
    color: var(--brand-gold-light);
}
.new-header #mainNav > li.active > a > span[itemprop="name"]::before {
    transform: scaleX(1);
}
/* Fallback for browsers with :has() — highlights parent when any
   descendant submenu item is active. Safe on browsers without :has()
   because the rule is simply ignored. */
.new-header #mainNav > li:has(.is-dropdown-submenu-item.active) > a {
    color: var(--brand-gold-light);
}
.new-header #mainNav > li:has(.is-dropdown-submenu-item.active) > a > span[itemprop="name"]::before {
    transform: scaleX(1);
}

/* Submenu item active state — when dropdown opens, the currently
   active page within the submenu shows as gold-light with a small
   gold dot marker to its left. */
.new-header .is-dropdown-submenu > li.active > a,
.new-header .is-dropdown-submenu .is-submenu-item.active > a {
    color: var(--brand-gold-light) !important;
    background: rgba(201, 162, 39, 0.08);
    position: relative;
}
.new-header .is-dropdown-submenu > li.active > a::before,
.new-header .is-dropdown-submenu .is-submenu-item.active > a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}
.new-header .is-dropdown-submenu > li.active > a span[itemprop="name"],
.new-header .is-dropdown-submenu .is-submenu-item.active > a span[itemprop="name"] {
    padding-left: 4px;
}

/* Hide Foundation/Webware's default white-SVG dropdown arrow
   (we use our own gold ▾ chevron rendered via the rule below) */
.new-header .dropdown.menu > li.is-dropdown-submenu-parent > a::after,
header .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Submenu chevron — small ▾ that rotates on hover */
.new-header #mainNav > li.has-submenu > a span[itemprop="name"]::after {
    content: "▾";
    display: inline-block;
    margin-left: 8px;
    font-size: 16px;
    line-height: 1;
    color: var(--brand-gold);
    transition: transform .35s var(--ease-out);
}
.new-header #mainNav > li.has-submenu:hover > a span[itemprop="name"]::after {
    transform: rotate(180deg);
}

/* ---------- Dropdown submenu (Services) ---------- */
.new-header #mainNav .is-dropdown-submenu,
.new-header #mainNav .submenu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    background: var(--brand-white);
    border: 1px solid rgba(11, 27, 59, 0.08);
    border-top: 3px solid var(--brand-gold);
    box-shadow: 0 20px 48px rgba(11, 27, 59, 0.14);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 200;
}
.new-header #mainNav .is-dropdown-submenu li,
.new-header #mainNav .submenu li {
    margin: 0;
    position: relative;
}
.new-header #mainNav .is-dropdown-submenu li > a,
.new-header #mainNav .submenu li > a {
    display: block;
    padding: 12px 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: none;
    color: var(--brand-body);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: padding-left .35s var(--ease-out), color .3s ease, background-color .3s ease, border-left-color .3s ease;
}
.new-header #mainNav .is-dropdown-submenu li > a:hover,
.new-header #mainNav .submenu li > a:hover,
.new-header #mainNav .is-dropdown-submenu li > a:focus-visible,
.new-header #mainNav .submenu li > a:focus-visible {
    color: var(--brand-gold);
    background: var(--brand-cream);
    padding-left: 28px;
    border-left-color: var(--brand-gold);
    outline: none;
}

/* ---------- Mobile hamburger ---------- */
.new-header .sidenav-container {
    display: flex;
    align-items: center;
    padding-top: 3px;
}
.new-header .openMenu {
    background: transparent;
    border: 0;
    color: var(--brand-white);
    cursor: pointer;
    padding: 10px 12px;
    transition: color .3s ease, transform .35s var(--ease-out);
}
.new-header .openMenu:hover,
.new-header .openMenu:focus-visible {
    color: var(--brand-gold-light);
    transform: scale(1.1);
    outline: none;
}
.new-header .openMenu .icon {
    font-size: 24px;
    line-height: 1;
}

/* ---------- Mobile contact section ----------
   Markup has two stacked .mobile-contact-button-section divs:
   1st = phone link (.head-contact-links)
   2nd = Contact Us button
   Border-top only on the first to avoid doubled separator lines. */
.new-header .mobile-contact-button-section {
    padding: 14px 16px;
    text-align: center;
    background: transparent;
}
.new-header .mobile-contact-button-section:first-of-type {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.new-header .mobile-contact-button-section:last-of-type {
    padding-top: 4px;
    padding-bottom: 20px;
}
.new-header .mobile-contact-button-section:only-of-type {
    padding: 14px 16px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Phone link inside mobile section — inherits .head-contact-links but
   needs centering since it sits in a text-align: center container */
.new-header .mobile-contact-button-section .head-contact-links {
    justify-content: center;
}
.new-header .mobile-contact-button-section .head-contact-links .icon-part {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

/* Contact Us button */
.new-header .mobile-contact-button-section .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    padding: 14px 36px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.22);
    transition: background-color .35s ease, color .35s ease, transform .35s var(--ease-out);
}
.new-header .mobile-contact-button-section .button:hover,
.new-header .mobile-contact-button-section .button:focus-visible {
    background: transparent;
    color: var(--brand-gold);
    outline: none;
}


/* ====================================================================
   Sidenav — Mobile off-canvas drawer
   ====================================================================
   Foundation off-canvas pattern: position-right slides in from the right
   when .is-open is added (Foundation JS toggles this). Drawer contains
   accordion menu mirroring desktop nav items with submenus.

   Brand approach: dark navy panel matching the header, gold accents,
   tracked uppercase Montserrat for top-level items (matches desktop
   nav typography), italic Playfair touches for submenu group hints.
   ==================================================================== */

.sidenav {
    width: 320px;
    max-width: 86vw;
    background:
        linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-light) 50%, var(--brand-gold) 100%) top center / 100% 3px no-repeat,
        #0e192b;
    color: var(--brand-white);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.35);
    padding: 32px 0 40px;
    overflow-y: auto;
}

/* ---------- Fix: drawer rendering open on initial page load ----------
   Webware/Foundation sometimes ships the markup with .is-open + aria-hidden="false"
   in the initial HTML, which makes the drawer appear before user interaction.
   Treat aria-hidden as the source of truth — push the drawer off-screen unless
   the body explicitly has Foundation's confirmed open class.

   Foundation toggles `.is-off-canvas-open` on <body> when drawer is genuinely
   opened by user. If that class is absent, force the drawer hidden regardless
   of stale .is-open on the aside itself.

   IMPORTANT: This hide-default rule is scoped to desktop (≥1025px) only.
   On desktop the sidenav is unused (full horizontal nav is shown), so we
   force it hidden to prevent any stale .is-open from leaking through on
   page load. On mobile/tablet, we let Foundation control visibility
   naturally via its own .is-open class — overriding it here would prevent
   the hamburger menu from ever opening. */
@media (min-width: 1025px) {
    .sidenav,
    .sidenav.is-open,
    .off-canvas.position-right.is-open {
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .35s ease, visibility 0s linear .35s;
    }
    body.is-off-canvas-open .sidenav,
    body.is-off-canvas-open .sidenav.is-open,
    body.is-off-canvas-open .off-canvas.position-right.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .35s ease, visibility 0s linear 0s;
    }
}

/* Foundation off-canvas open state — override width + no top padding */
.is-open.position-right {
    width: 60%;
    padding-top: 0;
}

/* Top-level accordion menu reset */
.sidenav .accordion-menu,
.sidenav .vertical.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}
.sidenav .accordion-menu > li,
.sidenav .vertical.menu > li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
}
.sidenav .accordion-menu > li:last-child,
.sidenav .vertical.menu > li:last-child {
    border-bottom: 0;
}

/* Top-level links — match desktop nav typography */
.sidenav .accordion-menu > li > a,
.sidenav .vertical.menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--brand-white);
    text-decoration: none;
    background: transparent;
    position: relative;
    transition: color .3s ease, background-color .3s ease, padding-left .35s var(--ease-out);
}

/* Gold accent stripe that slides in on the left on hover/active */
.sidenav .accordion-menu > li > a::before,
.sidenav .vertical.menu > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    width: 3px;
    height: 60%;
    background: var(--brand-gold);
    transition: transform .35s var(--ease-out);
}
.sidenav .accordion-menu > li > a:hover,
.sidenav .accordion-menu > li > a:focus-visible,
.sidenav .vertical.menu > li > a:hover,
.sidenav .vertical.menu > li > a:focus-visible {
    color: var(--brand-gold-light);
    background: rgba(255, 255, 255, 0.04);
    padding-left: 34px;
    outline: none;
}
.sidenav .accordion-menu > li > a:hover::before,
.sidenav .accordion-menu > li > a:focus-visible::before,
.sidenav .vertical.menu > li > a:hover::before,
.sidenav .vertical.menu > li > a:focus-visible::before {
    transform: translateY(-50%) scaleY(1);
}

/* Active page state — pre-filled gold stripe + gold text */
.sidenav .accordion-menu > li.active > a,
.sidenav .vertical.menu > li.active > a {
    color: var(--brand-gold-light);
    background: rgba(201, 162, 39, 0.06);
    padding-left: 34px;
}
.sidenav .accordion-menu > li.active > a::before,
.sidenav .vertical.menu > li.active > a::before {
    transform: translateY(-50%) scaleY(1);
}
/* Fallback: highlight parent in sidenav when any submenu descendant is active */
.sidenav .accordion-menu > li:has(.is-accordion-submenu .active) > a,
.sidenav .accordion-menu > li:has(.submenu .active) > a,
.sidenav .vertical.menu > li:has(.is-accordion-submenu .active) > a,
.sidenav .vertical.menu > li:has(.submenu .active) > a {
    color: var(--brand-gold-light);
    background: rgba(201, 162, 39, 0.06);
    padding-left: 34px;
}
.sidenav .accordion-menu > li:has(.is-accordion-submenu .active) > a::before,
.sidenav .accordion-menu > li:has(.submenu .active) > a::before,
.sidenav .vertical.menu > li:has(.is-accordion-submenu .active) > a::before,
.sidenav .vertical.menu > li:has(.submenu .active) > a::before {
    transform: translateY(-50%) scaleY(1);
}

/* Submenu chevron on parent items — matches desktop ▾ */
.sidenav .accordion-menu > li.has-submenu > a span[itemprop="name"]::after {
    content: "▾";
    display: inline-block;
    margin-left: 10px;
    font-size: 16px;
    line-height: 1;
    color: var(--brand-gold);
    transition: transform .35s var(--ease-out);
}
.sidenav .accordion-menu > li.has-submenu[aria-expanded="true"] > a span[itemprop="name"]::after {
    transform: rotate(180deg);
}

/* On tablet/mobile (≤1024px), hide our ▾ chevron and let Webware's
   built-in CSS-triangle (recolored to gold) be the only indicator */
@media (max-width: 1024px) {
    .sidenav .accordion-menu > li.has-submenu > a span[itemprop="name"]::after {
        content: none;
        display: none;
    }
}

/* Override Webware's default CSS-triangle accordion arrow → brand gold */
aside.sidenav .menu.accordion-menu li.has-submenu a::after {
    border-color: var(--brand-gold) transparent transparent !important;
}

/* ---------- Submenu (nested level-2) ---------- */
.sidenav .submenu,
.sidenav .is-accordion-submenu {
    list-style: none;
    margin: 0;
    padding: 8px 0 14px;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(201, 162, 39, 0.18);
}
.sidenav .submenu > li,
.sidenav .is-accordion-submenu > li {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    background: transparent;
}
.sidenav .submenu > li > a,
.sidenav .is-accordion-submenu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 28px 11px 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: none;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    background: transparent;
    transition: color .3s ease, padding-left .35s var(--ease-out), background-color .3s ease;
}
/* Tiny gold dot before each submenu item */
.sidenav .submenu > li > a::before,
.sidenav .is-accordion-submenu > li > a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 1px;
    background: var(--brand-gold);
    flex-shrink: 0;
    transition: width .35s var(--ease-out);
}
.sidenav .submenu > li > a:hover,
.sidenav .submenu > li > a:focus-visible,
.sidenav .is-accordion-submenu > li > a:hover,
.sidenav .is-accordion-submenu > li > a:focus-visible {
    color: var(--brand-gold-light);
    background: rgba(255, 255, 255, 0.04);
    padding-left: 46px;
    outline: none;
}
.sidenav .submenu > li > a:hover::before,
.sidenav .submenu > li > a:focus-visible::before,
.sidenav .is-accordion-submenu > li > a:hover::before,
.sidenav .is-accordion-submenu > li > a:focus-visible::before {
    width: 14px;
}
.sidenav .submenu > li.active > a,
.sidenav .is-accordion-submenu > li.active > a {
    color: var(--brand-gold-light);
}
.sidenav .submenu > li.active > a::before,
.sidenav .is-accordion-submenu > li.active > a::before {
    width: 14px;
}

/* Neutralise Webware's .padding-left-1 utility inside submenu items
   (we control padding via the parent <a>) */
.sidenav .submenu > li > a span[itemprop="name"].padding-left-1,
.sidenav .is-accordion-submenu > li > a span[itemprop="name"].padding-left-1 {
    padding-left: 0;
}

/* ---------- Off-canvas overlay (Foundation adds .js-off-canvas-overlay) ---------- */
.js-off-canvas-overlay {
    background: rgba(11, 27, 59, 0.5);
}


/* ====================================================================
   Site Footer — Webware new-footer module
   ====================================================================
   Editorial sign-off: dark navy panel matching the header (sandwich
   composition), gold typography accents, three balanced columns,
   decorative watermark, premium spacing.

   Markup-safe: no rules target locked Foundation classes (.grid-x,
   .grid-padding-x, .grid-padding-y, .row, .columns, .container,
   .is-section, .is-box, .is-boxes, .is-box-centered, .custom-grid-container).
   ==================================================================== */

.new-footer {
    position: relative;
    background:
        radial-gradient(ellipse 900px 400px at 50% 0%, rgba(201, 162, 39, 0.07) 0%, transparent 60%),
        #0e192b;
    color: var(--brand-white);
    overflow: hidden;
}

/* Top gold gradient strip — bookend to the header's strip */
.new-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-light) 50%, var(--brand-gold) 100%);
    z-index: 2;
}

/* Decorative "Classii" italic watermark bottom-right */
.new-footer::after {
    content: "Classii";
    position: absolute;
    bottom: 60px;
    right: -20px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 220px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -6px;
}

/* ---------- Footer nav bar (top) ---------- */
.new-footer .footer-menu-container {
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}
.new-footer #mainNav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.new-footer #mainNav > li {
    margin: 0;
    position: relative;
}
.new-footer #mainNav > li > a {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--brand-white);
    text-decoration: none;
    transition: color .3s ease;
}
.new-footer #mainNav > li > a > span[itemprop="name"] {
    position: relative;
    display: inline-block;
}
.new-footer #mainNav > li > a > span[itemprop="name"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s var(--ease-out);
}
.new-footer #mainNav > li:hover > a,
.new-footer #mainNav > li > a:focus-visible {
    color: #fff;
    outline: none;
}
.new-footer #mainNav > li:hover > a > span[itemprop="name"]::before,
.new-footer #mainNav > li > a:focus-visible > span[itemprop="name"]::before {
    transform: scaleX(1);
}
.new-footer #mainNav > li.active > a {
    color: #fff;
}
.new-footer #mainNav > li.active > a > span[itemprop="name"]::before {
    transform: scaleX(1);
}
/* Fallback for parents with active descendants */
.new-footer #mainNav > li:has(.is-dropdown-submenu-item.active) > a {
    color: #fff;
}
.new-footer #mainNav > li:has(.is-dropdown-submenu-item.active) > a > span[itemprop="name"]::before {
    transform: scaleX(1);
}

/* Defensive override — matches Webware's exact selector shape so this
   wins against any built-in active/hover color set on footer nav links */
.new-footer ul.dropdown.menu > li.active > a:not(.button) span,
.new-footer ul.dropdown.menu > li:hover > a:not(.button) span {
    color: #fff;
}

/* All non-button footer links flip to white on hover/active/focus */
footer.new-footer a:not(.button):hover,
footer.new-footer a:not(.button):active,
footer.new-footer a:not(.button):focus {
    color: #fff;
}

/* Hide Foundation's default dropdown arrows in footer (decluttered) */
.new-footer #mainNav .is-dropdown-submenu,
.new-footer #mainNav .submenu {
    display: none;
}
.new-footer #mainNav > li.has-submenu > a::after,
.new-footer .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    display: none !important;
    content: none !important;
}

/* ---------- Footer columns wrapper ---------- */
.new-footer {
    padding-bottom: 0;
}

/* Style cells inside the footer's grid-x — only the inner content,
   never the grid wrappers themselves */
.new-footer .footer-text,
.new-footer .footer-media-box,
.new-footer .contact-us-column {
    position: relative;
    z-index: 1;
    padding: 56px 0 32px;
}

/* ---------- Column headings ---------- */
.new-footer h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: var(--brand-white);
    margin: 0 0 22px;
    padding-bottom: 16px;
    position: relative;
}
.new-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    background: var(--brand-gold);
}

/* ---------- About column ---------- */
.new-footer .footer-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px;
    max-width: 320px;
}

/* ---------- Social media row ---------- */
.new-footer .footer-social-media ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.new-footer .footer-social-media ul li {
    margin: 0;
    padding: 0;
}
.new-footer .footer-social-media ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 162, 39, 0.4);
    background: transparent;
    color: var(--brand-gold-light);
    font-size: 15px;
    text-decoration: none;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .4s var(--ease-out);
}
.new-footer .footer-social-media ul li a:hover,
.new-footer .footer-social-media ul li a:focus-visible {
    background: var(--brand-gold);
    color: #0e192b;
    border-color: var(--brand-gold);
    transform: translateY(-3px) rotate(-6deg);
    outline: none;
}
.new-footer .footer-social-media ul li a i {
    line-height: 1;
}

/* ---------- Contact Us column ---------- */
.new-footer .contact-us-column .shop-address {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    margin: 0 0 18px;
    transition: color .3s ease;
    font-style: normal;
}
.new-footer .contact-us-column .shop-address:hover {
    color: var(--brand-gold-light);
}

.new-footer .contact-us-column .contact-number {
    margin: 0 0 14px;
}
.new-footer .contact-us-column .contact-number .siteDisplayNumber,
.new-footer .contact-us-column .contact-number a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    line-height: 1.3;
    color: var(--brand-white);
    text-decoration: none;
    transition: color .3s ease, gap .35s var(--ease-out);
}
.new-footer .contact-us-column .contact-number a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--brand-gold);
    transition: width .4s var(--ease-out);
    flex-shrink: 0;
}
.new-footer .contact-us-column .contact-number a:hover,
.new-footer .contact-us-column .contact-number a:focus-visible {
    color: var(--brand-gold-light);
    outline: none;
}
.new-footer .contact-us-column .contact-number a:hover::before,
.new-footer .contact-us-column .contact-number a:focus-visible::before {
    width: 32px;
}

.new-footer .contact-us-column .email-id {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 39, 0.35);
    padding-bottom: 3px;
    margin: 0 0 28px;
    transition: color .3s ease, border-bottom-color .3s ease;
    word-break: break-word;
}
.new-footer .contact-us-column .email-id:hover,
.new-footer .contact-us-column .email-id:focus-visible {
    color: var(--brand-gold-light);
    border-bottom-color: var(--brand-gold);
    outline: none;
}

/* Mailing list button — outlined gold style */
.new-footer .mailing-list-button {
    margin-top: 8px;
}
.new-footer .mailing-list-button .button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    line-height: 1;
    padding: 14px 26px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: transparent;
    color: var(--brand-gold-light);
    text-decoration: none;
    margin: 0;
    box-shadow: none;
    transition: background-color .35s ease, color .35s ease, transform .35s var(--ease-out), gap .35s var(--ease-out);
}
.new-footer .mailing-list-button .button::after {
    content: "→";
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    transition: transform .35s var(--ease-out);
}
.new-footer .mailing-list-button .button:hover,
.new-footer .mailing-list-button .button:focus-visible {
    background: var(--brand-gold);
    color: #0e192b;
    transform: translateY(-2px);
    gap: 16px;
    outline: none;
}
.new-footer .mailing-list-button .button:hover::after,
.new-footer .mailing-list-button .button:focus-visible::after {
    transform: translateX(4px);
}

/* ---------- Middle media box (empty in markup, reserved space) ---------- */
.new-footer .footer-media-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1px;
}

/* ---------- Copyright bar ---------- */
.new-footer .copyright-container {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 0;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.15);
}
.new-footer .copyright {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
.new-footer .copyright a {
    color: var(--brand-gold-light);
    text-decoration: none;
    font-weight: 600;
    transition: color .3s ease;
}
.new-footer .copyright a:hover,
.new-footer .copyright a:focus-visible {
    color: var(--brand-gold);
    outline: none;
}
.new-footer #ps-copyrightyear-js {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}

@media screen and (max-width: 1023px) {
    footer {
        margin-top: 0;
    }
}


/* ---------- Hero / Banner ---------- */
.classii-hero {
    position: relative;
    color: var(--brand-white);
    overflow: hidden;
}
.classii-hero .bn-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 27, 59, 0.3) 0%, rgba(11, 27, 59, 0.88) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Subtle gold radial accent in the lower-right of the overlay — atmospheric depth */
.classii-hero .bn-overlay::after {
    content: "";
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.18) 0%, transparent 60%);
    pointer-events: none;
}
.classii-hero .pos-ab-ban {
    z-index: 2;
}
/* Webware editor / logged-in compatibility — absolutely-positioned overlay flows
   normally when the editor chrome is present, so edit controls don't conflict. */
.user-logged-in .classii-hero .pos-ab-ban {
    position: relative;
}
.classii-hero .bn-content {
    padding: 30px 15px;
    max-width: 680px;
    background: rgb(11 27 59 / 75%);
}

/* Eyebrow — small tracked uppercase with leading gold rule */
.classii-hero .classii-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brand-gold-light);
    margin: 0 0 10px;
}
.classii-hero .classii-eyebrow-rule {
    display: inline-block;
    width: 44px;
    height: 2px;
    background: var(--brand-gold);
    transition: width .6s var(--ease-out);
}
.classii-hero:hover .classii-eyebrow-rule {
    width: 72px;
}

/* H1 — large Playfair, mixed case for italic-gold to read naturally */
.classii-hero .banner-main-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -1.2px;
    text-transform: none;
    color: var(--brand-white);
    margin: 0 0 10px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.classii-hero .banner-heading-em {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    position: relative;
    transition: color .4s ease, transform .5s var(--ease-out);
}
.classii-hero:hover .banner-heading-em {
    color: var(--brand-gold-light);
    transform: translateY(-4px);
}

/* CTA button */
.classii-hero .bn-content .button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 32px;
    border-radius: 2px;
    border: 2px solid var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-white);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(201, 162, 39, 0.28);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.classii-hero .bn-content .button:hover,
.classii-hero .bn-content .button:focus {
    transform: translateY(-3px);
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 22px 48px rgba(201, 162, 39, 0.22);
    outline: none;
}
.classii-hero .classii-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    vertical-align: middle;
}
.classii-hero .bn-content .button .classii-icon-arrow {
    stroke: currentColor;
    width: 16px;
    height: 16px;
    transition: transform .35s var(--ease-out);
}
.classii-hero .bn-content .button:hover .classii-icon-arrow {
    transform: translateX(6px);
}

/* Staggered entrance animation — eyebrow, heading, button cascade up on load */
@keyframes classii-hero-fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.classii-hero .classii-eyebrow {
    animation: classii-hero-fadeUp 0.9s var(--ease-out) 0.15s both;
}
.classii-hero .banner-main-heading {
    animation: classii-hero-fadeUp 0.9s var(--ease-out) 0.35s both;
}
.classii-hero .bn-content .button {
    animation: classii-hero-fadeUp 0.9s var(--ease-out) 0.55s both;
}

/* Accessibility — respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .classii-hero .classii-eyebrow,
    .classii-hero .banner-main-heading,
    .classii-hero .bn-content .button {
        animation: none;
    }
    .classii-hero:hover .classii-eyebrow-rule,
    .classii-hero:hover .banner-heading-em,
    .classii-hero .bn-content .button:hover {
        transition: none;
    }
}


/* ---------- Blog Banner — mirror of home hero, adapted for the
   .main-blog-banner / .new-blog-template markup which has its own
   structure (no bn-overlay, no bn-content) ---------- */
.main-blog-banner.new-blog-template {
    position: relative;
    overflow: hidden;
    color: var(--brand-white);
}

/* Image / figure fills the banner */
.main-blog-banner.new-blog-template figure {
    margin: 0;
    padding: 0;
    line-height: 0;
}
.main-blog-banner.new-blog-template figure picture {
    display: block;
}
.main-blog-banner.new-blog-template figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Dark navy gradient overlay — equivalent to .bn-overlay on home hero */
.main-blog-banner.new-blog-template::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 27, 59, 0.3) 0%, rgba(11, 27, 59, 0.88) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Subtle gold radial accent in the lower-right of the overlay */
.main-blog-banner.new-blog-template::after {
    content: "";
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Inner banner content — absolutely positioned over the image */
.main-blog-banner.new-blog-template .inner-banner.blog-banner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    z-index: 2;
}
.main-blog-banner.new-blog-template .inner-banner.blog-banner .clear {
    width: 100%;
}
.main-blog-banner.new-blog-template .in-banner-desc {
    width: 100%;
}

/* The banner heading sits inside .cell.large-12 — give the heading itself
   the semi-transparent navy box treatment used by home hero .bn-content */
.main-blog-banner.new-blog-template .banner-main-heading {
    display: inline-block;
    padding: 30px 40px;
    max-width: 680px;
    background: rgb(11 27 59 / 75%);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -1.2px;
    text-transform: none;
    color: var(--brand-white);
    margin: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
    position: relative;
}
/* Gold rule above the H1 — replaces home hero's eyebrow accent */
.main-blog-banner.new-blog-template .banner-main-heading::before {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    background: var(--brand-gold);
    margin: 0 0 16px;
    transition: width .6s var(--ease-out);
}
.main-blog-banner.new-blog-template:hover .banner-main-heading::before {
    width: 72px;
}

/* Entrance animation — mirror home hero */
.main-blog-banner.new-blog-template .banner-main-heading {
    animation: classii-hero-fadeUp 0.9s var(--ease-out) 0.25s both;
}

/* Webware editor / logged-in compatibility */
.user-logged-in .main-blog-banner.new-blog-template .inner-banner.blog-banner {
    position: relative;
}


/* ====================================================================
   Contact Form — Webware Form Template 3 (form-template-3)
   ====================================================================
   Markup: .ww-form-container-3 wraps <form> with .fieldset → field
   wraps (.first_name_wrap, .last_name_wrap, .email_wrap, .phone_wrap,
   .field_XXXX_wrap). Each wrap has <label>, <input/textarea>, .error span.

   Safety: no rules target locked Foundation classes. Only style the
   form-specific selectors and the intl-tel-input third-party widget.
   ==================================================================== */

.ww-form-container-3 {
    position: relative;
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    border-top: 3px solid var(--brand-gold);
    padding: 56px 56px 48px;
    max-width: 880px;
    margin: 0 auto;
    box-shadow: 0 24px 60px rgba(11, 27, 59, 0.08);
}

/* Subtle gold corner accent — top-right */
.ww-form-container-3::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background:
        linear-gradient(135deg, transparent 50%, rgba(201, 162, 39, 0.12) 50%);
    pointer-events: none;
}

/* ---------- Fieldset ---------- */
.ww-form-container-3 .fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 8px;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 22px;
}

/* ---------- Label ---------- */
.ww-form-container-3 label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 8px;
    line-height: 1.3;
}
.ww-form-container-3 label .required {
    color: var(--brand-gold);
    margin-left: 4px;
    font-weight: 700;
}

/* ---------- Inputs + textarea ---------- */
.ww-form-container-3 .input,
.ww-form-container-3 input[type="text"],
.ww-form-container-3 input[type="email"],
.ww-form-container-3 input[type="tel"],
.ww-form-container-3 textarea {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: var(--brand-black);
    background: var(--brand-white);
    border: 1.5px solid var(--brand-rule);
    border-radius: 2px;
    box-shadow: none;
    margin: 0;
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ww-form-container-3 .input:focus,
.ww-form-container-3 input:focus,
.ww-form-container-3 textarea:focus {
    border-color: var(--brand-gold);
    background: var(--brand-cream);
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.14);
}
.ww-form-container-3 .input::placeholder,
.ww-form-container-3 input::placeholder,
.ww-form-container-3 textarea::placeholder {
    color: var(--brand-muted);
}

.ww-form-container-3 textarea {
    min-height: 140px;
    resize: vertical;
    font-family: 'Montserrat', sans-serif;
}

/* ---------- Error message ---------- */
.ww-form-container-3 .error {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #c0392b;
    margin: 6px 0 0;
    line-height: 1.4;
    min-height: 0;
}
.ww-form-container-3 .error:empty {
    display: none;
}
/* When error has content, mark adjacent input red */
.ww-form-container-3 .input.error,
.ww-form-container-3 input.error,
.ww-form-container-3 textarea.error {
    border-color: #c0392b;
}

/* ---------- intl-tel-input (.iti) — third-party country dropdown ---------- */
.ww-form-container-3 .iti {
    width: 100%;
    display: block;
}
.ww-form-container-3 .iti--allow-dropdown input[type="tel"] {
    padding-left: 90px;
}
.ww-form-container-3 .iti__flag-container {
    border-right: 1px solid var(--brand-rule);
}
.ww-form-container-3 .iti__selected-flag {
    background: var(--brand-cream);
    padding: 0 12px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    transition: background-color .3s ease;
}
.ww-form-container-3 .iti__selected-flag:hover,
.ww-form-container-3 .iti__selected-flag:focus {
    background: rgba(201, 162, 39, 0.12);
    outline: none;
}
.ww-form-container-3 .iti__arrow {
    border-top-color: var(--brand-gold);
}
.ww-form-container-3 .iti__country-list {
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    border-top: 2px solid var(--brand-gold);
    box-shadow: 0 16px 36px rgba(11, 27, 59, 0.14);
    max-height: 280px;
    font-family: 'Montserrat', sans-serif;
}
.ww-form-container-3 .iti__country {
    padding: 8px 14px;
    font-size: 14px;
    color: var(--brand-body);
    transition: background-color .25s ease, color .25s ease;
}
.ww-form-container-3 .iti__country.iti__highlight,
.ww-form-container-3 .iti__country:hover {
    background: var(--brand-cream);
    color: var(--brand-gold);
}
.ww-form-container-3 .iti__divider {
    border-bottom-color: var(--brand-rule);
}
.ww-form-container-3 .iti__dial-code {
    color: var(--brand-muted);
}

.ww-form-container-3 .iti + .phone-details,
.ww-form-container-3 .hide {
    display: none;
}

/* Phone "✓ Valid" success state */
.ww-form-container-3 #mob_phone_phone_number_valid:not(.hide) {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #2e8b57 !important;
    margin-top: 6px;
}

/* ---------- Form bottom container (captcha + submit) ---------- */
.ww-form-container-3 .form-container {
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.ww-form-container-3 .recaptcha-block {
    margin: 0;
    padding: 0;
}

/* ---------- Submit button ---------- */
.ww-form-container-3 .submit_wrap {
    flex: 0 1 auto;
    margin-left: 0;
    order: 0;
}
.ww-form-container-3 .captcha_wrap {
    flex: 0 1 auto;
    order: 1;
    margin-left: auto;
}
.ww-form-container-3 .submit_wrap .button.input,
.ww-form-container-3 input[type="submit"].button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 180px;
    padding: 16px 36px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--brand-white);
    background: var(--brand-gold);
    border: 2px solid var(--brand-gold);
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(201, 162, 39, 0.28);
    transition: background-color .35s ease, color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ww-form-container-3 .submit_wrap .button.input:hover,
.ww-form-container-3 .submit_wrap .button.input:focus-visible,
.ww-form-container-3 input[type="submit"].button:hover,
.ww-form-container-3 input[type="submit"].button:focus-visible {
    background: transparent;
    color: var(--brand-gold);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(201, 162, 39, 0.2);
    outline: none;
}

/* Spacer utility used in form (Webware height-40 etc) */
.ww-form-container-3 .spacer.height-40 {
    height: 40px;
}


/* ====================================================================
   Overview — positioning section between hero and service details
   ====================================================================
   5/7 split: heading column (5) with kicker + H2 + italic-gold emphasis,
   body column (7) with lead paragraph + supporting paras + audience pills.

   Markup: <section class="overview"> inside the locked grid wrappers.
   ==================================================================== */

.overview {
    position: relative;
    padding: 80px 0 88px;
}

/* Subtle Playfair italic "Services" watermark in the background */
.overview::before {
    content: "Services";
    position: absolute;
    bottom: 32px;
    right: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 200px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -5px;
}

.overview__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
}

/* ---------- Heading column ---------- */
.overview__heading-col {
    position: sticky;
    top: 32px;
    align-self: start;
}

.overview__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 26px;
}
.overview__kicker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);
    flex-shrink: 0;
}
.overview__kicker-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-navy);
}

.overview__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: var(--brand-black);
    margin: 0 0 28px;
}
.overview__heading-em {
    font-style: italic;
    font-weight: 700;
    color: var(--brand-gold);
}

/* Gold rule beneath the heading */
.overview__heading-col::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--brand-gold);
    margin-top: 8px;
    transition: width .6s var(--ease-out);
}
.overview:hover .overview__heading-col::after {
    width: 96px;
}

/* ---------- Body column ---------- */
.overview__body-col {
    padding-top: 4px;
}

.overview__lead {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: var(--brand-black);
    margin: 0 0 28px;
    position: relative;
    padding-left: 20px;
    border-left: 2px solid var(--brand-gold);
}

.overview__para {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: var(--brand-body);
    margin: 0 0 18px;
}
.overview__para:last-of-type {
    margin-bottom: 32px;
}

/* ---------- Audience pills ---------- */
.overview__pills {
    list-style: none;
    margin: 0;
    padding: 32px 0 0;
    border-top: 1px solid var(--brand-rule);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.overview__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--brand-navy);
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    border-radius: 100px;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .35s var(--ease-out);
    cursor: default;
}
.overview__pill::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand-gold);
    flex-shrink: 0;
    transition: background-color .3s ease, transform .35s var(--ease-out);
}
.overview__pill:hover {
    color: var(--brand-white);
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    transform: translateY(-2px);
}
.overview__pill:hover::before {
    background: var(--brand-gold-light);
    transform: scale(1.4);
}


/* ====================================================================
   Services Grid — "Cleaning Services We Provide"
   ====================================================================
   Single image + heading column on the left (sticky on desktop scroll),
   numbered service list on the right scrolling past. Each row is a full
   <a> link with italic numeral + name + description + slide-in arrow.

   Markup: <section.svc-grid> > .svc-grid__layout > 
   [.svc-grid__media-col (image + caption with kicker/h2/lead) + 
    .svc-grid__content-col (ol.svc-grid__list with .svc-grid__row links)]
   ==================================================================== */

.svc-grid {
    position: relative;
    padding: 88px 0 96px;
}

/* Decorative italic Playfair watermark, behind content */
.svc-grid::before {
    content: "Services";
    position: absolute;
    bottom: 48px;
    right: -32px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 220px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -5px;
}

/* ---------- Layout — 5/7 split, image left, list right ---------- */
.svc-grid__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 72px;
    align-items: start;
}

/* ---------- Media column (image + caption) ---------- */
.svc-grid__media-col {
    position: sticky;
    top: 32px;
    align-self: start;
    display: flex;
    flex-direction: column;
}
.svc-grid__media-caption {
    order: 1;
    padding-top: 0;
    margin-bottom: 36px;
}
.svc-grid__media {
    order: 2;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--brand-cream);
    line-height: 0;
    margin-bottom: 0;
}
.svc-grid__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out), filter .6s ease;
}
.svc-grid:hover .svc-grid__media img {
    transform: scale(1.04);
    filter: saturate(1.06);
}

/* Offset gold accent square — peeks behind image bottom-right */
.svc-grid__media-accent {
    position: absolute;
    bottom: -18px;
    right: -18px;
    width: 100px;
    height: 100px;
    border: 2px solid var(--brand-gold);
    pointer-events: none;
    z-index: -1;
    transition: transform .55s var(--ease-out);
}
.svc-grid:hover .svc-grid__media-accent {
    transform: translate(6px, 6px);
}

/* ---------- Caption (kicker + heading + lead) — rendered above image via flex order ---------- */
.svc-grid__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
}
.svc-grid__kicker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);
    flex-shrink: 0;
}
.svc-grid__kicker-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-navy);
}
.svc-grid__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: var(--brand-black);
    margin: 0 0 22px;
}
.svc-grid__heading-em {
    font-style: italic;
    font-weight: 700;
    color: var(--brand-gold);
}
.svc-grid__lead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.75;
    color: var(--brand-body);
    margin: 0;
    padding-left: 18px;
    border-left: 2px solid var(--brand-gold);
}

/* ---------- Content column (numbered list) ---------- */
.svc-grid__content-col {
    padding-top: 4px;
}
.svc-grid__list {
    list-style: none;
    counter-reset: svc-counter;
    margin: 0;
    padding: 0;
}
.svc-grid__item {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(11, 27, 59, 0.1);
}
.svc-grid__item:last-child {
    border-bottom: 1px solid rgba(11, 27, 59, 0.1);
}

/* ---------- Row (full link, grid-laid-out) ---------- */
.svc-grid__row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    column-gap: 28px;
    align-items: center;
    padding: 22px 0;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: padding-left .45s var(--ease-out), background-color .35s ease;
}
.svc-grid__row::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    width: 3px;
    height: 70%;
    background: var(--brand-gold);
    transition: transform .45s var(--ease-out);
}
.svc-grid__row:hover,
.svc-grid__row:focus-visible {
    padding-left: 18px;
    background: rgba(201, 162, 39, 0.04);
    outline: none;
}
.svc-grid__row:hover::before,
.svc-grid__row:focus-visible::before {
    transform: translateY(-50%) scaleY(1);
}

/* ---------- Numeral ---------- */
.svc-grid__numeral {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--brand-gold);
    opacity: 0.45;
    transition: opacity .35s ease, transform .45s var(--ease-out);
}
.svc-grid__row:hover .svc-grid__numeral,
.svc-grid__row:focus-visible .svc-grid__numeral {
    opacity: 1;
    transform: translateX(2px);
}

/* ---------- Row text ---------- */
.svc-grid__row-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.svc-grid__name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: var(--brand-black);
    transition: color .35s ease;
}
.svc-grid__row:hover .svc-grid__name,
.svc-grid__row:focus-visible .svc-grid__name {
    color: var(--brand-gold);
}
.svc-grid__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.65;
    color: var(--brand-body);
    max-width: 480px;
}

/* ---------- Arrow ---------- */
.svc-grid__row-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--brand-rule);
    background: transparent;
    color: var(--brand-navy);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .45s var(--ease-out);
}
.svc-grid__row:hover .svc-grid__row-arrow,
.svc-grid__row:focus-visible .svc-grid__row-arrow {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-white);
    transform: translateX(6px) rotate(-6deg);
}


/* ====================================================================
   Why Choose Us — "Why Clients Choose Classii Cleaning Services LLC"
   ====================================================================
   Dark navy section (contrasts with white/cream sections above/below).
   Centered header + 2-column grid of checkmark-led benefit items, the
   7th item spans full width as a closing statement.

   Markup: <section.why-choose> > header + ul.why-choose__list of
   .why-choose__item with .why-choose__icon (SVG check) + body.
   Last item gets .why-choose__item--wide to span both columns.
   ==================================================================== */

.why-choose {
    position: relative;
    padding: 96px 0 100px;
}

/* Decorative italic Playfair watermark */
.why-choose::before {
    content: "Why";
    position: absolute;
    top: 56px;
    right: -24px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 280px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -6px;
}

/* Decorative bottom divider — separates cream from following section.
   Gold ornament: center diamond flanked by gold rules. */
.why-choose__divider {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 72px auto 0;
    max-width: 360px;
}
.why-choose__divider::before,
.why-choose__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--brand-gold), transparent);
}
.why-choose__divider-mark {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--brand-gold);
    transform: rotate(45deg);
    box-shadow: 0 0 0 4px var(--brand-white), 0 0 0 5px var(--brand-gold);
    flex-shrink: 0;
}

/* ---------- Header ---------- */
.why-choose__header {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 64px;
}
.why-choose__kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 22px;
}
.why-choose__kicker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
    flex-shrink: 0;
}
.why-choose__kicker-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-navy);
}
.why-choose__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: var(--brand-black);
    margin: 0 0 22px;
}
.why-choose__heading-em {
    display: block;
    font-style: italic;
    font-weight: 700;
    color: var(--brand-gold);
    margin-top: 4px;
}
.why-choose__lead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: var(--brand-body);
    margin: 0 auto;
    max-width: 640px;
}
.why-choose__header::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--brand-gold);
    margin: 28px auto 0;
}

/* ---------- 2-column grid of benefit items ---------- */
.why-choose__list {
    list-style: none;
    counter-reset: why-counter;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    position: relative;
    z-index: 1;
}
.why-choose__item {
    counter-increment: why-counter;
    position: relative;
    margin: 0;
    padding: 36px 36px 32px;
    background:
        linear-gradient(135deg, var(--brand-white) 0%, var(--brand-cream) 100%);
    border: 1px solid var(--brand-rule);
    display: flex;
    align-items: flex-start;
    gap: 22px;
    box-shadow: 0 2px 12px rgba(11, 27, 59, 0.04);
    overflow: hidden;
    transition: transform .5s var(--ease-out), border-color .4s ease, box-shadow .5s ease;
}

/* Gold left stripe — scales width on hover */
.why-choose__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--brand-gold);
    transition: width .45s var(--ease-out);
}

/* Italic Playfair counter watermark — top-right of card */
.why-choose__item::after {
    content: counter(why-counter, decimal-leading-zero);
    position: absolute;
    top: 22px;
    right: 26px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--brand-gold);
    opacity: 0.16;
    pointer-events: none;
    user-select: none;
    transition: opacity .45s ease, transform .55s var(--ease-out);
}

.why-choose__item:hover {
    border-color: rgba(201, 162, 39, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(201, 162, 39, 0.12), 0 8px 18px rgba(11, 27, 59, 0.06);
}
.why-choose__item:hover::before {
    width: 5px;
}
.why-choose__item:hover::after {
    opacity: 0.32;
    transform: translateY(-2px);
}

/* Last item — spans both columns as closing statement.
   Slightly different treatment so it reads as a capstone, not just another card. */
.why-choose__item--wide {
    grid-column: 1 / -1;
    padding: 40px 44px 36px;
    background:
        linear-gradient(135deg, var(--brand-cream) 0%, var(--brand-white) 50%, var(--brand-cream) 100%);
    align-items: center;
}
.why-choose__item--wide::after {
    font-size: 54px;
    top: 26px;
    right: 32px;
}

/* ---------- Icon (gold-bordered circle with checkmark) ---------- */
.why-choose__icon {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--brand-gold);
    background: var(--brand-white);
    color: var(--brand-gold);
    transition: background-color .4s ease, color .4s ease, transform .55s var(--ease-out);
    z-index: 1;
}
/* Halo ring that pulses out on hover */
.why-choose__icon::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--brand-gold);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .5s ease, transform .55s var(--ease-out);
    pointer-events: none;
}
.why-choose__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}
.why-choose__item:hover .why-choose__icon {
    background: var(--brand-gold);
    color: var(--brand-white);
    transform: rotate(-8deg) scale(1.05);
}
.why-choose__item:hover .why-choose__icon::before {
    opacity: 0.4;
    transform: scale(1);
}

/* ---------- Item body ---------- */
.why-choose__body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.why-choose__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: var(--brand-black);
    margin: 0 0 14px;
    padding-right: 60px;
    transition: color .35s ease;
}
.why-choose__title::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--brand-gold);
    margin-top: 14px;
    transition: width .5s var(--ease-out);
}
.why-choose__item:hover .why-choose__title {
    color: var(--brand-gold);
}
.why-choose__item:hover .why-choose__title::after {
    width: 52px;
}
.why-choose__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    color: var(--brand-body);
    margin: 0;
}


/* ====================================================================
   Closing CTA — "Dependable Cleaning Services for Homes & Businesses"
   ====================================================================
   Split layout: navy panel on left with heading + button + phone CTA,
   white body card on right with descriptive paragraphs + trust badges.
   Panel "hangs off" the cream background by sitting in a card with
   sharp navy-to-white visual split.

   Markup: <section.closing-cta> > .closing-cta__inner (5/7 grid) >
   [.closing-cta__panel (navy) + .closing-cta__body (white)]
   ==================================================================== */

.closing-cta {
    position: relative;
    padding: 88px 0 96px;
}

/* Decorative italic Playfair watermark behind the card */
.closing-cta::before {
    content: "Contact";
    position: absolute;
    bottom: 32px;
    right: -28px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 220px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -5px;
}

/* ---------- Inner card with 5/7 split ---------- */
.closing-cta__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 5fr 7fr;
    background: var(--brand-white);
    box-shadow: 0 32px 80px rgba(11, 27, 59, 0.12), 0 8px 20px rgba(11, 27, 59, 0.06);
    overflow: hidden;
}

/* ---------- Navy panel (left) ---------- */
.closing-cta__panel {
    position: relative;
    padding: 72px 56px;
    background: #0e192b;
    color: var(--brand-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 380px;
}

/* Top gold strip */
.closing-cta__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--brand-gold) 0%, var(--brand-gold-light) 50%, var(--brand-gold) 100%);
}

/* Decorative diagonal gold accent in bottom-left corner of panel */
.closing-cta__panel::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
    background: linear-gradient(45deg, rgba(201, 162, 39, 0.18) 0%, transparent 60%);
    pointer-events: none;
}

.closing-cta__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
    position: relative;
    z-index: 1;
}
.closing-cta__kicker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
    flex-shrink: 0;
}
.closing-cta__kicker-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-gold-light);
}

.closing-cta__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--brand-white);
    margin: 0;
    position: relative;
    z-index: 1;
}
.closing-cta__heading-em {
    display: block;
    font-style: italic;
    font-weight: 700;
    color: var(--brand-gold);
    margin-top: 6px;
}


/* ---------- Body (right side, white) ---------- */
.closing-cta__body {
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
}

.closing-cta__para {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.85;
    color: var(--brand-body);
    margin: 0 0 36px;
    flex: 1;
}

/* First-letter drop cap for editorial polish */
.closing-cta__para::first-letter {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    color: var(--brand-gold);
    font-size: 1.4em;
    line-height: 1;
    margin-right: 2px;
}

/* ---------- Button ---------- */
.closing-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 36px;
    background: var(--brand-gold);
    color: var(--brand-white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--brand-gold);
    box-shadow: 0 10px 28px rgba(201, 162, 39, 0.28);
    transition: background-color .4s ease, color .4s ease, transform .4s var(--ease-out), box-shadow .4s ease, gap .4s var(--ease-out), border-color .4s ease;
    align-self: flex-start;
}
.closing-cta__button-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform .4s var(--ease-out);
}
.closing-cta__button:hover,
.closing-cta__button:focus-visible {
    background: transparent;
    color: var(--brand-gold);
    gap: 18px;
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(201, 162, 39, 0.36);
    outline: none;
}
.closing-cta__button:hover .closing-cta__button-arrow,
.closing-cta__button:focus-visible .closing-cta__button-arrow {
    transform: translateX(6px);
}


/* ====================================================================
   Service Tiles — "Professional Cleaning Services in Gastonia"
   ====================================================================
   3-column compact tile grid with SVG icons. Distinct from the
   image-led .svc-grid (which has a single sticky image + numbered
   menu). Tiles are uniform-height cards with icon, name, description,
   and a corner arrow.

   Markup: <section.svc-tiles> > header + ul.svc-tiles__grid >
   .svc-tiles__item > a.svc-tiles__tile > icon + h3 + p + arrow
   ==================================================================== */

.svc-tiles {
    position: relative;
    padding: 88px 0 96px;
}

/* Decorative "Gastonia" italic Playfair watermark */
.svc-tiles::before {
    content: "Gastonia";
    position: absolute;
    top: 32px;
    right: -40px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 200px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -5px;
}

/* ---------- Header ---------- */
.svc-tiles__header {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}
.svc-tiles__kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 22px;
}
.svc-tiles__kicker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);
    flex-shrink: 0;
}
.svc-tiles__kicker-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-navy);
}
.svc-tiles__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: var(--brand-black);
    margin: 0 0 22px;
}
.svc-tiles__heading-em {
    font-style: italic;
    font-weight: 700;
    color: var(--brand-gold);
}
.svc-tiles__lead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--brand-body);
    margin: 0 auto;
    max-width: 640px;
}
.svc-tiles__header::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--brand-gold);
    margin: 28px auto 0;
}

/* ---------- 3-column tile grid ---------- */
.svc-tiles__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}
.svc-tiles__item {
    margin: 0;
    padding: 0;
    display: flex;
}

/* ---------- Tile (full <a> link) ---------- */
.svc-tiles__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 32px 28px 32px;
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(11, 27, 59, 0.03);
    transition: transform .5s var(--ease-out), border-color .35s ease, box-shadow .5s ease, background-color .35s ease;
}

/* Gold accent stripe sliding in from bottom on hover */
.svc-tiles__tile::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s var(--ease-out);
}

.svc-tiles__tile:hover,
.svc-tiles__tile:focus-visible {
    transform: translateY(-5px);
    border-color: var(--brand-gold);
    background: var(--brand-cream);
    box-shadow: 0 22px 48px rgba(11, 27, 59, 0.1), 0 6px 16px rgba(201, 162, 39, 0.08);
    outline: none;
}
.svc-tiles__tile:hover::before,
.svc-tiles__tile:focus-visible::before {
    transform: scaleX(1);
}

/* ---------- Icon ---------- */
.svc-tiles__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.18);
    color: var(--brand-gold);
    margin-bottom: 22px;
    transition: background-color .4s ease, color .4s ease, transform .55s var(--ease-out), border-color .4s ease;
}
.svc-tiles__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}
.svc-tiles__tile:hover .svc-tiles__icon,
.svc-tiles__tile:focus-visible .svc-tiles__icon {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-white);
    transform: rotate(-8deg) scale(1.06);
}

/* ---------- Name ---------- */
.svc-tiles__name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: var(--brand-black);
    margin: 0 0 12px;
    padding-right: 44px;
    transition: color .35s ease;
}
.svc-tiles__tile:hover .svc-tiles__name,
.svc-tiles__tile:focus-visible .svc-tiles__name {
    color: var(--brand-gold);
}

/* Gold underline beneath name */
.svc-tiles__name::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background: var(--brand-gold);
    margin-top: 12px;
    transition: width .5s var(--ease-out);
}
.svc-tiles__tile:hover .svc-tiles__name::after {
    width: 44px;
}

/* ---------- Description ---------- */
.svc-tiles__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--brand-body);
    margin: 0;
    flex: 1;
}

/* ---------- Corner arrow ---------- */
.svc-tiles__arrow {
    position: absolute;
    top: 28px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--brand-gold);
    font-size: 16px;
    line-height: 1;
    opacity: 0.4;
    transition: opacity .4s ease, transform .45s var(--ease-out), background-color .35s ease, color .35s ease;
}
.svc-tiles__tile:hover .svc-tiles__arrow,
.svc-tiles__tile:focus-visible .svc-tiles__arrow {
    opacity: 1;
    background: var(--brand-gold);
    color: var(--brand-white);
    transform: translateX(4px) translateY(-2px) rotate(-12deg);
}


/* ====================================================================
   Why Ledger — "Why Clients Choose Our Residential and Commercial
   Cleaning Services in Gastonia"
   ====================================================================
   Visually distinct from .why-choose card grid. Editorial 5/7 split:
   sticky intro column (kicker + h2 + lead + decorative mark) on the
   left, ledger of 7 horizontal rows on the right (large gold numeral,
   title, description), hairline-separated.

   Markup: <section.why-ledger> > .why-ledger__layout >
   [.why-ledger__intro + ol.why-ledger__list with .why-ledger__row]
   ==================================================================== */

.why-ledger {
    position: relative;
    padding: 88px 0 96px;
    overflow: hidden;
}

/* Decorative italic Playfair watermark behind everything */
.why-ledger::before {
    content: "Trust";
    position: absolute;
    bottom: 40px;
    left: -28px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 240px;
    line-height: 0.85;
    color: var(--brand-gold);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -6px;
}

/* ---------- 5/7 layout ---------- */
.why-ledger__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 80px;
    align-items: start;
}

/* ---------- Intro (sticky on desktop) ---------- */
.why-ledger__intro {
    position: sticky;
    top: 32px;
    align-self: start;
    padding-right: 8px;
}
.why-ledger__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 26px;
}
.why-ledger__kicker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);
    flex-shrink: 0;
}
.why-ledger__kicker-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-navy);
}
.why-ledger__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: var(--brand-black);
    margin: 0 0 26px;
}
.why-ledger__heading-em {
    font-style: italic;
    font-weight: 700;
    color: var(--brand-gold);
}
.why-ledger__lead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.75;
    color: var(--brand-body);
    margin: 0 0 36px;
    padding-left: 18px;
    border-left: 2px solid var(--brand-gold);
}

/* Decorative image mark — fills column width with portrait ratio + offset gold accent */
.why-ledger__mark {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--brand-white);
    line-height: 0;
    margin-top: 8px;
}
.why-ledger__mark::after {
    content: "";
    position: absolute;
    bottom: -18px;
    right: -18px;
    width: 120px;
    height: 120px;
    border: 2px solid var(--brand-gold);
    pointer-events: none;
    z-index: -1;
    transition: transform .55s var(--ease-out);
}
.why-ledger:hover .why-ledger__mark::after {
    transform: translate(6px, 6px);
}
.why-ledger__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out), filter .6s ease;
}
.why-ledger:hover .why-ledger__mark img {
    transform: scale(1.05);
    filter: saturate(1.06);
}

/* ---------- Ledger list ---------- */
.why-ledger__list {
    list-style: none;
    counter-reset: why-ledger-counter;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--brand-rule);
}
.why-ledger__row {
    counter-increment: why-ledger-counter;
    position: relative;
    margin: 0;
    padding: 26px 8px 26px 0;
    border-bottom: 1px solid var(--brand-rule);
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 28px;
    align-items: baseline;
    transition: padding-left .45s var(--ease-out), background-color .35s ease;
}
.why-ledger__row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(to right, rgba(201, 162, 39, 0.08), transparent);
    transition: width .45s var(--ease-out);
    pointer-events: none;
}
.why-ledger__row:hover {
    padding-left: 20px;
}
.why-ledger__row:hover::before {
    width: 100%;
}

/* ---------- Numeral ---------- */
.why-ledger__numeral {
    position: relative;
    z-index: 1;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--brand-gold);
    opacity: 0.5;
    transition: opacity .4s ease, transform .5s var(--ease-out);
}
.why-ledger__row:hover .why-ledger__numeral {
    opacity: 1;
    transform: translateX(4px);
}

/* ---------- Row body ---------- */
.why-ledger__row-body {
    position: relative;
    z-index: 1;
}
.why-ledger__row-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: var(--brand-black);
    margin: 0 0 8px;
    transition: color .35s ease;
}
.why-ledger__row:hover .why-ledger__row-title {
    color: var(--brand-gold);
}
.why-ledger__row-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    color: var(--brand-body);
    margin: 0;
}


/* ====================================================================
   Blog Article Detail Page — .article-page-type.new-blog-page-type
   ====================================================================
   Editorial reading experience for individual blog posts.
   Hero: H1 + featured image with accent square + author/date meta + category pills.
   Body: max-width prose with drop cap, gold rules, h2/h3 hierarchy, list styling.
   Recent Posts aside reuses .main-blog-widget styling.

   Scoped to .article-page-type to avoid affecting the blog list page.
   ==================================================================== */

.article-page-type.new-blog-page-type {
    background: var(--brand-cream);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.article-page-type.new-blog-page-type > .grid-container {
    padding-top: 72px;
    padding-bottom: 80px;
    max-width: 1200px;
}

/* ---------- Article H1 (banner heading) ---------- */
.article-page-type .blog-article-content > .article-title.banner-main-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--brand-black);
    margin: 0 0 40px;
    max-width: 900px;
}

/* Italic-gold flourish — first word in italic gold for an editorial signature.
   Using ::first-line is too greedy; instead let's give the H1 a gold rule above. */
.article-page-type .blog-article-content > .article-title.banner-main-heading::before {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--brand-gold);
    margin: 0 0 28px;
}

/* ---------- Hero block (image + meta) ---------- */
.article-page-type .blog-article-content > .grid-x.align-middle {
    margin-bottom: 48px;
    align-items: stretch !important;
}

/* Featured image with offset gold accent square */
.article-page-type .ps-article-img {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--brand-white);
    line-height: 0;
}
.article-page-type .ps-article-img::after {
    content: "";
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 96px;
    height: 96px;
    border: 2px solid var(--brand-gold);
    pointer-events: none;
    z-index: -1;
    transition: transform .55s var(--ease-out);
}
.article-page-type .blog-article-content:hover .ps-article-img::after {
    transform: translate(5px, 5px);
}
.article-page-type .ps-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out), filter .6s ease;
}
.article-page-type .blog-article-content:hover .ps-article-img img {
    transform: scale(1.04);
    filter: saturate(1.06);
}

/* ---------- Author / Date / Categories panel ---------- */
.article-page-type .blog-author {
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    border-top: 3px solid var(--brand-gold);
    padding: 32px 28px;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 12px 32px rgba(11, 27, 59, 0.06);
}
.article-page-type .blog-author .lab-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.article-page-type .blog-author .lab-ul > li {
    margin: 0;
    padding: 0;
}

/* Author name */
.article-page-type .blog-author .author_name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.4px;
    color: var(--brand-navy);
    position: relative;
    padding-left: 18px;
}
.article-page-type .blog-author .author_name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 1px;
    background: var(--brand-gold);
}

/* Date */
.article-page-type .blog-author .pubdate {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: var(--brand-gold) !important;
    letter-spacing: -0.5px;
}

/* "Categories:" label */
.article-page-type .blog-author .lab-ul {
    position: relative;
}

/* The categories label text node is unwrapped — use ::before via the ul */
.article-page-type .blog-author .lab-ul::before {
    content: "Filed Under";
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-muted);
    padding-top: 4px;
    margin-top: 4px;
    border-top: 1px solid var(--brand-rule);
}

/* Hide the plain "Categories:" text node (it's loose text in the ul) */
.article-page-type .blog-author .lab-ul {
    color: transparent;
    font-size: 0;
}
.article-page-type .blog-author .lab-ul > li,
.article-page-type .blog-author .lab-ul::before,
.article-page-type .blog-author .lab-ul > span {
    color: var(--brand-body);
    font-size: 13px;
}

/* Category pills */
.article-page-type .blog-author .lab-ul > span {
    display: inline-block;
    margin: 4px 6px 0 0;
}
.article-page-type .blog-author .lab-ul > span a {
    display: inline-block;
    padding: 4px 12px;
    background: var(--brand-cream);
    border: 1px solid var(--brand-rule);
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--brand-navy);
    text-decoration: none;
    text-transform: capitalize;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.article-page-type .blog-author .lab-ul > span a:hover,
.article-page-type .blog-author .lab-ul > span a:focus-visible {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-white);
    outline: none;
}
/* Hide the comma separator spans (they're empty spans containing just ",") */
.article-page-type .blog-author .lab-ul > span:has(> a) ~ span:not(:has(*)) {
    display: none;
}
/* Fallback: hide spans whose only text is "," */
.article-page-type .blog-author .lab-ul > span:empty,
.article-page-type .blog-author .lab-ul > span:not(:has(a)) {
    font-size: 0;
    color: transparent;
}

/* ---------- Article body container ---------- */
.article-page-type .article-body.rte {
    max-width: 100%;
    margin: 0 auto;
    background: var(--brand-white);
    padding: 64px 72px;
    border: 1px solid var(--brand-rule);
    box-shadow: 0 16px 48px rgba(11, 27, 59, 0.06);
    position: relative;
}

/* Gold accent strip on top of the body card */
.article-page-type .article-body.rte::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--brand-gold) 0%, var(--brand-gold-light) 50%, var(--brand-gold) 100%);
}

/* ---------- Body typography ---------- */
.article-page-type .article-body.rte > p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.85;
    color: var(--brand-body);
    margin: 0 0 24px;
}

/* H2 — section breaks */
.article-page-type .article-body.rte > h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--brand-black);
    margin: 56px 0 24px;
    padding-top: 32px;
    border-top: 1px solid var(--brand-rule);
    position: relative;
}
.article-page-type .article-body.rte > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.article-page-type .article-body.rte > h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--brand-gold);
    margin-top: 16px;
}

/* H3 — sub-sections */
.article-page-type .article-body.rte > h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--brand-black);
    margin: 40px 0 18px;
    padding-left: 18px;
    border-left: 3px solid var(--brand-gold);
}

/* Lists — editorial styling with gold marker */
.article-page-type .article-body.rte > ul {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}
.article-page-type .article-body.rte > ul > li {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--brand-body);
    margin: 0 0 14px;
    padding-left: 28px;
}
.article-page-type .article-body.rte > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 14px;
    height: 1px;
    background: var(--brand-gold);
}
.article-page-type .article-body.rte > ul > li strong {
    font-weight: 700;
    color: var(--brand-black);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.05em;
}

/* Inline links */
.article-page-type .article-body.rte a:not(.button) {
    color: var(--brand-gold);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 39, 0.4);
    transition: color .3s ease, border-bottom-color .3s ease;
}
.article-page-type .article-body.rte a:not(.button):hover,
.article-page-type .article-body.rte a:not(.button):focus-visible {
    color: var(--brand-navy);
    border-bottom-color: var(--brand-navy);
    outline: none;
}

/* ---------- Sidebar (Recent Posts) ---------- */
.article-page-type .blog-sidebar {
    margin-top: 80px;
}
.article-page-type .blog-sidebar-widget {
    position: relative;
}
.article-page-type .blog-sidebar-h2.recent-posts-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--brand-black);
    margin: 0 0 40px;
    text-align: center;
    position: relative;
    padding-bottom: 24px;
}
.article-page-type .blog-sidebar-h2.recent-posts-text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--brand-gold);
}

/* Recent posts list — single featured card style */
.article-page-type .ps-blog-recent-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 32px;
}
/* ---------- Recent Posts Card ---------- */
.article-page-type .ps-blog-recent-posts .blog-li {
    position: relative;
    margin: 0;
    padding: 0;
    background: var(--brand-white);
    border: 1px solid var(--brand-rule);
    overflow: hidden;
    transition: transform .5s var(--ease-out), border-color .35s ease, box-shadow .5s ease;
}

/* Gold accent stripe on top — slides in on hover */
.article-page-type .ps-blog-recent-posts .blog-li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s var(--ease-out);
    z-index: 2;
}
.article-page-type .ps-blog-recent-posts .blog-li:hover {
    transform: translateY(-4px);
    border-color: var(--brand-gold);
    box-shadow: 0 22px 48px rgba(11, 27, 59, 0.1);
}
.article-page-type .ps-blog-recent-posts .blog-li:hover::before {
    transform: scaleX(1);
}

.article-page-type .ps-blog-recent-posts .blog-li .row {
    margin: 0;
    width: 100%;
}
.article-page-type .ps-blog-recent-posts .blog-article {
    padding: 0;
    width: 100%;
}

/* ---------- Image ---------- */
.article-page-type .ps-blog-recent-posts .blog-article .ps-article-img {
    position: relative;
    margin: 0;
    padding: 0;
    aspect-ratio: auto;
    height: 100%;
    overflow: hidden;
    line-height: 0;
}
.article-page-type .ps-blog-recent-posts .blog-article .ps-article-img::after {
    display: none;
}
.article-page-type .ps-blog-recent-posts .blog-article .ps-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out), filter .6s ease;
}
.article-page-type .ps-blog-recent-posts .blog-li:hover .ps-article-img img {
    transform: scale(1.05);
    filter: saturate(1.06);
}

/* ---------- Content side ---------- */
.article-page-type .ps-blog-recent-posts .blog-article > .ps-article-img + .article-category,
.article-page-type .ps-blog-recent-posts .blog-li > .row > .blog-article > .article-category,
.article-page-type .ps-blog-recent-posts .article-category {
    margin: 36px 40px 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

/* "Categories:" label as a tracked uppercase tag */
.article-page-type .ps-blog-recent-posts .article-category .categories_text {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-muted);
    margin: 0 4px 0 0;
}

/* Category pills */
.article-page-type .ps-blog-recent-posts .article-category > span:not(.categories_text) {
    display: inline-block;
    line-height: 1;
}
.article-page-type .ps-blog-recent-posts .article-category > span:not(.categories_text) > a {
    display: inline-block;
    padding: 5px 12px;
    background: var(--brand-cream);
    border: 1px solid var(--brand-rule);
    border-radius: 100px;
    color: var(--brand-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 1.4;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.article-page-type .ps-blog-recent-posts .article-category > span:not(.categories_text) > a:hover,
.article-page-type .ps-blog-recent-posts .article-category > span:not(.categories_text) > a:focus-visible {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-white);
    outline: none;
}

/* Hide bare comma separator spans (they hold just "," text) */
.article-page-type .ps-blog-recent-posts .article-category > span:not(.categories_text):not(:has(a)) {
    display: none;
}

/* ---------- Article title ---------- */
.article-page-type .ps-blog-recent-posts .article-title {
    margin: 0 40px 18px;
    padding: 0;
    position: relative;
}
.article-page-type .ps-blog-recent-posts .article-title a {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -0.4px;
    color: var(--brand-black);
    text-decoration: none;
    transition: color .3s ease;
    display: block;
}
.article-page-type .ps-blog-recent-posts .article-title a:hover,
.article-page-type .ps-blog-recent-posts .article-title a:focus-visible {
    color: var(--brand-gold);
    outline: none;
}

/* Gold underline beneath title that extends on card hover */
.article-page-type .ps-blog-recent-posts .article-title::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background: var(--brand-gold);
    margin-top: 18px;
    transition: width .5s var(--ease-out);
}
.article-page-type .ps-blog-recent-posts .blog-li:hover .article-title::after {
    width: 64px;
}

/* ---------- Item body (excerpt) ---------- */
.article-page-type .ps-blog-recent-posts .item-body {
    margin: 0 40px 22px;
    padding: 0;
}
.article-page-type .ps-blog-recent-posts .item-body p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--brand-body);
    margin: 0;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Read more CTA ---------- */
.article-page-type .ps-blog-recent-posts > .blog-li p.pb-0.mb-0,
.article-page-type .ps-blog-recent-posts .blog-li .blog-article > p.pb-0.mb-0 {
    margin: 0 40px 36px;
    padding: 0;
    line-height: 1;
}
.article-page-type .ps-blog-recent-posts .blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--brand-navy);
    text-decoration: none;
    transition: color .3s ease, gap .35s var(--ease-out);
}
.article-page-type .ps-blog-recent-posts .blog-read-more::after {
    content: "→";
    color: var(--brand-gold);
    font-size: 14px;
    transition: transform .4s var(--ease-out);
}
.article-page-type .ps-blog-recent-posts .blog-read-more:hover,
.article-page-type .ps-blog-recent-posts .blog-read-more:focus-visible {
    color: var(--brand-gold);
    gap: 16px;
    outline: none;
}
.article-page-type .ps-blog-recent-posts .blog-read-more:hover::after {
    transform: translateX(6px);
}


/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .new-header .logo-container { padding: 14px 0; }
    .new-header .logo-container img { max-height: 100px; }
    .new-header .openMenu { padding: 8px 10px; }

    .ww-form-container-3 { padding: 40px 32px 32px; }
    .ww-form-container-3 .fieldset { row-gap: 18px; }

    .overview { padding: 56px 0 64px; }
    .overview::before { font-size: 130px; bottom: 20px; right: -10px; }
    .overview__inner { grid-template-columns: 1fr; gap: 40px; }
    .overview__heading-col { position: relative; top: 0; }
    .overview__heading { font-size: 34px; letter-spacing: -0.4px; margin-bottom: 22px; }
    .overview__lead { font-size: 19px; padding-left: 18px; }
    .overview__para { font-size: 15px; line-height: 1.75; }

    .svc-grid { padding: 56px 0 64px; }
    .svc-grid::before { font-size: 130px; bottom: 28px; right: -20px; }
    .svc-grid__layout { grid-template-columns: 1fr; gap: 48px; }
    .svc-grid__media-col { position: relative; top: 0; }
    .svc-grid__media { aspect-ratio: 16 / 10; max-width: 560px; }
    .svc-grid__media-accent { width: 72px; height: 72px; bottom: -12px; right: -12px; }
    .svc-grid__heading { font-size: 34px; letter-spacing: -0.4px; }
    .svc-grid__lead { font-size: 14.5px; }
    .svc-grid__row { grid-template-columns: 64px 1fr 40px; column-gap: 22px; padding: 20px 0; }
    .svc-grid__numeral { font-size: 32px; }
    .svc-grid__name { font-size: 20px; }
    .svc-grid__row-arrow { width: 40px; height: 40px; }

    .why-choose { padding: 64px 0 72px; }
    .why-choose__divider { margin-top: 56px; max-width: 280px; gap: 14px; }

    .closing-cta { padding: 56px 0 64px; }
    .closing-cta::before { font-size: 130px; bottom: 20px; right: -16px; }
    .closing-cta__inner { grid-template-columns: 1fr; }
    .closing-cta__panel { padding: 56px 40px; min-height: 0; }
    .closing-cta__heading { font-size: 30px; letter-spacing: -0.4px; }
    .closing-cta__body { padding: 40px 40px; }
    .closing-cta__para { font-size: 15px; line-height: 1.8; }

    .svc-tiles { padding: 56px 0 64px; }
    .svc-tiles::before { font-size: 130px; top: 24px; right: -24px; }
    .svc-tiles__header { margin-bottom: 40px; }
    .svc-tiles__heading { font-size: 34px; letter-spacing: -0.4px; }
    .svc-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .svc-tiles__tile { padding: 28px 24px; }
    .svc-tiles__icon { width: 48px; height: 48px; margin-bottom: 18px; }
    .svc-tiles__icon svg { width: 22px; height: 22px; }
    .svc-tiles__name { font-size: 18px; padding-right: 40px; }
    .svc-tiles__arrow { top: 24px; right: 20px; }

    .why-ledger { padding: 56px 0 64px; }
    .why-ledger::before { font-size: 140px; bottom: 24px; left: -18px; }
    .why-ledger__layout { grid-template-columns: 1fr; gap: 40px; }
    .why-ledger__intro { position: relative; top: 0; padding-right: 0; }
    .why-ledger__heading { font-size: 30px; letter-spacing: -0.4px; }
    .why-ledger__lead { font-size: 14.5px; }
    .why-ledger__mark { margin-top: 4px; aspect-ratio: 16 / 10; }
    .why-ledger__mark::after { width: 80px; height: 80px; bottom: -14px; right: -14px; }

    .article-page-type.new-blog-page-type > .grid-container { padding-top: 48px; padding-bottom: 56px; }
    .article-page-type .blog-article-content > .article-title.banner-main-heading { font-size: 38px; letter-spacing: -0.6px; margin-bottom: 32px; }
    .article-page-type .blog-article-content > .grid-x.align-middle { margin-bottom: 36px; }
    .article-page-type .ps-article-img::after { width: 72px; height: 72px; bottom: -12px; right: -12px; }
    .article-page-type .blog-author { margin-top: 24px; padding: 24px 22px; }
    .article-page-type .blog-author .pubdate { font-size: 20px; }
    .article-page-type .article-body.rte { padding: 48px 40px; max-width: 100%; }
    .article-page-type .article-body.rte > h2 { font-size: 26px; margin-top: 44px; padding-top: 28px; }
    .article-page-type .article-body.rte > h3 { font-size: 20px; margin-top: 32px; }
    .article-page-type .blog-sidebar { margin-top: 56px; }
    .article-page-type .blog-sidebar-h2.recent-posts-text { font-size: 26px; margin-bottom: 32px; }
    .article-page-type .ps-blog-recent-posts .article-category { margin: 26px 28px 14px; }
    .article-page-type .ps-blog-recent-posts .article-title { margin: 0 28px 16px; }
    .article-page-type .ps-blog-recent-posts .article-title a { font-size: 21px; }
    .article-page-type .ps-blog-recent-posts .item-body { margin: 0 28px 20px; }
    .article-page-type .ps-blog-recent-posts .blog-article > p.pb-0.mb-0 { margin: 0 28px 28px; }
    .why-ledger__row { grid-template-columns: 64px 1fr; column-gap: 22px; padding: 22px 8px 22px 0; }
    .why-ledger__numeral { font-size: 34px; }
    .why-ledger__row-title { font-size: 18px; }
    .why-choose::before { font-size: 180px; top: 30px; right: -16px; }
    .why-choose__header { margin-bottom: 48px; }
    .why-choose__heading { font-size: 34px; letter-spacing: -0.4px; }
    .why-choose__list { gap: 18px; }
    .why-choose__item { padding: 28px 26px 26px; gap: 18px; }
    .why-choose__item--wide { padding: 32px 30px 28px; }
    .why-choose__item::after { font-size: 36px; top: 18px; right: 20px; }
    .why-choose__item--wide::after { font-size: 44px; top: 22px; right: 26px; }
    .why-choose__icon { width: 46px; height: 46px; }
    .why-choose__icon svg { width: 20px; height: 20px; }
    .why-choose__title { font-size: 18px; padding-right: 48px; margin-bottom: 12px; }
    .why-choose__title::after { margin-top: 12px; width: 24px; }
    .why-choose__item:hover .why-choose__title::after { width: 44px; }



    .new-footer::after { font-size: 160px; bottom: 40px; right: -16px; }
    .new-footer .footer-menu-container,
    .footer-menu-container { margin-bottom: 0; }
    .new-footer .footer-text,
    .new-footer .contact-us-column { padding: 40px 0 24px; text-align: center; }
    .new-footer .footer-text p { max-width: none; margin-left: auto; margin-right: auto; }
    .new-footer h4 { font-size: 20px; }
    .new-footer h4::after { left: 50%; transform: translateX(-50%); }
    .new-footer .footer-social-media ul { justify-content: center; }
    .new-footer .contact-us-column .contact-number .siteDisplayNumber,
    .new-footer .contact-us-column .contact-number a { font-size: 14px; justify-content: center; }
    .new-footer #mainNav { gap: 2px; }
    .new-footer #mainNav > li > a { padding: 8px 14px; font-size: 11px; letter-spacing: 1.2px; }

    .classii-hero .bn-content { padding: 30px 15px; max-width: 100%; background: #0b1b3b; }
    .classii-hero .banner-main-heading { font-size: 40px; letter-spacing: -0.8px; margin-bottom: 10px; }
    .classii-hero .classii-eyebrow { font-size: 12px; letter-spacing: 3px; margin-bottom: 28px; }

    .main-blog-banner.new-blog-template .banner-main-heading {
        padding: 30px 24px;
        max-width: 100%;
        background: #0b1b3b;
        font-size: 40px;
        letter-spacing: -0.8px;
    }
    .main-blog-banner.new-blog-template .banner-main-heading::before { width: 36px; margin-bottom: 14px; }
    .main-blog-banner.new-blog-template:hover .banner-main-heading::before { width: 56px; }
    .blog-feature__heading,
    .spotlight__heading,
    .cta-banner__heading { font-size: 24px; letter-spacing: -0.3px; }
    .atlas__heading { font-size: 34px; letter-spacing: -0.5px; }

    /* Spotlight on tablet/mobile: full-width stacked cells need symmetric padding.
       For .spotlight--mirror, HTML order is content-first then media-col, which means
       cells naturally stack content-on-top. We use `order` to force media-col first
       (image on top) for both default and mirror variants when stacked. */
    .spotlight--mirror .grid-x > .spotlight__media-col { order: 1; }
    .spotlight--mirror .grid-x > .spotlight__content { order: 2; }
    .spotlight__media-col,
    .spotlight--mirror .spotlight__media-col { padding: 36px 24px 24px; }
    .spotlight__media-col::before,
    .spotlight--mirror .spotlight__media-col::before { width: 90px; height: 90px; }
    .spotlight__quote,
    .spotlight--mirror .spotlight__quote { margin: -56px 24px 0 24px; max-width: none; }
    .spotlight__quote-mark,
    .spotlight--mirror .spotlight__quote-mark { right: auto; left: 20px; top: 4px; }
    .spotlight__content,
    .spotlight--mirror .spotlight__content { padding: 16px 24px 48px; }
    .story__heading { font-size: 72px; letter-spacing: -2px; }
    .story__lead::first-letter { font-size: 108px; }
    .mission__statement { font-size: 36px; letter-spacing: -0.7px; line-height: 1.24; }
    .mission::before { font-size: 520px; }
    .founder__tagline { font-size: 42px; letter-spacing: -0.8px; }
    .founder__signature-name { font-size: 36px; }
    .founder__para--lead::first-letter { font-size: 88px; }
    .founder::before { font-size: 420px; top: -90px; }
    .voices__heading { font-size: 34px; letter-spacing: -0.6px; }
    .voices__quote-text { font-size: 17px; line-height: 1.55; }
    .atlas__lead { text-align: left; hyphens: none; }
    .atlas__main { padding: 24px 24px 28px 0; }
    .atlas__aside { padding: 24px 0 32px 24px; }
    .story::before { font-size: 340px; top: -100px; }
    .story::after { font-size: 340px; bottom: -120px; }
    .services__heading { font-size: 34px; letter-spacing: -0.8px; }
    .promise__heading { font-size: 34px; letter-spacing: -0.6px; }
    .features__heading { font-size: 34px; letter-spacing: -0.6px; }
    .features__card-title { font-size: 22px; }
    .routine__heading { font-size: 24px; letter-spacing: -0.5px; }
    .routine__content { padding: 48px 0 48px 24px; }
    .routine__media-wrap { padding: 48px 24px 48px 0; }
    .routine__media { min-height: 420px; }
    .deep__heading { font-size: 24px; letter-spacing: -0.5px; }
    .deep__content { padding: 32px 24px 48px; }
    .deep__media-wrap { padding: 48px 24px 0; }
    .deep__media { min-height: 320px; }
    .move__heading { font-size: 24px; letter-spacing: -0.5px; }
    .move__content { padding: 48px 0 48px 24px; }
    .move__media-wrap { padding: 48px 24px 48px 0; }
    .move__media { min-height: 420px; }
    .rental__heading { font-size: 24px; letter-spacing: -0.5px; }
    .rental__content { padding: 32px 24px 48px; }
    .rental__media-wrap { padding: 48px 24px 0; }
    .rental__media { min-height: 320px; }
    .apartment__heading { font-size: 24px; letter-spacing: -0.5px; }
    .apartment__content { padding: 48px 0 48px 24px; }
    .apartment__media-wrap { padding: 48px 24px 48px 0; }
    .apartment__media { min-height: 420px; }
    .faq__heading { font-size: 34px; letter-spacing: -1px; margin-bottom: 28px; }
    .faq__intro { padding: 48px 0 32px; }
    .faq__list { padding: 32px 0 48px; }
    .faq__question { font-size: 19px; }
    .faq__summary { padding: 24px 8px; gap: 18px; }
    .faq__answer { padding: 0 8px 28px 60px; }

    .contact__heading { font-size: 36px; letter-spacing: -1.2px; margin-bottom: 26px; }
    .contact__intro { padding: 48px 0 24px; }
    .contact__lede-cell { padding: 24px 0 32px; }
    .contact__lede { max-width: none; }
    .contact__monogram { font-size: 380px; bottom: -80px; left: -60px; }
    .contact__card { padding: 36px 22px 32px; }
    .contact__value { font-size: 17px; }
    .contact__areas { padding: 40px 0 32px; }
    .contact__areas-rule { flex-basis: 80px; }

    .main-blog-widget { padding: 48px 0 72px; }
    .main-blog-widget::before { font-size: 220px; bottom: -50px; right: -30px; }
    .main-blog-widget .search-input-blog { font-size: 18px; padding: 18px 56px 18px 22px; }
    .main-blog-widget .blog-search-button { width: 42px; height: 42px; right: 8px !important; left: auto; }
    .main-blog-widget .blog-li-1 .article-title a { font-size: 34px; letter-spacing: -0.6px; }
    .main-blog-widget .article-title a { font-size: 26px; }
    .main-blog-widget .blog-sidebar { padding-left: 0; padding-top: 16px; }
    .main-blog-widget .blog-sidebar .articles-filter-container { position: relative; top: 0; }

    .main-blog-widget { padding: 40px 0 56px; }
    .main-blog-widget .article-title a { font-size: 22px; }
    .main-blog-widget .blog-sidebar { padding-left: 0; padding-top: 12px; }
    .services__card-title { font-size: 22px; }
    .services__card-desc { font-size: 15px; line-height: 1.7; }
}
@media (max-width: 640px) {
    .new-header .logo-container { padding: 12px 0; }
    .new-header .logo-container img { max-height: 72px; }

    .ww-form-container-3 { padding: 28px 20px 24px; border-top-width: 2px; }

    .overview { padding: 36px 0 44px; }
    .overview::before { font-size: 80px; bottom: 14px; right: -8px; opacity: 0.04; letter-spacing: -2px; }
    .overview__inner { gap: 28px; }
    .overview__kicker { margin-bottom: 18px; }
    .overview__kicker-text { font-size: 10px; letter-spacing: 2.4px; }
    .overview__heading { font-size: 26px; line-height: 1.2; letter-spacing: -0.3px; margin-bottom: 18px; }
    .overview__heading-col::after { width: 40px; }
    .overview .overview:hover .overview__heading-col::after { width: 64px; }
    .overview__lead { font-size: 16px; line-height: 1.5; padding-left: 14px; margin-bottom: 22px; }
    .overview__para { font-size: 14px; line-height: 1.75; margin-bottom: 16px; }
    .overview__para:last-of-type { margin-bottom: 26px; }
    .overview__pills { padding-top: 24px; gap: 8px; }
    .overview__pill { padding: 8px 14px; font-size: 10px; letter-spacing: 1.2px; }

    .svc-grid { padding: 40px 0 48px; }
    .svc-grid::before { font-size: 90px; bottom: 20px; right: -16px; opacity: 0.04; letter-spacing: -2px; }
    .svc-grid__heading { font-size: 26px; letter-spacing: -0.3px; }
    .svc-grid__lead { font-size: 13.5px; padding-left: 14px; }
    .svc-grid__row { grid-template-columns: 50px 1fr 36px; column-gap: 16px; padding: 18px 0; }
    .svc-grid__numeral { font-size: 26px; }
    .svc-grid__name { font-size: 18px; }
    .svc-grid__desc { font-size: 13px; line-height: 1.6; }
    .svc-grid__row-arrow { width: 36px; height: 36px; font-size: 14px; }

    .why-choose { padding: 40px 0 48px; }
    .why-choose__divider { margin-top: 36px; max-width: 220px; gap: 12px; }
    .why-choose__divider-mark { width: 8px; height: 8px; box-shadow: 0 0 0 3px var(--brand-white), 0 0 0 4px var(--brand-gold); }

    .closing-cta { padding: 36px 0 44px; }
    .closing-cta::before { font-size: 80px; bottom: 14px; right: -12px; opacity: 0.04; letter-spacing: -2px; }
    .closing-cta__panel { padding: 40px 24px; min-height: 0; }
    .closing-cta__kicker-text { font-size: 10px; letter-spacing: 2.4px; }
    .closing-cta__kicker { margin-bottom: 20px; }
    .closing-cta__heading { font-size: 24px; letter-spacing: -0.3px; }
    .closing-cta__body { padding: 32px 24px; }
    .closing-cta__para { font-size: 14px; line-height: 1.8; margin-bottom: 28px; }
    .closing-cta__button { width: 100%; padding: 15px 24px; font-size: 11px; letter-spacing: 1.6px; }

    .svc-tiles { padding: 36px 0 44px; }
    .svc-tiles::before { font-size: 70px; top: 18px; right: -20px; opacity: 0.04; letter-spacing: -2px; }
    .svc-tiles__header { margin-bottom: 28px; }
    .svc-tiles__kicker { margin-bottom: 16px; }
    .svc-tiles__kicker-text { font-size: 10px; letter-spacing: 2.4px; }
    .svc-tiles__heading { font-size: 26px; letter-spacing: -0.3px; }
    .svc-tiles__lead { font-size: 14px; line-height: 1.7; }
    .svc-tiles__header::after { width: 40px; margin-top: 22px; }
    .svc-tiles__grid { grid-template-columns: 1fr; gap: 14px; }
    .svc-tiles__tile { padding: 24px 22px; }
    .svc-tiles__icon { width: 44px; height: 44px; margin-bottom: 16px; }
    .svc-tiles__icon svg { width: 20px; height: 20px; }
    .svc-tiles__name { font-size: 17px; padding-right: 36px; margin-bottom: 10px; }
    .svc-tiles__name::after { margin-top: 10px; width: 20px; }
    .svc-tiles__tile:hover .svc-tiles__name::after { width: 36px; }
    .svc-tiles__desc { font-size: 13px; line-height: 1.65; }
    .svc-tiles__arrow { top: 22px; right: 18px; width: 28px; height: 28px; font-size: 14px; }

    .why-ledger { padding: 36px 0 44px; }
    .why-ledger::before { font-size: 80px; bottom: 16px; left: -12px; opacity: 0.04; letter-spacing: -2px; }
    .why-ledger__layout { gap: 32px; }
    .why-ledger__kicker { margin-bottom: 18px; }
    .why-ledger__kicker-text { font-size: 10px; letter-spacing: 2.4px; }
    .why-ledger__heading { font-size: 24px; line-height: 1.2; letter-spacing: -0.3px; margin-bottom: 20px; }
    .why-ledger__lead { font-size: 13.5px; line-height: 1.7; padding-left: 14px; margin-bottom: 24px; }
    .why-ledger__mark { margin-top: 0; aspect-ratio: 4 / 3; }
    .why-ledger__mark::after { width: 56px; height: 56px; bottom: -10px; right: -10px; }

    .article-page-type.new-blog-page-type > .grid-container { padding-top: 32px; padding-bottom: 40px; }
    .article-page-type .blog-article-content > .article-title.banner-main-heading { font-size: 28px; letter-spacing: -0.4px; margin-bottom: 24px; }
    .article-page-type .blog-article-content > .article-title.banner-main-heading::before { width: 40px; margin-bottom: 20px; }
    .article-page-type .ps-article-img::after { width: 48px; height: 48px; bottom: -8px; right: -8px; }
    .article-page-type .blog-author { padding: 20px 18px; margin-top: 20px; }
    .article-page-type .blog-author .pubdate { font-size: 18px; }
    .article-page-type .article-body.rte { padding: 32px 22px; }
    .article-page-type .article-body.rte > p { font-size: 15px; line-height: 1.8; }
    .article-page-type .article-body.rte > h2 { font-size: 22px; margin-top: 36px; padding-top: 24px; }
    .article-page-type .article-body.rte > h3 { font-size: 18px; margin-top: 28px; padding-left: 14px; }
    .article-page-type .article-body.rte > ul > li { font-size: 14.5px; padding-left: 22px; }
    .article-page-type .blog-sidebar { margin-top: 40px; }
    .article-page-type .blog-sidebar-h2.recent-posts-text { font-size: 22px; margin-bottom: 24px; padding-bottom: 18px; }
    .article-page-type .ps-blog-recent-posts .blog-article .ps-article-img { aspect-ratio: 16 / 10; height: auto; }
    .article-page-type .ps-blog-recent-posts .article-category { margin: 24px 22px 12px; }
    .article-page-type .ps-blog-recent-posts .article-title { margin: 0 22px 14px; }
    .article-page-type .ps-blog-recent-posts .article-title a { font-size: 19px; }
    .article-page-type .ps-blog-recent-posts .article-title::after { margin-top: 14px; width: 28px; }
    .article-page-type .ps-blog-recent-posts .blog-li:hover .article-title::after { width: 50px; }
    .article-page-type .ps-blog-recent-posts .item-body { margin: 0 22px 18px; }
    .article-page-type .ps-blog-recent-posts .blog-article > p.pb-0.mb-0 { margin: 0 22px 24px; }
    .why-ledger__row { grid-template-columns: 50px 1fr; column-gap: 16px; padding: 18px 6px 18px 0; }
    .why-ledger__row:hover { padding-left: 12px; }
    .why-ledger__numeral { font-size: 26px; letter-spacing: -1px; }
    .why-ledger__row-title { font-size: 16px; margin-bottom: 6px; }
    .why-ledger__row-desc { font-size: 13px; line-height: 1.65; }
    .why-choose::before { font-size: 120px; top: 24px; right: -12px; opacity: 0.05; letter-spacing: -3px; }
    .why-choose__header { margin-bottom: 32px; }
    .why-choose__kicker { margin-bottom: 16px; }
    .why-choose__kicker-text { font-size: 10px; letter-spacing: 2.4px; }
    .why-choose__heading { font-size: 26px; letter-spacing: -0.3px; }
    .why-choose__lead { font-size: 14px; line-height: 1.7; }
    .why-choose__header::after { width: 40px; margin-top: 22px; }
    .why-choose__list { grid-template-columns: 1fr; gap: 14px; }
    .why-choose__item,
    .why-choose__item--wide { padding: 24px 22px 22px; gap: 16px; align-items: flex-start; }
    .why-choose__item::after,
    .why-choose__item--wide::after { font-size: 30px; top: 14px; right: 16px; }
    .why-choose__icon { width: 42px; height: 42px; }
    .why-choose__icon svg { width: 18px; height: 18px; }
    .why-choose__title { font-size: 16px; padding-right: 38px; margin-bottom: 10px; }
    .why-choose__title::after { margin-top: 10px; width: 22px; }
    .why-choose__item:hover .why-choose__title::after { width: 36px; }
    .why-choose__desc { font-size: 13px; line-height: 1.65; }

    .ww-form-container-3 .fieldset { row-gap: 16px; }
    .ww-form-container-3 label { font-size: 10px; letter-spacing: 1.4px; }
    .ww-form-container-3 .input,
    .ww-form-container-3 input,
    .ww-form-container-3 textarea { padding: 12px 14px; font-size: 14px; }
    .ww-form-container-3 textarea { min-height: 120px; }
    .ww-form-container-3 .iti--allow-dropdown input[type="tel"] { padding-left: 80px; }
    .ww-form-container-3 .form-container { flex-direction: column; align-items: stretch; gap: 18px; }
    .ww-form-container-3 .submit_wrap { margin-left: 0; }
    .ww-form-container-3 .submit_wrap .button.input { width: 100%; padding: 14px 28px; font-size: 11px; letter-spacing: 1.6px; }

    .new-header .mobile-contact-button-section { padding: 12px 14px; }
    .new-header .mobile-contact-button-section:first-of-type { padding-top: 16px; }
    .new-header .mobile-contact-button-section:last-of-type { padding-bottom: 18px; }
    .new-header .mobile-contact-button-section .button { padding: 12px 28px; font-size: 11px; letter-spacing: 1.3px; }
    .new-header .mobile-contact-button-section .head-contact-links .icon-part { width: 38px; height: 38px; }
    .new-header .mobile-contact-button-section .head-contact-links .heading { font-size: 9px; letter-spacing: 1.6px; }
    .new-header .mobile-contact-button-section .head-contact-links .below-text,
    .new-header .mobile-contact-button-section .head-contact-links .siteDisplayNumber { font-size: 13px; }
    .new-header .openMenu .icon { font-size: 22px; }

    .new-footer::after { font-size: 110px; bottom: 28px; right: -10px; opacity: 0.05; letter-spacing: -3px; }
    .new-footer .footer-menu-container { padding: 20px 0; }
    .new-footer #mainNav { gap: 0; }
    .new-footer #mainNav > li > a { padding: 8px 12px; font-size: 10.5px; letter-spacing: 1px; }
    .new-footer .footer-text,
    .new-footer .contact-us-column { padding: 32px 0 20px; text-align: center; }
    .new-footer .footer-text p { max-width: none; margin-left: auto; margin-right: auto; }
    .new-footer h4 { font-size: 18px; margin-bottom: 18px; padding-bottom: 14px; }
    .new-footer h4::after { left: 50%; transform: translateX(-50%); }
    .new-footer .footer-social-media ul { justify-content: center; }
    .new-footer .contact-us-column .contact-number .siteDisplayNumber,
    .new-footer .contact-us-column .contact-number a { font-size: 14px; justify-content: center; }
    .new-footer .copyright-container { padding: 18px 14px; }
    .new-footer .copyright { font-size: 11px; line-height: 1.6; }

    .classii-hero .classii-eyebrow { font-size: 11px; letter-spacing: 2.5px; gap: 12px; margin-bottom: 22px; }
    .classii-hero .classii-eyebrow-rule { width: 28px; }
    .classii-hero:hover .classii-eyebrow-rule { width: 44px; }
    .classii-hero .banner-main-heading { font-size: 28px; line-height: 1.18; letter-spacing: -0.5px; margin-bottom: 28px; }
    .classii-hero .bn-content .button { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }

    .main-blog-banner.new-blog-template .banner-main-heading {
        padding: 22px 18px;
        font-size: 28px;
        line-height: 1.18;
        letter-spacing: -0.5px;
    }
    .main-blog-banner.new-blog-template .banner-main-heading::before { width: 28px; margin-bottom: 12px; }
    .main-blog-banner.new-blog-template:hover .banner-main-heading::before { width: 44px; }
    .blog-feature__content { padding: 30px 0 12px; }
    .blog-feature__aside { padding: 0 0 30px; }
    .blog-feature__heading { font-size: 24px; line-height: 1.2; margin-bottom: 22px; }
    .blog-feature__body { font-size: 16px; }
    .blog-feature__card { padding: 28px 24px 24px; min-height: 280px; max-width: 100%; }
    .blog-feature__card-kicker { font-size: 10px; letter-spacing: 2.5px; margin-bottom: 24px; gap: 10px; }
    .blog-feature__card-kicker-line { width: 22px; }
    .blog-feature__card-title { font-size: 26px; margin-bottom: 14px; letter-spacing: -0.3px; }
    .blog-feature__card-rule { width: 32px; margin-bottom: 16px; }
    .blog-feature__card-subtitle { font-size: 14px; line-height: 1.6; }
    .blog-feature__card-cta { margin-top: 22px; padding-top: 18px; }
    .blog-feature__card-cta-text { font-size: 11px; letter-spacing: 1.5px; }
    .blog-feature__card-arrow { width: 40px; height: 40px; }
    .blog-feature__card-arrow svg { width: 16px; height: 16px; }

    /* Spotlight on mobile — order flip for mirror cascades from the 1024px rule.
       This block only tightens spacing further for narrow viewports. */
    .spotlight__media-col,
    .spotlight--mirror .spotlight__media-col { padding: 24px 16px 16px; }
    .spotlight__media-col::before,
    .spotlight--mirror .spotlight__media-col::before { width: 70px; height: 70px; }
    .spotlight__quote,
    .spotlight--mirror .spotlight__quote { margin: -40px 16px 0; max-width: none; padding: 24px 24px 22px 26px; }
    .spotlight__quote-mark,
    .spotlight--mirror .spotlight__quote-mark { font-size: 64px; right: auto; left: 18px; top: 2px; }
    .spotlight__content,
    .spotlight--mirror .spotlight__content { padding: 16px 16px 32px; }
    .spotlight__heading { font-size: 24px; line-height: 1.2; margin-bottom: 22px; }
    .spotlight__body { font-size: 16px; }

    .cta-banner__content { padding: 48px 16px; }
    .cta-banner__rule { width: 60px; height: 2px; margin-bottom: 24px; }
    .cta-banner__heading { font-size: 24px; line-height: 1.2; }
    .cta-banner__body { font-size: 16px; }
    .cta-banner__button { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .cta-banner::before { width: 220px; height: 220px; top: -90px; right: -90px; }
    .cta-banner::after { width: 240px; height: 240px; bottom: -100px; left: -100px; }

    .atlas::before { font-size: 280px; bottom: -60px; right: -30px; opacity: 0.05; }
    .atlas__header { padding: 28px 8px 22px; }
    .atlas__heading { font-size: 26px; line-height: 1.15; letter-spacing: -0.3px; }
    .atlas__ornament-line { width: 36px; }
    .atlas__main { padding: 16px 0 24px; }
    .atlas__lead { font-size: 16px; line-height: 1.7; text-align: left; hyphens: none; }
    .atlas__lead::first-letter { font-size: 64px; margin: 6px 10px -2px 0; }
    .atlas__vprop { margin-top: 28px; padding-left: 20px; }
    .atlas__vprop-text { font-size: 17px; }
    .atlas__aside {
        padding: 24px 0 24px;
        border-left: 0;
        border-top: 1px solid rgba(11, 27, 59, 0.08);
        margin-top: 12px;
    }
    .atlas__location { font-size: 17px; padding: 12px 0; }
    .atlas__location:hover, .atlas__location:focus-visible { padding-left: 8px; }

    .story__inner { padding: 40px 0 48px; }
    .story__rule { width: 60px; height: 2px; margin-bottom: 24px; }
    .story__heading { font-size: 48px; letter-spacing: -1px; margin-bottom: 32px; }
    .story__heading-em { margin-left: 0.3em; }
    .story__lead,
    .story__para { font-size: 16px; line-height: 1.75; margin-bottom: 20px; }
    .story__lead::first-letter { font-size: 84px; margin: 8px 14px -3px -2px; }
    .story__cta-wrap { margin-top: 36px; }
    .story__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .story::before { font-size: 240px; top: -70px; left: -20px; opacity: 0.05; }
    .story::after { font-size: 240px; bottom: -80px; right: -20px; opacity: 0.05; }

    .mission__inner { padding: 56px 16px 64px; }
    .mission__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 32px; gap: 10px; }
    .mission__kicker-dot { width: 6px; height: 6px; }
    .mission__statement { font-size: 28px; line-height: 1.3; letter-spacing: -0.3px; }
    .mission:hover .mission__emphasis { transform: translateY(-2px); }
    .mission__divider { margin-top: 40px; gap: 12px; }
    .mission__divider-line { width: 44px; }
    .mission:hover .mission__divider-line { width: 64px; }
    .mission__divider-mark { width: 10px; height: 10px; }
    .mission__cta-wrap { margin-top: 36px; }
    .mission__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .mission::before { font-size: 360px; opacity: 0.04; }
    .mission::after { width: 540px; height: 380px; top: -180px; }

    .founder__media { padding: 48px 16px 16px; }
    .founder__intro { padding: 16px 0 40px; }
    .founder__portrait-accent { top: -10px; left: -10px; }
    .founder:hover .founder__portrait-accent { transform: translate(-4px, -4px); }
    .founder:hover .founder__portrait-img { transform: translate(2px, 2px); }
    .founder__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 24px; gap: 10px; }
    .founder__tagline { font-size: 30px; line-height: 1.2; letter-spacing: -0.4px; margin-bottom: 24px; }
    .founder__hello { font-size: 16px; line-height: 1.7; }
    .founder__letter { padding: 24px 16px 56px; }
    .founder__divider { margin-bottom: 32px; gap: 12px; }
    .founder__divider-line { width: 44px; }
    .founder:hover .founder__divider-line { width: 64px; }
    .founder__para { font-size: 16px; line-height: 1.75; margin-bottom: 18px; }
    .founder__para--lead::first-letter { font-size: 72px; margin: 6px 14px -2px 0; }
    .founder__signature { margin-top: 36px; }
    .founder__signature-name { font-size: 32px; }
    .founder__signature-title { font-size: 10px; letter-spacing: 2px; }
    .founder__cta-wrap { margin-top: 36px; }
    .founder__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .founder::before { font-size: 280px; top: -60px; right: -30px; opacity: 0.05; }
    .founder::after { width: 480px; height: 480px; bottom: -120px; left: -80px; }

    .voices__intro { padding: 48px 16px 32px; }
    .voices__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .voices__heading { font-size: 26px; line-height: 1.25; letter-spacing: -0.3px; margin-bottom: 22px; }
    .voices__body { font-size: 16px; line-height: 1.75; }
    .voices__card { padding: 52px 24px 28px; margin: 12px 0; height: auto; }
    .voices__quote-mark { font-size: 80px; top: 4px; left: 18px; }
    .voices__quote-text { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
    .voices__card-rule { width: 32px; margin-bottom: 20px; }
    .voices__avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 18px; }
    .voices__author-name { font-size: 13px; }
    .voices__author-sector { font-size: 10px; letter-spacing: 1.4px; }
    .voices__cta-wrap { padding: 36px 0 56px; }
    .voices__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .voices::before { width: 600px; height: 400px; top: -200px; }

    .services__intro { padding: 48px 16px 28px; }
    .services__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .services__heading { font-size: 26px; line-height: 1.22; letter-spacing: -0.4px; }
    .services__card { margin: 8px 0; height: auto; }
    .services__card-body { padding: 26px 24px 28px; }
    .services__card-rule { width: 30px; margin-bottom: 16px; }
    .services__card:hover .services__card-rule,
    .services__card:focus-visible .services__card-rule { width: 48px; }
    .services__card-title { font-size: 21px; margin-bottom: 14px; }
    .services__card-desc { font-size: 15px; line-height: 1.7; margin-bottom: 22px; }
    .services__card-link { font-size: 11px; letter-spacing: 1.5px; }
    .services__card-corner { border-width: 0 44px 44px 0; }
    .services__cta-wrap { padding: 32px 0 56px; }
    .services__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    /* On mobile, foundation collapses large-4 cells to full width — neutralise
       the large-offset-4 so the Office card doesn't sit oddly indented. */
    .services .cell.large-4.large-offset-4 { margin-left: 0; }

    .promise__inner { padding: 56px 16px 64px; }
    .promise__rule { width: 60px; height: 2px; margin-bottom: 26px; }
    .promise:hover .promise__rule { width: 96px; }
    .promise__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .promise__heading { font-size: 26px; line-height: 1.25; letter-spacing: -0.3px; margin-bottom: 28px; }
    .promise__body { font-size: 16px; line-height: 1.75; }
    .promise__cta-wrap { margin-top: 36px; }
    .promise__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .promise::before { width: 560px; height: 400px; top: -180px; }

    .features__intro { padding: 44px 16px 20px; }
    .features__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .features__heading { font-size: 26px; line-height: 1.22; letter-spacing: -0.3px; }
    .features__card { padding: 20px 18px 20px; gap: 14px; }
    .features__icon { width: 44px; height: 44px; border-width: 1.5px; }
    .features__icon svg { width: 20px; height: 20px; }
    .features__card-title { font-size: 19px; margin-bottom: 8px; }
    .features__card-desc { font-size: 14px; line-height: 1.65; }
    .features::before { width: 600px; height: 400px; top: -180px; }

    .routine__media-wrap { padding: 36px 16px 16px; }
    .routine__media { min-height: 280px; }
    .routine__media-accent { top: -10px; left: -10px; }
    .routine:hover .routine__media-accent { transform: translate(-4px, -4px); }
    .routine:hover .routine__media-img { transform: translate(2px, 2px); }
    .routine__content { padding: 16px 16px 48px; }
    .routine__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .routine__heading { font-size: 24px; line-height: 1.18; letter-spacing: -0.3px; margin-bottom: 22px; }
    .routine__body { font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
    .routine__list { margin: 24px 0 30px; }
    .routine__list-item { font-size: 14px; gap: 12px; margin-bottom: 12px; }
    .routine__list-check { width: 18px; height: 18px; }
    .routine__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .routine::before { width: 500px; height: 360px; top: -160px; right: -60px; }

    .deep__media-wrap { padding: 36px 16px 16px; }
    .deep__media { min-height: 280px; }
    .deep__media-accent { top: -10px; right: -10px; }
    .deep:hover .deep__media-accent { transform: translate(4px, -4px); }
    .deep:hover .deep__media-img { transform: translate(-2px, 2px); }
    .deep__content { padding: 16px 16px 48px; }
    .deep__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .deep__heading { font-size: 24px; line-height: 1.18; letter-spacing: -0.3px; margin-bottom: 22px; }
    .deep__body { font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
    .deep__list { margin: 24px 0 30px; }
    .deep__list-item { font-size: 14px; gap: 12px; margin-bottom: 12px; }
    .deep__list-check { width: 18px; height: 18px; }
    .deep__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .deep::before { width: 500px; height: 360px; top: -160px; left: -60px; }

    .move__media-wrap { padding: 36px 16px 16px; }
    .move__media { min-height: 280px; }
    .move__media-accent { top: -10px; left: -10px; }
    .move:hover .move__media-accent { transform: translate(-4px, -4px); }
    .move:hover .move__media-img { transform: translate(2px, 2px); }
    .move__content { padding: 16px 16px 48px; }
    .move__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .move__heading { font-size: 24px; line-height: 1.18; letter-spacing: -0.3px; margin-bottom: 22px; }
    .move__body { font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
    .move__list { margin: 24px 0 30px; }
    .move__list-item { font-size: 14px; gap: 12px; margin-bottom: 12px; }
    .move__list-check { width: 18px; height: 18px; }
    .move__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .move::before { width: 500px; height: 360px; top: -160px; right: -60px; }

    .rental__media-wrap { padding: 36px 16px 16px; }
    .rental__media { min-height: 280px; }
    .rental__media-accent { top: -10px; right: -10px; }
    .rental:hover .rental__media-accent { transform: translate(4px, -4px); }
    .rental:hover .rental__media-img { transform: translate(-2px, 2px); }
    .rental__content { padding: 16px 16px 48px; }
    .rental__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .rental__heading { font-size: 24px; line-height: 1.18; letter-spacing: -0.3px; margin-bottom: 22px; }
    .rental__body { font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
    .rental__list { margin: 24px 0 30px; }
    .rental__list-item { font-size: 14px; gap: 12px; margin-bottom: 12px; }
    .rental__list-check { width: 18px; height: 18px; }
    .rental__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .rental::before { width: 500px; height: 360px; top: -160px; left: -60px; }

    .apartment__media-wrap { padding: 36px 16px 16px; }
    .apartment__media { min-height: 280px; }
    .apartment__media-accent { top: -10px; left: -10px; }
    .apartment:hover .apartment__media-accent { transform: translate(-4px, -4px); }
    .apartment:hover .apartment__media-img { transform: translate(2px, 2px); }
    .apartment__content { padding: 16px 16px 48px; }
    .apartment__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .apartment__heading { font-size: 24px; line-height: 1.18; letter-spacing: -0.3px; margin-bottom: 22px; }
    .apartment__body { font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
    .apartment__list { margin: 24px 0 30px; }
    .apartment__list-item { font-size: 14px; gap: 12px; margin-bottom: 12px; }
    .apartment__list-check { width: 18px; height: 18px; }
    .apartment__cta { padding: 18px 24px; font-size: 13px; letter-spacing: 1.5px; }
    .apartment::before { width: 500px; height: 360px; top: -160px; right: -60px; }

    .faq__intro { padding: 40px 0 24px; }
    .faq__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .faq__heading { font-size: 26px; line-height: 1.15; letter-spacing: -0.4px; margin-bottom: 24px; }
    .faq__rule { width: 48px; }
    .faq__list { padding: 24px 0 40px; }
    .faq__summary { padding: 22px 0; gap: 14px; }
    .faq__numeral { font-size: 18px; width: 28px; }
    .faq__question { font-size: 16px; line-height: 1.4; letter-spacing: -0.2px; }
    .faq__toggle { width: 32px; height: 32px; }
    .faq__toggle svg { width: 14px; height: 14px; }
    .faq__item[open] .faq__summary { padding-bottom: 12px; }
    .faq__answer { padding: 0 0 24px 42px; }
    .faq__answer p { font-size: 14px; line-height: 1.7; }
    .faq__item::before { left: -12px; width: 2px; }

    .contact { padding: 24px 0; }
    .contact__intro { padding: 32px 0 16px; }
    .contact__lede-cell { padding: 8px 0 24px; }
    .contact__kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 22px; gap: 10px; }
    .contact__heading { font-size: 28px; line-height: 1.1; letter-spacing: -0.6px; margin-bottom: 22px; }
    .contact__rule { width: 60px; }
    .contact__intro:hover .contact__rule { width: 90px; }
    .contact__lede { font-size: 15px; line-height: 1.75; }
    .contact__monogram { font-size: 280px; bottom: -60px; left: -50px; opacity: 0.04; }
    .contact__card-cell { padding: 10px 8px 16px; }
    .contact__card { padding: 32px 22px 28px; }
    .contact__icon { width: 52px; height: 52px; margin-bottom: 20px; }
    .contact__icon svg { width: 22px; height: 22px; }
    .contact__label { font-size: 10px; letter-spacing: 3px; margin-bottom: 12px; }
    .contact__value { font-size: 16px; line-height: 1.4; }
    .contact__areas { padding: 32px 0 24px; }
    .contact__areas-header { gap: 14px; margin-bottom: 26px; }
    .contact__areas-rule { flex-basis: 50px; }
    .contact__areas-label { font-size: 11px; letter-spacing: 3px; }
    .contact__pin { font-size: 13px; padding: 9px 18px; }
    .contact__pins { gap: 8px 10px; }

    /* Blog widget — bold layout adapted for narrow viewports */
    .main-blog-widget { padding: 32px 0 56px; }
    .main-blog-widget::before { font-size: 160px; bottom: -36px; right: -20px; opacity: 0.05; letter-spacing: -4px; }

    /* Search bar */
    .main-blog-widget .blog-search-container { margin-bottom: 0; }
    .main-blog-widget .search-input-blog { font-size: 16px; padding: 16px 52px 16px 18px; }
    .main-blog-widget .blog-search-button { width: 38px; height: 38px; right: 6px !important; left: auto; }

    /* Article rhythm */
    .main-blog-widget .blog-li { margin-bottom: 40px; padding-bottom: 40px; }
    .main-blog-widget .blog-li-1 { margin-bottom: 30px; padding-bottom: 30px; }

    /* Featured card — scale down for narrow viewport */
    .main-blog-widget .blog-li-1 .ps-article-img { aspect-ratio: 16 / 10; margin-bottom: 20px; }
    .main-blog-widget .blog-li-1::before {
        top: 12px; left: 12px;
        font-size: 9px; padding: 6px 12px; letter-spacing: 2px;
    }
    .main-blog-widget .blog-li-1 .article-title { margin: 12px 0 16px; }
    .main-blog-widget .blog-li-1 .article-title a { font-size: 24px; letter-spacing: -0.3px; }
    .main-blog-widget .blog-li-1 .article-body { margin-bottom: 20px; }
    .main-blog-widget .blog-li-1 .article-body p { font-size: 15px; line-height: 1.7; }

    /* Standard cards — numeral smaller, image regains 4:3 vertical stack */
   /* .main-blog-widget .blog-li:not(.blog-li-1) .blog-article::before {
        font-size: 48px;
        top: -4px;
        opacity: 0.15;
    }*/
    .main-blog-widget .article-title { margin-top: 14px; margin-bottom: 14px; }
    .main-blog-widget .article-title::before { width: 28px; margin-bottom: 12px; }
    .main-blog-widget .blog-li:hover .article-title::before { width: 48px; }
    .main-blog-widget .article-title a { font-size: 22px; line-height: 1.22; letter-spacing: -0.3px; }
    .main-blog-widget .article-category { padding-top: 18px; gap: 6px; }
    .main-blog-widget .article-category > span:not(.categories_text) > a { padding: 5px 10px; font-size: 9px; letter-spacing: 1px; }
    .main-blog-widget .article-category .categories_text { font-size: 9px; letter-spacing: 1.5px; }
    .main-blog-widget .article-category .categories_text::after { width: 8px; margin-left: 6px; }
    .main-blog-widget .article-body { margin-bottom: 18px; }
    .main-blog-widget .article-body p { font-size: 14px; line-height: 1.7; }
    .main-blog-widget .blog-read-more { font-size: 11px; letter-spacing: 2px; }

    /* Sidebar — no sticky on mobile */
    .main-blog-widget .blog-sidebar .articles-filter-container { padding: 24px 22px 14px; position: relative; top: 0; }
    .main-blog-widget .ps-blog-category { gap: 6px; }
    .main-blog-widget .ps-blog-category li a { padding: 9px 14px; font-size: 11px; }
    .main-blog-widget .ps-blog-category li a.all-blogs.button { padding: 9px 16px; font-size: 10px; }

}