/* Frederick C. Frank & Associates, evergreen design system */

:root {
  /* Ledger & Brass palette: deep pine, brass accent, parchment paper */
  --forest: #1E3F33;        /* deep pine */
  --forest-2: #2A5142;      /* secondary pine surface */
  --teal-gray: #57705F;     /* hairlines and borders only, never text */
  --dark-slate: #33413A;
  /* Nudged from #6E7A6B for contrast: at 11-12px this sits on white, paper, and
     light-input, and the old value failed WCAG AA on the latter two. */
  --cool-gray: #636E60;
  --silver-teal: #DCD8C8;   /* warm parchment borders */
  --light-input: #EFEDE2;   /* very light parchment bg */
  --paper: #F7F5EE;          /* warm page background */
  --white: #ffffff;
  --black: #22302A;
  --brass: #B9975B;          /* the signature accent: rules, chips, details */
  --brass-wash: #E4D6AE;     /* brass underline wash */
  /* Brass is a brand colour and stays exactly as it is for rules, the ampersand,
     and large display text. This lighter tint exists only for SMALL brass text on
     a pine surface (the footer column headings), where #B9975B lands at 4.21:1. */
  --brass-on-dark: #CDB58B;

  /* Greens */
  /* Nudged from #5EA983: the old value was 4.12:1 on pine, so every small green
     label on a dark section failed AA. */
  --mdb-green: #6AB08C;      /* on-dark accent green */
  --mdb-green-deep: #2F6B4E;  /* text accent green on light */
  --btn-green: #347A58;       /* buttons */
  --mdb-green-soft: rgba(52,122,88,0.12);

  /* Blues */
  --action-blue: #006cfa;
  --hover-blue: #3860be;
  --teal-active: #1eaedb;

  /* Aliases (used across the existing components) */
  --cream: #ffffff;
  --cream-50: #ffffff;
  --cream-100: #EFEDE2;
  --cream-200: #E3DFCF;
  --ink: #1E3F33;
  --ink-80: #33413A;
  --ink-60: #4E5C52;
  --ink-40: #6E7A6B;
  --ink-20: #CCC7B4;
  --line: #CCC7B4;
  --line-soft: #E3DFCF;

  /* Accent */
  --accent: #347A58;
  --accent-deep: #2F6B4E;
  --accent-soft: #B9975B;
  --accent-wash: rgba(185,151,91,0.14);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* The display face is Inter, not Source Serif. The prototype used to set this
     at runtime from its tweaks panel (displayFont: "sans"); that panel is gone,
     so the shipped choice lives here. Swapping this one line back to
     'Source Serif Pro' returns the whole site to the serif display treatment. */
  --font-serif: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, 'SF Mono', monospace;

  --page-max: 1280px;
  --gutter: 32px;

  /* Shadows, pine-tinted */
  --sh-forest: rgba(30,63,51,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;
  --sh-standard: rgba(0,0,0,0.15) 0px 3px 9px;
  --sh-subtle: rgba(0,0,0,0.10) 0px 2px 4px;
}

/* ,,, Reset ,,, */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ,,, Layout ,,, */
.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hr-line { height: 1px; background: var(--silver-teal); border: 0; margin: 0; }

/* ,,, Typography ,,, */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.00;
  color: var(--forest);
}
.display-xl { font-size: clamp(56px, 9vw, 96px); line-height: 1.05; }
.display-lg { font-size: clamp(44px, 6.5vw, 80px); line-height: 1.05; }
.display-md { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.0; }

/* Editorial italic accent is gone, MongoDB doesn't use italic serif flourishes. */
.serif-italic {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  position: relative;
  display: inline-block;
  color: inherit;
}

/* Brass accent underline behind headline words */
.accent-underline {
  box-shadow: inset 0 -10px 0 var(--brass-wash);
  padding: 0 2px;
}
.on-dark .accent-underline {
  box-shadow: inset 0 -10px 0 var(--mdb-green);
  color: var(--white);
}

/* Source Code Pro uppercase labels, database field aesthetic */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cool-gray);
  font-weight: 500;
}
.eyebrow.on-dark { color: var(--mdb-green); }

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cool-gray);
}

