.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter+Tight:wght@400;500;600&display=swap');

/* Aeonik is a licensed font (not on Google Fonts) — upload the font files via
   Elementor → Site Settings → Custom Fonts (or Custom Code) and it will match
   these @font-face declarations. Until the files are uploaded, the stack below
   falls back to Fraunces/Inter Tight so the page still renders correctly. */
@font-face{
  font-family:"Aeonik";
  src:url("/fonts/Aeonik-Regular.woff2") format("woff2"),
      url("/fonts/Aeonik-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Aeonik";
  src:url("/fonts/Aeonik-Medium.woff2") format("woff2"),
      url("/fonts/Aeonik-Medium.woff") format("woff");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Aeonik";
  src:url("/fonts/Aeonik-Bold.woff2") format("woff2"),
      url("/fonts/Aeonik-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
  The Settlement Group, Inc. — Design System 2026
  Palette: SGI navy #2e5b7c · SGI deep navy #1e3d57 · SGI gold #c9a45a · Paper #fffaf9
  Type: Aeonik (display + body), falls back to Fraunces / Inter Tight
  ========================================================================== */

:root{
  --navy-900:#1e3d57; /* SGI deep navy */
  --navy-800:#2e5b7c; /* SGI navy */
  --navy-700:#3b6f8f;
  --navy-600:#5489a6;
  --navy-100:#e9f1f6;
  --navy-050:#f7fbfd;
  --gold-600:#b08c42;
  --gold-500:#c9a45a; /* SGI gold */
  --gold-100:#f4ead6;
  --gold-050:#faf5ea;
  --muted-on-dark: rgba(255,255,255,.9);
  --ink:#2b0708;
  --ink-soft:#6b3b3b;
  --paper:#fffaf9;
  --white:#ffffff;
  --line:#eadedc;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(20,40,58,.06),0 2px 8px rgba(20,40,58,.06);
  --shadow-md:0 2px 6px rgba(20,40,58,.07),0 12px 32px rgba(20,40,58,.10);
  --font-display:"Aeonik","Fraunces",Georgia,serif;
  --font-body:"Aeonik","Inter Tight","Segoe UI",Arial,sans-serif;
  --wrap:1160px;
  --wrap-narrow:820px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* Long unbroken strings (URLs, email addresses, long headings) must wrap rather
   than push the layout wider than the viewport on narrow screens. */
body{overflow-wrap:break-word}
h1,h2,h3,h4,p,li,a,td{overflow-wrap:break-word}
a{color:var(--navy-700)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold-500);outline-offset:2px;border-radius:4px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy-800);color:#fff;
  padding:.75rem 1.25rem;z-index:200;border-radius:0 0 var(--radius-sm) 0;text-decoration:none;
}
.skip-link:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 1.5rem}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy-800);line-height:1.22;margin:0 0 .75em;font-weight:600}
h1{font-size:clamp(1.9rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.15em}
ul,ol{padding-left:1.35rem}
li{margin-bottom:.5em}

.eyebrow{
  display:inline-block;font-family:var(--font-body);font-size:.8rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin-bottom:1rem;
}
.eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:var(--gold-500);vertical-align:middle;margin-right:.6rem}

