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

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #FAF7F1 !important
}

a {
    color: inherit;
}

#page,
#wrapper,
#main,
#content,
#primary,
.site,
.site-inner,
.site-content,
.content-area,
.entry-content,
.entry,
.post,
.page,
main,
article,
.wp-site-blocks,
.is-layout-constrained,
.is-layout-flow,
.wp-block-post-content,
.wp-block-group,
.wp-block-html,
.alignfull,
.container,
.container-fluid,
div[class*="container"],
div[class*="wrapper"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    left: 0 !important;
    right: 0 !important
}

@font-face {
    font-family: 'Jura';
    src: url('../fonts/Jura-Light.woff2') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'Jura';
    src: url('../fonts/Jura-Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Jura';
    src: url('../fonts/Jura-Medium.woff2') format('woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Light.woff2') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Medium.woff2') format('woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

#pg {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw;
    max-width: 100vw;
    padding: 0
}

html {
    scroll-behavior: smooth
}

:root {
    --cream: #FAF7F1;
    --cream-d: #F0EBE1;
    --navy: #0A1432;
    --navy-m: #141E40;
    --gold: #C6A24B;
    --gold-d: #AF8C38;
    --chalk: #F5F2EA;
    --mist: #A09880;
    --smoke: #6B6558;
    --rule: rgba(10, 20, 50, 0.09);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --fd: 'Jura', sans-serif;
    --fb: 'Work Sans', sans-serif;
    --fa: 'Playfair Display', serif;
    /* font sizes */
    --micro: 11px;
    --smallest: 12px;
    --small: 13px;
}

body {
    background: var(--cream);
    color: var(--navy);
    font-family: var(--fb);
    overflow-x: hidden;
    cursor: default;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9990;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.cur {
    position: fixed;
    width: 7px;
    height: 7px;
    background: var(--navy);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9995;
    transform: translate(-50%, -50%);
    transition: width .3s, height .3s, background .3s;
    mix-blend-mode: multiply
}

.crng {
    position: fixed;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(10, 20, 50, 0.18);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9994;
    transform: translate(-50%, -50%);
    transition: width .4s var(--ease), height .4s var(--ease), border-color .3s
}

.cur.h {
    width: 4px;
    height: 4px;
    background: var(--gold)
}

.crng.h {
    width: 52px;
    height: 52px;
    border-color: var(--gold)
}

#pre {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px
}

.pdoor {
    width: 64px;
    aspect-ratio: 1/1.618;
    border: 1px solid rgba(245, 242, 234, 0.15);
    position: relative;
    overflow: hidden;
}

.pdoor::after {
    display: inline;
}

/* The Flame Container */
.pflame {
    position: absolute;
    bottom: -5px;
    width: 100%;
    height: 95%;
    background: radial-gradient(ellipse at bottom,
            #fff 0%, gold 15%, #ff4500 40%, #800000 75%, transparent 100%);
    filter: url(#fire);
    opacity: 0.95;
    transform-origin: bottom;
    animation: roar 0.1s infinite alternate;
}

.pflame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(15px);
    opacity: 0.6;
}

/* The 'Roar' animation: Subtle scaling and shifting to simulate heat haze */
@keyframes roar {
    0% {
        transform: scaleY(1) scaleX(1);
        filter: url(#fire) brightness(1);
    }

    100% {
        transform: scaleY(1.1) scaleX(1.05);
        filter: url(#fire) brightness(1.2);
    }
}

/* The actual door leaf that shuts */
.pshut {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--navy);
    z-index: 2;
    /* Added a slight inner shadow to the door edge for depth */
    box-shadow: -10px 0 20px rgba(0, 0, 0, 0.5);
}

.pshut::after {
    content: '';
    position: absolute;
    right: 11px;
    top: calc(100%/1.618 - 1px);
    width: 16px;
    height: 1.5px;
    background: var(--gold);
    z-index: 3;
}

/* Animation to shut the door over the flames */
@keyframes shutDoor {
    0% {
        left: -100%;
    }

    70% {
        left: -100%;
    }

    /* Wait a bit while flames flicker */
    100% {
        left: 0%;
    }

    /* Shut the door */
}

/* Optional: Make the flames "roaring" slightly */
.pflame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(5px);
    animation: flicker 0.15s infinite alternate;
}

@keyframes flicker {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

.pname {
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(245, 242, 234, 0.3)
}

.ppct {
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .1em;
    color: var(--gold)
}

#pg {
    opacity: 0
}

.tb {
    background: var(--navy);
    padding: 10px 0;
    overflow: hidden
}

.tbi {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(245, 242, 234, 0.45)
}

.tbc {
    display: flex;
    gap: 0
}

.tbc span {
    padding: 0 24px;
    border-right: 1px solid rgba(198, 162, 75, 0.2)
}

.tbc span:first-child {
    padding-left: 0
}

.tbp {
    color: var(--gold);
    letter-spacing: .12em;
    font-weight: 400;
    text-decoration: none
}

nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 247, 241, 0.94);
    border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(14px);
    transition: box-shadow .3s
}

.ni {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 64px;
    height: 88px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.logo {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none
}

.ld {
    width: 36px;
    aspect-ratio: 1/1.618;
    border: 1.5px solid var(--navy);
    position: relative;
    flex-shrink: 0
}

.ld::before {
    content: '';
    position: absolute;
    right: 7px;
    top: calc(100%/1.618 - 1px);
    width: 11px;
    height: 1.5px;
    background: var(--gold)
}

.ld::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: -7px;
    right: -7px;
    height: 1.5px;
    background: var(--gold-d);
    opacity: .5
}