.lede {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--dark-slate);
  max-width: 58ch;
}

/* ,,, Nav ,,, */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 245, 238, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--silver-teal);
  color: var(--forest);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--forest);
}
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; }
.wordmark { font-family: 'Source Serif Pro', 'Times', Georgia, serif; font-weight: 400; color: var(--forest); letter-spacing: -0.015em; line-height: 1.15; }
.wordmark i { color: var(--brass); font-style: italic; }
.on-dark .wordmark, .footer .wordmark { color: var(--white); }
.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cool-gray);
  font-weight: 500;
  margin-top: 3px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0; margin: 0;
}
.nav-links a {
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cool-gray);
  transition: background .2s, color .2s;
}
.nav-links a:hover { color: var(--forest); background: var(--light-input); }
.nav-links a.active { color: var(--mdb-green-deep); }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--white); }
.nav-cta { margin-left: 8px; }
.nav-burger { display: none; background: none; border: 1px solid var(--silver-teal); border-radius: 8px; padding: 6px 12px; color: var(--forest); font-size: 18px; line-height: 1.3; }
.nav-mobile { display: flex; flex-direction: column; gap: 2px; padding: 10px var(--gutter) 20px; border-top: 1px solid var(--silver-teal); background: var(--paper); }
.nav-mobile a { padding: 12px 10px; font-size: 16px; font-weight: 500; color: var(--forest); border-radius: 8px; }
.nav-mobile a.active { color: var(--mdb-green-deep); }
.nav-mobile a:active { background: var(--light-input); }

/* ,,, Buttons ,,, */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s, color .2s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--btn-green);
  color: var(--white);
  border-color: var(--btn-green);
  box-shadow: var(--sh-subtle);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--mdb-green-deep);
  color: var(--white);
  border-color: var(--mdb-green-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(52,122,88,0.25);
}
.btn-accent { /* alias for existing markup */
  background: var(--mdb-green-deep);
  color: var(--white);
  border-color: var(--mdb-green-deep);
}
.btn-accent:hover {
  background: var(--mdb-green);
  color: var(--forest);
  border-color: var(--mdb-green);
}
.btn-ghost {
  background: transparent;
  color: var(--forest);
  border-color: var(--silver-teal);
}
.btn-ghost:hover {
  border-color: var(--forest);
  background: var(--light-input);
}
.on-dark .btn-ghost, .btn-ghost.on-dark {
  color: var(--white);
  border-color: var(--teal-gray);
}
.on-dark .btn-ghost:hover, .btn-ghost.on-dark:hover {
  background: var(--forest-2);
  border-color: var(--silver-teal);
}
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-arrow::after {
  content: "→";
  font-family: var(--font-sans);
  transition: transform .2s;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ,,, Cards ,,, */
.card {
  background: var(--white);
  border: 1px solid var(--silver-teal);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover {
  border-color: var(--forest);
  transform: translateY(-2px);
  box-shadow: var(--sh-forest);
}
.card-dark {
  background: var(--forest-2);
  border: 1px solid var(--teal-gray);
  color: var(--white);
}
.card-dark:hover { border-color: var(--mdb-green); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--light-input);
  border: 1px solid var(--silver-teal);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-slate);
  font-weight: 500;
}
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 8px var(--brass);
}
.chip.on-dark {
  background: var(--forest-2);
  border-color: var(--teal-gray);
  color: var(--mdb-green);
}

/* ,,, Footer ,,, */
.footer {
  background: var(--forest);
  color: var(--silver-teal);
  padding: 80px 0 32px;
  margin-top: 120px;
  border-top: 1px solid var(--teal-gray);
}
.footer a { color: var(--silver-teal); }
.footer a:hover { color: var(--mdb-green); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--teal-gray);
}
.footer-brand {
  font-family: var(--font-serif);
  font-size: 32px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-weight: 400;
  color: var(--white);
}
.footer-brand em { color: var(--brass); font-style: normal; }
.footer h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brass-on-dark);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 15px;
  font-weight: 300;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--cool-gray);
}

