/* =============================================================================
   SMARTAX ACCOUNTING SERVICES - design system

   Brand: Martha's existing identity is a deep field green with a lime accent,
   carried over from Concept B and her own flyer artwork. Note her printed
   flyer pairs the lime with a deep BLUE rather than green - flagged for
   confirmation in CLIENT_CONTENT_NEEDED.md. This stylesheet uses the green
   direction previously approved.

   No framework, no utility classes, no build step beyond Eleventy.
============================================================================= */

:root {
  /* --- brand -------------------------------------------------------------
     Sampled directly from Martha's own logo artwork (logo-transparent-png.png):
       #3e7742  the green of the dollar-sign / arrow mark
       #431a10  the dark brown of the "SMARTAX & ACCOUNTING SERVICES" wordmark
     The deep greens below are darkened from her #3e7742 so the dark surfaces
     stay in her family. Her printed flyer pairs lime with blue, but the logo is
     the authoritative brand asset, so green + brown is what the site uses. */
  --green:       #3e7742;   /* HER green - primary actions */
  --green-dark:  #2f5c33;
  --forest:      #1e3a22;   /* darkened from her green - dark surfaces */
  --forest-deep: #142a17;
  --brown:       #431a10;   /* HER wordmark brown - headings */
  --lime:        #86bb6a;   /* light tint of her green, for on-dark accents */
  --lime-soft:   #e9f2e4;

  /* --- neutrals (green-biased, chosen not inherited) --------------------- */
  --paper:   #ffffff;
  --ground:  #f7faf8;
  --sunk:    #eef3ef;
  --ink:     #2b1a12;
  --ink-2:   #4d4038;
  --ink-3:   #7a6e64;
  --line:    #dde6e0;
  --line-2:  #e9efeb;

  --warn:      #9a6414;
  --warn-soft: #fdf4e3;
  --err:       #a03328;
  --err-soft:  #fbeae7;

  /* --- type ------------------------------------------------------------- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- space / shape ---------------------------------------------------- */
  --wrap: 1160px;
  --gut: 24px;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 61, 45, .05), 0 10px 30px -14px rgba(20, 61, 45, .22);
  --shadow-lg: 0 2px 4px rgba(20, 61, 45, .06), 0 24px 48px -20px rgba(20, 61, 45, .3);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  color: var(--brown);
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.12rem; font-family: var(--body); font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--green); text-underline-offset: 2px; }
a:hover { color: var(--green-dark); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--forest); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0; text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 780px; }