/* Buttons */
.btn{
  display:inline-block;font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:.85rem 1.75rem;border-radius:999px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;
  min-height:48px;line-height:1.45;
}
.btn-primary{background:var(--navy-700);color:#fff}
.btn-primary:hover{background:var(--navy-800)}
.btn-gold{background:var(--gold-500);color:var(--navy-900)}
.btn-gold:hover{background:var(--gold-600);color:#fff}
.btn-outline{background:transparent;color:var(--navy-700);border-color:var(--navy-700)}
.btn-outline:hover{background:var(--navy-700);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:#fff;color:var(--navy-800)}
.btn:active{transform:translateY(1px)}

/* ===== Header / Navigation ===== */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px;max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0;flex:0 1 auto}
.brand-mark{display:none}
/* Header wordmark logo. Sized by height so the artwork keeps its aspect ratio;
   the negative vertical margins stop the tall logo from stretching the bar. */
.brand-icon{
  width:auto;height:100px;max-width:100%;object-fit:contain;display:block;
  background:none;padding:0;border-radius:0;margin:-10px 0 -30px;
}
/* Mobile header.
   The logo is a wide wordmark, so a height of 56px needs roughly 280px of
   width. On a phone the row only has ~200px left after the Menu button and
   the gutters, and because .brand may shrink, object-fit then scales the
   artwork down — the logo ends up far smaller than the height asks for.
   Sizing by WIDTH instead makes it as large as the row can actually hold,
   and the height follows the aspect ratio. Forced, because the theme and
   Elementor both ship header rules that outrank plain class .elementor-kit-6s. */
@media (max-width:980px){
  .site-header .brand{flex:0 1 auto!important;min-width:0!important}
  .site-header .header-inner{min-height:64px!important}
  .site-header .brand-icon{
    width:min(220px,54vw)!important;
    height:auto!important;
    max-width:none!important;
    margin:0!important;
    object-fit:contain!important;
  }
}
@media (max-width:640px){
  .site-header .header-inner{min-height:58px!important}
  .site-header .brand-icon{width:min(190px,52vw)!important}
}
@media (max-width:420px){
  .site-header .header-inner{min-height:54px!important}
  .site-header .brand-icon{width:min(160px,50vw)!important}
}

.footer-icon{width:auto;height:140px;max-width:100%;margin:0}
@media (max-width:900px){.footer-icon{height:120px}}
@media (max-width:560px){.footer-icon{height:100px}}
.footer-brand .brand-text{margin-left:.5rem}
.footer-brand a.brand{display:flex;align-items:center}
.brand-text{line-height:1.15}
.brand-name{display:block;font-family:var(--font-display);font-weight:600;color:var(--navy-800);font-size:1.08rem}
.brand-tag{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);font-weight:600}

.nav-toggle{
  display:none;background:none;border:2px solid var(--navy-700);border-radius:10px;
  padding:.5rem .7rem;color:var(--navy-800);font:inherit;font-weight:600;cursor:pointer;
}
.main-nav ul{list-style:none;margin:0;padding:0}
.main-nav > ul{display:flex;align-items:center;gap:.25rem}
.main-nav li{margin:0;position:relative}
.main-nav a,.main-nav .nav-btn{
  display:block;padding:.6rem .85rem;text-decoration:none;color:var(--ink);
  font-weight:500;font-size:.98rem;background:none;border:0;font-family:var(--font-body);
  cursor:pointer;border-radius:10px;white-space:nowrap;
}
.main-nav a:hover,.main-nav .nav-btn:hover{background:var(--navy-050);color:var(--navy-800)}
.main-nav a[aria-current="page"]{color:var(--navy-800);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold-500)}
.nav-btn::after{content:"";display:inline-block;margin-left:.45rem;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  padding:.5rem;display:none;z-index:110;
}
.dropdown a{padding:.6rem .8rem;border-radius:8px;font-size:.95rem;white-space:normal}
.main-nav ul.dropdown{display:none}
li.open > .dropdown{display:block}
.nav-cta{margin-left:.5rem}
.nav-cta .btn{padding:.6rem 1.3rem;font-size:.95rem;min-height:0}

