/* ==========================================================================
   Receipt This, LLC — brand tokens & base styles
   Palette + type locked from Build Spec v1.6. Page-specific styles get added
   in Phase 2; this file holds the shared shell (tokens, type, nav, footer).
   ========================================================================== */

:root {
  /* Brand palette (locked) */
  --green: #1f4d3a;   /* Deep Green — primary */
  --copper: #b87333;  /* Copper — accent */
  --ivory: #f8f4ec;   /* Ivory — background */

  /* Working neutrals derived from the palette */
  --ink: #1c1c1a;
  --muted: #5b5b54;
  --line: #e2dccf;
  --white: #ffffff;

  /* Type — serif display headers, clean sans body */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --container: 1140px;
  --gap: 1.5rem;
  --radius: 8px;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.35rem; }

/* Signature copper period — apply to a span around the trailing period in headers */
.copper-period { color: var(--copper); }

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Keyboard focus — copper ring reads on both ivory and deep-green surfaces */
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link — visually hidden until focused */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--green);
  color: var(--ivory);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; text-decoration: none; }

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

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

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-cta {
  background: var(--copper);
  color: var(--white);
}
.btn-cta:hover { background: #a3641c; text-decoration: none; }

/* Header / nav ---------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 1rem 1.25rem;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand-logo { max-height: 44px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.site-nav ul {
  display: flex;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a[aria-current="page"] { color: var(--copper); }
/* Compact CTA so the full nav (incl. Events) fits on one line */
.site-nav .btn-cta {
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green);
}

/* Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--green);
  color: var(--ivory);
  margin-top: 0;
  padding: 1.5rem 1.5rem 1rem;
  border-top: 1px solid var(--copper);
}
.site-footer a { color: var(--ivory); }
.footer-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; max-width: var(--container); margin: 0 auto; gap: 2rem;
}
.footer-contact p { margin: 0.2rem 0; font-size: 0.95rem; }
.footer-tagline { text-align: center; }
.footer-tagline .tagline {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--copper);
  margin: 0 0 0.15rem;
}
.footer-tagline .core-statement { margin: 0; opacity: 0.85; font-size: 0.92rem; }
.footer-qr { text-align: right; }
.qr-code { width: 100px; background: var(--white); padding: 6px; border-radius: var(--radius); display: inline-block; }
.qr-caption { font-size: 0.8rem; opacity: 0.8; margin-top: 0.3rem; }
.copyright { text-align: center; margin-top: 0.75rem; font-size: 0.8rem; opacity: 0.7; }
.footer-avail-btn {
  display: inline-block; margin-top: 0.4rem; padding: 0.4rem 1rem;
  border: 1px solid var(--copper); border-radius: var(--radius);
  color: var(--ivory); font-weight: 600; font-size: 0.85rem; text-decoration: none;
}
.footer-avail-btn:hover { background: var(--copper); color: var(--white); }

/* Brand lockup (monogram + wordmark) ------------------------------------ */
/* flex-shrink: 0 keeps the monogram from compressing onto the wordmark
   when the nav gets wide (Events link published). */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.brand-logo { height: 38px; width: auto; }
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green);
  white-space: nowrap;
}

