/* GENERATED by tools/generate-pages.py from styles/tokens/*.css and styles/site.css. Edit those, not this. */

/* tokens/colors.css */
/* Federico & Company — Color Tokens */

:root {
  /* === Brand Navy (Primary) === */
  --color-navy-50:  #eef2f7;
  --color-navy-100: #d5dfe9;
  --color-navy-200: #aabfd4;
  --color-navy-300: #7a9bba;
  --color-navy-400: #4f78a0;
  --color-navy-500: #335882;
  --color-navy-600: #263f60;   /* Brand primary — #263f60 */
  --color-navy-700: #1e3250;
  --color-navy-800: #16263e;
  --color-navy-900: #0e192a;

  /* === Silver / Neutral === */
  --color-silver-50:  #fafafa;
  --color-silver-100: #f4f4f4;
  --color-silver-200: #e8e8e8;
  --color-silver-300: #d6d6d6;
  --color-silver-400: #c0c0c0;   /* Brand silver — #c0c0c0 */
  --color-silver-500: #a0a0a0;
  --color-silver-600: #7a7a7a;
  --color-silver-700: #5a5a5a;
  --color-silver-800: #3a3a3a;
  --color-silver-900: #1a1a1a;

  /* === Semantic aliases === */
  --color-brand-primary:    var(--color-navy-600);
  --color-brand-primary-hover: var(--color-navy-700);
  --color-brand-secondary:  var(--color-silver-400);

  /* Surfaces */
  --surface-page:         #ffffff;
  --surface-card:         #ffffff;
  --surface-subtle:       var(--color-silver-50);
  --surface-muted:        var(--color-silver-100);
  --surface-inverse:      var(--color-navy-600);
  --surface-inverse-dark: var(--color-navy-800);

  /* Text */
  --text-primary:         var(--color-navy-900);
  --text-secondary:       var(--color-silver-700);
  --text-tertiary:        var(--color-silver-500);
  --text-on-dark:         #ffffff;
  --text-on-dark-muted:   rgba(255,255,255,0.72);
  --text-brand:           var(--color-navy-600);
  --text-link:            var(--color-navy-600);
  --text-link-hover:      var(--color-navy-700);

  /* Borders */
  --border-default:       var(--color-silver-200);
  --border-strong:        var(--color-silver-400);
  --border-brand:         var(--color-navy-600);

  /* Status */
  --color-success:        #1a7a4a;
  --color-success-bg:     #e8f5ee;
  --color-warning:        #8a6000;
  --color-warning-bg:     #fef7e0;
  --color-error:          #b82020;
  --color-error-bg:       #fde8e8;
}


/* tokens/typography.css */
/* Federico & Company — Typography Tokens */
/* NOTE: Original logo font could not be extracted from SVG paths.
   Playfair Display (serif, display) + DM Sans (sans, body) are closest-available
   Google Fonts substitutes for a professional CPA firm aesthetic.
   Request original font files from the team for exact reproduction. */

/* The Google Fonts @import that used to sit here now lives as a <link> in the
   document <head> (see shell() in tools/generate-pages.py). Nested two
   stylesheets deep, it was invisible to the preload scanner and serialised
   four render-blocking round trips ahead of first paint. Do not restore it
   here — the families below are unchanged, only where they are requested. */

:root {
  /* Font families */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', Courier, monospace;

  /* Scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* Semantic roles */
  --type-hero-size:       var(--text-5xl);
  --type-hero-font:       var(--font-display);
  --type-hero-weight:     var(--weight-bold);
  --type-hero-leading:    var(--leading-tight);
  --type-hero-tracking:   var(--tracking-tight);

  --type-heading-size:    var(--text-3xl);
  --type-heading-font:    var(--font-display);
  --type-heading-weight:  var(--weight-semibold);
  --type-heading-leading: var(--leading-snug);

  --type-subheading-size:   var(--text-xl);
  --type-subheading-font:   var(--font-body);
  --type-subheading-weight: var(--weight-semibold);

  --type-body-size:    var(--text-base);
  --type-body-font:    var(--font-body);
  --type-body-weight:  var(--weight-regular);
  --type-body-leading: var(--leading-relaxed);

  --type-label-size:    var(--text-sm);
  --type-label-font:    var(--font-body);
  --type-label-weight:  var(--weight-medium);
  --type-label-tracking: var(--tracking-wide);

  --type-caption-size:  var(--text-xs);
  --type-caption-font:  var(--font-body);
  --type-caption-weight: var(--weight-regular);
}


/* tokens/spacing.css */
/* Federico & Company — Spacing Tokens */