.lsep {
    width: 1px;
    height: 32px;
    background: rgba(10, 20, 50, 0.1)
}

/* Two stacked lines, so the wordmark's total height ≈ font-size × (0.9 + 0.8) =
   font-size × 1.7. The clamp max is capped at 46px (was 56px) so even where the
   clamp maxes out (≥~1437px viewport, incl. 1920px) the stack is ≈78px and stays
   inside the 88px .ni bar — fixing the wide-screen bleed. line-height unchanged. */
.ll1 {
    font-family: var(--fd);
    font-weight: 300;
    font-size: clamp(28px, 3.2vw, 46px);
    letter-spacing: 0em;
    line-height: 0.9;
    color: var(--navy);
    text-transform: uppercase;
    display: block;
    white-space: nowrap
}

.ll2 {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 46px);
    letter-spacing: 0.02em;
    line-height: 0.8;
    color: var(--gold);
    display: block;
    margin-top: 0px;
    white-space: nowrap
}

.nl {
    display: flex;
    gap: 40px;
    align-items: center
}

.nl a {
    font-family: var(--fd);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    opacity: .65;
    position: relative;
    transition: opacity .2s
}

.nl a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width .4s var(--ease)
}

.nl a:hover {
    opacity: 1
}

.nl a:hover::after {
    width: 100%
}

.ncta {
    opacity: 1 !important;
    border: 1px solid var(--navy) !important;
    padding: 12px 24px !important;
    font-size: var(--small) !important;
    transition: background .25s, color .25s !important
}

.ncta::after {
    display: none !important
}

.ncta:hover {
    background: var(--navy) !important;
    color: var(--chalk) !important
}

/* --- Floating "Contact Us" chip (Stage 3 / Chunk 4) ----------------------
   Fixed gold chip, top-right, on desktop/tablet only (hidden ≤640px where the
   Chunk 5 mobile FAB takes over). Sits BELOW the sticky nav (z 100) and the
   custom cursor ring (z 9994/5) and BELOW the service overlay (z 9992).
   `top` here is the no-JS FALLBACK: 160px clears the tallest top-of-page header
   (stacked credential bar + nav, up to ~146px where the bar wraps at narrow
   widths). With JS, initContactButton() tracks the sticky nav's live bottom and
   keeps a constant 16px gap below it in every scroll state and width, so the
   chip is never occluded by the nav. Navy-on-gold clears AA. The :has() rule
   hides it while a service overlay is open. */
.cbtn {
    position: fixed;
    top: 160px;
    right: 24px;
    z-index: 90;
    padding: 12px 22px;
    background: var(--gold);
    color: var(--navy);
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--gold-d);
    border-radius: 6px;
    box-shadow: 0 6px 22px rgba(10, 20, 50, 0.18);
    transition: background .25s, color .25s, transform .25s, box-shadow .25s
}

.cbtn:hover {
    background: var(--gold-d);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(10, 20, 50, 0.24)
}

.cbtn:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px
}

/* Disable the chip while a Stage 1 service overlay is open so it can't sit on
   top of the modal or steal a click/tab. */
body:has(.svo:not([hidden])) .cbtn {
    display: none
}

/* --- Mobile contact launcher (Stage 3 / Chunk 5) --------------------------
   Speech-bubble FAB shown only ≤640px (it replaces the .cbtn chip there) → a
   slim email popover that posts via the shared /rvp.php helper. New selectors
   only; brand tokens throughout. Hidden by default; the @media(max-width:640px)
   block flips the FAB on. The chat-bubble shape: a near-circle with a single
   squared corner (lower-left) reading as the speech tail, plus a chat-icon SVG. */
.mfab {
    display: none;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 95;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--gold);
    color: var(--navy);
    border: 1px solid var(--gold-d);
    border-radius: 50% 50% 50% 6px;
    box-shadow: 0 8px 24px rgba(10, 20, 50, 0.28);
    cursor: pointer;
    transition: background .25s, transform .25s, box-shadow .25s
}

.mfab:hover {
    background: var(--gold-d);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(10, 20, 50, 0.34)
}

.mfab:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px
}

.mfab-ic {
    width: 26px;
    height: 26px;
    fill: var(--navy)
}

/* Hide the FAB while a Stage 1 service overlay is open (full-screen ≤640px) so
   it can't sit on top of the modal. More specific than the media show rule, so
   it wins regardless of source order. */
body:has(.svo:not([hidden])) .mfab {
    display: none
}

/* --- Slim email popover (bottom sheet) ------------------------------------- */
.mfo {
    position: fixed;
    inset: 0;
    z-index: 9993;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(10, 20, 50, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: svoFade .25s ease both
}

.mfo[hidden] {
    display: none
}

.mfo-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 40px 22px 26px;
    background: var(--navy);
    color: var(--chalk);
    border-top: 1px solid rgba(198, 162, 75, 0.18);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45);
    animation: mfoUp .3s var(--ease) both
}

@keyframes mfoUp {
    from { opacity: 0; transform: translateY(24px) }
    to { opacity: 1; transform: translateY(0) }
}

.mfo-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--fb);
    font-size: 26px;
    line-height: 1;
    color: var(--mist);
    cursor: pointer;
    transition: color .25s
}

.mfo-close:hover,
.mfo-close:focus-visible {
    color: var(--gold)
}

.mfo-close:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px
}

.mfo-title {
    margin-bottom: 4px;
    font-family: var(--fd);
    font-size: 20px;
    font-weight: 300;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--chalk)
}