/* =============================================================================
   BUTTONS
============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 24px;
  font-family: var(--body); font-size: .95rem; font-weight: 600;
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.btn-dark { color: var(--ink); border-color: var(--line); background: var(--paper); }
.btn-dark:hover { background: var(--sunk); color: var(--ink); border-color: var(--ink-3); }

.btn-ghost { background: var(--paper); color: var(--green); border-color: var(--line); }
.btn-ghost:hover { background: var(--ground); border-color: var(--green); }

.btn.is-disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
  border-style: dashed;
}
.btn-submit { width: 100%; padding: 15px 24px; font-size: 1rem; }

/* =============================================================================
   UTILITY BAR + HEADER
============================================================================= */
.utility { background: var(--forest-deep); color: rgba(255, 255, 255, .82); font-size: .82rem; }
.utility-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.utility-tag { color: rgba(255, 255, 255, .68); }
.utility-links { display: flex; gap: 20px; }
.utility-links a { color: rgba(255, 255, 255, .9); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.utility-links a:hover { color: var(--lime); }
.ico { width: 14px; height: 14px; fill: currentColor; flex: none; }

.site-head { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.head-in { display: flex; align-items: center; gap: 22px; min-height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { width: auto; height: 44px; flex: none; }
/* Her mark is green (#3e7742), which only reaches 2.86:1 on the dark footer.
   A white plate keeps the artwork untouched and legible. */
.brand-foot .brand-mark { height: 34px; background: #fff; border-radius: 8px; padding: 6px 8px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.06; }
.brand-name { font-family: var(--display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; }
.brand-sub { font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

.nav { margin-left: auto; }
.nav-list { display: flex; gap: 28px; }
.nav-list a {
  color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent; display: block;
}
.nav-list a:hover { color: var(--green); }
.nav-list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--lime); }

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

.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: .76rem; font-weight: 600; }
.lang-on, .lang-off { padding: 5px 11px; letter-spacing: .04em; }
.lang-on { background: var(--green); color: #fff; }
.lang-off { color: var(--ink-3); text-decoration: none; }
.lang-off:hover { background: var(--sunk); color: var(--green); }

.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-sm); cursor: pointer; padding: 11px 10px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile { border-top: 1px solid var(--line); background: var(--paper); padding: 8px var(--gut) 20px; }
.mobile[hidden] { display: none; }
.mobile-list a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 500; }
.mobile-list a[aria-current="page"] { color: var(--green); }
.mobile-foot { display: flex; align-items: center; gap: 14px; padding-top: 18px; }
.mobile-foot .btn { flex: 1; }

/* =============================================================================
   SECTION FURNITURE
============================================================================= */
.section { padding: clamp(56px, 8vw, 92px) 0; }
.sec-head { max-width: 640px; margin-bottom: 42px; }
.sec-lead { color: var(--ink-2); font-size: 1.05rem; margin: 12px 0 0; }
.sec-note { margin-top: 28px; font-size: .9rem; color: var(--ink-3); max-width: 620px; }

.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin: 0 0 12px;
}
.eyebrow-light { color: var(--lime); }

.pending-note {
  margin-top: 20px; font-size: .82rem; color: var(--warn);
  background: var(--warn-soft); border: 1px dashed rgba(154, 100, 20, .35);
  padding: 9px 14px; border-radius: var(--r-sm); display: inline-block;
}

/* =============================================================================
   HERO - editorial two-column composition

   Left column holds all the copy; the right column is a full-bleed photograph
   that runs to the viewport edge, so the image reads as part of the hero rather
   than a picture pasted beside it. The join between the two is a horizontal
   gradient over the photo: opaque brand green at the seam, fading to almost
   nothing by 60%, which leaves the right-hand side of the image clearly
   photographic. This is deliberately NOT the Services-page multiply treatment -
   here the photograph is meant to be seen.

   The information card straddles the seam, overlapping the green on its left
   and the photograph on its right.
============================================================================= */
.hero {
  background: var(--forest);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero-text { color: rgba(255, 255, 255, .84); font-size: 1.08rem; max-width: 46ch; margin-bottom: 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Aligns the left column's content with the .wrap used by every other section. */
.hero-inner {
  padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  padding-right: var(--gut);
}

.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badges li {
  font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  padding: 7px 15px; border-radius: 999px;
}
.badges li::before { content: "\2713"; color: var(--lime); margin-right: 7px; font-weight: 700; }

.hero-media { position: relative; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Information strip - the quietest element in the hero. Hairline rule, small
   uppercase labels, compact values, no container and no shadow. */
.hero-facts { border-top: 1px solid rgba(255, 255, 255, .14); }
.facts { display: grid; margin: 0; gap: 18px 28px; }
.fact dt {
  font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .52); margin: 0 0 2px;
}
.fact dd { margin: 0; font-size: .78rem; font-weight: 400; color: rgba(255, 255, 255, .72); }

/* ---- mobile: deliberate order, not a giant stacked photo ------------------ */
@media (max-width: 980px) {
  .hero-copy { padding: clamp(44px, 7vw, 64px) 0 26px; }
  .hero-photo { aspect-ratio: 16 / 9; max-height: 240px; }
  .hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(30, 58, 34, .25) 0%, rgba(30, 58, 34, 0) 45%);
  }
  /* 2x2, not a four-column strip squeezed onto a phone. */
  .facts { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .hero-facts { margin-top: 22px; padding-top: 20px; }
  .hero-badges { padding: 24px 0 0; }
  .hero-facts .hero-inner { padding-bottom: clamp(32px, 5vw, 44px); }
  .hero-inner-flush { padding-right: var(--gut); }
}

/* ---- desktop: copy left, full-bleed photo right, card on the seam --------- */
@media (min-width: 981px) {
  .hero {
    grid-template-columns: 55% 45%;
    grid-template-areas: "copy media" "badges media" "facts media";
    align-items: start;
  }
  .hero-copy   { grid-area: copy;   padding: clamp(44px, 4.6vw, 66px) 0 0; }
  .hero-badges { grid-area: badges; padding: 18px 0 30px; }
  .hero-media  { grid-area: media;  align-self: stretch; min-height: 470px; }
  .hero-facts  { grid-area: facts; }
  .hero-facts .hero-inner { padding-top: 22px; padding-bottom: clamp(22px, 2.4vw, 30px); }
  /* Four across, kept inside the left column so the right half stays
     photography rather than photography behind UI. */
  .facts { grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; gap: 0 30px; }

  .hero-photo { position: absolute; inset: 0; height: 100%; }

  /* The seam. Opaque green at the left edge so the join is invisible, then a
     fast fade so the photograph is genuinely legible from ~40% rightward. */
  .hero-media::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg,
        var(--forest) 0%,
        rgba(30, 58, 34, .92) 8%,
        rgba(30, 58, 34, .44) 26%,
        rgba(30, 58, 34, .10) 46%,
        rgba(30, 58, 34, .02) 100%),
      linear-gradient(180deg, rgba(20, 42, 23, .30) 0%, rgba(20, 42, 23, 0) 30%);
  }

}