/* ,,, Section spacing ,,, */
section { padding: 96px 0; }
section.tight { padding: 64px 0; }
section.xl { padding: 128px 0; }
section.on-dark {
  background: var(--forest);
  color: var(--white);
}
section.on-dark .display,
section.on-dark h1,
section.on-dark h2,
section.on-dark h3 { color: var(--white); }
section.on-dark .lede { color: var(--silver-teal); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(40px, 5vw, 64px);
  color: var(--forest);
}
.section-head .section-meta {
  color: var(--dark-slate);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
  max-width: 48ch;
}

/* ,,, Service tile special styling ,,, */
.service-tile {
  background: var(--white);
  border: 1px solid var(--silver-teal) !important;
  transition: background .2s, border-color .2s;
}
.service-tile:hover {
  background: var(--light-input) !important;
  border-color: var(--forest) !important;
}


/* ,,, Utility ,,, */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.stack > * + * { margin-top: var(--stack, 16px); }
.text-accent { color: var(--mdb-green-deep); }
.text-muted { color: var(--cool-gray); }
.text-dim { color: var(--silver-teal); }
.tnum { font-variant-numeric: tabular-nums; }

/* Soft halo */
.glow-green {
  box-shadow: 0 0 60px rgba(94,169,131,0.25), 0 0 120px rgba(94,169,131,0.12);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  background: var(--mdb-green);
}

/* Responsive */
@media (max-width: 1180px) {
  .nav-links a { padding: 10px 10px; font-size: 14px; }
}
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
}
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  section { padding: 64px 0; }
}
@media (max-width: 700px) {
  /* Collapse all inline multi-column grids to a single column on phones */
  #root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .footer-top { grid-template-columns: 1fr; }
  .display-xl { font-size: clamp(38px, 11vw, 56px); }
  .display-lg { font-size: clamp(34px, 9.5vw, 48px); }
  .section-head h2 { font-size: clamp(32px, 8.5vw, 44px); }
  .wrap { padding: 0 20px; }
}

/* ,,, No-JavaScript fallback ,,,
   The pages render through React, so without JS the root div is empty.
   This block gives visitors (and any crawler that does not run scripts)
   the firm's name, address, and phone number. */
.noscript-fallback {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px;
  font-family: var(--font-sans);
  color: var(--forest);
  line-height: 1.6;
}
.noscript-fallback h1 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 16px;
}
.noscript-fallback p { margin: 0 0 16px; color: var(--dark-slate); font-weight: 300; }
.noscript-fallback a { color: var(--mdb-green-deep); }

/* Contact form error state */
.form-error {
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(166, 80, 63, 0.08);
  border: 1px solid rgba(166, 80, 63, 0.35);
  color: #8A3F31;
  font-size: 14.5px;
  line-height: 1.5;
}

/* ,,, Legal and error pages (static, no React) ,,, */
.legal { background: var(--white); padding: 80px 0 96px; }
.legal .wrap { max-width: 760px; }
.legal-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cool-gray);
  margin: 20px 0 40px;
}
.legal h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--forest);
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
}
.legal p {
  color: var(--dark-slate);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  margin: 0 0 16px;
}
.legal a { color: var(--mdb-green-deep); text-decoration: underline; }

/* ,,, Focus visibility ,,,
   The stylesheet previously had no :focus rules at all, so keyboard users had
   only the browser default, which several of the custom controls suppressed.
   :focus-visible keeps the ring off mouse clicks but on for keyboard and
   assistive tech. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--mdb-green-deep);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.footer :where(a, button):focus-visible {
  outline-color: var(--mdb-green);
}
/* The contact form's field styles set `outline: none`, and the rule above uses
   :where(), which contributes zero specificity and so loses to any class. These
   restate the outline explicitly at class specificity. Without this the form
   fields have no visible focus ring at all. Offset stays 0 because the fields
   already carry a border and an offset ring reads as detached from it. */
.field-input:focus-visible,
.field-textarea:focus-visible,
.field-select:focus-visible {
  outline: 3px solid var(--mdb-green-deep);
  outline-offset: 0;
}

/* Skip link, first thing in the tab order. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--forest);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* Chip pickers on the contact form read as toggle buttons. */
.radio-chip[aria-pressed="true"] { font-weight: 500; }

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

/* Visually hidden, still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}