/* ==========================================================================
   WEB Business Advisors, LLC
   style.css  |  single stylesheet, no frameworks, no external dependencies
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --green-900: #00170e;
  --green-800: #013220;
  --green-700: #024a2f;
  --green-600: #04693f;
  --green-500: #0a8a55;

  --gold-600: #9a7b21;
  --gold-500: #d4af37;
  --gold-400: #e3c766;
  --gold-100: #f4e4c1;

  --ink: #152219;
  --ink-soft: #4a5a50;
  --ink-faint: #82908a;

  --paper: #ffffff;
  --paper-warm: #faf8f4;
  --paper-warm-2: #f2eee6;
  --line: #e4e0d8;
  --line-strong: #cfc9bd;

  --ok: #1d7a53;
  --err: #b3261e;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 24px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(0, 23, 14, .06), 0 2px 8px rgba(0, 23, 14, .05);
  --shadow-md: 0 4px 12px rgba(0, 23, 14, .07), 0 12px 32px rgba(0, 23, 14, .08);
  --shadow-lg: 0 10px 24px rgba(0, 23, 14, .10), 0 28px 60px rgba(0, 23, 14, .14);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--green-600); text-decoration: none; }
a:hover { color: var(--gold-600); }
button { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--green-800);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.9rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.42rem); }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }

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

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(64px, 8vw, 116px) 0; }
.section--warm { background: var(--paper-warm); }
.section--forest { background: var(--green-800); color: #deece5; }
.section--forest h2, .section--forest h3 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: .745rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 14px;
}
.section--forest .eyebrow { color: var(--gold-400); }

.section-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 0; }
.section--forest .section-head p { color: #bbd3c6; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green-800); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--green-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  box-shadow: 0 2px 6px rgba(0, 23, 14, .10);
  text-align: center;
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 23, 14, .18);
}
.btn:active { transform: translateY(0); }
.btn--forest { --btn-bg: var(--green-800); --btn-fg: #fff; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--green-800);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--green-800); background: rgba(1, 50, 32, .04); }
.btn--ghost-light {
  --btn-bg: transparent; --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .42);
  box-shadow: none;
}
.btn--ghost-light:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn--block { width: 100%; }
.btn--lg { padding: 17px 36px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--green-900);
  color: #afcdbd;
  font-size: .82rem;
  letter-spacing: .01em;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 42px; flex-wrap: wrap;
}
.topbar a { color: #e2f0e9; }
.topbar a:hover { color: var(--gold-400); }
.topbar__links { display: flex; gap: 22px; align-items: center; }
.topbar__tag { display: flex; align-items: center; gap: 8px; }
.topbar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .22);
}
@media (max-width: 760px) { .topbar__tag { display: none; } .topbar .wrap { justify-content: center; } }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img, .brand svg { height: 46px; width: auto; }
/* The company logo already carries the name, so it stands alone.
   Note the img prefix: without it .brand img above wins on specificity and
   the logo silently stays at 46px. */
.brand img.brand__logo { height: 58px; width: auto; }
@media (max-width: 420px) { .brand img.brand__logo { height: 44px; } }
/* On the dark footer the logo's black type needs a light plate behind it. */
.brand__chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.brand__chip img { height: 46px; width: auto; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display); font-weight: 650; font-size: 1.12rem;
  color: var(--green-800); letter-spacing: -.01em;
}
.brand__sub {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-600); font-weight: 700;
}
.nav__links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  position: relative; color: var(--green-700);
  font-size: .855rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase;
  padding: 6px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold-500); transition: width .22s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }
.nav__cta { flex: 0 0 auto; }
/* The Get Started button inside the list is for the mobile drawer only:
   on desktop the standalone .nav__cta does that job. */