:root {
  /* Base scale (4px unit) */
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:  128px;

  /* Semantic */
  --gap-xs:     var(--space-1);
  --gap-sm:     var(--space-2);
  --gap-md:     var(--space-4);
  --gap-lg:     var(--space-6);
  --gap-xl:     var(--space-8);
  --gap-2xl:    var(--space-12);

  --padding-xs:   var(--space-2);
  --padding-sm:   var(--space-3);
  --padding-md:   var(--space-4);
  --padding-lg:   var(--space-6);
  --padding-xl:   var(--space-10);

  --section-gap:  var(--space-20);
  --page-margin:  var(--space-8);

  /* Layout */
  --content-max-width: 1120px;
  --content-narrow:     720px;
  --sidebar-width:      260px;
}


/* tokens/borders.css */
/* Federico & Company — Borders & Radii Tokens */

:root {
  /* Radii */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Borders */
  --border-width:      1px;
  --border-width-md:   2px;
  --border-default:    1px solid var(--color-silver-200);
  --border-strong:     1px solid var(--color-silver-400);
  --border-brand:      2px solid var(--color-navy-600);
}


/* tokens/shadows.css */
/* Federico & Company — Shadow Tokens */

:root {
  --shadow-xs:  0 1px 2px rgba(38, 63, 96, 0.06);
  --shadow-sm:  0 1px 3px rgba(38, 63, 96, 0.08), 0 1px 2px rgba(38, 63, 96, 0.06);
  --shadow-md:  0 4px 8px rgba(38, 63, 96, 0.10), 0 1px 3px rgba(38, 63, 96, 0.06);
  --shadow-lg:  0 10px 24px rgba(38, 63, 96, 0.12), 0 2px 6px rgba(38, 63, 96, 0.06);
  --shadow-xl:  0 20px 48px rgba(38, 63, 96, 0.16), 0 4px 12px rgba(38, 63, 96, 0.08);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(38, 63, 96, 0.22);
}


/* site.css */
/* Federico & Company — site chrome
 *
 * Everything here is carried over from the Claude Design source for these
 * components. Per-element styling lives inline in the HTML (mirroring the
 * `.dc.html` sources one-to-one so the two stay easy to diff); this file holds
 * only what an inline `style` attribute cannot express: the reset, the
 * `[data-reveal]` start state, media queries, and hover/focus states.
 *
 * Sources:
 *   About.dc.html      -> <helmet><style> reset + [data-reveal]
 *   SiteNav.dc.html    -> <helmet><style> .fc-nav-links / .fc-nav-toggle
 *   _ds_bundle.js      -> components/core/Button.jsx (hover -> navy-700)
 */

/* --- reset (About.dc.html helmet) --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; }
a { text-decoration: none; }

/* The `hidden` attribute is only a UA-stylesheet `display: none`, so ANY
   inline `display` on the element beats it and the element stays visible while
   `el.hidden` reports true. Several elements here are toggled by `hidden` and
   carry an inline display (the contact form, the mobile nav drawer), so make
   the attribute actually mean hidden. */
[hidden] { display: none !important; }

/* --- scroll reveal (About.dc.html helmet); driven by js/interactions.js --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* --- nav (SiteNav.dc.html helmet) --- */
.fc-nav-toggle { display: none; }

/* Raised from 1040px when the Client Portal button was added to the row.
   The row is a flex container inside a fixed 1120px max-width, so the extra
   button does not overflow — it makes the text links shrink instead, and
   "AI Solutions" wrapped to two lines. The links now carry `white-space:
   nowrap` (see generate-pages.py), which converts that silent squeeze into
   real overflow, so the collapse point has to move out to match. */
/* Back to 1120px on 2026-08-27, same afternoon it went to 1240px. Retiring the
   public AI page, shortening both button labels ("Schedule a Consultation" ->
   "Book a Call", "Client Portal" -> "Portal") and moving section depth into
   dropdowns took the row back under budget. This must match the nav
   container's max-width in generate-pages.py. */
@media (max-width: 1120px) {
  .fc-nav-links { display: none !important; }
  .fc-nav-toggle { display: flex !important; }
}

/* Mobile drawer — replaces the <sc-if value="{{ menuOpen }}"> in SiteNav.dc.html.
   Toggled by js/nav.js via the `hidden` attribute. */
.fc-nav-menu { display: flex; }
.fc-nav-menu[hidden] { display: none; }

/* --- Button (Button.jsx VARIANTS.primary + its '--hover-bg') ---
   `background` has to live here rather than in the element's inline style:
   an inline declaration outranks any author-stylesheet rule, so an inline
   background would make the :hover below inert. --- */
