/*
Theme Name: Zelenka Bookkeeping
Theme URI: https://zelenkabookkeeping.com
Author: Ben Zelenka
Description: Custom one-page theme for Zelenka Bookkeeping. Ported directly from the original index.html so the design matches exactly.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zelenka
*/

:root {
  /* ═══════════════════════════════════════════════════════════════════
     OFFICIAL ZELENKA BRAND COLORS
     (Inspired by the back of a $100 bill)
     ─────────────────────────────────────────────────────────────────── */
  --rich-green:    #182809;   /* Rich Green   — RGB(24,40,9)     CMYK(73,55,84,72) */
  --sharp-white:   #FFFFFF;   /* Sharp White  — RGB(255,255,255) CMYK(0,0,0,0)     */
  --bill-grey:     #DCDDCD;   /* Bill Grey    — RGB(220,221,205) CMYK(13,8,20,0)   */
  --dollar-green:  #678340;   /* Dollar Green — RGB(103,131,64)  CMYK(62,32,92,14) */
  --gold:          #E8AB30;   /* $100 Gold    — RGB(232,171,48)  CMYK(7,33,94,0)   */
  /* ── ACCENT COLOR SWITCH ──────────────────────────────────────────────
     --gold-dk is referenced further down (eyebrow labels, FAQ "+" icons,
     pricing checkmarks, the "Get a custom quote" link, star ratings) but is
     deliberately LEFT UNDEFINED here, exactly as it was in the original
     index.html. An undefined variable makes those colors fall back to
     whatever the element inherits, which is what gives the site its current
     muted green accents.

     To switch those accents to gold instead, uncomment the line below:
     --gold-dk:    #B8841F;
     ──────────────────────────────────────────────────────────────────── */

  /* ═══════════════════════════════════════════════════════════════════
     WORKING ALIASES (used throughout the CSS)
     ─────────────────────────────────────────────────────────────────── */
  --forest:        var(--rich-green);     /* Primary dark surface (header logo, btns) */
  --forest-deep:   var(--rich-green);     /* Same as Rich Green — darkest brand color */
  --forest-soft:   #2A4220;               /* Derived: Rich Green lifted ~10% for gradients */
  --champagne:     var(--gold);           /* Primary accent — $100 Gold */
  --champagne-dk:  #B8841F;               /* Derived: $100 Gold darkened ~20% */
  --cream-warm:    var(--sharp-white);    /* Main page background */
  --cream:         #F4F5EF;               /* Derived: Bill Grey tinted with white (~30%) */
  --ink:           var(--rich-green);     /* Body/heading text */
  --ink-soft:      #4f6531;               /* Derived: muted green-grey for body text */
  --line:          var(--bill-grey);      /* Hairlines, borders, dividers */

  /* Shadows tinted with Rich Green for visual cohesion */
  --shadow-sm:     0 2px 8px rgba(24, 40, 9, .06);
  --shadow-md:     0 12px 32px rgba(24, 40, 9, .10);
  --shadow-lg:     0 24px 60px rgba(24, 40, 9, .14);

  /* Sharp corners per brand guidance ("sharp angles") */
  --radius:        4px;
  --radius-sm:     2px;
  --max:           1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream-warm);
  -webkit-font-smoothing: antialiased;
}
/* Headings use Thanatos Variable (Adobe Fonts) — official brand typeface.
   Playfair Display kept as a fallback in case Adobe Fonts ever fails to load. */
h1, h2, h3, h4, h5 {
  font-family: 'thanatos-variable', 'Playfair Display', 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.1;
  color: var(--forest-deep);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.75rem, 5.8vw, 4.25rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 600; letter-spacing: -0.025em; }
