/* ==========================================================================
   Vetlory – Pet Treats
   Main stylesheet

   Brand palette (fixed, do not alter):
     Primary forest green .... #1D3B2E
     Gold (accent only) ..... #C39642
     White ................... #FFFFFF
     Light background ........ #F7F7F4
     Dark text ............... #1D2A25
     Light border ............ #E5E5E0

   Contents
     01.  Design tokens
     02.  Reset and base
     03.  Typography
     04.  Layout helpers
     05.  Buttons and links
     06.  Top bar
     07.  Header and navigation
     08.  Hero
     09.  Section primitives
     10.  Cards
     11.  Trust bar
     12.  Steps
     13.  Accordion (FAQ)
     14.  Forms
     15.  CTA band
     16.  Footer
     17.  Page header and prose (legal pages)
     18.  Utilities
     19.  Responsive
     20.  Motion, print
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Design tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand */
    --green:        #1D3B2E;
    --gold:         #C39642;
    --white:        #FFFFFF;
    --bg:           #F7F7F4;
    --ink:          #1D2A25;
    --line:         #E5E5E0;

    /* Tints and shades derived from the brand colours only.
       --gold-deep is the accessible shade for gold *text*; --gold stays the
       decorative/brand accent. */
    --green-deep:   #16301F;
    --green-hover:  #2A4D3C;
    --green-wash:   #EEF1ED;
    --gold-deep:    #8E6824;
    --gold-wash:    #F6EFE1;
    --ink-soft:     #5A6660;
    --ink-faint:    #6E7873;
    --line-strong:  #D6D6D0;

    /* Typography */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;

    /* Layout */
    --container:      1200px;
    --container-wide: 1360px;
    --gutter:         24px;
    --section-y:      104px;
    --radius:         4px;
    --radius-lg:      8px;

    /* Header. The logo is a wide wordmark centred on a square white canvas.
       The frame shows only the band the wordmark occupies, which keeps the
       header compact without touching the logo file itself.
       --brand-frame-w must stay at 0.84 or above: the mark sits ~1% right
       of centre and extends to 90.6% of the canvas, so a narrower frame
       would clip its right edge. */
    --header-h:       72px;
    --brand-mark:     152px;   /* rendered logo square */
    --brand-frame-w:  0.84;    /* visible width, as a fraction of the square */
    --brand-frame-h:  40px;    /* visible height of the wordmark */

    /* Elevation — restrained, no heavy shadows */
    --shadow-sm: 0 1px 2px rgba(29, 59, 46, 0.05);
    --shadow-md: 0 6px 20px -8px rgba(29, 59, 46, 0.16);
    --shadow-lg: 0 18px 40px -22px rgba(29, 59, 46, 0.28);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   02. Reset and base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

a { color: var(--green); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

figure { margin: 0; }

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

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

::selection {
    background: var(--green);
    color: var(--white);
}

hr {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--line);
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    padding: 12px 20px;
    background: var(--green);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   03. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
    margin: 0 0 0.6em;
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--green);
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.35rem + 3.4vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.4rem); line-height: 1.28; }
h4 { font-size: 1.0625rem; line-height: 1.35; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--gold);
    flex: none;
}

.eyebrow--center { justify-content: center; }

/* On dark green the lighter gold is used instead, to hold contrast. */
.section--green .eyebrow,
.cta-band .eyebrow,
.footer .eyebrow { color: var(--gold); }

.lead {
    font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem);
    line-height: 1.7;
    color: var(--ink-soft);
}

.text-soft  { color: var(--ink-soft); }
.text-green { color: var(--green); }
.text-gold  { color: var(--gold); }

.gold-rule {
    width: 56px;
    height: 3px;
    margin: 0 0 26px;
    background: var(--gold);
    border: 0;
}

