/* ============================================================
   Just In Case Security / DenverDVR
   Modern stylesheet — palette derived from original bronx theme.
   Fonts: Inter (UI/body) + Fraunces (display).
   ============================================================ */

:root {
    --brand-green:        #233219;   /* primary dark forest */
    --brand-green-hover:  #2f4524;   /* lifted hover */
    --brand-green-deep:   #202d17;   /* pressed */
    --brand-sage:         #3d5e4c;   /* lighter accent green */
    --brand-slate:        #7f8c8d;   /* header slate */
    --brand-slate-dark:   #5e6c6d;
    --brand-cream:        #f6f4ee;   /* page background */
    --brand-paper:        #ffffff;
    --brand-ink:          #1c1c1c;
    --brand-mute:         #5a5a5a;
    --brand-line:         #e3e0d7;
    --brand-accent:       #b9a26a;   /* warm metallic */
    --brand-accent-soft:  #d6c294;

    --bg-page:            var(--brand-cream);
    --bg-paper:           var(--brand-paper);
    --bg-alt:             var(--brand-paper);
    --color-ink:          var(--brand-ink);
    --color-mute:         var(--brand-mute);
    --color-line:         var(--brand-line);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
    --shadow-lg: 0 18px 40px rgba(0,0,0,0.12);

    --radius: 8px;
    --content-max: 1120px;
    --content-narrow: 820px;

    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
   /* --font-display: "Fraunces", "Iowan Old Style", "Cambria", "Georgia", serif;*/
    --font-display: "Bodoni Moda", "Iowan Old Style", "Cambria", "Georgia", serif;
}

/* -- Dark mode ------------------------------------------------- */
@media all { /* was: prefers-color-scheme: dark — forced always-on */
    :root {
        --bg-page:    #0f130d;
        /* Deep forest green to match the logo's background (gradient works
           here because every consumer uses `background:` shorthand). */
        --brand-paper: #143025;                                 /* solid fallback / token */
        --bg-paper:   linear-gradient(160deg, #163528 0%, #0F2A20 100%);
        --bg-alt:     #11150f;
        --color-ink:  #e9eae5;
        --color-mute: #a3a99f;
        --color-line: #2a3225;

        --brand-green:        #5a8a48;   /* lifted green for contrast on dark */
        --brand-green-hover:  #6ea159;
        --brand-green-deep:   #466e39;
        --brand-sage:         #8eb079;

        --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
        --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
        --shadow-lg: 0 18px 40px rgba(0,0,0,0.55);
    }
}

/* -- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01", "ss03";
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--brand-green);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover, a:focus-visible { color: var(--brand-green-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-ink);
    line-height: 1.15;
    margin: 0 0 0.6em;
    letter-spacing: -0.01em;
    font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); }
h3 {
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0;
}

p { margin: 0 0 1.1em; }

code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: rgba(0,0,0,0.05);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}
@media all { /* was: prefers-color-scheme: dark — forced always-on */
    code { background: rgba(255,255,255,0.08); }
}

.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.container--narrow { max-width: var(--content-narrow); }

/* -- Hairline gradient at very top of page ----------------- */
.hairline {
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-green) 0%,
        var(--brand-accent) 50%,
        var(--brand-slate) 100%);
}

/* -- Top bar ----------------------------------------------- */
.topbar {
    background: var(--brand-green);
    color: #e6e6e0;
    font-size: 0.875rem;
    padding: 0.45rem 0;
}
.topbar a { color: #e6e6e0; }
.topbar a:hover { color: var(--brand-accent-soft); text-decoration: none; }
.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
}
.topbar__contact span + span::before {
    content: "•";
    margin: 0 0.6rem;
    color: rgba(255,255,255,0.4);
}

/* -- Header ------------------------------------------------ */
.site-header {
    background: var(--bg-paper);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 0;
}
.site-header__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-ink);
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.site-header__logo img {
  height: 75px;        /* The display height in your header */
  width: auto;         /* Prevents stretching */
  display: block;
  border-radius: 9px;  
}