/* Restore CTA pill inside nav (overrides .main-nav a reset) */
.main-nav .nav-cta .btn{background:var(--gold-500);color:var(--navy-900);border-radius:999px;padding:.6rem 1.3rem;font-weight:600}
.main-nav .nav-cta .btn:hover{background:var(--gold-600);color:#fff}

/* ==========================================================================
  Mobile navigation — 980px and below.
  Everything here lives inside the media query so the desktop header cascade
  is left exactly as authored above.
  ========================================================================== */
@media (max-width:980px){
  /* Matches the 1.25rem page gutter so the logo, burger and open menu all line
     up with the body copy below them. */
  .header-inner{padding:0 1.25rem;gap:.75rem}

  /* Burger toggle: three bars that fold into an X while the menu is open.
     The existing JS already flips aria-expanded, so that attribute drives the
     animation — no extra class or script is needed. The bordered box the
     button used to sit in is dropped; a bare icon reads lighter. */
  /* Gold pill matching .btn-gold. Every state is pinned because the theme
     tints its own button focus/active states magenta, and the browser adds a
     coloured tap highlight on touch — both would otherwise show through. */
  .site-header .nav-toggle{
    display:flex;flex:none;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;border:0;cursor:pointer;
    border-radius:10px;
    background:var(--gold-500)!important;
    color:var(--navy-900)!important;
    -webkit-tap-highlight-color:transparent;
  }
  .site-header .nav-toggle:hover,
  .site-header .nav-toggle:focus,
  .site-header .nav-toggle:active,
  .site-header .nav-toggle[aria-expanded="true"]{
    background:var(--gold-600)!important;
    color:#fff!important;
  }
  .nav-toggle-bars{
    position:relative;display:block;width:24px;height:2px;
    background:currentColor;border-radius:2px;transition:background .18s;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    content:"";position:absolute;left:0;width:24px;height:2px;
    background:currentColor;border-radius:2px;transition:transform .2s ease;
  }
  .nav-toggle-bars::before{top:-7px}
  .nav-toggle-bars::after{top:7px}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);max-height:80vh;overflow:auto;-webkit-overflow-scrolling:touch}
  .main-nav.open{display:block}
  /* The gutter lives on the list, not on each link, so the hairline dividers
     stop short of the screen edge instead of running into it. */
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 1.25rem}

  /* Barely-there hairline between top-level entries — enough to separate the
     rows, faint enough that six of them stacked don't read as a grid. Every
     row keeps its rule; the CTA's own margin below does the separating. */
  .main-nav > ul > li{border-bottom:1px solid rgba(30,61,87,.07)}
  .main-nav > ul > li:last-child{border-bottom:0}
  .main-nav a,.main-nav .nav-btn{
    padding:.9rem .25rem;width:100%;text-align:left;font-size:1rem;
    border-radius:0;background:none;
  }
  .main-nav a:hover,.main-nav .nav-btn:hover{background:none;color:var(--navy-800)}

  /* Parent rows read as headings; the chevron sits at the far right and flips
     when its group is open so the state is obvious at a glance. */
  .main-nav .nav-btn{
    display:flex;align-items:center;justify-content:space-between;
    font-weight:600;color:var(--navy-800);
  }
  .nav-btn::after{margin-left:auto;border-color:var(--gold-600);transition:transform .2s ease}
  li.open > .nav-btn::after{transform:rotate(-135deg) translateY(2px)}

  .dropdown{position:static;box-shadow:none;border:0;border-left:2px solid var(--gold-100);border-radius:0;margin:0 0 .6rem .35rem;padding:0;min-width:0}
  .dropdown a{padding:.65rem .9rem;font-size:.95rem;color:var(--ink-soft);border-radius:0}

  /* Current page marker.
     An underline is the wrong signal in a stacked list — it reads as a divider
     and collides with the group's left rule. Instead the row takes a soft gold
     tint and the segment of the group rule beside it turns solid gold, so the
     existing line becomes the indicator rather than fighting one. */
  .main-nav .dropdown a[aria-current="page"]{
    position:relative!important;
    background:var(--gold-050)!important;
    color:var(--navy-800)!important;
    font-weight:600!important;
    box-shadow:none!important;
  }
  .main-nav .dropdown a[aria-current="page"]::before{
    content:""!important;
    position:absolute!important;
    left:-2px!important;top:0!important;bottom:0!important;
    width:2px!important;
    background:var(--gold-500)!important;
  }

  /* Top-level current page: colour and weight instead of the desktop underline. */
  .main-nav > ul > li > a[aria-current="page"]{
    color:var(--gold-600)!important;
    font-weight:600!important;
    box-shadow:none!important;
  }

  /* The CTA needs real separation — with a dropdown expanded the last sub-link
     would otherwise sit right against the gold button.
     Selector must outrank `.main-nav li{margin:0}` declared above, which is
     (0,2,0) and silently beat a plain `.nav-cta` rule. */
  .main-nav > ul > li.nav-cta{
    margin:2.75rem 0 .5rem!important;
    border-bottom:0!important;
  }
  .nav-cta .btn{width:100%;text-align:center}
}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,164,90,.22),rgba(201,164,90,0) 65%);pointer-events:none;
}
.hero-inner{position:relative;padding:5.5rem 0 5rem}
.hero .eyebrow{color:var(--gold-500)}
.hero h1{color:#fff;max-width:22ch}
  .hero .lede,.hero h1.statement{color:var(--navy-050)}
.hero h1.statement{font-size:clamp(1.45rem,2.6vw,2.15rem);font-weight:500;max-width:60ch;line-height:1.45}
  .hero .lede{font-size:1.15rem;max-width:58ch;color:var(--navy-100)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

.page-hero{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));color:#fff}
.page-hero .hero-inner{padding:4rem 0 3.5rem}
.page-hero h1{color:#fff}
.page-hero .lede{color:var(--navy-100);font-size:1.12rem;max-width:62ch;margin:0}

/* ===== Sections ===== */
.section{padding:4.5rem 0}
.section-tint{background:var(--paper)}
.section-navy{background:var(--navy-800);color:var(--navy-050)}
.section-navy h2,.section-navy h3{color:#fff}
.section-head{max-width:760px;margin-bottom:2.5rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow::before{display:none}

/* Cards */
.card-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card h3{margin-top:1.1rem}
.card p{color:var(--ink-soft)}
.card .card-link{margin-top:auto;font-weight:600;text-decoration:none;color:var(--navy-700)}
.card .card-link::after{content:" →"}
.card .card-link:hover{color:var(--gold-600)}
.card-icon{
  width:52px;height:52px;border-radius:14px;background:var(--gold-050);
  display:grid;place-items:center;color:var(--gold-600);
}
.card-icon svg{width:26px;height:26px}

/* Two-column feature */
.feature{display:grid;gap:3rem;grid-template-columns:1.05fr .95fr;align-items:center}
.feature.reverse{grid-template-columns:.95fr 1.05fr}
.feature img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;object-fit:cover}
@media (max-width:860px){.feature,.feature.reverse{grid-template-columns:1fr}}

/* Highlight quote/callout */
.callout{
  background:var(--gold-050);border-left:4px solid var(--gold-500);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1.4rem 1.6rem;margin:1.75rem 0;
  font-family:var(--font-display);font-size:1.12rem;color:var(--navy-800);
}
.callout p:last-child{margin-bottom:0}

/* ===== Timeline (signature element) ===== */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:27px;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--gold-500),var(--navy-100))}
.timeline li{position:relative;padding:0 0 2.4rem 84px;margin:0}
.timeline li:last-child{padding-bottom:.25rem}
.step-num{
  position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;
  background:#fff;border:2px solid var(--gold-500);color:var(--navy-800);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.25rem;
  box-shadow:var(--shadow-sm);
}
.timeline h3{margin-bottom:.35rem}
.timeline p{color:var(--ink-soft);max-width:62ch;margin-bottom:0}
@media (max-width:560px){
  .timeline::before{left:21px}
  .timeline li{padding-left:64px}
  .step-num{width:44px;height:44px;font-size:1.05rem}
}