/* Shared bits ----------------------------------------------------------- */
.rule--copper { display: block; width: 64px; height: 3px; background: var(--copper); margin: 1.25rem 0; border: 0; }
.btn-dark { background: var(--green); color: var(--ivory); }
.btn-dark:hover { background: #173a2c; color: var(--ivory); text-decoration: none; }
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.section { padding: 3.5rem 0; }
.section-head {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  text-align: center; color: var(--green); margin-bottom: 2.5rem;
}
.rule--copper-sm { display: inline-block; width: 48px; height: 2px; background: var(--copper); }

/* Home hero ------------------------------------------------------------- */
/* Split layout: an ivory text column (left ~1/3) beside a full-bleed photo
   (right ~2/3), with a soft fade only at the seam so text never overlaps the
   image. Below 1080px it stacks to a single scrim hero (see media query). */
.hero--home {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: var(--ivory);
  align-items: stretch;
}
.hero--home .hero-copy {
  align-self: center;
  padding: 4rem 2.5rem 4rem clamp(1.25rem, 4vw, 3.5rem);
  max-width: none;
}
.hero-media {
  position: relative;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  min-height: 560px;
}
/* soft fade at the seam between the green panel and the photo */
.hero-media::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 160px;
  background: linear-gradient(90deg, var(--ivory) 0%, rgba(248,244,236,0) 100%);
  pointer-events: none;
}
.hero--home .display-stack { font-size: clamp(2rem, 3.4vw, 3.1rem); color: var(--green); }
.hero--home .scenario-body .scenario-title { color: var(--ink); }
.hero--home .scenario-body p { color: var(--muted); }
.hero--home .hero-subline { color: var(--ink); }
.hero--home .btn-dark { background: var(--copper); color: var(--ivory); }
.hero--home .btn-dark:hover { background: #a5652c; }
.hero-copy { max-width: 540px; }
.display-stack { font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.01em; margin-bottom: 0; }
.hero-copy .lead { font-size: 1.1rem; color: var(--ink); margin-top: 0; }
.hero-copy .statement { font-weight: 700; color: var(--green); font-size: 1.1rem; }
.btn-dark span { margin-left: 0.3rem; }
.hero-note { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.95rem; margin-top: 1.25rem; }
.hero-note .ico { width: 1.25rem; height: 1.25rem; }

/* Home hero scenario list (Loan / Vehicle / Insurance / Tax) */
.hero-scenarios { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: 1.1rem; }
.scenario { display: flex; align-items: center; gap: 0.9rem; }
.scenario-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--copper);
}
.scenario-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--white); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scenario-body .scenario-title { margin: 0; font-family: inherit; font-weight: 700; font-size: 1.02rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; }
.scenario-body p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.hero-eyebrow { font-weight: 700; color: var(--copper); text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 0.4rem; }
.hero-subline { color: var(--ink); margin: 0 0 1.5rem; max-width: 34ch; }

/* Value row ------------------------------------------------------------- */
.value-row { background: var(--ivory); border-top: 1px solid var(--line); padding: 3.5rem 0; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.value-item { text-align: center; }
.value-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; background: var(--green); margin-bottom: 1rem;
}
.value-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--ivory); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* h2 for document outline (h1 → h2), styled at h3 scale to match the mockup */
.value-item h2 { color: var(--green); margin-bottom: 0.4rem; font-size: 1.35rem; }
.value-item p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* Closing strip (dark green band per Revised_01_Home_page.png) ----------- */
.closing-strip { background: var(--green); padding: 2rem 0; }
.closing-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; text-align: center; }
.closing-check svg { width: 34px; height: 34px; fill: none; stroke: var(--copper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.closing-line { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory); margin: 0; font-size: 0.95rem; }
.closing-script { font-family: "Dancing Script", var(--font-display); color: var(--copper); margin: 0; font-size: 1.35rem; }

/* Who We Serve — split hero --------------------------------------------- */
.hero-split-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 3.5rem 1.5rem; }
.hero-split-img img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; max-height: 420px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--copper); font-size: 0.9rem; }

/* Industry cards -------------------------------------------------------- */
.industry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.industry-card { display: grid; grid-template-columns: 42% 58%; border-radius: var(--radius); overflow: hidden; min-height: 220px; }
.industry-card--reverse { grid-template-columns: 58% 42%; }
.industry-card--reverse .industry-photo { order: 2; }
.industry-card--reverse .industry-panel { order: 1; }
.industry-photo img { width: 100%; height: 100%; object-fit: cover; }
.industry-panel { background: var(--green); color: var(--ivory); padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; }
.industry-panel h3 { color: var(--ivory); margin: 0.5rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; }
.industry-panel p { margin: 0; opacity: 0.85; font-size: 0.95rem; }
.industry-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--copper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* A good fit if you… ---------------------------------------------------- */
.fit-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 820px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2.5rem;
}
.fit-grid li { position: relative; padding-left: 1.9rem; color: var(--ink); }
.fit-grid li::before {
  content: ""; position: absolute; left: 0; top: 0.15em; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l3.5 3.5L18 8'/%3E%3C/svg%3E") center/72% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l3.5 3.5L18 8'/%3E%3C/svg%3E") center/72% no-repeat;
}