.site-header__logo:hover { text-decoration: none; color: var(--brand-green); }
.site-header__logo small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--color-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* -- Nav --------------------------------------------------- */
.nav-toggle {
    margin-left: auto;
    background: none;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    color: var(--color-ink);
    padding: 0.45rem 0.7rem;
    font-size: 1rem;
    cursor: pointer;
    display: none;
    font-family: inherit;
}
.site-nav {
    margin-left: auto;
}
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.15rem;
    align-items: center;
}
.site-nav > ul > li > a {
    display: block;
    padding: 0.7rem 0.85rem 0.6rem;
    font-weight: 600;
    color: var(--color-ink);
    border-radius: 4px 4px 0 0;
    transition: color 0.15s ease, background 0.15s ease;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    position: relative;
}
.site-nav > ul > li > a::after {
    /* active/hover underline accent */
    content: "";
    position: absolute;
    left: 12%; right: 12%;
    bottom: 4px;
    height: 2px;
    background: var(--brand-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
    border-radius: 2px;
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li > a:focus-visible {
    color: var(--brand-green);
    text-decoration: none;
}
.site-nav > ul > li > a:hover::after,
.site-nav > ul > li.is-active > a::after {
    transform: scaleX(1);
}
.site-nav > ul > li.is-active > a { color: var(--brand-green); }

/* dropdown */
.site-nav li.has-children { position: relative; }
.site-nav li.has-children > a::before {
    content: "";
}
.site-nav .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--bg-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0.4rem;
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    z-index: 60;
}
.site-nav li.has-children:hover > .submenu,
.site-nav li.has-children:focus-within > .submenu { display: flex; }
.site-nav .submenu a {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-ink);
    border-radius: 4px;
    font-weight: 500;
}
.site-nav .submenu a:hover {
    background: var(--bg-page);
    color: var(--brand-green);
    text-decoration: none;
}

