/* Shared across index.html, services.html and inside.html — the rules that were
   byte-identical in all three pages' inline <style> blocks. Linked before each
   page's own <style>, so page-specific rules still win at equal specificity,
   exactly as when these lived inline above them.

   Deliberately NOT a place for page-specific rules: anything that differs between
   the three pages stays inline on the page it belongs to. 404.html does not link
   this file — it is standalone by design and declares its own (root-absolute) subset.

   URLs here are root-absolute because they resolve against THIS file's location,
   not the linking page's. */

/* EB Garamond self-hosted (vendor/fonts/ebgaramond) — was fonts.googleapis.com/fonts.gstatic.com.
   Only the latin + latin-ext subsets are bundled (covers the site's English/French copy plus the
   "CRĒDO" Ē macron); weight 400 and 500 intentionally share one file per subset — Google serves the
   identical static instance for both weights in this typeface build, so there is nothing to gain by
   duplicating it. Weight 600 was requested by the old CDN URL but never actually used, so it's dropped. */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/vendor/fonts/ebgaramond/ebgaramond-regular-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/vendor/fonts/ebgaramond/ebgaramond-regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/vendor/fonts/ebgaramond/ebgaramond-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/vendor/fonts/ebgaramond/ebgaramond-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Garet self-hosted (vendor/fonts/garet) — was fonts.cdnfonts.com. Only the Book (400) weight is
   bundled; it's the only weight ever used (the "REPUTATION INFRASTRUCTURE" wordmark under the logo). */
@font-face { font-family: 'Garet'; font-style: normal; font-weight: 400; font-display: swap; src: url('/vendor/fonts/garet/garet-regular.woff2') format('woff2'); }

/* Brand accent. Each page's component republishes its own `accent` prop onto this
   property at mount (see syncAccent), so changing accent in a page's data-props
   recolours everything that reads var(--accent). The literal here is the same
   default the prop declares, so the accent is correct before any JS runs.

   This exists because style-hover= values skip the runtime's {{ }} interpolation
   entirely — collectProps in support.js pushes the raw attribute string straight
   into the generated :hover rule — so {{ accent }} silently does nothing there.
   var() works because CSS resolves it, not the template engine. */
:root {
  --accent: #cd5322;

  /* The rest of the palette CLAUDE.md documents as the design system. Names describe
     the role, not the colour, so a retint means editing this block only.
     Deliberately not exhaustive: one-off shades (the service-card gradient stops, the
     FAQ card ground, #f3efe7, and so on) stay literal where they are, and the many
     rgba() variants of navy and on-dark keep their alpha spellings rather than being
     rewritten as color-mix. */
  --navy: #0e2a45;        /* headings + dark section grounds + solid actions */
  --on-dark: #f0f8ff;     /* text and rules on navy */
  --body: #3a4a5c;        /* body copy on light */
  --eyebrow: #596776;     /* small uppercase labels on light */
  --border: #cddbe8;      /* hairline rules and card borders on light */
  --surface-1: #f2f7fc;   /* light section ground, step 1 of the 3-step cycle */
  --surface-3: #e4eef7;   /* light section ground, step 3 of the 3-step cycle */
}

/* `clip`, not `hidden`: hidden would turn <html> into a scroll container, which
   breaks `position: sticky` descendants (services.html's accordion headers) and
   can swallow scroll-behavior. clip prevents horizontal panning without creating
   one. Also a backstop for any single element that paints past the viewport. */
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--surface-1); color: #121d2b; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent); }
/* :is(a, button) rather than a bare `a`: the Client Portal entry is a <button>, since
   it opens a modal rather than navigating. The class is the hook, not the element.
   :is() takes its most specific argument, so specificity is unchanged at (0,1,3). */
/* Colour lives here rather than inline on the button: `a { color }` / `a:hover` only
   reach the anchors, and an inline colour on the button would outrank any :hover rule
   anyway. The current-page link still overrides both from its own inline style. */
header nav :is(a, button).credo-navlink { position: relative; color: var(--navy); }
header nav :is(a, button).credo-navlink:hover { color: var(--accent); }
header nav :is(a, button).credo-navlink::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: -4px; height: 1px; background: currentColor; transition: left 0.3s ease, right 0.3s ease; }
header nav :is(a, button).credo-navlink:hover::after { left: 0; right: 0; }
::selection { background: var(--navy); color: var(--on-dark); }
.credo-consult-modal input, .credo-consult-modal select, .credo-consult-modal textarea { box-sizing: border-box; min-width: 0; }
.credo-consult-grid > label { min-width: 0; }
@keyframes credoMenuSlide { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
@keyframes credoMenuSlideOut { from { clip-path: inset(0 0 0% 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes credoConsultFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes credoConsultRise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }

/* ══════════ PHONE ══════════ */
@media (max-width: 768px) {
  header nav { display: none !important; }
  .credo-burger { display: flex !important; }
  footer > [style*="max-width: 1240px"] { padding: 34px 22px !important; }

  /* stack every multi-column grid */
  section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* section-heading grids (title + side paragraph, align-items: end) keep their 80px desktop
     column gap when stacked to one column — far too tall between title and paragraph on phone */
  section [style*="gap: 80px"][style*="align-items: end"] { gap: 24px !important; }

  h2[style] { font-size: 27px !important; }
  h3[style] { font-size: 21px !important; }

  .credo-cta-actions { flex-direction: column !important; width: 100% !important; }
  .credo-cta-actions button, .credo-cta-actions a { width: 100% !important; box-sizing: border-box !important; }

  /* consult form modal — was a fixed 2-column grid with 64px side padding, so on
     any phone width the second column (Email, Sector, the dropdown panel, even the
     close button) rendered off-screen with no way to reach it. Single column,
     tighter padding, fits inside the viewport. */
  .credo-consult-overlay { padding: 20px 12px !important; }
  .credo-consult-modal { padding: 40px 24px !important; }
  .credo-consult-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  /* keep the heading clear of the absolutely-positioned close button (44px + 24px offset) */
  .credo-consult-heading { padding-right: 56px !important; }
  /* scoped via .credo-consult-modal so it outranks the generic h2[style] rule above
     regardless of declaration order — the modal h2 carries an inline style */
  .credo-consult-modal .credo-consult-heading h2 { font-size: 26px !important; }
  /* iOS Safari zooms the whole page in when a focused field's text is under 16px,
     leaving the visitor scrolled sideways mid-form. The fields are 15px by design,
     so raise them to the threshold on phones only rather than changing the desktop
     type. !important because the fields carry inline React style, which beats any
     plain stylesheet rule regardless of specificity. */
  .credo-consult-modal input, .credo-consult-modal select, .credo-consult-modal textarea { font-size: 16px !important; }
}