/* Numbered phase blocks */
.phase{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:2.2rem;margin-bottom:1.5rem}
.phase-label{font-family:var(--font-display);color:var(--gold-600);font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}
.phase h3{margin-bottom:.75rem}
.phase ul{color:var(--ink-soft)}

/* Definition list styling */
.def-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.def-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold-500);border-radius:var(--radius-sm);padding:1.6rem;box-shadow:var(--shadow-sm)}
.def-card h3{font-size:1.12rem;margin-bottom:.5rem}
.def-card p{color:var(--ink-soft);margin-bottom:0;font-size:1rem}

/* Case studies */
.case-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:2.2rem;display:flex;flex-direction:column}
.case-gain{font-family:var(--font-display);font-size:2rem;color:var(--navy-800);font-weight:700;margin:0 0 .15rem}
.case-gain-label{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-600);font-weight:600;margin-bottom:1.1rem}
.case-card h3{margin-bottom:.75rem}
.case-card p{color:var(--ink-soft);margin-bottom:0}

/* FAQ accordion */
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:1rem;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.2rem 1.5rem;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--navy-800);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--gold-600);line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .faq-body{padding:0 1.5rem 1.4rem;color:var(--ink-soft)}
.faq .faq-body p:last-child,.faq .faq-body ul:last-child{margin-bottom:0}