/* -- Hero -------------------------------------------------- */
.hero {
    position: relative;
    color: #fff;
    padding: 0rem 0 1.5rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.hero h1 { color: #fff; margin-bottom: 0.6rem; font-family: var(--font-display); }
.hero p {
    color: rgba(255,255,255,0.95);
    font-size: 1.12rem;
    max-width: 720px;
    margin: 0 auto 1.6rem;
}
/* Diagonal "staircase" brand wordmark in the hero */
.hero__brand {
    position: relative;
    display: inline-block;     /* shrink-wraps to the staircase width */
    margin: 1.6rem auto 0.6rem;
}
.hero__stair {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-family: var(--font-display);
    line-height: 1.02;
}
.hero__stair-word {
    font-weight: 600;
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    letter-spacing: 0.01em;
    /* White-to-gold gradient text (variation 05) */
    background: linear-gradient(135deg, #fff 0%, var(--brand-accent-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* Uniform 0.6em step so the diagonal is even */
.hero__stair-word:nth-child(1) { margin-left: 0; }
.hero__stair-word:nth-child(2) { margin-left: 0.6em; }
.hero__stair-word:nth-child(3) { margin-left: 1.2em; }
.hero__stair-word:nth-child(4) { margin-left: 1.8em; padding-bottom: 5px; }

/* Brand image: top-right, right edge aligned to the "Security, LLC" edge.
   Sized as a % of the wordmark (NOT the viewport) so it scales identically
   on every screen. height:auto keeps it from distorting. Tweak `width`. */
.hero__stair-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
    height: auto;
    border-radius: 12px;
}

@media (max-width: 520px) {
    /* Only the type size changes on phones; the em-based stagger and the
       %-based image scale themselves, so no other overrides are needed. */
    .hero__stair-word { font-size: clamp(1.1rem, 5vw, 1.6rem); }
}

/* Contact Hero Stair */
.contact__brand {
    position: relative;
    display: inline-block;     /* shrink-wraps to the staircase width */
    margin: -20.0rem auto -5rem -1rem;
}
.contact__stair {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-family: var(--font-display);
    line-height: 1.02;
}
.contact__stair-word {
    font-weight: 600;
    font-size: clamp(1rem, 4vw, 1.7rem);
    letter-spacing: 0.01em;
    /* White-to-gold gradient text (variation 05) */
    background: linear-gradient(135deg, #fff 0%, var(--brand-accent-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* Uniform 0.6em step so the diagonal is even */
.contact__stair-word:nth-child(1) { margin-left: 0; }
.contact__stair-word:nth-child(2) { margin-left: 0.3em; }
.contact__stair-word:nth-child(3) { margin-left: 0.6em; }
.contact__stair-word:nth-child(4) { margin-left: 1.2em; padding-bottom: 5px; }

/* Brand image: top-right, right edge aligned to the "Security, LLC" edge.
   Sized as a % of the wordmark (NOT the viewport) so it scales identically
   on every screen. height:auto keeps it from distorting. Tweak `width`. */
.contact__stair-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 15%;
    height: auto;
    border-radius: 12px;
}

@media (max-width: 520px) {
    /* The em-based stagger and %-based image scale themselves. The desktop
       margin uses fixed rem pulls that don't shrink with the layout, so on
       phones we drop the negative pull and let the wordmark sit in flow. */
    .contact__brand { margin: 0 auto; }
    .contact__stair-word { font-size: clamp(0.8rem, 3vw, 1.2rem); }
}


.hero__inner { position: relative; z-index: 3; }
.hero__photo {
    position: absolute; inset: 0;
   /* background-image: url('/static/img/photos/hero.svg');*/
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.hero__overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(26,38,19,0.85), rgba(61,94,76,0.78) 50%, rgba(35,50,25,0.92));
    z-index: 2;
}
.hero .btn-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* -- Trust strip ------------------------------------------- */
.trust-strip {
    background: var(--brand-green);
    color: #e6e6e0;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.trust-strip__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.92rem;
}
.trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 220px;
    justify-content: center;
}
.trust-strip__badge {
    /*background: var(--brand-accent);*/
    /*background:  #D9A74A;/*#455B4E; /*#445A4D;*/
    /*color: #1a2613;*/
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    /*  background: rgba(163, 230, 53, 0.25); /* Translucent lime green 
  border: 1px solid rgba(163, 230, 53, 0.6);
  color: #bef264; /* Bright mint text for legibility 
  backdrop-filter: blur(4px);
  background: #a7f3d0;
  border: 1px solid #a7f3d0;
  color: #064e3b; /* Deep emerald text */
    background: var(--brand-accent);
    border: 1px solid var(--brand-accent);
    color: rgb(31, 41, 19);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}

/* -- Page title (non-hero pages) -------------------------- */
.page-title {
    background: linear-gradient(135deg, var(--brand-slate), var(--brand-slate-dark));
    color: #fff;
    padding: 2.75rem 0 2.25rem;
}
.page-title h1 { color: #fff; margin: 0; }
.page-title .crumbs {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}
.page-title .crumbs a { color: rgba(255,255,255,0.85); }
.page-title .crumbs a:hover { color: #fff; }

/* -- Buttons ---------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    font-family: var(--font-body);
}
.btn--primary { background: var(--brand-green); color: #fff; }
.btn--primary:hover { background: var(--brand-green-hover); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }
.btn--outline { background: transparent; color: var(--brand-green); border-color: var(--brand-green); }
.btn--outline:hover { background: var(--brand-green); color: #fff; text-decoration: none; }

/* -- Sections --------------------------------------------- */
.section { padding: 3.5rem 0; }
.section--tight { padding: 2rem 0; }
.section--alt {
    background: var(--bg-alt);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
@media all { /* was: prefers-color-scheme: dark — forced always-on */
    .section--alt { background: #131810; }
}

.section-head { text-align: center; margin-bottom: 2.25rem; }
.section-head h2 { margin-bottom: 0.4rem; }
.section-head p { color: var(--color-mute); max-width: 640px; margin: 0 auto; }

/* -- Cards ------------------------------------------------- */
.card-grid-sections {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
    background: var(--bg-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-sage);
}
.card h3 {
    margin: 0 0 0.5rem;
    color: var(--color-ink);
    font-size: 1.1rem;
}
.card p { color: var(--color-mute); font-size: 0.95rem; margin: 0 0 1rem; }
.card__icon {
    width: 44px; height: 44px;
    background: var(--brand-green);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    font-size: 1.1rem;
    font-weight: 700;
}
.card .more {
    margin-top: auto;
    font-weight: 600;
    color: var(--brand-green);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.card .more::after { content: " →"; }

/* -- Article (content page body) --------------------------- */
.article {
    background: var(--bg-paper);
    padding: 2.5rem clamp(1.25rem, 4vw, 3rem);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-line);
}
.article p { font-size: 1.05rem; color: var(--color-ink); }
.article ul { padding-left: 1.25rem; }
.article ul li { margin-bottom: 0.4rem; }

/* -- Pillbar ----------------------------------------------- */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}
.pill {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
}

/* -- Gallery ----------------------------------------------- */
.gallery {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gallery__item {
    margin: 0;
    background: var(--bg-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.gallery__item figcaption {
    padding: 0.75rem 1rem 1rem;
    font-size: 0.92rem;
    color: var(--color-mute);
    font-weight: 500;
}

/* -- FAQ accordion ----------------------------------------- */
.faq {
    display: grid;
    gap: 0.6rem;
}
.faq__item {
    background: var(--bg-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq__item[open] { border-color: var(--brand-sage); box-shadow: var(--shadow-md); }
.faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "+";
    color: var(--brand-green);
    font-size: 1.4rem;
    font-weight: 600;
    transition: transform 0.2s ease;
    line-height: 1;
}
.faq__item[open] summary::after { content: "−"; transform: rotate(0deg); }
.faq__item summary:hover { color: var(--brand-green); }
.faq__body {
    padding: 0 1.25rem 1rem;
    color: var(--color-mute);
    font-size: 0.98rem;
}
.faq__body p:last-child { margin-bottom: 0; }

/* -- Contact ---------------------------------------------- */
.contact-card {
    background: var(--bg-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2.25rem clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
}
.contact-card__logo { text-align: center; }
.contact-card__logo img { margin: 0 auto; max-width: 100%; }
.contact-card h2 { margin-top: 0; }
.contact-card .lede { color: var(--color-mute); }
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    font-size: 1.05rem;
}
.contact-list strong {
    display: inline-block;
    min-width: 80px;
    color: var(--brand-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
}
.contact-list a { font-weight: 600; }
.contact-list li { display: flex; align-items: center; gap: 0.5rem; }
.copy-btn {
    margin-left: auto;            /* pushes the button to the right edge */
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-green);
    background: transparent;
    border: 1px solid var(--brand-green);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Controls the space between the icon and text */
}
.copy-btn:hover,
.copy-btn:focus-visible { background: var(--brand-green); color: #fff; }
.copy-btn.is-copied {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #1f2913;
}
.text-btn {
    margin-left: auto;            /* pushes the button to the right edge */
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-green);
    background: transparent;
    border: 1px solid var(--brand-green);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Controls the space between the icon and text */
    text-decoration: none;
}
.text-btn:hover,
.text-btn:focus-visible { background: var(--brand-green); color: #fff; text-decoration: none;  }

@media (max-width: 520px) {
    /* On phones the email + Copy button don't fit on one line, so let the row
       wrap and force the button onto its own line below the email. The
       full-width ::after is a zero-height flex break, so the button keeps its
       natural pill width (it isn't stretched) and stays left-aligned. */
    .contact-list li:has(.copy-btn) { flex-wrap: wrap; }
    .contact-list li:has(.copy-btn)::after {
        content: "";
        flex-basis: 100%;
        height: 0;
        order: 2;
    }
    .contact-list li:has(.copy-btn) .copy-btn {
        margin-left: 0;
        margin-top: 0.4rem;
        order: 3;
    }
}
/* -- Footer ----------------------------------------------- */
.site-footer {
    background: var(--brand-green-deep);
    color: #d6d8d1;
    padding: 2.75rem 0 1.5rem;
    margin-top: 4rem;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--brand-accent-soft); text-decoration: none; }
.site-footer h4 {
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
}
.site-footer__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 1.5rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 0.35rem; }
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1rem;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    color: rgba(255,255,255,0.65);
}

/* -- Reveal on scroll ------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* -- Utility ---------------------------------------------- */
.text-center { text-align: center; }
.muted { color: var(--color-mute); }
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* -- Responsive ------------------------------------------- */
@media (max-width: 860px) {
    .nav-toggle { display: inline-block; }
    .site-header__inner { flex-wrap: wrap; }
    .site-nav {
        order: 99;
        width: 100%;
        margin-left: 0;
        display: none;
        padding: 0.5rem 0 0.75rem;
        border-top: 1px solid var(--color-line);
    }
    .site-nav.is-open { display: block; }
    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-nav > ul > li > a {
        padding: 0.75rem 0.5rem;
        border-radius: 0;
        text-transform: none;
        font-size: 1rem;
        letter-spacing: 0;
    }
    .site-nav > ul > li > a::after { display: none; }
    .site-nav .submenu {
        position: static;
        display: block;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 1rem;
    }
    .site-nav .submenu a { color: var(--color-mute); }
    .contact-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .contact-card__logo img { max-width: 180px; }
    .trust-strip__inner { gap: 0.6rem 1rem; }
}

@media (max-width: 480px) {
    .topbar__inner { justify-content: center; text-align: center; }
    .topbar__contact span + span::before { content: ""; margin: 0; }
    .topbar__contact span { display: block; }
    .trust-strip__item { flex: 1 1 100%; justify-content: flex-start; }
}

/* ============================================================
   /pages editor
   ============================================================ */

.editor-flash {
    background: #e7f1de;
    color: #1f3315;
    border: 1px solid #b6c9a3;
    border-left: 4px solid var(--brand-green);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-weight: 500;
}
@media all { /* was: prefers-color-scheme: dark — forced always-on */
    .editor-flash { background: #1e2a16; color: #d1e2b8; border-color: #2c4220; }
}

.editor-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}
.editor-table th, .editor-table td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}
.editor-table th {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-mute);
    font-weight: 600;
    background: var(--bg-page);
}
.editor-table tr:hover td { background: rgba(35,50,25,0.04); }
@media all { /* was: prefers-color-scheme: dark — forced always-on */
    .editor-table tr:hover td { background: rgba(255,255,255,0.04); }
}

.editor-pill {
    display: inline-block;
    background: var(--brand-cream);
    border: 1px solid var(--color-line);
    color: var(--brand-green);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media all { /* was: prefers-color-scheme: dark — forced always-on */
    .editor-pill { background: #1a2014; }
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn--sm {
    padding: 0.45rem 0.9rem;
    font-size: 0.72rem;
}

.btn--ghost-dark {
    background: transparent;
    color: var(--color-mute);
    border-color: var(--color-line);
}
.btn--ghost-dark:hover {
    background: var(--bg-page);
    color: var(--brand-green);
    text-decoration: none;
}

.editor-form { display: block; }
.editor-row { margin-bottom: 1.2rem; }
.editor-row label { display: block; }
.editor-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-green);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.editor-input {
    width: 100%;
    font: inherit;
    color: var(--color-ink);
    background: var(--bg-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.editor-input:focus {
    outline: none;
    border-color: var(--brand-sage);
    box-shadow: 0 0 0 3px rgba(35,50,25,0.15);
}
.editor-body {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 280px;
}
.editor-hint {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    color: var(--color-mute);
}
.editor-meta {
    margin-top: 1.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.82rem;
    color: var(--color-mute);
}

@media (max-width: 720px) {
    .editor-table thead { display: none; }
    .editor-table, .editor-table tbody, .editor-table tr, .editor-table td { display: block; width: 100%; }
    .editor-table tr {
        border: 1px solid var(--color-line);
        border-radius: var(--radius);
        margin-bottom: 0.6rem;
        padding: 0.4rem 0.6rem;
    }
    .editor-table td { border: none; padding: 0.35rem 0; }
}