/* --------------------------------------------------------------------------
   04. Layout helpers
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight  { padding-block: calc(var(--section-y) * 0.62); }
.section--bg     { background-color: var(--bg); }
.section--green  { background-color: var(--green); color: var(--white); }
.section--green h2,
.section--green h3 { color: var(--white); }
.section--green .lead,
.section--green .text-soft { color: rgba(255, 255, 255, 0.76); }
.section--white { background-color: var(--white); }
.section--top-line { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 32px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.split--text-first  > :first-child { order: 1; }
.split--media-right > :first-child { order: 0; }
.split--media-right > :last-child  { order: 2; }

.stack-sm > * + * { margin-top: 12px; }
.stack   > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }

/* Media frame — consistent treatment for every image on the site.
   Backgrounds are white so the supplied product photography, which is shot
   on a near-white (#FEFEFE) seamless, blends without a visible edge. */
.media {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.media img { width: 100%; }

.media--framed { padding: 14px; background: var(--white); }

/* --------------------------------------------------------------------------
   05. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.2s var(--ease),
                border-color 0.2s var(--ease),
                color 0.2s var(--ease),
                transform 0.2s var(--ease),
                box-shadow 0.2s var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--green);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
    background: var(--green-hover);
    box-shadow: var(--shadow-md);
}

.btn--gold {
    background: var(--gold);
    color: var(--green-deep);
    box-shadow: var(--shadow-sm);
}
.btn--gold:hover { background: var(--gold-deep); color: var(--white); }

.btn--outline {
    background: transparent;
    color: var(--green);
    border-color: var(--green);
}
.btn--outline:hover { background: var(--green); color: var(--white); }

.btn--outline-light {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.42);
}
.btn--outline-light:hover {
    background: var(--white);
    color: var(--green);
    border-color: var(--white);
}

.btn--sm { padding: 12px 20px; font-size: 0.875rem; }
.btn--lg { padding: 17px 34px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

/* Inline text link with a small arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--green);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--line-strong);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), gap 0.2s var(--ease);
}
.link-arrow::after {
    content: '\2192';
    transition: transform 0.2s var(--ease);
}
.link-arrow:hover { color: var(--gold-deep); border-color: var(--gold); }
.link-arrow:hover::after { transform: translateX(3px); }

.link-underline {
    color: var(--green);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s var(--ease);
}
.link-underline:hover { color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   06. Top bar
   -------------------------------------------------------------------------- */

.topbar {
    background: var(--green);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
    border-bottom: 1px solid rgba(195, 150, 66, 0.35);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 42px;
    padding-block: 8px;
}

.topbar__text { margin: 0; }

.topbar__meta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar__link {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.topbar__link:hover { color: var(--gold); }

.topbar__divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------------------
   07. Header and navigation
   -------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.25s var(--ease);
}

.header.is-stuck { box-shadow: 0 4px 24px -12px rgba(29, 59, 46, 0.3); }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: var(--header-h);
}

/* Brand — the frame collapses the logo canvas padding so the header stays
   compact while the wordmark renders at a full, legible size. */
.brand {
    display: flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.brand__frame {
    position: relative;
    display: block;
    width: calc(var(--brand-mark) * var(--brand-frame-w));
    height: var(--brand-frame-h);
    overflow: hidden;
}

.brand__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--brand-mark);
    height: var(--brand-mark);
    max-width: none;
    transform: translate(-50%, -50%);
}

.header__actions { display: flex; align-items: center; gap: 12px; }

/* Primary navigation */
.nav { display: flex; align-items: center; }

.nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav__link {
    position: relative;
    display: block;
    padding: 10px 14px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color 0.2s var(--ease);
}

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

.nav__link:hover { color: var(--green); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-active { color: var(--green); font-weight: 600; }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__cta { display: none; }

.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-toggle__bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
}
.nav-toggle__bars span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   08. Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    gap: 72px;
    align-items: center;
    padding-block: 88px 92px;
}

.hero__title {
    font-size: clamp(2.4rem, 1.3rem + 3.9vw, 4.05rem);
    line-height: 1.08;
    margin-bottom: 26px;
}

.hero__title em {
    display: block;
    font-style: normal;
    color: var(--gold-deep);
}

.hero__text {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 56ch;
}

.hero__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 0.875rem;
    color: var(--ink-soft);
    max-width: 52ch;
}

.hero__note svg { flex: none; color: var(--gold); margin-top: 2px; }

.hero__media { position: relative; }

.hero__media .media {
    box-shadow: var(--shadow-lg);
    border-color: var(--line);
}