.fc-btn-primary { background: var(--color-navy-600); }
.fc-btn-primary:hover,
.fc-btn-primary:active { background: var(--color-navy-700); }

/* --- Outline buttons on the dark page.
   Button.jsx VARIANTS.outline is designed for a light surface: navy-600 text
   on a transparent background, hovering to navy-50 (#eef2f7). On this site it
   is used on dark navy, and the design's own dark-page usage (Home's "View Our
   Services") overrides the text and border to white but NOT the hover.
   Reproduced literally that gives white-on-#eef2f7 at hover — an invisible
   label — and, on Contact's un-overridden submit, navy-600 text on navy-900 at
   rest. DELIBERATE DEVIATION: both use the design's own outline-on-dark
   treatment (white text/border) with a translucent white hover. Revert to
   `background: var(--color-navy-50)` on hover for literal fidelity. --- */
.fc-btn-outline { background: transparent; }
.fc-btn-outline:hover,
.fc-btn-outline:active { background: rgba(255,255,255,0.12); }

.fc-btn-outline-navy {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.fc-btn-outline-navy:hover,
.fc-btn-outline-navy:active { background: rgba(255,255,255,0.12); }

/* --- Card + pill hover (the DC `style-hover` attribute, which has no static
   equivalent). `transform` needs !important here and nowhere else:
   interactions.js writes `el.style.transform = 'translateY(0)'` inline when a
   [data-reveal] element reveals, and an inline declaration would outrank this
   rule — the lift would silently never happen. Un-hover still falls back to
   that inline translateY(0) correctly. --- */
.fc-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(192,192,192,0.14);
}
.fc-card:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-4px) !important;
}
.fc-card--home:hover { border-color: rgba(122,155,186,0.55); }
.fc-card--svc:hover  { border-color: rgba(122,155,186,0.5); }
.fc-card--ai         { border-color: rgba(122,155,186,0.22); }
.fc-card--ai:hover   { border-color: rgba(122,155,186,0.55); }

.fc-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(192,192,192,0.2);
}
.fc-pill:hover {
  background: rgba(122,155,186,0.14);
  border-color: rgba(122,155,186,0.45);
}

/* --- Honeypot.
   Positioned off-screen rather than `display: none` or `visibility: hidden`,
   because some bots deliberately skip fields hidden those two ways — which
   would defeat the trap. Kept out of the accessibility tree and the tab order
   by aria-hidden + tabindex="-1" on the markup itself. --- */
.fc-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Contact form fields (Input.jsx / Textarea.jsx, translated literally —
   including the white field on a dark page, which is what those components
   do). The design's helmet carried a `#fc-contact-form input::placeholder`
   rule setting placeholders to rgba(255,255,255,0.35); it was dead (no element
   had that id) and would have been white-on-white if it had matched, so it is
   dropped in favour of the browser default. --- */
.fc-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: #fff;
  border: 1.5px solid var(--color-silver-300);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.fc-input:focus {
  border-color: var(--color-navy-500);
  box-shadow: var(--focus-ring);
}
.fc-textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

/* --- Stacking.
   Added during the import: these grids are fixed two-track layouts with no
   breakpoint in the source, so they overflow below roughly 620–660px. --- */
@media (max-width: 720px) {
  .fc-about-hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    justify-items: center;
    text-align: center;
  }
  .fc-about-hero .fc-about-hero-badges { justify-content: center; }
}

@media (max-width: 860px) {
  .fc-split { grid-template-columns: 1fr !important; gap: 32px !important; }
  .fc-split--media { justify-items: center; }
}

@media (max-width: 720px) {
  .fc-book-banner { grid-template-columns: 1fr !important; padding: 32px 24px !important; }
  .fc-form-row { grid-template-columns: 1fr !important; }
}

/* --- Focus visibility.
   Added during the import: the source has no focus styling, and the site is
   dark-on-dark, so keyboard focus was invisible. --- */
:focus-visible {
  outline: 2px solid var(--color-navy-300);
  outline-offset: 3px;
}

/* --- long-form prose (.fc-prose), used by the Insights section ---
 *
 * The one place on this site where styling is NOT inline, and deliberately so.
 * Everywhere else the HTML is written here by hand and mirrors a .dc.html
 * source one-to-one, so an inline style is diffable against the design. Prose
 * is generated from Markdown by tools/generate-pages.py: the elements are not
 * known in advance and there is no design source to diff against, so putting a
 * style attribute on every <p> would mean the renderer carried the type scale
 * around in string literals. Descendant selectors are the right tool here.
 *
 * Nothing inside .fc-prose carries an inline style, so the usual specificity
 * trap (an inline declaration outranking this file) does not apply and no
 * !important is needed. Keep it that way. */