.mfo-sub {
    margin-bottom: 18px;
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    line-height: 1.5;
    color: rgba(245, 242, 234, 0.62)
}

.mfo-opt {
    color: var(--mist);
    letter-spacing: .12em
}

/* Reuse the navy-ready .fg / .bsub form styles, tightened for the sheet. */
.mfo-form .fg {
    margin-bottom: 12px
}

.mfo-form .fg label {
    margin-bottom: 6px
}

.mfo-form .fg textarea {
    height: 64px
}

.mfo-form .bsub {
    margin-top: 8px;
    padding: 15px
}

@media (prefers-reduced-motion: reduce) {
    .mfo,
    .mfo-panel {
        animation: svoFade .2s ease both
    }
}

.hero {
    min-height: 92vh;
    background: var(--cream);
    display: grid;
    grid-template-columns: 56% 44%;
    position: relative;
    overflow: hidden
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    background: var(--navy);
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%)
}

.hl {
    padding: 110px 64px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2
}

.hey {
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 300;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px
}

.hey::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--gold)
}

.hh1 {
    font-family: var(--fd);
    font-weight: 300;
    font-size: clamp(44px, 4.2vw, 76px);
    line-height: 1.04;
    letter-spacing: -.01em;
    color: var(--navy)
}

.hh1 em {
    font-style: italic;
    font-family: var(--fa);
    color: var(--gold);
    font-weight: 400;
    font-size: .88em
}

.hsub {
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--smoke);
    max-width: 420px;
    margin: 28px 0 44px
}

.hact {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap
}

.bp {
    background: var(--navy);
    color: var(--chalk);
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 16px 36px;
    border: none;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: color .4s
}

.bp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease)
}

.bp span {
    position: relative;
    z-index: 1
}

.bp:hover::before {
    transform: scaleX(1)
}

.bp:hover {
    color: var(--navy)
}

.hr {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 80px 48px
}

.hdm {
    width: 190px;
    aspect-ratio: 1/1.618;
    border: 1px solid rgba(245, 242, 234, 0.12);
    position: relative
}

.hdm::before {
    content: '';
    position: absolute;
    right: 22px;
    top: calc(100%/1.618 - 1px);
    width: 28px;
    height: 2px;
    background: var(--gold)
}

.hdm::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: -10px;
    right: -10px;
    height: 2px;
    background: rgba(198, 162, 75, 0.3)
}

.hst {
    position: absolute;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px
}

.stn {
    font-family: var(--fd);
    font-weight: 300;
    font-size: 40px;
    color: var(--gold);
    letter-spacing: -.02em;
    line-height: 1;
    text-align: right
}

.stl {
    font-family: var(--fb);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(245, 242, 234, 0.35);
    margin-top: 4px;
    text-align: right
}

.trust {
    background: var(--navy);
    padding: 18px 0;
    border-top: 1px solid rgba(198, 162, 75, 0.1)
}

.trustin {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 64px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px
}

.ti {
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(245, 242, 234, 0.38);
    display: flex;
    align-items: center;
    gap: 8px
}

.ti::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0
}

.si {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 64px
}

.sh {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: end;
    margin-bottom: 72px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--rule)
}

.sey {
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px
}

.sey::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--gold)
}

.stitle {
    font-family: var(--fd);
    font-weight: 300;
    font-size: clamp(30px, 3.2vw, 48px);
    letter-spacing: -.01em;
    line-height: 1.08;
    color: var(--navy)
}

.stitle em {
    font-style: italic;
    font-family: var(--fa);
    color: var(--gold);
    font-size: .9em
}

.sint {
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--smoke);
    align-self: end
}

.svc {
    padding: 120px 0;
    background: var(--cream)
}

.sg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: rgba(10, 20, 50, 0.08)
}

.sc {
    background: var(--cream);
    padding: 48px 36px 52px;
    position: relative;
    overflow: hidden;
    transition: background .35s var(--ease)
}

.sc::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease)
}

.sc:hover {
    background: var(--navy)
}

.sc:hover::after {
    transform: scaleX(1)
}

.scn {
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .2em;
    color: var(--gold);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px
}

.scn::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--gold);
    opacity: .4
}

.sct {
    font-family: var(--fd);
    font-size: 22px;
    font-weight: 300;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 14px;
    line-height: 1;
    transition: color .35s
}

.sc:hover .sct {
    color: var(--chalk)
}

.scd {
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    line-height: 1.75;
    color: var(--smoke);
    transition: color .35s
}

.sc:hover .scd {
    color: rgba(245, 242, 234, 0.52)
}

.sg2 {
    position: absolute;
    bottom: -14px;
    right: -6px;
    width: 42px;
    aspect-ratio: 1/1.618;
    border: 1px solid rgba(10, 20, 50, 0.05);
    transition: border-color .35s, transform .4s var(--ease)
}

.sc:hover .sg2 {
    border-color: rgba(198, 162, 75, 0.14);
    transform: translate(-5px, -5px)
}

.about {
    background: var(--navy);
    padding: 120px 0;
    position: relative;
    overflow: hidden
}

.abd {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    aspect-ratio: 1/1.618;
    border: 1px solid rgba(245, 242, 234, 0.04)
}

.abd::before {
    content: '';
    position: absolute;
    right: 34px;
    top: calc(100%/1.618 - 1px);
    width: 56px;
    height: 1px;
    background: rgba(198, 162, 75, 0.06)
}