/* =============================================================================
   PAGE HEAD (interior pages)
============================================================================= */
.page-head {
  background: linear-gradient(155deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: #fff; padding: clamp(48px, 6.5vw, 76px) 0;
}
/* Supporting background texture - Services page header only.

   Treatment is a MULTIPLY blend against the brand forest green, not an opacity
   overlay. The earlier 94%-opacity approach was technically rendering but left
   only 6% of the photograph visible - present, but invisible in practice.

   Multiply keeps the full tonal range of the photo while forcing every pixel
   into the brand green, and it makes the contrast guarantee exact rather than
   estimated: white x C = C, so the lightest pixel the header can ever produce
   is the blend colour itself (#1e3a22), giving white text 12.47:1 in the worst
   case. The dark pen and leather multiply down to near-black, so the pen and
   notebook read clearly as photographic texture.

   Using --forest as the blend colour also keeps this header tonally identical
   to the About, Contact and Privacy headers. Only loads on this page. */
.page-head-img {
  background-color: var(--forest);
  background-image: url("/assets/img/banner-services-bills-640.webp");
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
@media (min-width: 641px) {
  .page-head-img { background-image: url("/assets/img/banner-services-bills-1024.webp"); }
}
@media (min-width: 1101px) {
  .page-head-img { background-image: url("/assets/img/banner-services-bills-1600.webp"); }
}

.page-head h1 { color: #fff; }
.page-lead { color: rgba(255, 255, 255, .82); font-size: 1.08rem; max-width: 60ch; margin: 16px 0 0; }

/* =============================================================================
   SERVICES
============================================================================= */
.services { background: var(--ground); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; }
.svc-grid-page { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.svc {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 26px; display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.svc:hover { border-color: var(--green); box-shadow: var(--shadow); }
.svc-feat { border-color: var(--green); border-width: 1.5px; }
.svc-t { font-family: var(--display); font-size: 1.32rem; font-weight: 600; margin-bottom: 6px; }
/* Deliberately small. Only one of the seven services has a confirmed price;
   a large price treatment on a single card would unbalance the grid and push
   the site toward looking price-led, which it is not. */
.svc-price {
  display: inline-block; vertical-align: 2px; margin-left: 4px;
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  letter-spacing: .02em; color: var(--green);
  background: var(--lime-soft); border-radius: 999px; padding: 3px 9px;
  white-space: nowrap;
}
.svc-lead { color: var(--ink-2); font-size: .95rem; margin-bottom: 16px; }
.svc-items { border-top: 1px solid var(--line-2); padding-top: 14px; margin-bottom: 20px; }
.svc-items li { font-size: .9rem; color: var(--ink-2); padding: 5px 0 5px 22px; position: relative; }
.svc-items li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
}
.svc-cta { margin-top: auto; font-weight: 600; font-size: .9rem; text-decoration: none; }

/* =============================================================================
   CREDENTIALS
============================================================================= */
.cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 22px; }
.cred { padding: 26px 24px; background: var(--ground); border-radius: var(--r); border: 1px solid var(--line-2); }
/* Uniform slot: badges and icon plates differ in size, so the cards would
   otherwise start their titles at different heights. */
.cred-media { display: flex; align-items: center; height: 110px; margin-bottom: 14px; }
.cred-badge, .cred-mark { margin-bottom: 0; }
.cred-mark { display: flex; width: 84px; height: 84px; align-items: center; justify-content: center; border-radius: 18px; background: var(--lime-soft); margin-bottom: 15px; }
.cred-mark svg { width: 42px; height: 42px; stroke: var(--green); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cred-icon { width: auto; height: 46px; }

/* Official credential artwork supplied by the client. Shown on a white plate so
   the IRS sign and the Intuit badge keep their required clear space and are not
   recoloured or altered in any way. */
.cred-badge { display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 10px 16px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; margin-bottom: 15px; width: fit-content; }
/* The IRS sign is landscape and the Intuit badge is portrait, so cap both
   dimensions rather than height alone - otherwise the portrait badge renders
   too small to read. */
.cred-badge img { max-height: 84px; max-width: 160px; width: auto; height: auto; }
.cred-t { margin-bottom: 6px; }
.cred-x { font-size: .91rem; color: var(--ink-2); margin: 0; }

/* =============================================================================
   PROCESS
============================================================================= */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 30px; counter-reset: s; }
.step { position: relative; padding-top: 8px; }
.step-n {
  display: flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--forest); color: var(--lime);
  font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin-bottom: 15px;
}
.step-t { margin-bottom: 7px; }
.step p { color: var(--ink-2); font-size: .95rem; margin: 0; }

/* =============================================================================
   FOUNDER BLOCK + ABOUT
   Portrait is capped in size on purpose - see the note in page-home.njk.
============================================================================= */
.founder { background: var(--ground); }
.founder-grid { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
/* 4:5 portrait. Her supplied photo is a narrow vertical selfie, so a square
   forces a tight face crop - which she asked us to avoid. */
.founder-img img,
.about-img img {
  border-radius: var(--r); border: 5px solid var(--paper);
  box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
}
.founder-role { font-size: .9rem; color: var(--ink-3); font-weight: 500; margin-bottom: 14px; }
.founder-copy p { color: var(--ink-2); }
.founder-copy .btn { margin-top: 10px; }

.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.about-cap { margin: 16px 0 0; font-size: .88rem; line-height: 1.45; }
.about-cap b { display: block; font-size: 1rem; }
.about-cap span { color: var(--ink-3); }
.about-quote {
  margin: 0 0 20px; padding-left: 22px; border-left: 3px solid var(--lime);
  font-family: var(--display); font-size: 1.18rem; line-height: 1.5; color: var(--ink);
}
.about-copy p { color: var(--ink-2); }

.stats { display: flex; flex-wrap: wrap; gap: 34px; margin: 26px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-v { display: block; font-family: var(--display); font-size: 1.85rem; font-weight: 600; color: var(--green); line-height: 1.1; }
.stat-l { font-size: .82rem; color: var(--ink-3); }

/* =============================================================================
   REVIEWS
============================================================================= */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 22px; margin-bottom: 34px; }
.review { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; display: flex; flex-direction: column; }
.review-empty { border-style: dashed; border-color: rgba(154, 100, 20, .4); background: var(--warn-soft); }
.review-flag {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 10px;
}
.review-body { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.62; }
.review-empty .review-body { font-style: italic; }
blockquote.review-body { border: 0; padding: 0; }
/* Attribution row: initial-only avatar, name, and a quiet source line that
   also carries the excerpt / translated disclosure. No reviewer photographs
   and no heavy Google branding. */
.review-foot { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-2); }
.review-avatar {
  display: flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--lime-soft); color: var(--green);
  font-weight: 700; font-size: .9rem; line-height: 1;
}
.review-who { display: flex; flex-direction: column; min-width: 0; }
.review-by { font-weight: 600; font-size: .9rem; }
.review-meta { font-size: .72rem; color: var(--ink-3); line-height: 1.35; margin-top: 1px; }
.stars { display: flex; gap: 3px; margin-bottom: 12px; }
.star { width: 16px; height: 16px; fill: var(--lime); }
.review-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =============================================================================
   CTA BAND
============================================================================= */
.cta-band { background: var(--forest); color: #fff; padding: clamp(44px, 6vw, 68px) 0; }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: rgba(255, 255, 255, .8); margin: 0; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =============================================================================
   FAQ
============================================================================= */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; padding: 19px 40px 19px 0; font-weight: 600; position: relative; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--green); font-weight: 400; line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-a { padding: 0 40px 20px 0; }
.faq-a p { color: var(--ink-2); margin: 0; font-size: .97rem; }

/* =============================================================================
   CONTACT FORM
============================================================================= */
.contact { background: var(--ground); }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 60px); align-items: start; }