/* Chip lists (compliance states) */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0;padding:0;list-style:none}
.chip-row li{margin:0;background:var(--navy-050);border:1px solid var(--navy-100);color:var(--navy-800);font-weight:600;font-size:.9rem;padding:.35rem .8rem;border-radius:999px}
.rule-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.8rem;margin-bottom:1.4rem}
.rule-card h3{font-size:1.1rem;margin-bottom:.35rem}
.rule-card p{color:var(--ink-soft);margin-bottom:0}

/* Disclosure list */
.disclosure-list{list-style:none;padding:0;counter-reset:disc}
.disclosure-list li{
  counter-increment:disc;position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:1.3rem 1.5rem 1.3rem 4.2rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);color:var(--ink-soft);
}
.disclosure-list li::before{
  content:counter(disc,decimal-leading-zero);position:absolute;left:1.3rem;top:1.25rem;
  font-family:var(--font-display);font-weight:700;color:var(--gold-500);font-size:1.05rem;
}

/* Prose (long-form / blog / legal) */
.prose{max-width:var(--wrap-narrow)}
.prose img{border-radius:var(--radius);box-shadow:var(--shadow-md);margin:2rem 0}
.prose ul{color:var(--ink-soft)}

/* Blog */
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:2.2rem;transition:transform .18s,box-shadow .18s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.post-meta{font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-600);font-weight:600;margin-bottom:.6rem}
.post-card h2{font-size:1.35rem;margin-bottom:.7rem}
.post-card h2 a{text-decoration:none;color:var(--navy-800)}
.post-card h2 a:hover{color:var(--navy-600)}
.post-card p{color:var(--ink-soft)}
.blog-layout{display:grid;gap:3rem;grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:900px){.blog-layout{grid-template-columns:1fr}}
.sidebar-widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;margin-bottom:1.5rem}
.sidebar-widget h2{font-size:1.05rem;margin-bottom:.8rem}
.sidebar-widget ul{list-style:none;padding:0;margin:0}
.sidebar-widget li{margin-bottom:.6rem;font-size:.97rem}
.post-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;flex-wrap:wrap}
.post-nav a{font-weight:600;text-decoration:none}

/* Forms */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:2.4rem}
.form-grid{display:grid;gap:1.2rem;grid-template-columns:1fr 1fr}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.4rem;color:var(--navy-800)}
input,select,textarea{
  width:100%;font:inherit;padding:.8rem 1rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);min-height:48px;
}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--navy-600);background:#fff}
.form-note{font-size:.9rem;color:var(--ink-soft)}

/* Contact info */
.contact-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.contact-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm)}
.contact-tile h3{font-size:1.05rem;margin-bottom:.4rem}
.contact-tile p{margin:0;color:var(--ink-soft)}
.contact-tile a{font-weight:600}

/* ===== Pre-footer CTA band ===== */
.cta-band{background:linear-gradient(150deg,var(--navy-900),var(--navy-700));color:var(--navy-050);padding:4.5rem 0}
.cta-band .wrap{display:grid;gap:3rem;grid-template-columns:1.05fr .95fr;align-items:center}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem)}
.cta-band .eyebrow{color:var(--gold-500)}
.cta-band ul{color:var(--navy-100);margin-bottom:1.75rem}
.cta-band .cta-panel{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:2.2rem;
}
@media (max-width:860px){.cta-band .wrap{grid-template-columns:1fr}}

