/* ================================================================
   A&A FINANCES LLC — STYLESHEET
   ----------------------------------------------------------------
   Organized top to bottom as:
     1. Design tokens (colors, type, spacing)
     2. Reset / base element styles
     3. Layout helpers
     4. Header & navigation
     5. Hero
     6. Services (accordion + pricing cards)
     7. About / Team (Amber + Shamier)
     8. Why Us (trust/conversion section)
     9. Contact
     10. Footer
     11. Legal pages (privacy.html, terms.html)
     12. Responsive breakpoints
   Every section is commented so a non-CSS-fluent editor can find the
   right spot to change copy, color, or spacing. Sections below are
   ordered to match the actual page flow (Hero → Services → About →
   Why Us → Contact → Footer) so it's easy to find the CSS for
   whatever you're looking at on the live page.
================================================================= */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   Client-approved palette: "Palette 1 — The Power Executive."
     Deep Navy    #0A192F  — credibility, stability, trust
     Blush Pink   #F4C2C2  — warmth, accessibility, modern accent
     Charcoal Slate #334155 — typography + secondary elements
     Crisp White  #FFFFFF  — clean, high-contrast surfaces
   The four tones above are the client's exact hex values. Every other
   token below is a computed tint/shade of one of those four (lighter
   navy for gradients, a lighter/darker blush for hover states and
   badges, a lighter charcoal for muted text) — introduced only where
   a pure flat color needed a lighter or darker variant, never as a
   new hue outside this palette.
------------------------------------------------------------------- */
:root {
  /* Color — Deep Navy (primary) */
  --navy-950: #0a192f;   /* client hex — header / footer / darkest surfaces */
  --navy-800: #12233d;   /* lightened for the hero gradient + card surfaces */
  --navy-700: #1b3050;   /* lightened further — hero gradient end, featured card */

  /* Color — Blush Pink (accent) */
  --blush-500: #f4c2c2;  /* client hex — buttons, rules, numerals */
  --blush-300: #f8d8d8;  /* lightened — hover state on accent elements */
  --blush-100: #fbe7e7;  /* lightened further — faint badge tint */
  --blush-50:  #fdf3f3;  /* lightest wash — alternates with white between sections */

  /* Color — Charcoal Slate (typography + secondary elements) */
  --charcoal-900: #334155; /* client hex — primary body text on white/light surfaces */
  --charcoal-500: #64748b; /* lightened — secondary/muted text, card meta */
  --charcoal-200: #d8dce2; /* lightened further — hairline borders on light surfaces */

  /* Color — Crisp White */
  --white: #ffffff;      /* client hex — page background + clean surfaces */

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing / shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --wrap-width: 1120px;
  --section-pad: clamp(3.5rem, 6vw, 6.5rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------------------------------------------
   2. RESET / BASE ELEMENTS
------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal-900);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Visible keyboard focus everywhere — accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--navy-950);
  outline-offset: 2px;
}

/* The navy focus outline above disappears against navy backgrounds,
   so every dark-background section/element gets a blush outline
   instead — blush is light, so it stays clearly visible on navy.
   Contact is scoped to .contact-info only (not .contact-form): the
   form is a white card floating on the dark section, so its inputs
   need the default navy outline, not blush-on-white. */
.site-header *:focus-visible,
.hero *:focus-visible,
.services *:focus-visible,
.site-footer *:focus-visible,
.why-cta *:focus-visible,
.contact-info *:focus-visible {
  outline-color: var(--blush-300);
}

/* Skip link: hidden until focused, then jumps above the header */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-950);
  color: var(--white);
  padding: 0.75em 1.25em;
  z-index: 200;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ----------------------------------------------------------------
   3. LAYOUT HELPERS
------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-950);
  margin-bottom: 0.75em;
}
.eyebrow.center { text-align: center; }
/* Eyebrow labels appear on both light sections (About, Why Us — navy
   reads clearly there) and dark sections (Hero, Services, Contact —
   navy would vanish on navy, so those get blush instead). */
.hero .eyebrow,
.services .eyebrow,
.contact .eyebrow {
  color: var(--blush-500);
}

.section-title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.section-title.center { text-align: center; }