.ag {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

.about .sey {
    color: var(--gold)
}

.about .stitle {
    color: var(--chalk)
}

.abb {
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(245, 242, 234, 0.5);
    margin: 24px 0 40px
}

.aps {
    display: flex;
    flex-direction: column
}

.ap {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 0;
    border-top: 1px solid rgba(245, 242, 234, 0.06)
}

.ap:last-child {
    border-bottom: 1px solid rgba(245, 242, 234, 0.06)
}

.api {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: rgba(198, 162, 75, 0.1);
    display: flex;
    align-items: center;
    justify-content: center
}

.apt {
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--chalk);
    margin-bottom: 5px
}

.app {
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    color: rgba(245, 242, 234, 0.42);
    line-height: 1.65
}

.asts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    background: rgba(245, 242, 234, 0.04)
}

.ast {
    background: var(--navy-m);
    padding: 40px 32px
}

.astn {
    font-family: var(--fd);
    font-weight: 300;
    font-size: 44px;
    color: var(--gold);
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 8px
}

.astl {
    font-family: var(--fb);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(245, 242, 234, 0.3)
}

.proc {
    padding: 120px 0;
    background: var(--cream-d)
}

.proc .sh {
    grid-template-columns: 1fr;
    border: none;
    padding-bottom: 0;
    margin-bottom: 0
}

.ps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 80px;
    position: relative
}

.ps::before {
    content: '';
    position: absolute;
    top: 23px;
    left: 8%;
    width: 84%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 162, 75, 0.25) 20%, rgba(198, 162, 75, 0.25) 80%, transparent)
}

.pst {
    padding: 0 32px;
    text-align: center
}

.psd {
    width: 46px;
    height: 46px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
    background: var(--cream-d);
    position: relative;
    z-index: 2;
    font-family: var(--fd);
    font-size: 14px;
    font-weight: 300;
    color: var(--gold)
}

.pstit {
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 300;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 12px
}

.psdesc {
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    line-height: 1.7;
    color: var(--smoke)
}

.certs {
    background: var(--navy);
    padding: 52px 0;
    border-top: 1px solid rgba(198, 162, 75, 0.1)
}

.ci {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap
}

.cl {
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(245, 242, 234, 0.22);
    white-space: nowrap
}

.csep {
    height: 36px;
    width: 1px;
    background: rgba(245, 242, 234, 0.08);
    flex-shrink: 0
}

.cbs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.cb {
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 8px 14px;
    border: 1px solid rgba(198, 162, 75, 0.2);
    transition: border-color .25s
}

.cb:hover {
    border-color: rgba(198, 162, 75, 0.5)
}

.contact {
    padding: 120px 0;
    background: var(--cream)
}

.cg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

.cbody {
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--smoke);
    margin: 24px 0 40px
}

/* Compliance guide data tables + notes (new hub pages, June 2026). The original
   guides had no tabular content; these guides do (price ranges, inspection
   intervals, the asset register, the regulations table). Tokens only, no new
   dependency — styled to sit with .cbody / .proc body copy. */
.ctbl {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 40px;
    font-family: var(--fb);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--navy)
}

.ctbl th,
.ctbl td {
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top
}

.ctbl thead th {
    font-family: var(--fd);
    font-size: var(--micro);
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-d);
    border-bottom: 1.5px solid var(--navy)
}

.ctbl tbody tr:last-child td {
    border-bottom: none
}

/* Aside / placeholder callout (e.g. owner price + sample-report placeholders,
   the reg-10 "basic visual check" note, illustrative-data captions). */
.cnote {
    font-family: var(--fb);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--smoke);
    border-left: 3px solid var(--gold);
    background: var(--chalk);
    padding: 16px 20px;
    margin: 24px 0 40px
}

@media (max-width: 640px) {

    .ctbl th,
    .ctbl td {
        padding: 12px 10px
    }
}

.cms {
    display: flex;
    flex-direction: column
}

.cm {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule)
}

.cm:first-child {
    border-top: 1px solid var(--rule)
}

.cml {
    font-family: var(--fd);
    font-size: var(--micro);
    font-weight: 300;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mist);
    width: 68px;
    flex-shrink: 0
}

.cmv {
    font-family: var(--fd);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: .03em;
    color: var(--navy)
}

.cmv a {
    color: inherit;
    text-decoration: none;
    transition: color .2s
}

.cmv a:hover {
    color: var(--gold)
}

.cf {
    background: var(--navy);
    padding: 52px;
    color: var(--chalk);
}

.ftit {
    font-family: var(--fd);
    font-size: 17px;
    font-weight: 300;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.fsub {
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    margin-bottom: 34px;
    line-height: 1.6;
}

.fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0
}

.fg {
    margin-bottom: 16px
}

.fg label {
    display: block;
    font-family: var(--fd);
    font-size: var(--micro);
    font-weight: 300;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.fg input,
.fg select,
.fg textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(245, 242, 234, 0.12);
    padding: 12px 0;
    font-family: var(--fb);
    font-size: 14px;
    font-weight: 300;
    color: var(--chalk);
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    transition: border-color .2s
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
    border-bottom-color: var(--gold)
}

.fg input::placeholder,
.fg textarea::placeholder {
    font-weight: lighter;
}

.fg select {
    cursor: default;
}

.fg select option {
    background: var(--navy-m);
}

.fg textarea {
    resize: none;
    height: 76px
}

.bsub {
    width: 100%;
    background: var(--gold);
    color: var(--navy);
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 18px;
    border: none;
    cursor: auto;
    margin-top: 12px;
    position: relative;
    overflow: hidden;
    transition: color .4s
}

.bsub::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease)
}

.bsub span {
    position: relative;
    z-index: 1
}