.fc-prose {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}

.fc-prose > *:first-child { margin-top: 0; }

.fc-prose p { margin: 0 0 1.35em; }

.fc-prose h2,
.fc-prose h3,
.fc-prose h4 {
  font-family: var(--font-display);
  color: #ffffff;
  letter-spacing: -0.01em;
  /* scroll-margin so an in-page #anchor does not land under the sticky nav */
  scroll-margin-top: 160px;
}

.fc-prose h2 { font-size: 1.625rem; font-weight: 600; margin: 2.2em 0 0.6em; }
.fc-prose h3 { font-size: 1.25rem;  font-weight: 600; margin: 1.9em 0 0.5em; }
.fc-prose h4 { font-size: 1.0625rem; font-weight: 700; margin: 1.7em 0 0.45em; letter-spacing: 0.01em; }

.fc-prose strong { color: #ffffff; font-weight: 600; }
.fc-prose em { font-style: italic; }

.fc-prose a {
  color: var(--color-navy-200);
  border-bottom: 1px solid rgba(122, 155, 186, 0.4);
  transition: color 0.15s, border-color 0.15s;
}
.fc-prose a:hover { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.6); }

.fc-prose ul,
.fc-prose ol { margin: 0 0 1.35em; padding-left: 1.35em; }
.fc-prose li { margin-bottom: 0.5em; }
.fc-prose li::marker { color: var(--color-navy-300); }

.fc-prose blockquote {
  margin: 1.8em 0;
  padding: 18px 22px;
  background: rgba(122, 155, 186, 0.08);
  border-left: 3px solid var(--color-navy-300);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.fc-prose blockquote p { margin: 0; color: rgba(255, 255, 255, 0.85); }

.fc-prose hr {
  border: none;
  border-top: 1px solid rgba(192, 192, 192, 0.14);
  margin: 2.4em 0;
}

.fc-prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm, 4px);
  color: #ffffff;
}

.fc-prose pre {
  margin: 1.6em 0;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(192, 192, 192, 0.12);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.fc-prose pre code { padding: 0; background: none; font-size: 0.8125rem; line-height: 1.6; }

/* A rate table is wider than a phone. Scroll the table, never the page — a
   document that slides sideways under your thumb reads as broken. */
.fc-table-wrap { margin: 1.8em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.fc-prose table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.fc-prose th,
.fc-prose td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(192, 192, 192, 0.12);
  vertical-align: top;
}
.fc-prose th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(192, 192, 192, 0.22);
  white-space: nowrap;
}
.fc-prose tbody tr:last-child td { border-bottom: none; }

@media (max-width: 720px) {
  .fc-prose { font-size: 1rem; }
  .fc-prose h2 { font-size: 1.375rem; }
  .fc-prose h3 { font-size: 1.125rem; }
}

/* --- nav dropdown (.fc-nav-item / .fc-nav-panel) ---
 *
 * No JavaScript. It opens on :hover and on :focus-within, which means the
 * keyboard path works for free: tab to the parent link, keep tabbing, and
 * focus moving into the panel is what holds it open. Touch devices have no
 * hover, so a tap on the parent just navigates to the section index — which
 * lists everything the panel does, so nothing is unreachable.
 *
 * This is how the nav grows. A section with sub-pages adds one top-level item
 * and hangs the rest underneath: depth costs no width. */

.fc-nav-panel {
  position: absolute;
  top: 100%;
  left: -14px;
  /* The bar is 140px tall and the links sit centred in it, so top:100% leaves
     a gap between link and panel that the pointer would cross into nothing.
     The padding is the bridge — it is part of the hoverable area. */
  padding-top: 18px;
  min-width: 190px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.fc-nav-item:hover .fc-nav-panel,
.fc-nav-item:focus-within .fc-nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fc-nav-panel > a {
  display: block;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  background: rgba(14, 25, 42, 0.98);
  border: 1px solid rgba(192, 192, 192, 0.14);
  border-bottom: none;
  transition: background 0.15s, color 0.15s;
}
.fc-nav-panel > a:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.fc-nav-panel > a:last-child {
  border-bottom: 1px solid rgba(192, 192, 192, 0.14);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.45));
}
.fc-nav-panel > a:hover,
.fc-nav-panel > a:focus { background: rgba(122, 155, 186, 0.18); color: #ffffff; }

/* Respect a reduced-motion preference: the panel still appears, it just does
   not slide. */
@media (prefers-reduced-motion: reduce) {
  .fc-nav-panel { transition: none; transform: none; }
  .fc-nav-item:hover .fc-nav-panel,
  .fc-nav-item:focus-within .fc-nav-panel { transform: none; }
}