.hero__badge {
    position: absolute;
    left: -18px;
    bottom: -22px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 24px;
    background: var(--green);
    color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border-left: 3px solid var(--gold);
}
.hero__badge strong {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.1;
}
.hero__badge span {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   09. Section primitives
   -------------------------------------------------------------------------- */

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { color: var(--ink-soft); font-size: 1.0625rem; }
.section-head--center .eyebrow { justify-content: center; }

/* Checklist used in the "Why Vetlory" and About sections */
.checklist { display: grid; gap: 22px; margin-top: 30px; }

.checklist__item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
}

.checklist__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    color: var(--green);
    background: var(--gold-wash);
    border-radius: 50%;
    flex: none;
}

.checklist__title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 3px;
}
.checklist__text { font-size: 0.9375rem; color: var(--ink-soft); }
.checklist__text--ink { color: var(--ink); }
.checklist--tight { gap: 14px; }

.section--green .checklist__icon {
    color: var(--green-deep);
    background: rgba(195, 150, 66, 0.28);
}
.section--green .checklist__title { color: var(--white); }
.section--green .checklist__text { color: rgba(255, 255, 255, 0.76); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.25s var(--ease),
                box-shadow 0.25s var(--ease),
                transform 0.25s var(--ease);
}

.card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.card__media {
    position: relative;
    background: #fff;
    border-bottom: 1px solid var(--line);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 2px;
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    padding: 26px 26px 28px;
}

.card__title { margin: 0; }
.card__text { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }

.card__note {
    margin: 0;
    padding-top: 14px;
    border-top: 1px dashed var(--line-strong);
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.card__foot { margin-top: auto; padding-top: 4px; }

/* Benefit card (no image) */
.benefit {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 28px;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.benefit:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--green);
    background: var(--green-wash);
    border-radius: var(--radius);
    flex: none;
}

.benefit h3 { margin: 0; }
.benefit p  { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }

/* Audience / simple text card */
.tile {
    padding: 30px 28px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.tile h3 { margin-bottom: 10px; }
.tile p  { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }

.tile__num {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--gold-deep);
}

/* Category card — linked */
.cat-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.cat-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.cat-card__media {
    aspect-ratio: 1 / 1;
    background: #fff;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; }

.cat-card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; }

.cat-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--green);
}
.cat-card__title::after {
    content: '\2192';
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--gold-deep);
    transition: transform 0.2s var(--ease);
}
.cat-card:hover .cat-card__title::after { transform: translateX(4px); }