.bsub:hover::before {
    transform: scaleX(1)
}

.bsub:hover span {
    color: var(--gold)
}

footer {
    background: #0C1020;
    padding: 64px 0 32px;
    border-top: 1px solid rgba(198, 162, 75, 0.07)
}

.fg2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 64px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 56px;
    margin-bottom: 48px;
    color: var(--mist);
}

.fl1 {
    font-family: var(--fd);
    font-size: 17px;
    font-weight: 300;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--chalk);
    display: block
}

.fl2 {
    font-family: var(--fd);
    font-size: 14px;
    font-weight: 300;
    color: var(--gold);
    display: block;
    margin-top: 2px
}

.fa2 {
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    line-height: 1.75;
    margin-top: 16px
}

.fc h4 {
    font-family: var(--fd);
    font-size: var(--micro);
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 20px
}

.fc ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.fc ul li a {
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    text-decoration: none;
    transition: color .2s
}

.fc ul li a:hover {
    color: var(--gold)
}

.fb2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 64px 0;
    border-top: 1px solid rgba(245, 242, 234, 0.04);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px
}

.fb2 p {
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 300;
    letter-spacing: .1em;
    color: var(--mist);
}

@media (max-width:1024px) {
    .si {
        padding: 0 40px
    }

    .ni {
        padding: 0 40px;
        height: 80px
    }

    .tbi {
        padding: 0 40px
    }

    .sh {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        display: flex;
        flex-direction: column
    }

    .hero::before {
        position: relative;
        width: 100%;
        height: 400px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }

    .hl {
        padding: 72px 40px 52px
    }

    .hr {
        padding: 40px;
        display: flex;
        flex-wrap: wrap
    }

    .hst {
        position: relative;
        right: auto;
        flex-direction: row;
        gap: 28px;
        flex-wrap: wrap;
        margin-top: 28px
    }

    .hdm {
        width: 110px
    }

    .sg {
        grid-template-columns: repeat(2, 1fr)
    }

    .ag {
        grid-template-columns: 1fr;
        gap: 52px
    }

    .asts {
        grid-template-columns: repeat(2, 1fr)
    }

    .ps {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 24px
    }

    .ps::before {
        display: none
    }

    .cg {
        grid-template-columns: 1fr;
        gap: 52px
    }

    .fg2 {
        grid-template-columns: 1fr 1fr;
        gap: 40px
    }

    .trustin {
        padding: 0 40px
    }

    .ci {
        padding: 0 40px
    }

    .fb2 {
        padding: 16px 40px 0
    }
}

/* Top-of-page nav fit (Stage 3 / Chunk 6): below ~920px the logo + five inline
   links + the Book Us CTA no longer fit on one row — the credential-bar overflow
   was previously clipped off-screen by body{overflow-x:hidden} (Book Us half-cut
   at 768px, gone at 641px). Collapse the inline links to the Book Us CTA here
   (links remain in the DOM and reachable via the footer), extending the existing
   ≤640px pattern up to where the row actually becomes clean. The logo wordmark
   (white-space:nowrap, single line) + Book Us fit comfortably across 641–920px. */
@media (max-width:920px) {
    .nl a:not(.ncta) {
        display: none
    }
}