/* CTA band -------------------------------------------------------------- */
.cta-band { background: #efe7d6; margin-top: 3.5rem; }
.cta-band-inner { text-align: center; padding: 3.5rem 1.25rem; max-width: 720px; }
.cta-band h2 { color: var(--green); }
.cta-band p { color: var(--muted); margin-bottom: 1.75rem; }

/* Phase 2 responsive ---------------------------------------------------- */
/* Tablet/narrow desktop (≤1080px, matches the nav hamburger breakpoint): stack
   the home hero into a single scrim hero so the text column never gets squeezed.
   Image fills behind, text sits on top with a scrim — reads as an intentional
   hero instead of a cramped two-column split or a photo dumped under the text. */
@media (max-width: 1080px) {
  .hero--home { grid-template-columns: 1fr; position: relative; }
  .hero-media { position: absolute; inset: 0; min-height: 0; background-position: center; }
  .hero-media::before { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto;
    background: linear-gradient(180deg, rgba(18,36,27,0.58), rgba(18,36,27,0.7)); }
  .hero--home .hero-copy { position: relative; z-index: 1; padding: 3rem 1.5rem 3.25rem; max-width: 620px;
    text-shadow: 0 1px 8px rgba(12,26,19,0.55); }
  .hero--home .display-stack { color: var(--ivory); }
  .hero--home .scenario-body .scenario-title { color: var(--ivory); }
  .hero--home .scenario-body p { color: rgba(248,244,236,0.85); }
  .hero--home .hero-subline { color: rgba(248,244,236,0.92); }
}
@media (max-width: 800px) {
  .brand-wordmark { font-size: 1rem; }
  .hero-split-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .value-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .industry-grid { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 640px) {
  .footer-row { grid-template-columns: 1fr; text-align: center; gap: 1.25rem; }
  .footer-qr { text-align: center; }
}
@media (max-width: 480px) {
  .value-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Phase 2 — Our Approach, Services, About, FAQ
   ========================================================================== */

/* Shared display variants ----------------------------------------------- */
.display-inline { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -0.01em; }
.statement--copper { color: var(--copper); }
.rule--center { margin-left: auto; margin-right: auto; }
.script-eyebrow {
  font-family: "Dancing Script", var(--font-display);
  font-weight: 700; font-size: 2.4rem; color: var(--copper);
  margin: 0 0 0.25rem;
}
.eyebrow--center { text-align: center; }

/* Our Approach ---------------------------------------------------------- */
.approach { padding: 3.5rem 0 1rem; }
.approach-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr 0.85fr;
  gap: 2.5rem; align-items: start;
}
.approach-intro .approach-sub { font-weight: 700; font-size: 1.2rem; color: var(--ink); margin: 0 0 0.75rem; }
.approach-intro .statement--copper { font-weight: 700; font-size: 1.2rem; line-height: 1.3; margin: 1.25rem 0; }

.approach-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.approach-steps::before {
  content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px;
  border-left: 2px dashed var(--copper); opacity: 0.5;
}
.approach-step {
  display: grid; grid-template-columns: 48px 1fr; gap: 1rem;
  align-items: start; padding-bottom: 1.5rem;
}
.step-ico {
  width: 48px; height: 48px; border-radius: 50%; background: #efe7d6;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.step-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step-body h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0.2rem; font-size: 1.15rem; }
.step-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: var(--ivory);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.step-body p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.approach-img img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; max-height: 620px; }

.after-meeting { background: #efe7d6; padding: 2rem 0; }
.after-meeting-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.after-meeting-head { display: flex; align-items: center; gap: 0.85rem; flex: 0 0 100%; }
.after-meeting-head h2 { margin: 0; font-size: 1.4rem; }
.after-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.after-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--ivory); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.after-meeting-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; flex: 1; }
.after-meeting-list li { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); font-size: 0.95rem; max-width: 200px; }
.after-check svg { width: 26px; height: 26px; fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.brand-strip { background: var(--green); color: var(--ivory); padding: 1rem 0; }
.brand-strip-inner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; }
.brand-strip-check svg { width: 26px; height: 26px; fill: none; stroke: var(--copper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-strip-line { margin: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.9rem; font-weight: 600; }
.brand-strip-divider { width: 1px; height: 22px; background: rgba(248,244,236,0.4); }
.brand-strip-script { margin: 0; font-family: "Dancing Script", var(--font-display); font-size: 1.4rem; color: var(--copper); }
@media (max-width: 640px) {
  .brand-strip-inner { flex-direction: column; gap: 0.25rem; }
  .brand-strip-divider { display: none; }
  .closing-inner { flex-direction: column; gap: 0.4rem; }
  .after-meeting-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .after-meeting-list { flex-direction: column; gap: 0.75rem; }
  .after-meeting-list li { max-width: none; }
  .not-do-list { justify-content: center; }
}

/* Services -------------------------------------------------------------- */
.services-head { text-align: center; margin-bottom: 2.5rem; font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.service-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; padding-bottom: 1.75rem; }
.service-photo { position: relative; }
.service-photo img { width: 100%; height: 200px; object-fit: cover; }
.service-ico {
  position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--white);
}
.service-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--copper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { margin: 2.75rem 1.25rem 0; font-size: 1.3rem; }
.service-card .rule--center { margin-top: 0.85rem; margin-bottom: 0.85rem; }
.service-card p { margin: 0 1.5rem; color: var(--muted); font-size: 0.95rem; }

.not-do { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-top: 1rem; }
.not-do-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.not-do-head h2 { margin: 0; font-size: 1.35rem; }
.not-do-em { color: #b23a2e; }
.not-do-ico { width: 52px; height: 52px; border-radius: 50%; background: #f3e3df; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.not-do-ico svg { width: 26px; height: 26px; fill: none; stroke: #b23a2e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.not-do-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem; flex: 1; justify-content: space-around; }
.not-do-list li { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; color: var(--muted); font-size: 0.8rem; max-width: 92px; }
.not-do-x svg { width: 30px; height: 30px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.services-cta { background: #efe7d6; margin-top: 3.5rem; }
.services-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.5rem 1.25rem; flex-wrap: wrap; }
.services-cta-copy { display: flex; align-items: center; gap: 1rem; }
.services-cta-copy h2 { margin: 0; font-size: 1.5rem; max-width: 480px; }
.services-cta-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.services-cta-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--ivory); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* About ----------------------------------------------------------------- */
.copper-arrow { color: var(--copper); }
/* Long equation headline — sized down from .display-inline so it holds to
   two lines in the split-hero column (client feedback, revision round 2). */
.about-headline { font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.25; }
.about-sub { font-weight: 600; font-size: 1.95rem; color: var(--green); margin: 0.25rem 0 0; }
.about-hero-img { position: relative; height: 480px; border-radius: var(--radius); overflow: hidden; align-self: center; }
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.about-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.about-value + .about-value { border-left: 1px solid var(--line); padding-left: 2.5rem; }
.about-value-ico {
  width: 56px; height: 56px; border-radius: 50%; background: var(--green);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.85rem;
}
.about-value-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--copper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.about-value h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.about-value p { margin: 0; color: var(--muted); font-size: 0.92rem; }

.meet-kimra .script-eyebrow { margin-bottom: 1rem; }
.meet-kimra-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.meet-kimra-bio h2 { margin: 0 0 0.2rem; }
.meet-kimra-role { color: var(--copper); font-weight: 600; font-style: italic; margin: 0 0 1.25rem; }
.meet-kimra-bio p { color: var(--muted); }
.credential-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; border-left: 1px solid var(--line); padding-left: 2rem; }
.credential-badges .cred-ico { display: block; width: 52px; height: 52px; margin: 0 auto 0.5rem; }
.credential-badges .cred-ico svg { width: 100%; height: 100%; fill: none; stroke: var(--green); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.credential-badges span { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

.mission { background: var(--green); color: var(--ivory); margin-top: 0; padding: 3.5rem 0; }
.mission-head { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--ivory); text-align: center; }
.mission-head .rule--copper-sm { background: var(--copper); }
.mission-statement { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; opacity: 0.92; }
.mission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.mission-item { text-align: center; }
.mission-ico {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--copper);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.85rem;
}
.mission-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--copper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mission-item h3 { color: var(--ivory); margin: 0 0 0.4rem; font-size: 1.15rem; }
.mission-item p { margin: 0; font-size: 0.9rem; opacity: 0.85; }

/* FAQ ------------------------------------------------------------------- */
/* Narrower centered grid + more even columns so the accordion doesn't hug
   the left edge on wide screens (client feedback, revision round 2). */
.faq-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: start;
  max-width: 1020px;
  margin: 0 auto;
}
.faq-intro { color: var(--muted); margin-bottom: 1.75rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1rem 2.25rem 1rem 0;
  position: relative; font-weight: 600; color: var(--green); font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--copper); font-weight: 400; line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 0 1rem; color: var(--muted); padding-right: 2.25rem; }