.section-sub {
  color: var(--charcoal-500);
  max-width: 640px;
  margin-inline: auto 0;
}
.section-sub.center { margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7em 1.4em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-accent {
  background: var(--blush-500);
  color: var(--navy-950);
}
.btn-accent:hover { background: var(--blush-300); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-outline:hover { border-color: var(--blush-300); color: var(--blush-300); }

.btn-ghost {
  background: transparent;
  color: var(--navy-950);
  padding-inline: 0.6em;
}
.btn-ghost:hover { color: var(--blush-500); }

.btn-lg { padding: 0.9em 1.9em; font-size: 1rem; }

/* ----------------------------------------------------------------
   4. HEADER / NAVIGATION
------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 25, 47, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(244, 194, 194, 0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
}
.brand-seal { display: block; width: 36px; height: 36px; }
.brand-word {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.brand-word em { color: var(--blush-500); font-style: normal; }

.primary-nav {
  display: flex;
  gap: 1.75rem;
}
.primary-nav a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.primary-nav a:hover { color: var(--blush-300); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.email-link { color: var(--white); font-family: var(--font-mono); font-size: 0.8rem; }
.email-link:hover { color: var(--blush-300); }

/* Mobile hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------
   5. HERO
------------------------------------------------------------------- */
.hero {
  background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  color: var(--white);
  padding-block: calc(var(--section-pad) + 1.5rem) var(--section-pad);
  text-align: center;
}

.hero-inner { max-width: 820px; }

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

.hero-title {
  color: var(--white);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  margin-bottom: 0.6em;
}
.hero-title em { color: var(--blush-500); font-style: normal; }

.hero-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  max-width: 640px;
  margin-inline: auto;
}
.hero-sub em { color: var(--blush-300); font-style: normal; }

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block: 2rem 2.5rem;
}

.press-row-wrap {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 194, 194, 0.25);
}

.press-row-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.85rem;
}

.press-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.press-row li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  padding: 0.35em 0.8em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

/* ----------------------------------------------------------------
   6. SERVICES — accordion + pricing cards
------------------------------------------------------------------- */
.services {
  background: var(--navy-950);
  color: var(--white);
  padding-block: var(--section-pad);
}
.services .section-title { color: var(--white); }
.services .section-sub { color: rgba(255, 255, 255, 0.65); }

.accordion {
  margin-top: 2.5rem;
  display: grid;
  gap: 1px;
  background: rgba(244, 194, 194, 0.25);
  border: 1px solid rgba(244, 194, 194, 0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.accordion-item { background: var(--navy-950); }

.accordion-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
}
.accordion-item summary::-webkit-details-marker { display: none; }

.accordion-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--blush-500);
}
.accordion-label { flex: 1; }

.accordion-chevron {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--blush-500);
  border-bottom: 1.5px solid var(--blush-500);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.accordion-item[open] .accordion-chevron { transform: rotate(-135deg); }

.accordion-panel {
  padding: 0 1.5rem 2rem;
  color: rgba(255, 255, 255, 0.78);
}

.panel-intro { max-width: 640px; }

/* Pricing cards (Fractional CFO tiers) */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

.price-card {
  background: var(--navy-800);
  border: 1px solid rgba(244, 194, 194, 0.25);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  position: relative;
}
.price-card h3 { color: var(--white); font-size: 1.15rem; }
.price-card-featured { border-color: var(--blush-500); background: var(--navy-700); }

.price-badge {
  position: absolute;
  top: -12px;
  right: 1.5rem;
  background: var(--blush-500);
  color: var(--navy-950);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  margin: 0;
}

.price-fit { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); }

.price-figure {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--blush-300);
  margin: 0.4em 0 0.8em;
}
.price-figure span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin-left: 0.3em;
}

.price-card ul { display: grid; gap: 0.55rem; margin-bottom: 0.5rem; }
.price-card ul li {
  position: relative;
  padding-left: 1.4em;
  font-size: 0.9rem;
}
.price-card ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--blush-500);
}

.price-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.75rem;
}
.price-note-standalone {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--blush-300);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Simple two-column service rows (tax, notary, training) */
.simple-list { display: grid; gap: 1.25rem; margin-top: 0.5rem; }
.simple-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.simple-row:last-child { border-bottom: none; padding-bottom: 0; }
.simple-row h4 { color: var(--white); font-size: 1rem; margin-bottom: 0.25em; }
.simple-row p { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; margin: 0; }
.simple-price {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--blush-300);
  white-space: nowrap;
  margin: 0;
  padding-top: 0.2em;
}

/* ----------------------------------------------------------------
   7. ABOUT / TEAM
   Two matching cards for the co-founders. Photos are cropped to a
   matching square (1:1) so the grid stays visually even even though
   the source photos were completely different shapes originally.
   Background is left unset (inherits the page's white background)
   since it directly follows the dark Services section and needs to
   read as a clean break, not another shaded panel.
------------------------------------------------------------------- */
.about { padding-block: var(--section-pad); }