@media (max-width:640px) {
    body {
        cursor: auto
    }

    .cur,
    .crng {
        display: none
    }

    /* Desktop/tablet contact chip is replaced by the mobile FAB (Chunk 5) below 640px. */
    .cbtn {
        display: none
    }

    /* ...and the speech-bubble FAB takes over here. */
    .mfab {
        display: flex
    }

    .tb {
        display: none
    }

    .ni {
        padding: 0 20px;
        height: 68px
    }

    /* Was an inert `Xfont-size` typo, so the wordmark stayed oversized in the
       68px bar on phones. Corrected: 14/15px stacks to ≈25px — well inside the
       bar — and fits the row at 375px next to the door icon and Book Us CTA. */
    .ll1 {
        font-size: 14px
    }

    .ll2 {
        font-size: 15px
    }

    .ld {
        width: 28px;
        /* height: 38px; */
        aspect-ratio: 1/1.618;

    }

    .ld::before {
    right: 4px;
    width: 7px;
}

    /* (Inline-link collapse now happens at ≤920px — see that media block. The
       links stay hidden here too since ≤640 is a subset of ≤920.) */

    .ncta {
        padding: 10px 18px !important;
        font-size: var(--smallest) !important
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        display: flex;
        flex-direction: column
    }

    .hero::before {
        display: none
    }

    .hl {
        padding: 80px 20px 48px
    }

    .hr {
        display: none
    }

    .hh1 {
        font-size: clamp(34px, 9vw, 50px)
    }

    .hsub {
        font-size: 14px;
        max-width: 100%
    }

    .hact {
        flex-direction: column;
        align-items: stretch
    }

    .bp,
    .bo {
        width: 100%;
        text-align: center;
        display: block;
        padding: 16px 20px
    }

    .si {
        padding: 0 20px
    }

    .sh {
        gap: 24px;
        margin-bottom: 40px;
        padding-bottom: 28px
    }

    .stitle {
        font-size: clamp(24px, 7vw, 36px)
    }

    .svc {
        padding: 64px 0
    }

    .sg {
        grid-template-columns: 1fr
    }

    .sc {
        padding: 32px 22px 36px
    }

    .about {
        padding: 64px 0
    }

    .ag {
        gap: 36px
    }

    .asts {
        grid-template-columns: 1fr 1fr
    }

    .astn {
        font-size: 34px
    }

    .ast {
        padding: 28px 20px
    }

    .proc {
        padding: 64px 0
    }

    .ps {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .pst {
        padding: 0
    }

    .certs {
        padding: 32px 0
    }

    .ci {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 0 20px
    }

    .csep {
        display: none
    }

    .cbs {
        gap: 10px
    }

    .cb {
        font-size: var(--micro);
        padding: 7px 12px
    }

    .contact {
        padding: 64px 0
    }

    .cg {
        gap: 36px
    }

    .cf {
        padding: 24px 20px
    }

    .fr {
        grid-template-columns: 1fr
    }

    .fg2 {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .fb2 {
        flex-direction: column;
        gap: 6px;
        padding: 16px 20px 0
    }

    .trustin {
        padding: 12px 20px;
        gap: 8px
    }

    .ti {
        font-size: var(--micro);
        letter-spacing: .12em
    }
}

/* --- Phase 2 additions (service/area/compliance/downloads/testimonials pages) ---
   New pages reuse existing section classes (.svc = light cream section, .proc = cream-d
   alt section, .sh/.sey/.stitle = section header, .cbody = body paragraph) rather than
   inventing parallel ones, so they inherit the same rhythm as the home page. The only
   genuinely new component is the breadcrumb trail below, used on every page but home. */

.bc {
    background: var(--cream-d);
    border-bottom: 1px solid var(--rule)
}

.bcl {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-family: var(--fd);
    font-size: var(--smallest);
    letter-spacing: .05em;
    color: var(--mist);
    list-style: none
}

.bcl li {
    display: flex;
    align-items: center;
    gap: 8px
}

.bcl li:not(:last-child)::after {
    content: '/';
    color: var(--rule)
}

.bcl a {
    color: var(--mist);
    text-decoration: none
}

.bcl a:hover {
    color: var(--gold)
}

/* Home page service cards (.sct) now link to /services/<slug>/ — PRD's "home → services"
   internal-linking requirement — without changing the card's existing look. */
.sct a {
    color: inherit;
    text-decoration: none
}

.sct a:hover {
    color: var(--gold)
}

/* ============================================================================
   Service overlay (Stage 1 / Chunk 4) — trigger affordance + dialog styling +
   fire-door entrance (D9). Brand tokens only. The door leaf/handle are NEW
   overlay-scoped pseudo-elements on .svo-panel — they mirror the preloader's
   .pshut shutter but never reuse #pre/#pf. Markup: partials/service-overlay.njk.
   ========================================================================== */

/* --- Trigger affordance on the cards --------------------------------------
   Pointer + a clear focus ring for keyboard users. Outline only, so it never
   touches the navy .sc:hover wipe or the gold .sc::after underline. */
.sc[data-svc-trigger] {
    cursor: pointer
}

.sc[data-svc-trigger]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -4px
}

/* --- Backdrop -------------------------------------------------------------
   Fixed, full-viewport, navy-tinted and blurred so #svc reads as out of focus
   behind the sheet. Sits above nav (100) but below the custom cursor (9994/5)
   so the cursor stays visible over the modal. Captures clicks → background is
   non-interactive; page scroll-lock is the JS chunk's job (reuse Lenis). */
.svo {
    position: fixed;
    inset: 0;
    z-index: 9992;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 20, 50, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: svoFade .25s ease both
}

/* hidden attribute must still win over display:flex */
.svo[hidden] {
    display: none
}

/* --- Panel: centred portrait pop-out, sized to its content ----------------
   Height grows with the content (never a hard aspect-ratio, which forced a
   too-short box and an internal scrollbar). min-height keeps the portrait
   proportion when content is short; max-height caps it; overflow:hidden means
   the card NEVER scrolls — the tightened spacing below keeps everything inside. */
.svo-panel {
    position: relative;
    width: min(440px, 92vw);
    min-height: min(580px, 90vh);
    max-height: 90vh;
    padding: 40px 36px 32px;
    background: var(--navy);
    color: var(--chalk);
    border: 1px solid rgba(198, 162, 75, 0.18);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    overscroll-behavior: contain;
    animation: svoPop .4s var(--ease) both
}

/* --- Fire-door entrance (D9) ----------------------------------------------
   ::before is the navy door leaf, ::after the gold handle — both sweep shut
   across the panel (translateX) mirroring .pshut, then dissolve to reveal the
   content. New overlay-scoped pseudos; the preloader's #pf is untouched. */
.svo-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: var(--navy);
    box-shadow: -10px 0 20px rgba(0, 0, 0, 0.5);
    transform: translateX(-110%);
    /* Purely decorative: it ends the sweep at opacity:0 but still covers the
       panel (fill-mode both), so it must never intercept clicks — otherwise the
       close button beneath it (z-index 2) is unclickable. */
    pointer-events: none;
    animation: svoDoor .46s ease both
}

.svo-panel::after {
    content: '';
    position: absolute;
    right: 28px;
    top: calc(100% / 1.618 - 1px);
    width: 18px;
    height: 1.5px;
    z-index: 4;
    background: var(--gold);
    transform: translateX(-110%);
    pointer-events: none;
    animation: svoDoor .46s ease both
}

/* Content fades up just after the door has swept shut (~260ms in). */
.svo-panel>* {
    animation: svoReveal .22s var(--ease) .26s both
}

@keyframes svoFade {
    from { opacity: 0 }
    to { opacity: 1 }
}

@keyframes svoPop {
    from { opacity: 0; transform: scale(.96) }
    to { opacity: 1; transform: scale(1) }
}