.contact-aside { margin-top: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; }
.aside-h { margin-bottom: 14px; }
.aside-list { margin: 0; }
.aside-list dt { font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.aside-list dt:first-child { margin-top: 0; }
.aside-list dd { margin: 3px 0 0; font-size: .97rem; }
.pending { color: var(--warn); font-style: italic; font-size: .9rem; }

.contact-formwrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.req, .opt { font-weight: 400; color: var(--ink-3); font-size: .78rem; text-transform: lowercase; }
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); transition: border-color .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: 3px solid var(--lime-soft); outline-offset: 0; }
textarea { resize: vertical; min-height: 120px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--err); }

.err { color: var(--err); font-size: .84rem; margin: 6px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 15px 18px; margin: 22px 0; }
.notice-h { font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--warn); margin: 0 0 6px; }
.notice p:last-child { margin: 0; font-size: .9rem; color: var(--ink-2); }

.cf-turnstile { margin: 18px 0; }
.form-privacy { font-size: .84rem; color: var(--ink-3); margin: 14px 0 0; }
/* Neutral preview notice - quiet and unstyled-looking, not a warning banner. */
.form-preview-note { font-size: .84rem; color: var(--ink-3); margin: 14px 0 0; }

.form-alert { padding: 13px 16px; border-radius: var(--r-sm); margin: 16px 0 0; font-size: .92rem; }
.form-alert-block { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(154, 100, 20, .35); }
.form-alert-err { background: var(--err-soft); color: var(--err); border: 1px solid rgba(160, 51, 40, .3); }

