/*
Theme Name:   PaperStreet Child (Fauri Law)
Theme URI:    https://www.faurilaw.ca/
Description:  Child theme for PaperStreet. Carries (A) the FL Landing design system, (B) the FL Landing structural overrides, and (C-H) the Fauri Law brand pass applied site-wide. Editing here never gets wiped by a PaperStreet update.
Author:       Fauri Law
Template:     paperstreet
Version:      1.8.1
*/

/* =====================================================================
   WEBFONTS  —  the Fauri Law typeface system (Google Fonts)
   Newsreader     : refined editorial serif (light 300–500) — headings, the
                    "Fauri Law" wordmark context, italic crimson accents,
                    roman numerals, step numbers.
   Hanken Grotesk : warm modern grotesk — body, eyebrows, labels, buttons, tables.
   Spectral       : the alternate "Classic" serif — to use it instead of
                    Newsreader, swap 'Newsreader' for 'Spectral' in the two
                    --heading-font-family / --fl-font-heading declarations below.
   Georgia is the system fallback if a webfont fails to load.
   PERF NOTE: @import is render-blocking. It works as-is, but for best speed move
   this to <link rel="preconnect"> + <link rel="stylesheet"> in the header, or a
   functions.php wp_enqueue_style. (Same font URL.)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300..500;1,6..72,300..500&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* =====================================================================
   HOW THIS FILE IS ORGANISED
   A. FL LANDING DESIGN SYSTEM      — the .fl-page-section styles (lets the
                                      17 landing pages eventually drop their
                                      inline <style> block; harmless duplicate
                                      until then).
   B. FL LANDING STRUCTURAL FIXES   — hide PaperStreet banner on landing pages,
                                      full-width, readable container, button win.
   C. BRAND COLOUR                  — cyan #00C9E3 -> crimson #171717
                                      (hover/pressed #A11F3C). Site-wide.
   D. BRAND NEUTRALS                — warm the greys (#F7F7F7 / #E9F5F7 ->
                                      #F7F6F5). White #FCFCFC stays the canvas.
   E. TYPEFACE SYSTEM               — Newsreader (serif) + Hanken Grotesk (sans):
                                      the exact brand type scale, site-wide.
   F. BRAND BUTTONS                 — crimson primary on light.
   G. BRAND INK                     — warm near-black #171717 for text.
   H. HOMEPAGE EXCEPTION            — "Why Us?" expanded accordion = WHITE.
   ===================================================================== */


/* =====================================================================
   A. FL LANDING DESIGN SYSTEM  (.fl-page-section)
   ===================================================================== */