@keyframes svoDoor {
    0% { transform: translateX(-110%); opacity: 1 }
    52% { transform: translateX(0); opacity: 1 }
    72% { transform: translateX(0); opacity: 1 }
    100% { transform: translateX(0); opacity: 0 }
}

@keyframes svoReveal {
    from { opacity: 0; transform: translateY(8px) }
    to { opacity: 1; transform: translateY(0) }
}

/* --- Close button ---------------------------------------------------------
   Below the door (z-index 2) so the sweep covers it during entrance. */
.svo-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--fb);
    font-size: 26px;
    line-height: 1;
    color: var(--mist);
    cursor: pointer;
    transition: color .25s
}

.svo-close:hover,
.svo-close:focus-visible {
    color: var(--gold)
}

.svo-close:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px
}

/* --- Content slots --------------------------------------------------------- */
.svo-num {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold)
}

.svo-num::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--gold);
    opacity: .5
}

.svo-heading {
    margin-bottom: 12px;
    font-family: var(--fd);
    font-size: 26px;
    font-weight: 300;
    letter-spacing: .06em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--chalk)
}

.svo-body {
    margin-bottom: 20px;
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    line-height: 1.55;
    color: rgba(245, 242, 234, 0.62)
}

/* Download (solid gold) + page link (subtle), sharing one row. */
.svo-pdf {
    display: inline-block;
    padding: 14px 26px;
    background: var(--gold);
    color: var(--navy);
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s
}

.svo-pdf:hover {
    background: var(--gold-d)
}

.svo-pdf:focus-visible {
    outline: 2px solid var(--chalk);
    outline-offset: 3px
}

.svo-page {
    display: inline-block;
    margin-left: 20px;
    font-family: var(--fd);
    font-size: var(--micro);
    font-weight: 300;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mist);
    text-decoration: none;
    border-bottom: 1px solid rgba(160, 152, 128, 0.35);
    padding-bottom: 2px;
    transition: color .25s, border-color .25s
}

.svo-page:hover,
.svo-page:focus-visible {
    color: var(--gold);
    border-bottom-color: var(--gold)
}

.svo-page:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px
}

/* Slimmer "Take a Look" form reuses .ftit/.fg/.bsub (already navy-ready).
   Spacing is tightened *only within the overlay* so the whole panel fits with
   no scroll; the page's main #contact_form keeps its roomier defaults. */
.svo-form {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(245, 242, 234, 0.1)
}

.svo-form .ftit {
    margin-bottom: 14px
}

.svo-form .fg {
    margin-bottom: 12px
}

.svo-form .fg label {
    margin-bottom: 6px
}

.svo-form .bsub {
    margin-top: 8px;
    padding: 15px
}

/* --- Full-screen sheet at <=640px (content still fits, no scroll) ---------- */
@media (max-width:640px) {
    .svo {
        padding: 0
    }

    .svo-panel {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        height: 100dvh;
        max-height: 100dvh;
        padding: 52px 22px 26px;
        border: none
    }
}

/* --- Reduced motion: plain fade, no door sweep ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    .svo {
        animation: svoFade .2s ease both
    }

    .svo-panel {
        animation: svoFade .2s ease both
    }

    .svo-panel::before,
    .svo-panel::after {
        display: none
    }

    .svo-panel>* {
        animation: none
    }
}

/* ==========================================================================
   Blog (Stage 3 / Chunk 2) — listing (/blog/) + post (/blog/<slug>/).
   Brand tokens & fonts only; reuses the section-intro hooks (.si/.sey/.stitle/
   .sint) and the services' card aesthetic (hairline gridlines, navy hover,
   gold foot-sweep). No new fonts, no CDN, no load-bearing selectors touched.
   ========================================================================== */

/* --- Listing ------------------------------------------------------------- */
.blog-list {
    padding: 120px 0;
    background: var(--cream)
}

.blog-list-head {
    margin-bottom: 64px;
    max-width: 720px
}

.blog-list-head .sint {
    margin-top: 20px
}

/* Card grid mirrors the services grid: hairline gridlines, cream cards. */
.blog-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: rgba(10, 20, 50, 0.08)
}

.blog-card {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    /* Padding lives on the .blog-card <li> (not the inner <article>) because the
       top-of-file CMS reset zeroes padding-left/right on every <article>. */
    padding: 40px 32px 44px;
    cursor: pointer;
    transition: background .35s var(--ease)
}

.blog-card>article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%
}

/* gold sweep along the foot, echoing .sc::after */
.blog-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease)
}

.blog-card:hover {
    background: var(--navy)
}

.blog-card:hover::after {
    transform: scaleX(1)
}

/* Tag pill — solid gold / navy text (AA), shared with the post header. */
.blog-card-tag,
.post-tag {
    display: inline-block;
    margin: 0 0 18px;
    padding: 5px 12px;
    background: var(--gold);
    color: var(--navy);
    font-family: var(--fd);
    font-size: var(--micro);
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase
}

.blog-card-title {
    margin: 0 0 14px;
    font-family: var(--fd);
    font-size: 21px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .01em
}

.blog-card-title a {
    color: var(--navy);
    text-decoration: none;
    transition: color .35s
}

.blog-card:hover .blog-card-title a {
    color: var(--chalk)
}

/* Stretched link: the single real <a> (the title) covers the whole card, so the
   entire .blog-card is one click target — one link, one tab stop, no nested <a>. */
.blog-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1
}

/* Keyboard focus shows on the whole card (the title link is the only tab stop). */
.blog-card:focus-within {
    outline: 2px solid var(--gold);
    outline-offset: 3px
}