.cat-card__text { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

.cat-card__count {
    margin-top: 4px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Feature strip inside green sections */
.feature {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.feature__icon { color: var(--gold); }
.feature h3 { color: var(--white); }
.feature p  { margin: 0; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.76); }

/* --------------------------------------------------------------------------
   10b. Category filter (products page)
   -------------------------------------------------------------------------- */

.filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.filter__btn {
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.filter__btn:hover { border-color: var(--green); color: var(--green); }

.filter__btn.is-active {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
    font-weight: 600;
}

.filter__meta {
    margin: 22px 0 0;
    font-size: 0.875rem;
    color: var(--ink-soft);
    max-width: 76ch;
}
.filter__meta strong { color: var(--green); }

.products__empty {
    margin: 48px 0 0;
    padding: 40px;
    text-align: center;
    font-size: 1rem;
    color: var(--ink-soft);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.products__empty[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. Trust bar
   -------------------------------------------------------------------------- */

.trustbar {
    background: var(--green);
    color: var(--white);
    border-top: 1px solid var(--gold);
}

.trustbar__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.trustbar__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 26px;
    background: var(--green);
}

.trustbar__item svg { color: var(--gold); flex: none; }

.trustbar__label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}
.trustbar__sub {
    display: block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.66);
}

/* --------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------- */

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 34px 28px 34px 0;
    border-top: 2px solid var(--line);
    transition: border-color 0.25s var(--ease);
}
.step:hover { border-top-color: var(--gold); }

.step + .step { padding-left: 28px; border-left: 1px solid var(--line); }

.step__num {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1;
    color: var(--gold);
}

.step h3 { margin-bottom: 10px; }
.step p  { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }

.section--green .step { border-top-color: rgba(255, 255, 255, 0.22); }
.section--green .step:hover { border-top-color: var(--gold); }
.section--green .step + .step { border-left-color: rgba(255, 255, 255, 0.14); }
.section--green .step p { color: rgba(255, 255, 255, 0.76); }

/* --------------------------------------------------------------------------
   13. Accordion (FAQ)
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 24px 0;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    color: var(--green);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.2s var(--ease);
}
.faq__trigger:hover { color: var(--gold-deep); }

.faq__icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--gold-deep);
}
.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__trigger[aria-expanded='true'] .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq__panel {
    overflow: hidden;
    height: 0;
    transition: height 0.3s var(--ease);
}
.faq__panel-inner {
    padding: 0 48px 26px 0;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    max-width: 76ch;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.form-card {
    padding: 40px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }

.field__label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--green);
}

.field__label .req { color: var(--gold-deep); }

.field__hint { font-size: 0.8125rem; color: var(--ink-soft); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea { min-height: 148px; resize: vertical; }

.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231D3B2E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px 8px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(29, 59, 46, 0.1);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #A4342B; }

.field__error {
    display: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #A4342B;
}
.field.has-error .field__error { display: block; }

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.form-consent input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex: none;
    accent-color: var(--green);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.form-note { font-size: 0.8125rem; color: var(--ink-soft); }

/* Honeypot field.
   Parked outside the viewport rather than display:none or visibility:hidden,
   because a surprising number of bots skip those two and fill anything else
   they find. It is not focusable (tabindex="-1") and hidden from assistive
   tech, so no real visitor can reach it either. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
}

.form-status {
    display: none;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 26px;
    padding: 18px 20px;
    font-size: 0.9375rem;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: var(--bg);
}
.form-status.is-visible { display: flex; }
.form-status.is-success {
    color: var(--green);
    background: var(--green-wash);
    border-color: rgba(29, 59, 46, 0.22);
}
.form-status.is-error {
    color: #8A2C24;
    background: #FBF0EF;
    border-color: #E8CCC9;
}
.form-status svg { flex: none; margin-top: 2px; }
.form-status strong { display: block; margin-bottom: 2px; }

/* Contact detail list */
.contact-list { display: grid; gap: 2px; }

.contact-list__item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.contact-list__item:first-child { padding-top: 0; }

.contact-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--green);
    background: var(--green-wash);
    border-radius: var(--radius);
    flex: none;
}

.contact-list__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 3px;
}
.contact-list__value { font-size: 1rem; font-weight: 500; color: var(--green); text-decoration: none; }
.contact-list__value--static { display: block; }
a.contact-list__value:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-list__note { font-size: 0.875rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
    background: var(--green);
    color: var(--white);
    border-top: 3px solid var(--gold);
}

.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding-block: 68px;
}

.cta-band__title {
    margin: 0 0 12px;
    color: var(--white);
    font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem);
}
.cta-band__text {
    margin: 0;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.78);
    max-width: 54ch;
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; flex: none; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
    background: var(--green-deep);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
}

.footer__top {
    display: grid;
    grid-template-columns: 1.5fr 0.85fr 1.25fr 1.2fr;
    gap: 56px;
    padding-block: 72px 56px;
}

.footer__brand { max-width: 360px; }

/* The supplied logo has an opaque white canvas, so it is presented on a
   white tile rather than floating directly on the green background. */
.footer__logo-tile {
    display: inline-block;
    padding: 14px;
    background: var(--white);
    border: 1px solid rgba(195, 150, 66, 0.55);
    border-radius: var(--radius);
    margin-bottom: 22px;
    line-height: 0;
}
.footer__logo { width: 122px; height: 122px; }

.footer__desc { margin: 0 0 26px; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.72); }

.footer__heading {
    margin: 0 0 20px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

.footer__list { display: grid; gap: 12px; }
.footer__list--contact { gap: 16px; }

.footer__list a,
.footer__list-text {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s var(--ease);
}
.footer__list a:hover { color: var(--gold); }
.footer__list a.is-active { color: var(--gold); font-weight: 600; }

/* Postal addresses: browsers italicise <address> by default, which reads as
   emphasis rather than an address, and each line needs its own line box. */
address { font-style: normal; }
.contact-list address span,
.footer__list-text span { display: block; }

.footer__list-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2px;
}