@media (min-width: 1025px) { .nav__links .btn { display: none; } }
.nav__toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: 12px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav__toggle span {
  display: block; width: 20px; height: 2px; background: var(--green-800);
  position: relative; transition: background .2s var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--green-800);
  transition: transform .25s var(--ease), top .2s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed; inset: 0 0 auto 0; top: 78px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 26px;
    box-shadow: var(--shadow-md);
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links li { border-bottom: 1px solid var(--paper-warm-2); }
  .nav__links a { display: block; padding: 15px 2px; font-size: .95rem; }
  .nav__links a::after { display: none; }
  .nav__links .btn { margin-top: 18px; width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 560px at 74% 6%, rgba(212, 175, 55, .26), transparent 60%),
    radial-gradient(700px 520px at 4% 100%, rgba(10, 138, 85, .38), transparent 62%),
    linear-gradient(158deg, var(--green-900) 0%, var(--green-800) 46%, var(--green-700) 100%);
  color: #ebf4f0;
  overflow: hidden;
  /* Extra room at the bottom for the form card that overlaps it. */
  padding: clamp(52px, 6.5vw, 88px) 0 clamp(120px, 12vw, 172px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 560px at 30% 40%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(900px 560px at 30% 40%, #000, transparent 76%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 4.5vw, 64px); align-items: center;
}
.hero h1 { color: #fff; margin-bottom: .34em; }
.hero h1 em { font-style: normal; color: var(--gold-400); }
.hero__lede { font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: #c7ded2; max-width: 56ch; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px; border-radius: 999px; margin-bottom: 26px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: #e3f0e9;
}
.hero__badge b { color: var(--gold-400); font-weight: 700; }
.hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 30px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  max-width: 460px;
}
@media (min-width: 1280px) { .hero__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }
.hero__trust div { padding: 0; }
.hero__trust b {
  display: block; font-family: var(--font-display); font-size: 1.62rem; color: #fff; font-weight: 600;
}
.hero__trust span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #a3c0b1; }

/* Portrait */
.portrait {
  --size: 84px;
  width: var(--size); height: var(--size); flex: 0 0 var(--size);
  border-radius: 50%; overflow: hidden; position: relative;
  background: linear-gradient(150deg, var(--green-600), var(--green-500));
  border: 2px solid rgba(212, 175, 55, .55);
  display: grid; place-items: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* The large panel in the About section. */
.portrait--lg {
  --size: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  border-width: 0;
  align-items: end;
  background:
    radial-gradient(420px 300px at 50% 12%, rgba(212, 175, 55, .16), transparent 66%),
    linear-gradient(165deg, var(--green-700), var(--green-900));
}

/* Ed's photo is a cut out with no background, so it is seated on the panel
   rather than cropped to fill it. */
.portrait--lg img {
  object-fit: contain;
  object-position: center bottom;
  padding: 26px 16px 0;
}

/* ---------- Lead form ---------- */
.lead-form { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-soft); }
.field .req { color: var(--gold-600); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line-strong); border-radius: 11px;
  background: #fff; color: var(--ink); font: inherit; font-size: .97rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%2346586d' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-600);
  box-shadow: 0 0 0 4px rgba(4, 105, 63, .13);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--err); box-shadow: 0 0 0 4px rgba(179, 38, 30, .1);
}
.field__error { font-size: .78rem; color: var(--err); font-weight: 600; min-height: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.form-note { font-size: .79rem; color: var(--ink-faint); line-height: 1.55; margin: 0; }
.form-status {
  display: none; padding: 14px 16px; border-radius: 11px; font-size: .92rem; font-weight: 600;
  border: 1px solid transparent;
}
.form-status.is-visible { display: block; }
.form-status.is-ok { display: block; background: #e8f5ef; border-color: #b5ddca; color: var(--ok); }
.form-status.is-err { display: block; background: #fdeceb; border-color: #f2c4c1; color: var(--err); }
.btn.is-busy { opacity: .72; pointer-events: none; }

/* Hero form card */
.form-card {
  background: #fff; border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-lg); color: var(--ink);
}
.form-card h3 { margin-bottom: 6px; }
/* The card keeps its own light palette even on a dark section. */
.section--forest .form-card h3,
.section--forest .form-card h4 { color: var(--green-800); }
.section--forest .form-card p { color: var(--ink-soft); }
.section--forest .form-card a { color: var(--green-600); }
.section--forest .form-card a:hover { color: var(--gold-600); }
.form-card__sub { color: var(--ink-soft); font-size: .93rem; margin-bottom: 22px; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__trust { gap: 0 24px; }
}
@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Logo strip ---------- */
.strip {
  background: var(--green-900); color: #99baa8;
  padding: 20px 0; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
}
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 40px; text-align: center; }
.strip b { color: #e6f2ec; font-weight: 650; letter-spacing: .08em; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 30px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 0; }
.card__icon {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--gold-100), #fff);
  border: 1px solid var(--line); margin-bottom: 20px;
}
.card__icon svg { width: 25px; height: 25px; stroke: var(--gold-600); }

/* ---------- Advantage list ---------- */
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 12px 34px; }
.adv {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 19px 0; border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.adv__num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(212, 175, 55, .16); border: 1px solid rgba(212, 175, 55, .35);
  color: var(--gold-400); font-size: .78rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.adv h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 650; color: #fff; margin: 4px 0 3px; }
.adv p { font-size: .9rem; color: #afcbbc; margin: 0; }

/* ---------- Split / partnership ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px, 5vw, 66px); align-items: start; }
.split p { color: var(--ink-soft); }
.pillars { display: grid; gap: 16px; }
.pillar {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold-500);
  border-radius: 12px; padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.pillar h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.pillar p { font-size: .93rem; margin: 0; color: var(--ink-soft); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- Service areas ---------- */
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.area {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 30px; box-shadow: var(--shadow-sm);
}
.area h3 { display: flex; align-items: center; gap: 10px; }
.area ul { list-style: none; padding: 0; margin: 16px 0 0; }
.area li {
  padding: 11px 0 11px 26px; border-top: 1px solid var(--paper-warm-2);
  font-size: .95rem; color: var(--ink-soft); position: relative;
}
.area li::before {
  content: ""; position: absolute; left: 4px; top: 19px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-500); box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
}
@media (max-width: 760px) { .areas { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(34px, 5vw, 64px); align-items: center; }
.about__media { position: relative; }
.about__media .portrait--lg { box-shadow: var(--shadow-lg); }
.about__stamp {
  position: absolute; right: -14px; bottom: -18px;
  background: var(--green-800); color: #fff; border-radius: 16px;
  padding: 16px 20px; box-shadow: var(--shadow-lg); max-width: 210px;
  border: 1px solid rgba(255, 255, 255, .12);
}
.about__stamp b { display: block; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 2px; }
.about__stamp span { font-size: .76rem; color: #afcbbc; letter-spacing: .04em; }
.creds { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 11px; }
.creds li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; color: var(--ink-soft); }
.creds svg { flex: 0 0 auto; margin-top: 4px; stroke: var(--gold-600); }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 330px; }
  .about__stamp { right: -8px; }
}

/* ---------- Testimonials ---------- */
/* min() keeps the two column layout on desktop without forcing a 420px
   column on a phone, which would push the page sideways. */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.quote__mark { font-family: var(--font-display); font-size: 3.1rem; line-height: .7; color: var(--gold-400); margin-bottom: 14px; }
.quote p { font-size: .99rem; color: var(--ink); margin-bottom: 20px; flex: 1; }
.quote__by { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--paper-warm-2); }
.quote__avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-800); color: var(--gold-400); font-weight: 700; font-size: .93rem;
}
.quote__name { display: block; font-weight: 700; font-size: .93rem; line-height: 1.3; }
.quote__meta { display: block; font-size: .78rem; color: var(--ink-faint); line-height: 1.3; }
.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars svg { width: 15px; height: 15px; fill: var(--gold-500); }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(760px 440px at 82% 8%, rgba(212, 175, 55, .22), transparent 60%),
    linear-gradient(140deg, var(--green-800), var(--green-700));
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 64px); text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c6ddd1; max-width: 56ch; margin-inline: auto; margin-bottom: 30px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-list .ci {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .17);
}
.contact-list .ci svg { width: 19px; height: 19px; stroke: var(--gold-400); }
.contact-list b { display: block; font-size: .73rem; letter-spacing: .13em; text-transform: uppercase; color: #99baa8; font-weight: 700; }
.contact-list a, .contact-list span { color: #fff; font-size: 1.03rem; }
.contact-list a:hover { color: var(--gold-400); }
.confidential {
  margin-top: 28px; padding: 18px 20px; border-radius: 13px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  font-size: .89rem; color: #c2d9cd; display: flex; gap: 13px; align-items: flex-start;
}
.confidential svg { flex: 0 0 auto; margin-top: 3px; stroke: var(--gold-400); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-900); color: #99baa8; padding: clamp(54px, 6vw, 76px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 38px; }
.footer-grid h4 {
  color: #fff; font-family: var(--font-body); font-size: .76rem; font-weight: 750;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 18px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid a { color: #b8d3c5; font-size: .93rem; }
.footer-grid a:hover { color: var(--gold-400); }
.footer-about p { font-size: .92rem; color: #99baa8; max-width: 42ch; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand svg, .footer-brand img { height: 44px; width: auto; }
.footer-brand .brand__chip img { height: 46px; }
.footer-brand .brand__name { color: #fff; }
.footer-bottom {
  margin-top: 46px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .82rem; color: #83a492;
}
.footer-bottom a { color: #adcabb; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Simple page (privacy / terms / 404) ---------- */
.page-head {
  background: linear-gradient(150deg, var(--green-900), var(--green-700));
  color: #fff; padding: clamp(54px, 7vw, 88px) 0;
}
.page-head h1 { color: #fff; margin-bottom: 10px; }
.page-head p { color: #bbd3c6; margin: 0; }
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose a { text-decoration: underline; }
.prose__meta { font-size: .87rem; color: var(--ink-faint); }

/* ---------- Reveal animation ----------
   Content is visible by default. The hidden starting state is applied only
   after main.js confirms it can animate, so search engines, screen readers
   and anyone with JavaScript disabled always see the full page. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .topbar, .nav, .hero__badge, .btn, .site-footer, .form-card { display: none !important; }
  body { color: #000; font-size: 12pt; }
}

/* ---------- Third party embed (BizBuySell listings) ---------- */
.embed {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.embed__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px;
  background: var(--green-800);
  color: #d3e7dc;
  font-size: .84rem; font-weight: 600; letter-spacing: .02em;
}
.embed__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .22);
}
.embed__out { margin-left: auto; color: var(--gold-400); white-space: nowrap; }
.embed__out:hover { color: #fff; }
.embed__frame {
  display: block;
  width: 100%;
  height: 1150px;
  border: 0;
  background: #fff;
}
@media (max-width: 860px) { .embed__frame { height: 1400px; } }
@media (max-width: 520px) { .embed__frame { height: 1600px; } }

/* Replaces the frame when BizBuySell cannot be reached or refuses framing. */
.embed__fallback { padding: clamp(34px, 5vw, 56px) clamp(22px, 4vw, 44px); text-align: center; }
.embed__fallback h3 { margin-bottom: 10px; }
.embed__fallback p { color: var(--ink-soft); max-width: 56ch; margin-inline: auto; margin-bottom: 26px; }
.embed[data-embed-failed] .embed__frame { display: none; }

.embed__note {
  margin: 20px auto 0;
  max-width: 78ch;
  text-align: center;
  font-size: .89rem;
  color: var(--ink-faint);
}
.embed__note a { text-decoration: underline; }


/* ---------- Hero figure: Ed on a lit stage ---------- */
.hero__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  width: 100%;
  max-width: 430px;
}

.hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  padding-top: 26px;
}

/* Arched panel behind him: gold at the top, fading into the hero at the base. */
.hero__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(336px, 88%);
  height: 94%;
  border-radius: 999px 999px 26px 26px;
  background:
    linear-gradient(180deg,
      rgba(212, 175, 55, .30) 0%,
      rgba(10, 138, 85, .24) 46%,
      rgba(0, 23, 14, 0) 100%);
  border: 1px solid rgba(212, 175, 55, .34);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* Soft halo so the cutout does not float against flat colour. */
.hero__ring {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: min(430px, 106%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, .20) 0%, rgba(212, 175, 55, 0) 66%);
  pointer-events: none;
}

.hero__photo {
  position: relative;
  z-index: 2;
  height: clamp(280px, 30vw, 372px);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .52));
}

/* Name plate tucked under the photo */
.hero__nameplate {
  position: relative;
  z-index: 3;
  margin-top: -20px;
  width: min(330px, 100%);
  text-align: center;
  padding: 16px 20px 14px;
  border-radius: 16px;
  background: rgba(0, 23, 14, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__nameplate b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}
.hero__nameplate > span {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.hero__creds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.hero__creds span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: #c7ded2;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ---------- Lead form band, lifted over the hero ---------- */
.form-band {
  position: relative;
  z-index: 5;
  margin-top: clamp(-112px, -9vw, -70px);
  padding-bottom: clamp(48px, 6vw, 76px);
}
.form-band__card {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(28px, 4vw, 56px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.6vw, 48px);
  box-shadow: var(--shadow-lg);
}
.form-band__intro h2 { font-size: clamp(1.6rem, 2.7vw, 2.15rem); margin-bottom: 12px; }
.form-band__intro p { color: var(--ink-soft); font-size: 1rem; }
.form-band__list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.form-band__list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .96rem; color: var(--ink); font-weight: 500;
}
.form-band__list svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 3px; stroke: var(--gold-600); }
.form-band__call {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--paper-warm-2);
  font-size: .95rem; color: var(--ink-soft);
}
.form-band__call a { font-weight: 700; font-size: 1.05rem; }

@media (max-width: 980px) {
  .form-band__card { grid-template-columns: 1fr; }
  .form-band { margin-top: clamp(-96px, -11vw, -64px); }
}

/* ---------- Hero responsive ---------- */
@media (max-width: 980px) {
  .hero__figure { margin-top: 12px; max-width: 360px; }
  .hero__photo { height: clamp(250px, 46vw, 330px); }
}
@media (max-width: 560px) {
  .hero__photo { height: 248px; }
  .hero__stage::before { width: min(280px, 92%); }
  .hero__nameplate { width: min(300px, 100%); }
}