.form-done { text-align: center; padding: 30px 10px; }
.form-done h3 { font-family: var(--display); font-size: 1.45rem; margin-bottom: 10px; color: var(--green); }
.form-done p { color: var(--ink-2); }

.nf-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =============================================================================
   PROSE (privacy policy)
============================================================================= */
.prose { max-width: 68ch; }
.prose-h { font-size: 1.22rem; margin: 34px 0 10px; }
.prose-h:first-of-type { margin-top: 0; }
.prose p { color: var(--ink-2); }
.prose-list { margin: 0 0 16px; padding-left: 4px; }
.prose-list li { position: relative; padding: 4px 0 4px 22px; color: var(--ink-2); }
.prose-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.foot-base a { color: rgba(255,255,255,.7); }
.foot-base a:hover { color: var(--lime); }

/* =============================================================================
   FOOTER
============================================================================= */
.site-foot { background: var(--forest-deep); color: rgba(255, 255, 255, .74); padding: clamp(44px, 6vw, 68px) 0 0; font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 44px; }
.brand-foot { color: #fff; }
.brand-foot .brand-sub { color: rgba(255, 255, 255, .55); }
.brand-foot .mark-bar, .brand-foot .mark-arrow { fill: var(--lime); stroke: var(--lime); }
.brand-foot .mark-bar { stroke: none; }
.foot-tag { margin: 16px 0 0; color: rgba(255, 255, 255, .62); max-width: 34ch; }
.foot-h { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #fff; margin: 0 0 14px; font-family: var(--body); }
.foot-h-lang { margin-top: 22px; }
.foot-col li { margin-bottom: 9px; }
.foot-col a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.foot-col a:hover { color: var(--lime); }
.foot-col .lbl { color: rgba(255, 255, 255, .5); }
.foot-addr { font-style: normal; line-height: 1.5; }
.aside-addr { font-style: normal; }
.foot-social { display: flex; flex-wrap: wrap; gap: 8px 16px; }
/* Same row treatment as the social list. The current language is brighter and
   unlinked, so "you are here" reads differently from "switch to this". */
.foot-langs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.foot-lang-on { color: #fff; }
.about-lead { font-size: 1.06rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; padding-bottom: 26px;
  font-size: .84rem; color: rgba(255, 255, 255, .5);
}
.foot-base p { margin: 0; }

/* =============================================================================
   RESPONSIVE
============================================================================= */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 460px; }
  .contact-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 240px 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 820px) {
  .nav, .head-cta { display: none; }
  .burger { display: flex; }
  .utility-tag { display: none; }
  .utility-in { justify-content: center; }
  .site-head { position: static; }
}

/* Small phones: the brand lockup + language pill + burger must fit 320-400px.
   Adding "& " to the brand sub-line pushed .head-actions past the viewport,
   so the lockup shrinks here rather than the header overflowing. */
@media (max-width: 480px) {
  .head-in { gap: 10px; min-height: 64px; }
  .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 1.12rem; }
  /* Below 480px there is not room for mark + wordmark + sub-line + language
     pill + burger. The sub-line is the least load-bearing, so it goes. */
  .brand-sub { display: none; }
  .brand-name { line-height: 1.2; }
  .head-actions { flex: none; gap: 10px; }
  .lang-on, .lang-off { padding: 4px 8px; }
  .burger { width: 38px; height: 38px; padding: 10px 9px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-img { max-width: 210px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-img { max-width: 240px; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .cta-in { flex-direction: column; align-items: flex-start; }
  .utility-links { gap: 14px; font-size: .78rem; }
  .stats { gap: 24px; }
  .hero-cta .btn, .cta-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .utility, .site-head, .cta-band, .site-foot, .btn { display: none !important; }
  body { color: #000; font-size: 12pt; }
}