.footer__note { margin: 0 0 18px; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.68); }

.footer__address { font-style: normal; }
.footer__address a {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(195, 150, 66, 0.4);
    padding-bottom: 2px;
    transition: border-color 0.2s var(--ease);
}
.footer__address a:hover { border-color: var(--gold); }

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-block: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.footer__copy { margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }

.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer__legal a {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.footer__legal a:hover { color: var(--gold); }

/* Back to top */
.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--white);
    background: var(--green);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--green-hover); }

/* --------------------------------------------------------------------------
   17. Page header and prose
   -------------------------------------------------------------------------- */

.page-hero {
    position: relative;
    padding-block: 78px 74px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.page-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--gold);
}

.page-hero__title { max-width: 18ch; margin-bottom: 22px; }
.page-hero__intro {
    max-width: 68ch;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    color: var(--ink-soft);
}

/* Prose, used by the legal pages */
.prose { max-width: 76ch; }
.prose h2 {
    margin-top: 52px;
    margin-bottom: 16px;
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 32px; margin-bottom: 10px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 0.9375rem; }
.prose ul { display: grid; gap: 10px; margin: 0 0 1.15em; }
.prose ul li {
    position: relative;
    padding-left: 22px;
}
.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
}
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose__updated {
    display: inline-block;
    margin-bottom: 30px;
    padding: 7px 14px;
    font-size: 0.8125rem;
    color: var(--green);
    background: var(--green-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 32px; }
.mt-4 { margin-top: 48px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 32px; }
.center { text-align: center; }

/* Layout modifiers */
.btn-row--center { justify-content: center; }
.grid--tight { gap: 16px; }
.split--top { align-items: start; }
.split--wide-gap { gap: 80px; }

/* Type modifiers */
.h-sm {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--green);
    margin-bottom: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    line-height: 1.2;
}
.h-md {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--green);
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
    line-height: 1.2;
}
.text-sm { font-size: 0.875rem; }
.req { color: var(--gold-deep); }

/* Icon sitting above a card heading */
.tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    color: var(--green);
    background: var(--green-wash);
    border-radius: var(--radius);
    flex: none;
}

/* FAQ trigger sits inside an h3 purely for document outline; reset it. */
.faq__heading { margin: 0; }

.divider { height: 1px; background: var(--line); border: 0; margin-block: 64px; }

/* Scroll reveal — opt-in and non-essential. */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

/* --- Large desktop --- */
@media (max-width: 1160px) {
    .footer__top { grid-template-columns: 1fr 1fr; gap: 48px; }
    .footer__brand { max-width: none; }
}

/* --- Tablet --- */
@media (max-width: 1024px) {
    :root {
        --section-y: 84px;
        --brand-mark: 132px;
        --brand-frame-h: 35px;
    }

    .hero__inner { grid-template-columns: 1fr; gap: 56px; padding-block: 68px 76px; }
    .hero__media { max-width: 620px; }
    .hero__badge { left: 0; bottom: -20px; }

    .split { grid-template-columns: 1fr; gap: 48px; }

    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }

    .trustbar__inner { grid-template-columns: repeat(2, 1fr); }
    .trustbar__item { padding: 20px 24px; }

    .steps { grid-template-columns: repeat(2, 1fr); }
    .step { padding: 30px 28px 30px 0; }
    .step:nth-child(odd)  { padding-right: 32px; }
    .step:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line); }
    .step:nth-child(n+3) { border-top: 0; }
    .step:nth-child(3) { border-top: 2px solid var(--line); }
    .step:nth-child(3):hover { border-top-color: var(--gold); }
    .step:nth-child(4) { border-top: 2px solid var(--line); }
    .step:nth-child(4):hover { border-top-color: var(--gold); }

    .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 30px; }

    .form-card { padding: 32px; }
}