.blog-card-meta {
    margin: 0 0 16px;
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--smoke);
    transition: color .35s
}

.blog-card:hover .blog-card-meta {
    color: rgba(245, 242, 234, 0.55)
}

.blog-card-excerpt {
    margin: 0 0 26px;
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    line-height: 1.75;
    color: var(--smoke);
    transition: color .35s
}

.blog-card:hover .blog-card-excerpt {
    color: rgba(245, 242, 234, 0.6)
}

/* "Read more" — navy on cream (AA), gold on the navy hover state. */
.blog-card-link {
    margin-top: auto;
    font-family: var(--fd);
    font-size: var(--smallest);
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    transition: color .35s
}

.blog-card-link::after {
    content: ' \2192';
    color: var(--gold)
}

.blog-card:hover .blog-card-link {
    color: var(--gold)
}

/* --- Post ----------------------------------------------------------------
   The horizontal gutter is supplied by the canonical .si wrapper in post.njk
   (max-width:1400px; padding:0 64/40/20px), mirroring the homepage. The
   <article class="post"> is forced full-width by the top-of-file CMS reset, so
   the ~68ch reading measure is centred on the inner header/body instead. The
   reset only zeroes padding-left/right, so .post's vertical padding survives. */
.post {
    padding-top: clamp(56px, 8vw, 96px);
    padding-bottom: 120px
}

.post-header,
.post-body {
    max-width: 736px;
    margin-left: auto;
    margin-right: auto
}

.post-header {
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule)
}

.post-title {
    margin: 0 0 22px;
    font-family: var(--fd);
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--navy)
}

.post-byline {
    margin: 0;
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--smoke)
}

/* Readable long-form body — ~68ch at 18px. */
.post-body {
    font-family: var(--fb);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--navy)
}

.post-body>*+* {
    margin-top: 26px
}

.post-body h2 {
    margin: 48px 0 0;
    font-family: var(--fd);
    font-size: clamp(24px, 3.4vw, 30px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--navy)
}

.post-body h3 {
    margin: 36px 0 0;
    font-family: var(--fd);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--navy)
}

.post-title em,
.post-body h2 em,
.post-body h3 em {
    font-style: italic;
    font-family: var(--fa);
    color: var(--gold)
}

.post-body strong {
    font-weight: 600;
    color: var(--navy)
}

.post-body em {
    font-style: italic
}

/* Inline links: navy text + gold underline (never colour alone), AA-safe. */
.post-body a {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
    transition: text-decoration-color .25s
}

.post-body a:hover {
    text-decoration-color: var(--gold-d);
    text-decoration-thickness: 2px
}

.post-body a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px
}

.post-body ul,
.post-body ol,
.post-list {
    margin: 26px 0 0;
    padding-left: 24px
}

.post-body li {
    margin-top: 14px;
    padding-left: 6px;
    line-height: 1.8
}

.post-body li::marker {
    color: var(--gold)
}

.post-body blockquote {
    margin: 32px 0 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--gold);
    font-family: var(--fa);
    font-style: italic;
    font-size: 20px;
    line-height: 1.6;
    color: var(--smoke)
}

.post-body img {
    max-width: 100%;
    height: auto
}

/* Closing CTA — navy callout, gold action link (overrides inline-link style). */
.post-body .post-cta {
    margin-top: 56px;
    padding: 36px 32px;
    background: var(--navy);
    text-align: center
}

.post-body .post-cta a {
    display: inline-block;
    font-family: var(--fd);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .03em;
    line-height: 1.4;
    color: var(--gold);
    text-decoration: none;
    transition: color .25s
}

.post-body .post-cta a::after {
    content: ' \2192'
}

.post-body .post-cta a:hover {
    color: var(--chalk)
}

.post-body .post-cta a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px
}

/* --- Blog responsive ----------------------------------------------------- */
@media (max-width:1024px) {
    .blog-list {
        padding: 80px 0
    }

    .blog-cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:640px) {
    .blog-list {
        padding: 64px 0
    }

    .blog-list-head {
        margin-bottom: 40px
    }

    .blog-cards {
        grid-template-columns: 1fr
    }

    .blog-card {
        padding: 32px 24px 36px
    }

    .post {
        padding-top: 48px;
        padding-bottom: 88px
    }

    .post-body {
        font-size: 17px
    }

    .post-body .post-cta {
        padding: 28px 22px
    }
}

/* Ungated one-page-guide download CTA — partials/download-cta.njk (service/town pages) and the
   /downloads/ hub. On-brand: cream-shade card with a gold edge, navy action button. The button is
   a ≥44px tap target per the PRD §11.1 responsiveness checks. */
.dlcard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--cream-d);
    border: 1px solid rgba(10, 20, 50, 0.1);
    border-left: 3px solid var(--gold);
    padding: 28px 32px
}

.dltx {
    max-width: 60ch
}

.dldesc {
    font-family: var(--fb);
    font-size: var(--small);
    font-weight: 300;
    line-height: 1.7;
    color: var(--smoke);
    margin-top: 8px
}

.dlcta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    background: var(--navy);
    color: var(--chalk);
    font-family: var(--fd);
    font-size: var(--small);
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 28px;
    border: 1px solid var(--navy);
    transition: background .3s, color .3s, border-color .3s
}

.dlcta:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold-d)
}

.dlcta:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px
}

.dlico {
    font-size: 1.15em;
    line-height: 1
}

@media (max-width:640px) {
    .dlcard {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px
    }

    .dlcta {
        width: 100%;
        justify-content: center
    }
}