/* ===== Footer ===== */
.site-footer{background:var(--navy-900);color:var(--muted-on-dark);padding:4rem 0 2rem;font-size:.97rem}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:1.4fr 1fr 1fr 1.2fr;margin-bottom:3rem}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h2{color:#fff;font-size:1rem;font-family:var(--font-body);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.55rem}
.site-footer a{color:var(--navy-100);text-decoration:none}
.site-footer a:hover{color:var(--gold-500)}
.footer-brand .brand-icon{background:none;padding:0;border-radius:0}
.footer-brand p{color:var(--navy-100);margin-top:1rem;max-width:36ch}
.site-footer li, .site-footer p, .site-footer span { color: var(--navy-050); }
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--navy-100);font-size:.9rem}

/* Breadcrumb */
.breadcrumb{font-size:.9rem;color:var(--navy-100);margin-bottom:1.1rem}
.breadcrumb a{color:var(--navy-100);text-decoration:none}
.breadcrumb a:hover{color:var(--gold-500)}

/* ==========================================================================
  Full-width guards — some of these class names (.site-header, .site-footer,
  .main-nav, .wrap) are common WordPress theme conventions and may collide
  with theme-provided CSS that boxes/centers them. Force full width here so
  the theme's rules can't re-introduce side margins on these elements.
  ========================================================================== */