/* --- Mobile navigation -------------------------------------------------
   Without JavaScript the navigation is rendered as a plain stacked list
   below the logo, so the site stays fully navigable. The off-canvas drawer
   and its toggle are only enabled when .has-js is present.
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
    .header__inner { flex-wrap: wrap; }
    .header__actions { display: none; }
    .nav-toggle { display: none; }

    /* No-JS / drawer base: stacked and always visible. */
    .nav {
        width: 100%;
        order: 3;
        padding-top: 18px;
    }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__link {
        padding: 14px 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }
    .nav__link::after { left: 0; right: auto; bottom: -1px; width: 40px; }
    .nav__cta { display: block; margin-top: 20px; }

    /* JS available: switch to an off-canvas drawer. */
    .has-js .header__inner { flex-wrap: nowrap; }
    .has-js .nav-toggle { display: inline-flex; }

    .has-js .nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: min(340px, 86vw);
        order: 0;
        padding: calc(var(--header-h) + 24px) 26px 32px;
        background: var(--white);
        border-left: 1px solid var(--line);
        box-shadow: -18px 0 40px -26px rgba(29, 59, 46, 0.4);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s var(--ease), visibility 0.3s;
        overflow-y: auto;
    }
    .has-js .nav.is-open { transform: translateX(0); visibility: visible; }

    .has-js .nav__list { gap: 0; }
    .has-js .nav__link {
        padding: 16px 0;
        font-size: 1.0625rem;
    }
    .has-js .nav__cta { margin-top: 28px; }

    /* Scrim, created by main.js */
    .nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 140;
        background: rgba(22, 48, 31, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s var(--ease), visibility 0.3s;
    }
    .nav-scrim.is-open { opacity: 1; visibility: visible; }
}

/* --- Mobile --- */
@media (max-width: 768px) {
    :root {
        --section-y: 68px;
        --gutter: 20px;
        --brand-mark: 120px;
        --brand-frame-h: 32px;
    }

    .topbar__inner { justify-content: center; }
    .topbar__meta { display: none; }
    .topbar__text { text-align: center; font-size: 0.75rem; }

    .grid { gap: 20px; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

    .section-head { margin-bottom: 40px; }

    .hero__inner { padding-block: 52px 60px; gap: 44px; }
    .hero__badge {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        padding: 14px 18px;
    }
    .hero__badge strong { font-size: 1.0625rem; }

    .btn-row { flex-direction: column; align-items: stretch; }
    .btn-row .btn { width: 100%; }

    .trustbar__inner { grid-template-columns: 1fr; }
    .trustbar__item { padding: 18px 20px; }

    .steps { grid-template-columns: 1fr; }
    .step,
    .step:nth-child(even),
    .step:nth-child(odd) { padding: 26px 0; border-left: 0; }
    .step + .step { border-left: 0; }
    .step:not(:first-child) { border-top: 1px solid var(--line); }
    .step { border-top: 1px solid var(--line); }
    .step:first-child { border-top: 2px solid var(--line); }
    .step:first-child:hover { border-top-color: var(--gold); }

    .form-grid { grid-template-columns: 1fr; gap: 20px; }
    .form-card { padding: 26px 22px; }
    .form-actions { flex-direction: column; align-items: stretch; }
    .form-actions .btn { width: 100%; }
    .form-actions .form-note { text-align: center; }

    .faq__trigger { font-size: 1rem; padding: 20px 0; gap: 16px; }
    .faq__panel-inner { padding-right: 0; }

    .cta-band__inner { padding-block: 52px; }
    .cta-band__actions { width: 100%; }
    .cta-band__actions .btn { flex: 1 1 100%; }

    .footer__top { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 44px; }
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }

    .page-hero { padding-block: 52px 50px; }
    .page-hero__title { max-width: none; }

    .to-top { right: 16px; bottom: 16px; }

    .media--framed { padding: 10px; }
}

@media (max-width: 400px) {
    .brand__frame { width: calc(var(--brand-mark) * var(--brand-frame-w)); }
    .nav-toggle__label { display: none; }
    .nav-toggle { padding: 11px 12px; }
}

/* --------------------------------------------------------------------------
   20. Motion, print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .btn:hover, .card:hover, .cat-card:hover, .benefit:hover { transform: none; }
}

@media print {
    .topbar, .header, .footer, .to-top, .cta-band, .form-card { display: none !important; }
    body { font-size: 12pt; color: #000; }
    .prose p, .prose li { color: #000; }
    a { text-decoration: none; color: #000; }
}