h3 { font-size: 1.5rem; font-weight: 600; }
p  { color: var(--ink-soft); }
a  { color: var(--forest-deep); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold-dk); }
img { max-width: 100%; display: block; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
/* Eyebrow uses Unbounded — the brand's secondary typeface, wide and geometric */
.eyebrow {
  display: inline-block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 18px;
}
.section { padding: 130px 0; }
.section-head { max-width: 720px; margin: 0 auto 72px; text-align: center; }
.section-head p { margin-top: 22px; font-size: 1.0625rem; }

/* ─── Buttons ─── */
/* Sharp rectangular buttons — small radius for "sharp angles" brand principle */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  text-align: center;
}
.btn-primary {
  background: var(--forest);
  color: var(--cream-warm);
  border-color: var(--forest);
}
.btn-primary:hover {
  background: var(--forest-deep);
  color: var(--cream-warm);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-gold {
  background: var(--gold);
  color: var(--forest-deep);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-dk);
  color: var(--cream-warm);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-ghost {
  background: transparent;
  color: var(--forest);
  border-color: rgba(31, 58, 46, .25);
}
.btn-ghost:hover {
  background: var(--forest);
  color: var(--cream-warm);
  border-color: var(--forest);
}

/* ─── Header ─── */
header.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 252, 248, .85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(230, 224, 210, .6);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
}
/* Brand lockup uses the V2 horizontal logo art from the presentation */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img.logo {
  height: 80px;
  width: auto;
  display: block;
}
.brand img.logo-light { display: none; }
footer .brand img.logo-dark { display: none; }
footer .brand img.logo-light { display: block; height: 100px; }
.nav-links {
  display: flex; align-items: center; gap: 36px;
  list-style: none;
}
.nav-links a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--gold);
  transition: width .25s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; gap: 10px; }
.nav-cta .btn { padding: 10px 20px; font-size: 0.875rem; }

.menu-toggle {
  display: none;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.menu-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--forest-deep); margin: 5px 0;
  transition: all .25s ease;
}

/* ─── Hero ─── */
.hero {
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1200px 600px at 80% -10%, rgba(232, 171, 48, .10), transparent 60%),
    radial-gradient(ellipse 800px 500px at -10% 30%, rgba(103, 131, 64, .08), transparent 60%),
    var(--cream-warm);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: center;
}
.hero h1 span { color: var(--gold); font-style: italic; font-weight: 700; }
.hero p.lead {
  font-size: 1.1875rem;
  margin: 28px 0 36px;
  max-width: 540px;
  color: var(--ink-soft);
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 48px;
  display: flex; align-items: center; gap: 32px;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 0.875rem;
}
.hero-trust .stars { color: var(--gold-dk); letter-spacing: 2px; font-size: 1.05rem; }