.fl-page-section{
  --fl-highlight:#171717;
  --fl-font-heading: 'Newsreader', Georgia, "Times New Roman", serif;
  --fl-font-accent: 'Newsreader', Georgia, "Times New Roman", serif;
  --fl-font-body: 'Hanken Grotesk', "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fl-shadow-dark: 0 1px 2px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.25);
  font-family: var(--fl-font-body); color: #383838; background: transparent;
  line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; display: block;
}
.fl-page-section *{ box-sizing: border-box; }
.fl-page-section h1,.fl-page-section h2,.fl-page-section h3,.fl-page-section h4{
  font-family: var(--fl-font-heading); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 16px; line-height: 1.1;
}
.fl-page-section h1{ font-size: clamp(2.7rem, 6vw, 4.6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
.fl-page-section h2{ font-size: clamp(2.0rem, 3.5vw, 3.3rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.fl-page-section h3{ font-size: 1.4rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.fl-page-section h4{ font-size: 1.05rem; font-weight: 600; font-family: var(--fl-font-body); letter-spacing: 0.01em; }
.fl-page-section p{ margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.68; }
.fl-page-section ul{ margin: 0 0 16px; padding-left: 1.2rem; }
.fl-page-section li{ margin-bottom: 6px; font-size: 1.0625rem; line-height: 1.68; }
.fl-page-section .fl-def ul li::before,
.fl-page-section .fl-hero-aside li::before,
.fl-page-section .fl-matters-col li::before,
.fl-page-section .fl-bestfor li::before,
.fl-page-section .fl-scoped-list li::before{ content: none !important; }
.fl-container{ width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.fl-section{ padding: clamp(56px, 8vw, 112px) 0; }
.fl-section--light-0{ background-color:#F7F6F4; color:#383838; }
.fl-section--light-1{ background-color:#F7F6F4; color:#383838; }
.fl-section--white  { background-color:#FCFCFC; color:#383838; }
.fl-section--light-0 h1,.fl-section--light-0 h2,.fl-section--light-0 h3,.fl-section--light-0 h4,
.fl-section--light-1 h1,.fl-section--light-1 h2,.fl-section--light-1 h3,.fl-section--light-1 h4,
.fl-section--white   h1,.fl-section--white   h2,.fl-section--white   h3,.fl-section--white   h4{ color:#383838; }
.fl-section--light-0 > .fl-container p,
.fl-section--light-1 > .fl-container p,
.fl-section--white   > .fl-container p,
.fl-section--light-0 > .fl-container li,
.fl-section--light-1 > .fl-container li,
.fl-section--white   > .fl-container li{ color:#5F5A54; }
.fl-section--dark-0{ background-color:#171717; color:#F7F6F5; }
.fl-section--dark-1{ background-color:#171717; color:#F7F6F5; }
.fl-section--dark-2{ background-color:#1F1F1F; color:#F7F6F5; }
.fl-section--dark-0 h1,.fl-section--dark-0 h2,.fl-section--dark-0 h3,.fl-section--dark-0 h4,
.fl-section--dark-1 h1,.fl-section--dark-1 h2,.fl-section--dark-1 h3,.fl-section--dark-1 h4,
.fl-section--dark-2 h1,.fl-section--dark-2 h2,.fl-section--dark-2 h3,.fl-section--dark-2 h4{ color:#FCFCFC; }
.fl-section--dark-0 > .fl-container p,
.fl-section--dark-1 > .fl-container p,
.fl-section--dark-2 > .fl-container p,
.fl-section--dark-0 > .fl-container li,
.fl-section--dark-1 > .fl-container li,
.fl-section--dark-2 > .fl-container li{ color:rgba(247,246,245,0.82); }
.fl-page-section .fl-highlight{ color:#171717; font-style: italic; font-weight: 400; }
.fl-eyebrow{ display: inline-block; font-family: var(--fl-font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px; }
.fl-section--light-0 .fl-eyebrow,.fl-section--light-1 .fl-eyebrow,.fl-section--white .fl-eyebrow{ color:#343F40; }
.fl-section--dark-0 .fl-eyebrow,.fl-section--dark-1 .fl-eyebrow,.fl-section--dark-2 .fl-eyebrow{ color: rgba(247,246,245,0.66); }
.fl-badge{ display: inline-flex; align-items: center; gap: 10px; background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color:#F7F6F5; font-family: var(--fl-font-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; padding: 8px 14px; border-radius: 999px; margin-bottom: 24px; }
.fl-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background-color: rgba(188,41,73,0.72); display: inline-block; }
.fl-page-section .fl-btn,.fl-page-section a.fl-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; min-height: 48px;
  border-radius: 6px; border-style: solid; border-width: 1px; border-color: transparent;
  font-family: var(--fl-font-body); font-size: 0.94rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  text-decoration: none; cursor: pointer; box-shadow: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fl-page-section a.fl-btn-primary.fl-on-light{ background-color:#171717; color:#FCFCFC; border-color:#171717; }
.fl-page-section a.fl-btn-primary.fl-on-light:hover,.fl-page-section a.fl-btn-primary.fl-on-light:focus{ background-color:#2A2A2A; color:#FCFCFC; border-color:#2A2A2A; }
.fl-page-section a.fl-btn-primary.fl-on-light:focus-visible{ outline:2px solid #171717; outline-offset:3px; }
.fl-page-section a.fl-btn-primary.fl-on-dark{ background-color:#F7F6F5; color:#383838; border-color:#F7F6F5; }
.fl-page-section a.fl-btn-primary.fl-on-dark:hover,.fl-page-section a.fl-btn-primary.fl-on-dark:focus{ background-color:#FCFCFC; color:#383838; border-color:#FCFCFC; }
.fl-page-section a.fl-btn-primary.fl-on-dark:focus-visible{ outline:2px solid #171717; outline-offset:3px; }
.fl-page-section a.fl-btn-secondary.fl-on-light{ background-color:transparent; color:#383838; border-color:rgba(11,11,12,0.18); }
.fl-page-section a.fl-btn-secondary.fl-on-light:hover,.fl-page-section a.fl-btn-secondary.fl-on-light:focus{ background-color:rgba(11,11,12,0.04); color:#383838; border-color:rgba(11,11,12,0.35); }
.fl-page-section a.fl-btn-secondary.fl-on-light:focus-visible{ outline:2px solid #171717; outline-offset:3px; }
.fl-page-section a.fl-btn-secondary.fl-on-dark{ background-color:transparent; color:#F7F6F5; border-color:rgba(255,255,255,0.16); }
.fl-page-section a.fl-btn-secondary.fl-on-dark:hover,.fl-page-section a.fl-btn-secondary.fl-on-dark:focus{ background-color:rgba(255,255,255,0.06); color:#FCFCFC; border-color:rgba(255,255,255,0.28); }
.fl-page-section a.fl-btn-secondary.fl-on-dark:focus-visible{ outline:2px solid #171717; outline-offset:3px; }
.fl-page-section a.fl-link.fl-on-light{ color:#383838; text-decoration: underline; text-decoration-color: rgba(11,11,12,0.3); text-underline-offset: 4px; font-weight: 500; transition: color .2s ease, text-decoration-color .2s ease; }
.fl-page-section a.fl-link.fl-on-light:hover,.fl-page-section a.fl-link.fl-on-light:focus{ color:#343F40; text-decoration-color:#343F40; }
.fl-page-section a.fl-link.fl-on-light:focus-visible{ outline:2px solid #171717; outline-offset:3px; }
.fl-page-section a.fl-link.fl-on-dark{ color:#F7F6F5; text-decoration: underline; text-decoration-color: rgba(247,246,245,0.4); text-underline-offset: 4px; font-weight: 500; transition: color .2s ease, text-decoration-color .2s ease; }
.fl-page-section a.fl-link.fl-on-dark:hover,.fl-page-section a.fl-link.fl-on-dark:focus{ color:#FCFCFC; text-decoration-color:#FCFCFC; }
.fl-page-section a.fl-link.fl-on-dark:focus-visible{ outline:2px solid #171717; outline-offset:3px; }
.fl-cta-row{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.fl-hero{ border-bottom: 1px solid rgba(255,255,255,0.08); }
.fl-hero-grid{ display: grid; grid-template-columns: 1.2fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.fl-hero-lead{ color:#F7F6F5; font-size:1.22rem; line-height:1.55; max-width:640px; }
.fl-hero-positioning{ color:rgba(247,246,245,0.82); max-width:640px; }
.fl-hero-meta{ display: flex; gap: 24px; flex-wrap: wrap; padding-top: 32px; margin-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); }
.fl-hero-meta-item{ min-width: 140px; }
.fl-hero-meta-item .fl-eyebrow{ margin-bottom: 6px; color: rgba(247,246,245,0.66); }
.fl-hero-meta-item p{ margin: 0; color:#F7F6F5; font-family: var(--fl-font-heading); font-size: 0.98rem; }
@media (max-width: 900px){ .fl-hero-grid{ grid-template-columns: 1fr; } }
.fl-hero-aside{ background-color:#2A2A2A; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 28px; box-shadow: var(--fl-shadow-dark); color:#F7F6F5; }
.fl-hero-aside h4{ margin: 0 0 12px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(247,246,245,0.66); font-family: var(--fl-font-body); }
.fl-hero-aside ul{ list-style: none; padding: 0; margin: 0; }
.fl-hero-aside li{ padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.96rem; display: flex; justify-content: space-between; gap: 12px; color:#F7F6F5; }
.fl-hero-aside li:last-child{ border-bottom: none; }
.fl-hero-aside li span:first-child{ color: rgba(247,246,245,0.82); }
.fl-hero-aside li span:last-child{ color:#FCFCFC; font-family: var(--fl-font-heading); font-style: italic; text-align:right; }
.fl-parent{ display:flex; flex-wrap:wrap; align-items:center; gap: 8px 14px; margin-top: 26px; padding: 14px 18px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius: 10px; max-width: 640px; }
.fl-parent .fl-parent-label{ font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: rgba(247,246,245,0.66); font-weight:600; }
.fl-parent .fl-parent-text{ color: rgba(247,246,245,0.85); font-size:0.95rem; flex:1 1 260px; }
.fl-section-head{ max-width: 820px; margin-bottom: 48px; }
.fl-section-head p{ font-size: 1.125rem; }
.fl-section--light-0 .fl-section-head p,.fl-section--light-1 .fl-section-head p,.fl-section--white .fl-section-head p{ color:#5F5A54; }
.fl-section--dark-0 .fl-section-head p,.fl-section--dark-1 .fl-section-head p,.fl-section--dark-2 .fl-section-head p{ color: rgba(247,246,245,0.82); }
.fl-def{ display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.fl-def p{ color:#5F5A54; }
@media (max-width: 820px){ .fl-def{ grid-template-columns: 1fr; } }
.fl-def--dark p, .fl-def--dark li{ color: rgba(247,246,245,0.82); }
.fl-matters{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px){ .fl-matters{ grid-template-columns: 1fr; } }
.fl-matters-col{ background-color:#2A2A2A; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding: 30px; box-shadow: var(--fl-shadow-dark); }
.fl-matters-col h3{ color:#FCFCFC; font-family: var(--fl-font-body); font-weight:600; font-size: 1.05rem; letter-spacing:0.01em; margin: 0 0 18px; }
.fl-matters-col ul{ list-style:none; padding:0; margin:0; display:grid; gap: 11px; }
.fl-matters-col li{ display:grid; grid-template-columns: 20px 1fr; gap: 10px; align-items:start; color: rgba(247,246,245,0.85); font-size: 0.98rem; margin:0; line-height:1.45; }
.fl-matters-col .fl-mk{ color:#171717; line-height:1.45; }
.fl-bestfor-grid{ display:grid; grid-template-columns: 1.3fr 0.7fr; gap: 20px; align-items:start; }
@media (max-width: 820px){ .fl-bestfor-grid{ grid-template-columns: 1fr; } }
.fl-bestfor{ background-color:#2A2A2A; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding: 32px; box-shadow: var(--fl-shadow-dark); }
.fl-bestfor h3{ color:#FCFCFC; font-family: var(--fl-font-heading); font-weight:400; font-size: 1.4rem; line-height:1.2; margin: 0 0 18px; }
/* NOTE: canonical .fl-bestfor is a PLAIN disc list. The earlier 2-col grid
   (with a 20px marker column) dumped marker-less <li> text into the 20px
   track -> one word per line on every kit page. The one page that uses a
   marker grid (bespoke advisory) self-defines its own grid inline, so it is
   unaffected by this. */
.fl-bestfor ul{ list-style:none; padding:0; margin:0; }
.fl-bestfor li{ color: rgba(247,246,245,0.85); font-size: 0.97rem; margin:0 0 6px; }
.fl-bestfor .fl-mk{ color:#171717; line-height:1.45; }
.fl-routenote{ background-color:#1F1F1F; border:1px dashed rgba(255,255,255,0.18); border-radius:14px; padding: 28px; color: rgba(247,246,245,0.85); }
.fl-routenote h4{ color:#FCFCFC; font-family: var(--fl-font-body); font-weight:600; font-size: 1rem; margin: 0 0 10px; }
.fl-routenote p{ color: rgba(247,246,245,0.82); font-size: 0.96rem; margin: 0 0 14px; }
.fl-table-wrap{ overflow-x:auto; border:1px solid rgba(11,11,12,0.10); border-radius: 12px; background:#FCFCFC; }
table.fl-rtable{ width:100%; border-collapse: collapse; font-family: var(--fl-font-body); min-width: 680px; }
table.fl-rtable th, table.fl-rtable td{ text-align:left; padding: 16px 20px; border-bottom: 1px solid rgba(11,11,12,0.08); font-size: 0.97rem; vertical-align: top; }
table.fl-rtable thead th{ font-size:0.70rem; letter-spacing:0.14em; text-transform:uppercase; color:#343F40; font-weight:700; background:#F7F6F5; }
table.fl-rtable tbody tr:last-child td{ border-bottom: none; }
table.fl-rtable td:first-child{ font-weight:600; color:#383838; }
table.fl-rtable td{ color:#5F5A54; }
table.fl-rtable td .fl-fee{ display:inline-block; font-family: var(--fl-font-heading); font-style:italic; color:#343F40; white-space:nowrap; }
.fl-scoped{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px,5vw,64px); align-items:start; }
@media (max-width: 820px){ .fl-scoped{ grid-template-columns: 1fr; } }
.fl-scoped-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px){ .fl-scoped-list{ grid-template-columns: 1fr; } }
.fl-scoped-list li{ display:grid; grid-template-columns: 24px 1fr; gap: 10px; align-items:start; color: rgba(247,246,245,0.82); font-size: 0.96rem; margin:0; }
.fl-scoped-list .fl-sc-num{ font-family: var(--fl-font-heading); font-style:italic; color: rgba(247,246,245,0.62); }
.fl-steps{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid rgba(11,11,12,0.10); border-left: 1px solid rgba(11,11,12,0.10); }
@media (max-width: 900px){ .fl-steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .fl-steps{ grid-template-columns: 1fr; } }
.fl-step{ padding: 24px; border-right: 1px solid rgba(11,11,12,0.10); border-bottom: 1px solid rgba(11,11,12,0.10); background-color:#FCFCFC; color:#383838; }
.fl-step-num{ font-family: var(--fl-font-heading); font-style: italic; color:#343F40; font-size: 0.92rem; display: block; margin-bottom: 8px; }
.fl-step h3{ color:#383838; font-size: 1rem; font-family: var(--fl-font-body); font-weight: 600; margin: 0 0 8px; }
.fl-step p{ color:#5F5A54; margin: 0; font-size: 0.92rem; }
.fl-connect{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 820px){ .fl-connect{ grid-template-columns: 1fr; } }
.fl-card--dark{ background-color:#2A2A2A; border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--fl-shadow-dark); color:#F7F6F5; border-radius: 10px; padding: 26px; transition: border-color .2s ease; }
.fl-card--dark:hover{ border-color: rgba(255,255,255,0.12); }
.fl-card--dark h3{ color:#FCFCFC; font-family: var(--fl-font-heading); font-weight: 400; font-size: 1.4rem; line-height:1.2; margin: 0 0 10px; }
.fl-card--dark p{ color: rgba(247,246,245,0.82); font-size: 0.96rem; }
.fl-card--dark .fl-eyebrow{ color: rgba(247,246,245,0.66); }
.fl-final{ max-width: 860px; color:#F7F6F5; }
.fl-final p{ color: rgba(247,246,245,0.82); font-size: 1.15rem; }
.fl-final h2{ font-size: clamp(2.3rem, 4vw, 4rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; }
@media (prefers-reduced-motion: reduce){ .fl-page-section *{ transition: none !important; } }


/* =====================================================================
   B. FL LANDING STRUCTURAL FIXES  (landing-template pages only)
   ===================================================================== */
.fl-landing{ width:100%; max-width:none; margin:0; padding:0; }
.page-template-template-fl-landing #banner{ display:none !important; }   /* kill PaperStreet's duplicate page-title banner */
.fl-landing .fl-section{ width:100%; }                                   /* coloured bands span full width */
.fl-landing .fl-container{ width:100%; max-width:1180px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; box-sizing:border-box; } /* but text stays readable + centred */

/* Buttons inside landing content must beat PaperStreet's content-link rules */
.page-template-template-fl-landing #main a.fl-btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px !important; min-height:48px; border-radius:6px;
  border:1px solid transparent !important; font-weight:600 !important;
  text-decoration:none !important; line-height:1; box-shadow:none; cursor:pointer;
}
.page-template-template-fl-landing #main a.fl-btn-primary.fl-on-dark{ background-color:#F7F6F5 !important; color:#383838 !important; border-color:#F7F6F5 !important; }
.page-template-template-fl-landing #main a.fl-btn-primary.fl-on-dark:hover{ background-color:#FCFCFC !important; color:#383838 !important; border-color:#FCFCFC !important; }
.page-template-template-fl-landing #main a.fl-btn-secondary.fl-on-dark{ background-color:transparent !important; color:#F7F6F5 !important; border-color:rgba(255,255,255,0.28) !important; }
.page-template-template-fl-landing #main a.fl-btn-secondary.fl-on-dark:hover{ background-color:rgba(255,255,255,0.06) !important; color:#FCFCFC !important; }
.page-template-template-fl-landing #main a.fl-btn-primary.fl-on-light{ background-color:#171717 !important; color:#FCFCFC !important; border-color:#171717 !important; }
.page-template-template-fl-landing #main a.fl-btn-secondary.fl-on-light{ background-color:transparent !important; color:#383838 !important; border-color:rgba(11,11,12,0.35) !important; }


/* =====================================================================
   C. BRAND COLOUR  —  cyan #00C9E3  ->  crimson #171717
   (the live theme's accent is #00C9E3, NOT the 2020 PDF's #2EC1DC)
   ===================================================================== */

/* --- cyan TEXT / ICONS -> crimson --- */
h1 span.subtitle, h2 span.subtitle,
.content ol li::marker,
.content ul li:before,
.blue,
.reviews-star-icon,
.social-links a,
.youtube-player-inner:after, .videos-single:after,
.accordion-item-title:after,
.form-input-group label i,
.form-input-group a,
.button.no-button, button.no-button{ color:#171717; }

a:hover, a:focus,
.main-navigation-menu a:focus, .main-navigation-menu a:hover, .main-navigation-menu li:hover>a,
.pop-menu a:hover, .pop-menu a:focus,
#mobile-navigation a:hover, #mobile-navigation a:active, #mobile-navigation a:focus,
.mobile-navigation-close:focus, .mobile-navigation-close:hover,
.sidebar section ul li a:hover, .sidebar section ul li a:focus,
.sidebar .sidebar-cta a:hover, .sidebar .sidebar-cta a:focus,
#footer-navigation a:hover, #footer-navigation a:focus,
.footer-lower a:hover, .footer-lower a:focus,
.footer .footer-member a:hover, .footer .footer-member a:focus,
.footer-upper h2 a:hover, .footer-upper h2 a:focus,
.slick-arrow:hover, .slick-arrow:focus{ color:#171717; }

#mega-menu li:before, #desktop-navigation .sub-menu li:before,
#desktop-navigation .sub-menu .menu-item-has-children>a:after,
.sidebar section ul li a:after{ color:#171717; }

#ctf.ctf-styles .ctf-author-screenname{ color:#171717 !important; }

/* --- cyan BACKGROUNDS -> crimson --- */
hr,
.header-mobile-buttons .mobile-menu-toggle,
.videos-single h2,
li.slick-active button:before{ background:#171717; }

.side-cta a.schedule,
#mega-menu li.active, #desktop-navigation .sub-menu li.active{ background:#171717; }

.pop-menu ul:not(.sub-menu) > li:not(.menu-item-has-children) a:after,
.sidebar .sidebar-cta a:after,
.footer-upper h2 a:after{ background:#BC2949; }

#skiptocontent{ background-color:#171717; }
.sidebar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color:#171717 !important; }

/* hover/pressed states -> darker crimson */
.header-mobile-buttons .mobile-phone:hover, .header-mobile-buttons .mobile-phone:focus,
.side-cta a.open-contact:hover, .side-cta a.open-contact:focus,
.slick-dots li:focus button:before, .slick-dots li:hover button:before{ background:#2A2A2A; }
.side-cta a.schedule:hover, .side-cta a.schedule:focus{ background:#171717; }

/* --- cyan BORDERS -> crimson --- */
button.outline, .button.outline{ border-color:#171717; color:#171717; }
button.outline:hover, button.outline:focus, .button.outline:hover, .button.outline:focus{ background:#171717; color:#FCFCFC; }
.results-slider-single{ border-color:#171717; }

/* --- footer newsletter (cyan) -> crimson --- */
.footer-upper .newsletter input{ color:#171717; border-color:#171717; }
.footer-upper .newsletter label{ color:#171717; }
.footer-upper .newsletter button{ background:#BC2949; }
.footer-upper .newsletter.active input{ color:#383838; border-color:#171717; }
.footer-upper .newsletter.active button{ background:#171717; }

/* --- logo hover tint was cyan; approximate crimson --- */
.header-logo:hover img, .header-logo:focus img,
body.scrolled .header-logo:hover img, body.scrolled .header-logo:focus img{
  filter: invert(17%) sepia(64%) saturate(3200%) hue-rotate(330deg) brightness(95%) contrast(96%);
}

/* CSS variables (defined by the theme; overridden for future-proofing) */
:root{ --secondary-color:#171717; --alternate-color:#171717; }


/* =====================================================================
   D. BRAND NEUTRALS  —  warm the greys (white #FCFCFC stays the canvas)
   #F7F7F7 (cool grey) and #E9F5F7 (cyan-tinted grey)  ->  #F7F6F5 (warm)
   ===================================================================== */
.sidebar section,
.sidebar .sidebar-cta,
.accordion-item,
.accordion-item.active,
.cta-single,
.reviews-container{ background:#F7F6F5; }
/* NOTE: .footer is intentionally NOT warmed here — it is dark; see Section I. */
.form-container input, .form-container textarea{ background:#F7F6F5; }
.mobile-navigation-top-inner{ background:#F7F6F5; }
#mobile-navigation ul li{ border-bottom-color:#F7F6F5; }
/* keep contact sidebar + form container white */
.sidebar.contact section{ background:#FCFCFC; }


/* =====================================================================
   E. TYPEFACE SYSTEM  —  Newsreader (display serif) + Hanken Grotesk (body/UI)
   The exact Fauri Law type spec, applied to the PaperStreet theme pages.
   (The landing design system in Section A carries the same scale on .fl-* classes.)

   ROLE            FONT        SIZE                 WT   TRACKING / LEADING
   Hero H1         Newsreader  clamp(2.9-5.6rem)    300  -0.025em / 1.0
   Final-CTA H2    Newsreader  clamp(2.3-4rem)      300  -0.025em / 1.05
   Section H2      Newsreader  clamp(2.0-3.3rem)    400  -0.02em  / 1.1
   Card H3         Newsreader  1.4rem               400  normal   / 1.2
   Column H3       Hanken      1.05rem              600  +0.01em
   Hero lead       Hanken      1.22rem              400  / 1.55
   Body            Hanken      1.02-1.16rem         400  / 1.65-1.7
   Eyebrow         Hanken      0.72rem              600  +0.20em uppercase
   Wordmark        Newsreader  1.18rem              400  +0.34em uppercase
   Table header    Hanken      0.70rem              700  +0.14em uppercase
   Buttons         Hanken      0.92-0.95rem         600  +0.01em
   To use the "Classic" serif (Spectral): swap 'Newsreader' -> 'Spectral' below.
   ===================================================================== */

/* --- families --- */
:root{
  --heading-font-family: 'Newsreader', Georgia, "Times New Roman", serif;
  --body-font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}
body, p, li, blockquote,
input, textarea, select, button, .button, label, address, figcaption{
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}
h1, h2, h3, h4, h5, h6{
  font-family: 'Newsreader', Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}
h3{ letter-spacing: 0; }

/* --- Hero H1 (homepage animated slider): light serif + tracking, but KEEP the
   theme's responsive sizing + line-height so the slider reveal animation that
   depends on them is not disturbed --- */
.home-slide-container .main-head{ font-weight: 400; letter-spacing: -0.02em; }

/* --- Section H2 (static homepage section headings) -> exact Section-H2 scale --- */
.what-container h2,
.why-us .left h2,
.cta-container .left h2,
.member h2{
  font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* the giant "What We Do" watermark keeps its own size but stays light serif */
.what-container .slide-heading{ font-weight: 300; letter-spacing: -0.025em; }

/* --- italic crimson accent words (.blue spans) -> Newsreader italic --- */
.blue{ font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; color:#171717; }

/* --- numerals as an editorial flourish: the big $ stat numbers -> italic
   Newsreader (kept crimson from Section J). Revert here if you'd rather they
   stay a bold sans. --- */
.single-transaction .number{ font-family: 'Newsreader', Georgia, serif; font-style: normal; font-weight: 300; }

/* --- eyebrows / wide-tracked uppercase sans labels --- */
.home-slide-container .sub-head{ font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; letter-spacing: 0.18em; }
.logos .content-container p{ font-family: 'Hanken Grotesk', sans-serif; }

/* --- a couple of theme spots that hardcode other faces -> Hanken --- */
.member-benefits p{ font-family: 'Hanken Grotesk', sans-serif; }

/* --- buttons -> Hanken 600 + slight positive tracking --- */
button, .button{ font-weight: 600; letter-spacing: 0.01em; }

/* --- optional text wordmark utility (the live logo is an SVG image, so this
   only takes effect if a text "Fauri Law" wordmark is used somewhere) --- */
.fl-wordmark{ font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 1.18rem; letter-spacing: 0.34em; text-transform: uppercase; }


/* =====================================================================
   F. BRAND BUTTONS  —  crimson primary on light
   ===================================================================== */
button, .button{ background-color:#BC2949; color:#FCFCFC; }
button:hover, button:focus, .button:hover, .button:focus{ background-color:#A11F3C; color:#FCFCFC; }
button.alt-01, .button.alt-01{ background-color:#BC2949; }
button.alt-01:hover, button.alt-01:focus, .button.alt-01:hover, .button.alt-01:focus{ background-color:#171717; color:#FCFCFC; }
.form-container button{ background:#BC2949; color:#FCFCFC; }
.form-container button:hover, .form-container button:focus{ background:#A11F3C; color:#FCFCFC; }


/* =====================================================================
   G. BRAND INK & DARK SURFACES  —  warm near-black, layered
   Text ink -> #171717. Dark surfaces use the brand's LAYERED scale
   (Dark-0 #171717 base / Dark-2 #1F1F1F for raised overlays) so menus
   that float above the page keep visible separation instead of becoming
   one flat black. (Old theme ink/surface = #171717.)
   ===================================================================== */

/* --- text ink --- */
body, p, .content li,
h1, h2, h3, h4, h5, h6,
a{ color:#383838; }
:root{ --body-text-color:#171717; --primary-color:#171717; }

/* --- page-level dark sections + dark button -> Dark-0 #171717 --- */
.module-dark{ background:#171717; }
button.alt-02, .button.alt-02{ background:#171717; }
button.alt-02:hover, button.alt-02:focus, .button.alt-02:hover, .button.alt-02:focus{ background:#2A2A2A; color:#FCFCFC; }

/* --- raised / overlay dark surfaces -> Dark-2 #1F1F1F --- */
#mobile-navigation,
#mobile-navigation .sub-menu,
#desktop-navigation .sub-menu li,
#mega-menu,
#mega-menu li,
.header-search,
.header-search-results,
.slide-contact,
.background-input input,
.background-input textarea,
.background-input select{ background-color:#1F1F1F; }

/* --- dark form-field text on the warm-alt surface (was #171717 background) --- */
.side-cta a{ background:#171717; }
.side-cta a.open-contact:hover, .side-cta a.open-contact:focus{ background:#2A2A2A; }


/* =====================================================================
   H. (moved) The homepage "Why Us?" accordion is handled in Section J,
   which targets PaperStreet's real .why-us selectors from homepage-style.css
   (open state + hover state). See Section J below.
   ===================================================================== */


/* =====================================================================
   I. DARK FOOTER  (site-wide)
   PaperStreet's footer is light grey by default; this makes it Dark-0
   #171717 with cream text, to anchor the page and carry the dark landing
   aesthetic all the way down. Link HOVERS are already crimson (Section C);
   this sets the RESTING colours for a dark background.
   NOTE: the embedded Twitter feed carries some inline styles + hardcoded
   SVG fills — do a quick legibility pass on the live footer after pasting.
   ===================================================================== */
.footer{ background:#171717; }

/* headings + primary text -> cream */
.footer h2, .footer h3,
.footer-upper h2 a,
.footer-upper .footer-column h3,
.footer-upper a.phone{ color:#F7F6F5; }

/* body / muted detail -> muted cream (was #707070 / #142039) */
.footer p,
.footer-upper p,
.footer-upper address span,
.footer-lower span,
#ctf p.ctf-tweet-text{ color:rgba(247,246,245,0.66); }

/* footer links resting -> cream (hover stays crimson from Section C) */
.footer a,
#footer-navigation a,
.footer .footer-member a{ color:rgba(247,246,245,0.66); }
.footer-lower a{ color:rgba(247,246,245,0.66); }

/* dividers -> dark hairline (were 4px #E8E8E8) */
.footer .footer-member,
.footer-upper,
.footer-mid{ border-bottom-color:rgba(255,255,255,0.10); }

/* newsletter signup: dark field, light border, CREAM submit (on-dark CTA rule) */
.footer-upper .newsletter input{ color:#F7F6F5; border-color:rgba(255,255,255,0.22); }
.footer-upper .newsletter input::placeholder{ color:rgba(247,246,245,0.5); }
.footer-upper .newsletter label{ color:rgba(247,246,245,0.66); }
.footer-upper .newsletter.active input{ color:#F7F6F5; border-color:rgba(255,255,255,0.4); }
.footer-upper .newsletter button{ background:#F7F6F5; color:#383838; }
.footer-upper .newsletter button:hover, .footer-upper .newsletter button:focus{ background:#FCFCFC; color:#383838; }
.footer-upper .newsletter.active button{ background:#F7F6F5; color:#383838; }

/* social icons: crimson resting, cream hover (footer-scoped) */
.footer .social-links a{ color:rgba(247,246,245,0.72); }
.footer .social-links a:hover, .footer .social-links a:focus{ color:#FCFCFC; }

/* Twitter feed on dark (inline styles -> !important needed) */
#ctf a{ color:rgba(247,246,245,0.66) !important; }
#ctf .ctf-author-name{ color:#F7F6F5 !important; }
#ctf.ctf-styles .ctf-author-screenname{ color:#171717 !important; }

/* footer logo: show only the white-reverse mark on dark, hide the dark one.
   If this hides the WRONG image, change nth-child(2) to nth-child(1). */
.footer-link img:nth-child(2){ display:none; }


/* =====================================================================
   I (cont.). DARK FOOTER — Twitter feed extra fixes
   The Smash Balloon widget hardcodes black SVG fills and a light #ddd
   divider (inline, !important). These reach the parts CSS colour can't.
   ===================================================================== */
#ctf .ctf-corner-logo svg path,
#ctf .ctf-header-follow svg path{ fill:rgba(247,246,245,0.5) !important; }
#ctf .ctf-quoted-tweet{ border-color:rgba(255,255,255,0.18) !important; }
#ctf .ctf-quoted-author-name{ color:#F7F6F5 !important; }
#ctf .ctf-quoted-author-screenname,
#ctf .ctf-quoted-tweet-text{ color:rgba(247,246,245,0.6) !important; }
#ctf .ctf-item, #ctf .ctf-header{ border-bottom-color:rgba(255,255,255,0.1) !important; }


/* =====================================================================
   J. HOMEPAGE MODULES  (homepage-style.css)  cyan #00C9E3 -> crimson
   homepage-style.css loads BEFORE this child theme, so these matched
   selectors win by source order — no !important needed.
   ===================================================================== */

/* hero slider: animated heading underline + CTA link underlines + hovers */
.home-slide-container .main-head:after,
.home-slide-container .sub-cta a:after{ background:#BC2949; }
.home-slide-container .sub-cta a:hover,
.home-slide-container .sub-cta a:focus{ color:#BC2949; }
.home-hero .home-slider-arrows button:hover,
.home-hero .home-slider-arrows button:focus{ color:#FCFCFC; }

/* main-content inline CTA */
.main-content-cta a:after{ background:#BC2949; }
.main-content-cta a:hover, .main-content-cta a:focus{ color:#BC2949; }

/* stat numbers ($6M / $9M / $7M) */
.single-transaction .number{ color:#6E6E6B; }

/* transactions "View Our Transactions" link */
.transactions-link a:after{ background:#BC2949; }
.transactions-link a:hover, .transactions-link a:focus{ color:#BC2949; }

/* "What We Do" lifecycle list: the ORIGINAL line-arrow design (blue-arrow.png) —
   a clean stroked shaft + open chevron head, medium weight (NOT a filled/bold block) —
   recreated as a crimson SVG so the colour is exact #171717 and it stays crisp.
   Positioning (absolute / right:0 / vertical-centre) inherited from homepage-style.css.
   To resize: change width/height. To thicken/thin: change stroke-width (now 3). */
.what-container .links a:after{
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='24' viewBox='0 0 46 24' fill='none' stroke='%23171717' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='12' x2='42' y2='12'/%3E%3Cpolyline points='30 3 42 12 30 21'/%3E%3C/svg%3E");
}
.what-container .links a:hover, .what-container .links a:focus{ color:#BC2949; }

/* "Start Your Matter" CTA link */
.cta-container .right a:after{ background:#BC2949; }
.cta-container .right a:hover, .cta-container .right a:focus{ color:#BC2949; }

/* WHY US accordion: OPEN = white (+ hairline); HOVER = subtle warm; icon crimson */
.why-us .accordion-item.active{ background:#FCFCFC; border:1px solid #E4E3E1; }
.why-us .accordion-item-title.active,
.why-us .accordion-item.active .accordion-item-title{ background:#FCFCFC; color:#383838; }
.why-us .accordion-item-title:hover,
.why-us .accordion-item-title:focus{ background:#EFEAE0; color:#383838; }
.why-us .accordion-item-title:hover:after,
.why-us .accordion-item-title:focus:after,
.why-us .accordion-item-title.active:after{ color:#171717; }
.why-us-container .accordion-item.active .accordion-item-content{ background:#FCFCFC; }

/* Toronto skyline backdrop (cyan line-art PNG) -> desaturated neutral */
.why-us-container:after{ filter:grayscale(1); }

/* "How We Deliver" dark band */
#main .member{ background:#171717; }
.member h2{ color:#FCFCFC; }
.member a{ color:#F7F6F5; }
.member a:hover, .member a:focus{ color:#FCFCFC; }
.member .cta-btn:after{ background:#BC2949; }
.member .cta-btn:hover:after, .member .cta-btn:focus:after{ background:#FCFCFC; }
/* recolour the cyan PNG icons to white line-art on the dark band */
.single-benefit img{ filter:brightness(0) invert(1) opacity(0.72); }

/* =====================================================================
   K. SUBPAGE MODULES  (css/subpage-style.css)  — interior pages
   subpage-style.css loads BEFORE this child theme, so matched selectors
   win by source order (no !important needed). Responsive guards added
   where the theme changes a value at a breakpoint.

      cyan  #00C9E3 / #00c9e3   -> crimson  #171717
      bright red  #E80924       -> crimson  #171717
      navy  #14172F / 20,23,47  -> near-black  #171717
      teal  15,133,119          -> near-black (translucent)
      cool grey  #F7F7F7        -> warm  #F7F6F5
      cyan-tint  #E9F5F7/#e5e8f6-> warm  #F7F6F5  (hairlines -> #E4E3E1)
      dark grey banner #171717  -> near-black  #171717
   ===================================================================== */

/* K1 — dark banners: near-black instead of warm grey */
.banner.banner-grey{ background:#171717; }
.single-attorneys .banner{ background-color:#171717; }

/* K2 — banner "Get Started" / member link: animated underline + hover */
.banner.banner-grey .member-content a:hover,
.banner.banner-grey .member-content a:focus,
.banner.banner-grey .practice-cta:hover,
.banner.banner-grey .practice-cta:focus{ color:#171717; }
.banner.banner-grey .member-content a:after,
.banner.banner-grey .practice-cta:after{ background:#BC2949; }

/* K3 — practice/attorney content tabs */
.content-tabs-row .content-tab-activate{ background-color:#F7F6F5; } /* mobile stacked inactive tab: warm */
.content-tabs-row .content-tab-activate:after{ color:#171717; }      /* caret: neutral (kills cyan) */
.content-tab-activate.active{ background:#171717; color:#FCFCFC; }    /* selected tab = crimson + white */
.content-tab-activate.active:after{ color:#FCFCFC; }                 /* caret on the selected tab */

/* K4 — blog: title hover, meta icons, "Share This", pagination */
.post-head h2 a:hover,
.post-head h2 a:focus{ color:#171717; }
.post-head-info i{ color:#171717; }                                  /* clock + user icons */
.post-bottom-share{ color:#171717; }                                 /* "Share This" */
.wp-pagenavi span.current{ color:#171717; }
.wp-pagenavi a:hover,
.wp-pagenavi a:focus{ color:#171717; }
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .first,
.wp-pagenavi .last{ color:#171717; }
.wp-pagenavi .previouspostslink:before{ color:#171717; }
.wp-pagenavi .nextpostslink:after{ color:#171717; }

/* K5 — attorney templates */
/* contact icons + quote marks (template A + generic fallback for other templates) */
.single-attorneys-template-a .attorney-banner-info i{ color:#171717; }
.single-attorneys-template-a .attorney-banner-info blockquote:before,
.single-attorneys-template-a .attorney-banner-info blockquote:after{ color:#171717; }
.attorney-banner-info i{ color:#171717; }
.attorney-banner-info blockquote:before,
.attorney-banner-info blockquote:after{ color:#171717; }
/* template B portrait card border */
.single-attorneys-template-b .attorney-banner-left{ border-color:#171717; }
/* attorneys landing background + search-bar hairlines (cyan-tint -> warm) */
.attorney-search-results,
.page-template-template-attorneys main{ background:#F7F6F5; }
.attorney-search-results-bar{ border-top-color:#E4E3E1; border-bottom-color:#E4E3E1; }
/* template D mobile portrait panel: warm on mobile, transparent on desktop (as theme intends) */
.attorney-banner-large-right{ background:#F7F6F5; }
@media screen and (min-width:900px){ .attorney-banner-large-right{ background:none; } }
/* attorney-grid name bar: navy at rest -> near-black; red on hover -> crimson */
.attorney-result-single .attorney-result-info{ background-color:#171717; }
.attorney-result-single:hover .attorney-result-info,
.attorney-result-single:focus .attorney-result-info{ background:#171717; }

/* K6 — practice tiles + about-page boxes: warm at rest, crimson fill on hover */
.practice-box{ background:#F7F6F5; }
.practice-box span{ color:#383838; }                                 /* rest label = ink, not link-crimson */
.practice-box:hover,
.practice-box:focus{ background:#171717; }                           /* theme already turns span white on hover */
.module-practices-d-single a{ background-color:#F7F6F5; }
.module-practices-d-single a:hover,
.module-practices-d-single a:focus{ background:#171717; color:#FCFCFC; }
.module-benefits-d-selectors .content-selector{ background:#F7F6F5; }
.module-benefits-d-selectors .content-selector:hover,
.module-benefits-d-selectors .content-selector:focus{ background:#171717; }
.module-benefits-d-selectors .content-selector:hover h2,
.module-benefits-d-selectors .content-selector:focus h2{ color:#FCFCFC; }

/* K7 — testimonials / reviews slider box: warm instead of cool grey */
.module-testimonials-b{ background-color:#F7F6F5; }

/* K8 — member block heading leak (subpage uses .member h3; Section J handled .member h2) */
.member h3{ color:#F7F6F5; }

/* K9 — legacy Contact-B office panel: cyan -> warm (custom Offices pages supersede this) */
.office-block-info{ background:#F7F6F5; }

/* K10 — long-form / chapter / table-of-contents templates (only if used):
   navy + cyan-tint surfaces -> near-black + warm; bright-red hover -> crimson */
.banner-xl{ background:#171717; background:linear-gradient(180deg,#171717 46%,#1F1F1F 100%); }
.single-chapter-banner{ background:#171717; }
.single-chapter:nth-child(2n){ background:#F7F6F5; }
.table-contents{ background:#F7F6F5; }
.table-contents-button-icon:hover,
.table-contents-button-icon:focus{ background:#171717; }
.attorney-template-c-tabs{ background:#171717; }
.content-tabs-anchor-links .content-tabs-row{ background:rgba(11,11,12,0.85); }
.content-tabs-anchor-links .content-tabs-row button:hover,
.content-tabs-anchor-links .content-tabs-row button:focus{ background:#171717; }

/* =====================================================================
   L. DARK ELEVATION PASS  — depth on dark via tone-by-role + faint light
   The earlier passes correctly DEBRANDED dark surfaces but landed almost
   everything on one flat #171717. This pass assigns each dark tone a job
   and adds a barely-perceptible "lit" gradient to the big heroes so they
   read as illuminated, not painted. Steps are intentionally tiny (~6-10
   points of lightness); the subtlety IS the design — do not amplify, and
   do not add a 5th ad-hoc dark.

      L0  #171717  ground      — hero floor, footer base
      L1  #171717  band        — full-width dark panels inside white pages
      L2  #1F1F1F  overlay     — menus / search / slide-out (already set, untouched)
      L3  #2A2A2A  top element — items sitting ON a dark surface (input, cards)
      hairline  rgba(255,255,255,0.08)   — edge / panel articulation
   ===================================================================== */

/* L-a — HERO SPOTLIGHT: faint top-centre light falling to ground, plus a
   clean hairline edge into the white content below. Solid #171717 first =
   graceful fallback for any engine that ignores the gradient. */
.banner.banner-grey,
.single-attorneys .banner{
	background:#171717;
	background:radial-gradient(125% 125% at 50% 0%, #1E1F23 0%, #131417 40%, #171717 72%);
	border-bottom:1px solid rgba(255,255,255,0.08);
}

/* L-b — CONTAINED DARK BAND ("How We Deliver" / member): raise L0 -> L1 so
   the band reads as a distinct panel within the white page, and articulate
   its top + bottom edges with a hairline. (Overrides the L0 set in Section J.) */
#main .member{
	background:#171717;
	border-top:1px solid rgba(255,255,255,0.08);
	border-bottom:1px solid rgba(255,255,255,0.08);
}

/* L-c — FOOTER: gentle top-down lift (L1 -> L0) over its height. Existing
   section dividers from Section I remain and are not duplicated. */
.footer{
	background:#171717;
	background:linear-gradient(180deg, #171717 0%, #171717 100%);
}

/* L-d — TOP ELEMENT on dark: the footer newsletter field gets an L3 fill +
   hairline so it lifts off the footer instead of floating transparently.
   (Cream text / cream submit button / focus-state border stay as Section I.) */
.footer-upper .newsletter input{
	background:#2A2A2A;
	border-color:rgba(255,255,255,0.14);
}


/* ===== PALETTE v1.7 — footer surface #383838 + heading tone #171717 ===== */
.footer{ background:#383838 !important; }
h1,h2,h3,h4,h5,h6{ color:#171717; }


/* ===== PALETTE v1.7.1 — opposite-colour hover on dark surfaces ===== */
.footer a:hover, .footer a:focus,
#footer-navigation a:hover, #footer-navigation a:focus,
.footer-lower a:hover, .footer-lower a:focus,
.footer .footer-member a:hover, .footer .footer-member a:focus,
.footer-upper h2 a:hover, .footer-upper h2 a:focus{ color:#FCFCFC; }


/* ===== PALETTE v1.7.2 — V7-style two-tone typography (live) =====
   On every heading that has a structural hook, split into two tones:
   one bright/dark emphasis + one dim/grey secondary — matching the samples. */

/* HERO (dark): line 1 bright, line 2 dim */
.home-slide-container .main-head{ color:#FCFCFC; }
.home-slide-container .sub-main{ color:rgba(247,246,245,0.6); }

/* LIGHT-section headings: dim lead-in + emphasis accent (.blue stays #171717) */
.what-container h2,
.cta-container .left h2,
.why-us-container .left h2{ color:#6E6E6B; }


/* ===== PALETTE v1.7.3 — crimson hovers on CTAs/services/sidebar, footer brighten, canvas + dark alignment ===== */

/* canvas: page background is the off-white #FCFCFC, not pure #FFFFFF */
html, body{ background-color:#FCFCFC; }

/* homepage hero text panel (mobile solid fill) aligned to the dark plan #171717 (was leftover #333132) */
@media screen and (max-width: 639px){ .home-slide-container{ background:#171717; } }

/* underlined CTAs -> crimson text on hover (member band, footer Free Consultation, practice banner) */
.member .cta-btn:hover, .member .cta-btn:focus{ color:#BC2949; }
.footer-upper h2 a:hover, .footer-upper h2 a:focus{ color:#BC2949; }
.banner.banner-grey .practice-cta:hover, .banner.banner-grey .practice-cta:focus{ color:#BC2949; }

/* What-We-Do service list: arrow also turns crimson on hover */
.what-container .links a:hover:after, .what-container .links a:focus:after{
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='24' viewBox='0 0 46 24' fill='none' stroke='%23BC2949' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='12' x2='42' y2='12'/%3E%3Cpolyline points='30 3 42 12 30 21'/%3E%3C/svg%3E");
}

/* footer links: dim cream at rest -> brighter shade on hover (hover #FCFCFC already set) */
#footer-navigation a{ color:rgba(247,246,245,0.66); }

/* sidebar links -> crimson on hover, site-wide */
.sidebar section ul li a:hover, .sidebar section ul li a:focus,
.sidebar .sidebar-cta a:hover, .sidebar .sidebar-cta a:focus{ color:#BC2949; }


/* ===== PALETTE/TYPE v1.7.4 — member combination, content links, nav highlight ===== */

/* member band 'How We Deliver' — colour combination on the dark ground */
.member .member-content p{ color:rgba(247,246,245,0.6); }
.member-benefits p, .member .single-benefit p{ color:rgba(247,246,245,0.85); }

/* blog + expertise: in-content hyperlinks -> crimson on hover */
#main .content a:hover, #main .content a:focus,
.entry-content a:hover, .entry-content a:focus,
.post-content a:hover, .post-content a:focus,
.single .content a:hover, .single .content a:focus{ color:#BC2949; }

/* navigation hover: light highlight + dark text (inverted; robust on any panel) */
.pop-menu a:hover, .pop-menu a:focus,
.main-navigation-menu a:hover, .main-navigation-menu a:focus, .main-navigation-menu li:hover>a{ background-color:#FCFCFC; color:#171717; }


/* ===== v1.7.5 — lawyer bio banner: contact icons (phone/email/etc.) -> light on dark banner ===== */
#banner i.fas, #banner i.fal, #banner i.far,
#banner .fa-phone, #banner .fa-envelope, #banner .fa-mobile, #banner .fa-mobile-alt,
#banner .fa-map-marker-alt, #banner .fa-linkedin-in, #banner .fa-linkedin,
.attorney-banner i, .attorney-info i, .attorney-details i, .attorney-contact i{ color:#FCFCFC; }