.faq-aside { position: sticky; top: 84px; }
.faq-photo img { border-radius: var(--radius); width: 100%; height: 220px; object-fit: cover; }
.faq-cta { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; padding: 1.75rem 1.5rem; margin-top: -2rem; position: relative; box-shadow: 0 8px 24px rgba(31,77,58,0.08); }
.faq-cta-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.faq-cta-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--ivory); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faq-cta h2 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.faq-cta p { color: var(--muted); font-size: 0.92rem; margin: 0 0 1.25rem; }
.faq-cta-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--muted); font-size: 0.85rem; margin: 1.25rem 0 0; }

/* Phase 2 page responsive ----------------------------------------------- */
@media (max-width: 980px) {
  .approach-grid { grid-template-columns: 1fr 1fr; }
  .approach-img { grid-column: 1 / -1; order: 3; }
  .approach-img img { max-height: 360px; }
  .meet-kimra-grid { grid-template-columns: 1fr; gap: 2rem; }
  .credential-badges { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .service-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .about-values { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .about-value + .about-value { border-left: 0; padding-left: 0; }
  .mission-grid { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
  .faq-aside { position: static; }
}
@media (max-width: 640px) {
  .approach-grid { grid-template-columns: 1fr; }
  .services-cta-inner { flex-direction: column; text-align: center; }
  .services-cta-copy { flex-direction: column; }
  /* Let the "Does Not Do" header shrink + wrap instead of overflowing */
  .not-do-head { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 480px) {
  .about-values { grid-template-columns: 1fr; }
  .mission-grid { grid-template-columns: 1fr; }
  .credential-badges { grid-template-columns: repeat(2, 1fr); }
  .about-hero-img { height: 340px; }
}

/* Responsive ------------------------------------------------------------ */
/* Compact zone: full nav still shown, but tightened so all seven links +
   CTA fit on one line without crowding the brand lockup. */
@media (max-width: 1280px) {
  .site-nav { gap: 1rem; }
  .site-nav ul { gap: 0.85rem; }
  .site-nav a { font-size: 0.92rem; }
  .site-nav .btn-cta { padding: 0.5rem 0.85rem; font-size: 0.88rem; }
  .brand-wordmark { font-size: 1.05rem; }
}
/* Below this the full nav can't fit cleanly — switch to the hamburger. */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem;
  }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0.75rem; }
  .site-nav a { font-size: 1rem; }
  .site-nav .btn-cta { padding: 0.65rem 1.25rem; font-size: 1rem; }
}

/* Current Availability -------------------------------------------------- */
.availability { padding: 3rem 0 4rem; }
.availability-intro { margin-bottom: 2rem; }
.availability-sub { max-width: 46ch; color: var(--ink); }
.availability-embed {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.availability-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.availability-fallback { margin-top: 1.5rem; font-size: 0.95rem; text-align: center; }
.availability-fallback a {
  display: inline-block; padding: 0.6rem 1.25rem; border-radius: var(--radius);
  background: var(--green); color: var(--ivory); font-weight: 600; text-decoration: none;
}
.availability-fallback a:hover { background: #173a2c; }

/* 404 ------------------------------------------------------------------- */
.not-found { padding-top: 4.5rem; }
.not-found p { max-width: 46ch; color: var(--muted); }
.not-found-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

@media (max-width: 800px) {
  .availability-embed { height: 70vh; min-height: 540px; }
}

/* Events ---------------------------------------------------------------- */
/* Narrower centered column — full-container cards read too left-heavy
   on wide screens (client feedback, revision round 2). */
.events-page { max-width: 820px; }
.events-page h1 { margin-bottom: 1.5rem; }
.event-card {
  background: var(--white);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}
.event-card h2 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.event-date { color: var(--copper); font-weight: 600; margin-bottom: 0.5rem; }
.event-description { margin-bottom: 1rem; line-height: 1.7; }
.event-card .btn-cta { margin-top: 0.5rem; }

/* Client Payments ------------------------------------------------------ */
/* Whole page sits in a narrower centered column instead of a left-pinned
   640px block inside the full container (client feedback, revision round 2). */
.payments-page { max-width: 720px; }
.payments-content { max-width: none; }
.payments-content p { margin-bottom: 1.25rem; line-height: 1.7; }
.payments-note {
  background: var(--white);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  margin: 2rem 0 2.5rem;
}
.payments-note h2 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.payments-note ul {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}
.payments-note li { margin-bottom: 0.35rem; }
.payments-note a { color: var(--green); text-decoration: underline; }

/* ── Workforce Development page ── */
.wfd-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.wfd-ctas .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn-outline {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--green); color: var(--ivory); }
.btn-outline--ivory { color: var(--ivory); border-color: var(--ivory); }
.btn-outline--ivory:hover { background: var(--ivory); color: var(--green); }

.wfd-practical { background: var(--ivory); padding: 4rem 0; }
.wfd-practical-inner { align-items: center; }
.wfd-h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.wfd-cta-band { background: var(--green); padding: 3.5rem 0; text-align: center; }
.wfd-cta-band h2 { color: var(--ivory); font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.5rem; }
.wfd-cta-band-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.wfd-cta-band .btn-dark { background: var(--copper); border-color: var(--copper); }
.wfd-cta-band .btn-dark:hover { background: #a06428; border-color: #a06428; }

@media (max-width: 860px) {
  .wfd-practical-inner { grid-template-columns: 1fr; }
  .wfd-practical-inner .hero-split-img { order: -1; }
}