/* Hero visual — a stacked "books" illustration */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
}
.ledger {
  position: absolute;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.ledger-1 {
  inset: 0 30% 30% 0;
  transform: rotate(-3deg);
}
.ledger-2 {
  inset: 18% 0 12% 25%;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  transform: rotate(2deg);
  color: var(--cream-warm);
  padding: 30px;
}
.ledger-2 h4 { color: var(--gold); font-family: 'Unbounded', sans-serif; font-size: 0.6875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.ledger-2 .big {
  font-family: 'thanatos-variable', 'Playfair Display', serif;
  font-size: 2.25rem; font-weight: 700;
  color: var(--cream-warm);
  margin: 8px 0 4px;
}
.ledger-2 .meta { color: rgba(247, 244, 238, .65); font-size: 0.8125rem; }
.ledger-2 .bar-wrap { display: flex; gap: 6px; align-items: flex-end; margin-top: 24px; height: 80px; }
.ledger-2 .bar { flex: 1; background: rgba(247, 244, 238, .15); border-radius: 4px 4px 0 0; }
.ledger-2 .bar.hi { background: var(--gold); }

.ledger-1 .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.875rem;
}
.ledger-1 .row:last-child { border: none; }
.ledger-1 .row .label { color: var(--ink); font-weight: 500; }
.ledger-1 .row .amt { color: var(--forest); font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-1 .row .amt.neg { color: #B85450; }
.ledger-1 .head {
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  color: var(--forest-deep);
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--forest-deep);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.coin {
  position: absolute;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(var(--gold) );
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  color: var(--forest-deep);
  font-family: 'thanatos-variable', 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2rem;
  top: 8%; right: 4%;
  transform: rotate(12deg);
  z-index: 3;
  border: 2px solid var(--forest-deep);
}

/* ─── Services ─── */
#services { background: var(--cream); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service-card {
  background: var(--cream-warm);
  padding: 36px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: all .3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(232, 171, 48, .45);
}
.service-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius);
  background: var(--forest-deep);
  color: var(--gold);
  display: grid; place-items: center;
  margin-bottom: 28px;
  border: 2px solid var(--forest-deep);
  box-shadow: 4px 4px 0 var(--gold);
}
.service-card h3 { margin-bottom: 12px; font-size: 1.25rem; }
.service-card ul {
  list-style: none;
  margin-top: 28px;      /* space between paragraph and list */
  /* The original index.html had an unclosed <ul> in each service card, which
     added 28px of empty space below the last bullet. The markup is now valid,
     so this reproduces that spacing on purpose. Delete this one line if you'd
     rather the cards close up tighter under the last bullet. */
  padding-bottom: 28px;
}
.service-card li {
  padding: 6px 0;
  font-size: 0.9375rem;
  color: var(--rich-green);
  display: flex; align-items: flex-start; gap: 10px;
}
.service-card li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── About ─── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-image {
  aspect-ratio: 4/5;
  background:
    linear-gradient(180deg, transparent 50%, rgba(24, 40, 9, .65) 100%),
    linear-gradient(135deg, #2A4220 0%, var(--forest-deep) 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-shield-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 60%;
  max-width: 280px;
  height: auto;
  opacity: 0.95;
  z-index: 1;
}
.about-image .badge {
  text-align: center;
  position: absolute;
  bottom: 28px; left: 28px;
}
.about-image .badge .num {
  font-family: 'thanatos-variable', 'Playfair Display', serif;
  font-size: 2rem; font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.about-image .badge .label {
  font-size: 0.8125rem;
  color: var(--cream-warm);
  margin-top: 4px;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.stat .num {
  font-family: 'thanatos-variable', 'Playfair Display', serif;
  font-size: 2rem; font-weight: 700;
  color: var(--forest-deep);
}
.stat .label {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ─── Pricing ─── */
#pricing { background: var(--cream); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.price-card {
  background: var(--cream-warm);
  padding: 40px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: all .3s ease;
}
.price-card.featured {
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  border: 1px solid var(--gold);
  color: var(--cream-warm);
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.price-card.featured h3,
.price-card.featured .price-amount { color: var(--cream-warm); }
.price-card.featured p,
.price-card.featured .price-period,
.price-card.featured li { color: rgba(247, 244, 238, .82); }
.price-card.featured li::before { color: var(--gold); }
.price-card.featured .price-features { border-top-color: rgba(247, 244, 238, .15); }

.price-tag {
  position: absolute;
  top: -14px; right: 28px;
  background: var(--gold);
  color: var(--forest-deep);
  padding: 7px 16px;
  border-radius: var(--radius);
  font-family: 'Unbounded', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.price-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.price-card > p { font-size: 0.9375rem; min-height: 48px; }
.price-display { margin: 24px 0 8px; display: flex; align-items: baseline; gap: 6px; }
.price-amount {
  font-family: 'thanatos-variable', 'Playfair Display', serif;
  font-size: 3rem; font-weight: 700;
  color: var(--forest-deep);
  line-height: 1;
}
.price-period { font-size: 0.9375rem; color: var(--ink-soft); }
.price-features {
  list-style: none;
  margin: 28px 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-grow: 1;
}
.price-features li {
  padding: 8px 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  display: flex; align-items: flex-start; gap: 10px;
}
.price-features li::before {
  content: '✓';
  color: var(--gold-dk);
  font-weight: 700;
  flex-shrink: 0;
}
.price-card .btn { width: 100%; justify-content: center; }
.pricing-note {
  text-align: center;
  margin-top: 36px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ─── Testimonials ─── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial {
  background: var(--cream-warm);
  padding: 36px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  position: relative;
}
.testimonial .stars {
  color: var(--gold-dk);
  letter-spacing: 3px;
  font-size: 1.0625rem;
  margin-bottom: 18px;
}
.testimonial blockquote {
  font-family: 'thanatos-variable', 'Playfair Display', serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author {
  display: flex; align-items: center; gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--forest-deep);
  color: var(--gold);
  display: grid; place-items: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.testimonial-author .name { font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.testimonial-author .role { font-size: 0.8125rem; color: var(--ink-soft); }

/* ─── FAQ ─── */
#faq { background: var(--cream); }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
  transition: all .25s ease;
}
.faq-item:hover { border-color: rgba(232, 171, 48, .45); }
.faq-question {
  width: 100%;
  padding: 24px 28px;
  text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: 'thanatos-variable', 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--forest-deep);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  letter-spacing: -0.01em;
}
.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gold-dk);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
  padding: 0 28px;
}
.faq-item.open .faq-answer {
  max-height: 400px;
  padding: 0 28px 24px;
}
.faq-answer p { font-size: 0.9875rem; }

/* ─── CTA Banner ─── */
.cta-banner {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--cream-warm);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(232, 171, 48, .14) 0%, transparent 60%);
  border-radius: 50%;
}
.cta-banner .container { position: relative; text-align: center; }
.cta-banner h2 { color: var(--cream-warm); margin-bottom: 18px; }
.cta-banner p {
  color: rgba(247, 244, 238, .8);
  max-width: 580px;
  margin: 0 auto 32px;
  font-size: 1.0625rem;
}

/* ─── Contact ─── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
}
.contact-info h3 { margin-bottom: 14px; }
.contact-info > p { margin-bottom: 36px; }
.contact-item {
  display: flex; gap: 16px;
  padding: 20px 0;
}
.contact-item .ico {
  width: 46px; height: 46px;
  border-radius: var(--radius);
  background: var(--forest-deep);
  color: var(--gold);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contact-item .ttl {
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  color: var(--ink);
  font-size: 0.6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.contact-item .val {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
/* The phone and email are now tap-to-call / tap-to-email links, but they keep
   the original plain-text color so the section looks unchanged. */
.contact-item .val a { color: inherit; }

.contact-form-wrap {
  background: var(--cream);
  padding: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.contact-form-wrap form { background: none; padding: 0; border: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: 'Unbounded', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--forest-deep);
  margin-bottom: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.field input,
.field select,
.field textarea,
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap select,
.contact-form-wrap textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream-warm);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: all .2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(31, 58, 46, .08);
}
.field textarea { min-height: 130px; resize: vertical; }
.contact-form-wrap .btn { width: 100%; justify-content: center; padding: 16px; }
.form-status { margin-top: 16px; font-size: 0.9375rem; }
.form-status.ok { color: var(--dollar-green); font-weight: 600; }
.form-status.err { color: #B85450; font-weight: 600; }

/* ─── Footer ─── */
footer.site-footer {
  background: var(--forest-deep);
  color: rgba(247, 244, 238, .7);
  padding: 70px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
footer h4 {
  color: var(--cream-warm);
  font-family: 'Unbounded', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 22px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
footer .footer-brand { margin-bottom: 8px; }
footer p { color: rgba(247, 244, 238, .65); font-size: 0.9375rem; max-width: 320px; }
footer ul { list-style: none; }
footer li { margin-bottom: 10px; }
footer a { color: rgba(247, 244, 238, .7); font-size: 0.9375rem; }
footer a:hover { color: var(--gold); }
.copyright {
  border-top: 1px solid rgba(247, 244, 238, .08);
  padding-top: 24px;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(247, 244, 238, .5);
}

/* ─── Interior pages (privacy policy, blog posts, 404) ─── */
.page-wrap { padding: 80px 0 100px; }
.page-wrap .entry-content > * { margin-bottom: 18px; }
.page-wrap .entry-content h2,
.page-wrap .entry-content h3 { margin-top: 36px; }
.page-wrap .entry-content ul,
.page-wrap .entry-content ol { padding-left: 22px; color: var(--ink-soft); }
.page-wrap .entry-content a { color: var(--champagne-dk); font-weight: 600; }

/* WordPress admin bar offset for the sticky header */
body.admin-bar header.site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.site-header { top: 46px; }
}

/* WordPress core alignment classes */
.alignwide { max-width: var(--max); }
.alignfull { width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 24px; }
.alignright { float: right; margin-left: 24px; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
  position: absolute; left: 8px; top: 8px; z-index: 1000;
  background: var(--cream-warm); color: var(--forest-deep);
  padding: 12px 20px; clip: auto; clip-path: none;
  height: auto; width: auto;
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .section { padding: 80px 0; }
  .hero { padding: 60px 0 80px; }
  .brand img.logo { height: 78px; }
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-visual {
    max-width: 460px;
    margin: 0 auto;
    aspect-ratio: auto;          /* let it grow to fit stacked content */
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
  }
  /* Override the absolute-positioned overlap so cards stack cleanly */
  .hero-visual .ledger {
    position: static;
    transform: none;
    inset: auto;
  }
  .hero-visual .ledger-1,
  .hero-visual .ledger-2 { width: 100%; }
  .hero-visual .coin {
    /* Small floating coin in the corner instead of an oversized overlap */
    position: absolute;
    top: -18px; right: -8px;
    width: 56px; height: 56px;
    font-size: 1.4rem;
    transform: rotate(8deg);
  }
  .ledger-2 .bar-wrap { height: 64px; }
  .ledger-2 .big { font-size: 1.875rem; }
  .services-grid,
  .pricing-grid,
  .testimonials-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .menu-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream-warm);
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
}
@media (max-width: 540px) {
  h1 { font-size: 2.25rem; }
  .brand img.logo { height: 60px; }
  .section-head { margin-bottom: 48px; }
  .about-stats { grid-template-columns: 1fr; gap: 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 28px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
}

/* Optional footer widget area (Appearance → Widgets → Footer Extra) */
.footer-extra { margin-bottom: 32px; }
.footer-extra .footer-widget { margin-bottom: 20px; }
.footer-extra ul { list-style: none; }