.team-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.team-card {
  background: var(--white);
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--charcoal-200);
}

.team-copy { padding: clamp(1.5rem, 3vw, 2rem); }

.team-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-950);
  margin-bottom: 0.4em;
}

.team-copy h3 { font-size: 1.4rem; margin-bottom: 0.6em; }
.team-copy p { color: var(--charcoal-500); font-size: 0.95rem; }

.team-copy p.team-credential {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-950);
  background: var(--blush-100);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.8em;
  margin-bottom: 1em;
}

.team-email {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--navy-950);
  border-bottom: 1px solid var(--charcoal-200);
}
.team-email:hover { text-decoration: underline; }

/* ----------------------------------------------------------------
   8. WHY US
   Reviews section was removed (see index.html comment), so Why Us now
   sits directly against the white About section above it. Uses the
   blush-tinted wash (--blush-50) so the two still read as distinct
   panels instead of blurring into one long white block.
------------------------------------------------------------------- */
.why-us { padding-block: var(--section-pad); background: var(--blush-50); }

.why-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.why-card {
  background: var(--white);
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.why-icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
.why-card h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.why-card p { color: var(--charcoal-500); font-size: 0.9rem; margin: 0; }

.why-cta {
  margin-top: 3rem;
  background: var(--navy-950);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.why-cta h3 { color: var(--white); font-size: 1.5rem; }
.why-cta p { color: rgba(255, 255, 255, 0.72); max-width: 480px; margin-inline: auto; }

/* ----------------------------------------------------------------
   9. CONTACT
   Design decision: dark navy, using the same gradient as the Hero.
   Before this change the page ran dark→dark→light→light→light→dark,
   which reads top-heavy. Ending on a second dark section (before the
   navy Footer) creates a dark-light-dark "bookend" that balances the
   page and gives the closing CTA more visual weight. The white form
   card floats on top of the gradient for a premium, elevated feel —
   see the box-shadow on .contact-form below.
------------------------------------------------------------------- */
.contact {
  background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  color: var(--white);
  padding-block: var(--section-pad);
}
.contact h2 { color: var(--white); }

.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.contact-info p { color: rgba(255, 255, 255, 0.72); }

.contact-details { margin-top: 1.5rem; display: grid; gap: 1rem; }
.contact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blush-500);
  margin-bottom: 0.2em;
}
.contact-details a { color: var(--white); }
.contact-details a:hover { color: var(--blush-300); text-decoration: underline; }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row-full { grid-column: 1 / -1; }

.form-row label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-950);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65em 0.8em;
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--charcoal-900);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--navy-950);
}

.form-submit { grid-column: 1 / -1; justify-self: start; }

.form-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.88rem;
  color: var(--charcoal-500);
  min-height: 1.2em;
}
.form-status[data-state="success"] { color: #1f6f54; }
.form-status[data-state="error"] { color: #b3261e; }

/* ----------------------------------------------------------------
   10. FOOTER
------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.6);
  padding-block: 2rem;
  border-top: 1px solid rgba(244, 194, 194, 0.25);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.85rem;
}
.footer-legal {
  display: flex;
  gap: 1.25rem;
}
.footer-legal a:hover { color: var(--blush-500); }
.footer-credential { font-family: var(--font-mono); font-size: 0.78rem; }
.footer-credential a:hover { color: var(--blush-500); }

/* ----------------------------------------------------------------
   11. LEGAL PAGES (privacy.html, terms.html)
   Simple, readable prose layout reusing the site's existing type
   scale and color tokens — no new patterns introduced.
------------------------------------------------------------------- */
.legal { padding-block: var(--section-pad); }
.legal-content { max-width: 720px; }
.legal-content h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.legal-content h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
}
.legal-content p { color: var(--charcoal-500); }
.legal-content a { color: var(--navy-950); font-weight: 600; }
.legal-content a:hover { text-decoration: underline; }
.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--charcoal-500);
  margin-bottom: 2rem;
}

/* ----------------------------------------------------------------
   12. RESPONSIVE BREAKPOINTS
------------------------------------------------------------------- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .primary-nav { display: none; }
  .header-actions .email-link { display: none; }
  .nav-toggle { display: flex; }

  /* Mobile dropdown nav, toggled via JS adding .is-open */
  .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-950);
    padding: 1rem 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(244, 194, 194, 0.25);
    gap: 1rem;
  }

  .contact-form { grid-template-columns: 1fr; }
  .simple-row { flex-direction: column; gap: 0.3rem; }
  .why-grid { grid-template-columns: 1fr; }
}