body header.site-header,
body footer.site-footer,
body section.cta-band{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Layout guard — forces the header's brand+nav row back onto one line in
   case a theme rule with the same class name (.header-inner) overrides our
   display:flex and causes the logo and nav to stack instead of sit side by side. */
body .site-header .header-inner{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
}

/* ==========================================================================
  Mobile / tablet refinements
  The desktop spacing scale (4.5rem sections, 2.2rem card padding) leaves too
  little room for content once the viewport drops below tablet width, so the
  vertical rhythm and box padding tighten up in steps.
  ========================================================================== */
@media (max-width:860px){
  .section{padding:3.25rem 0}
  /* Extra breathing room at the top so the heading doesn't sit flush against
     the sticky header the moment the hero band begins. */
  .hero-inner{padding:4.75rem 0 3.25rem}
  .page-hero .hero-inner{padding:4rem 0 2.75rem}
  .cta-band{padding:3.25rem 0}
  .cta-band .wrap,.feature{gap:2rem}
  .section-head{margin-bottom:1.75rem}
  .site-footer{padding:3rem 0 1.75rem}
  .footer-grid{gap:2rem;margin-bottom:2rem}
  .card,.phase,.case-card,.post-card,.form-card,.cta-band .cta-panel{padding:1.6rem}
  .rule-card,.sidebar-widget{padding:1.4rem}
}

@media (max-width:560px){
  .section{padding:2.5rem 0}
  .hero-inner{padding:4rem 0 2.5rem}
  .page-hero .hero-inner{padding:3.5rem 0 2.25rem}
  .cta-band{padding:2.5rem 0}
  .cta-band .wrap,.feature,.card-grid,.def-grid,.contact-grid{gap:1.15rem}
  .card,.phase,.case-card,.post-card,.form-card,.cta-band .cta-panel{padding:1.35rem}
  .rule-card,.sidebar-widget,.contact-tile{padding:1.2rem}
  .callout{padding:1.1rem 1.2rem;margin:1.25rem 0;font-size:1.02rem}
  .hero .lede,.page-hero .lede{font-size:1.03rem}
  .post-card h2{font-size:1.18rem}
  .case-gain{font-size:1.7rem}
  /* The counter sits in the left gutter — shrink it so the text keeps its width. */
  .disclosure-list li{padding:1.1rem 1.2rem 1.1rem 3.2rem}
  .disclosure-list li::before{left:1.1rem;top:1.15rem;font-size:.95rem}
  /* Stacked and capped rather than edge to edge: natural widths would leave the
     two buttons ragged since one label is far longer than the other, while full
     width leaves "Contact Us" floating in an empty pill. */
  .hero-actions{flex-direction:column;align-items:stretch;gap:.7rem;max-width:300px}
  .hero-actions .btn{width:100%;text-align:center;padding:.8rem 1.25rem;font-size:.95rem;min-height:46px}
  .footer-bottom{flex-direction:column;gap:.6rem}
}

/* ==========================================================================
  Stacked media on narrow screens
  A floated portrait leaves body copy a column only a few characters wide once
  the viewport narrows, which hyphenates words mid-syllable and reads as broken.
  Below tablet width every floated or side-by-side image goes full width and the
  copy resumes underneath it. Covers WordPress alignment classes, inline float
  styles, and the two-column .feature/.bio patterns.
  ========================================================================== */
@media (max-width:780px){
  .alignleft,.alignright,.aligncenter,
  figure.alignleft,figure.alignright,
  .wp-caption.alignleft,.wp-caption.alignright,
  [style*="float:left"],[style*="float: left"],
  [style*="float:right"],[style*="float: right"]{
    float:none!important;
    display:block;
    width:100%;
    max-width:100%;
    margin:0 0 1.25rem!important;
  }
  .alignleft img,.alignright img,.aligncenter img,
  figure.alignleft img,figure.alignright img{width:100%;height:auto}

  /* Image + copy laid out as two columns collapses to one, image on top. */
  .bio,.profile,.team-member{display:block}
  .bio img,.profile img,.team-member img{
    float:none;width:100%;max-width:320px;height:auto;margin:0 0 1.25rem;
  }
}

/* ==========================================================================
  Single-column card grids on phones
  auto-fit will still place two tracks side by side whenever the container is
  wide enough for them, which on a phone leaves each card too narrow to read —
  headings wrap to three lines and the copy runs 12–15 characters wide. Below
  tablet width every card grid is pinned to one column so each card gets the
  full measure. Declared with !important because Elementor's own grid utilities
  are more specific than these class .elementor-kit-6s.
  ========================================================================== */
@media (max-width:780px){
  .card-grid,
  .def-grid,
  .contact-grid{
    grid-template-columns:1fr!important;
  }
}

/* Two-column bio block: portrait beside the copy on desktop, stacked below. */
.bio{display:grid;gap:2rem;grid-template-columns:280px minmax(0,1fr);align-items:start}
.bio img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.bio h3{margin-top:0}
.bio p:last-child{margin-bottom:0}

/* ==========================================================================
  Side gutters
  Elementor sections and many themes zero out container padding, which leaves
  copy running edge to edge against the screen on a phone. The gutter is forced
  back on every container so text always has margin either side.
  ========================================================================== */
@media (max-width:780px){
  .wrap,
  .wrap-narrow,
  .site-footer .wrap,
  .cta-band .wrap{
    padding-left:1.25rem!important;
    padding-right:1.25rem!important;
  }
}
@media (max-width:420px){
  .wrap,
  .wrap-narrow,
  .site-footer .wrap,
  .cta-band .wrap{
    padding-left:1.1rem!important;
    padding-right:1.1rem!important;
  }
}

/* ==========================================================================
  No gap under the header
  The first band of a page should begin immediately below the header. A white
  strip appears there when something above it contributes vertical space: the
  theme's margin on <main>, or the padding Elementor gives the container that
  wraps a pasted HTML widget. Both are cleared, but only for the element that
  opens the page — later sections keep their spacing.
  ========================================================================== */
main#content{margin-top:0!important;padding-top:0!important}
main#content > :first-child{margin-top:0!important}
.site-header + main,
.site-header + section,
.site-header + div{margin-top:0!important}

/* Elementor wraps a pasted HTML widget in its own padded container. */
main#content > .elementor-section:first-child,
main#content > .e-con:first-child,
main#content > .elementor-widget-html:first-child,
main#content .elementor-widget-html:first-child > .elementor-widget-container{
  margin-top:0!important;
  padding-top:0!important;
}

/* Final guard: nothing may make the page scroll sideways. `clip` rather than
   `hidden` because `hidden` turns body into a scroll container, which breaks
   the sticky header. */
body{max-width:100%;overflow-x:clip}/* End custom CSS */