/* =========================================================
   Visible Legal Marketing — Modern, Professional UI
   Mobile-first, CSP-safe. No HTML/JS changes required.
   Palette: Deep Trust Blue + clean neutrals.
   ========================================================= */

/* ---------- CSS Variables (theme) ---------- */
:root {
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --ink: #1F2937;
  --muted: #6B7280;

  --primary-700: #15345A;   /* Deep Trust Blue (dark) */
  --primary-600: #1B4A7A;   /* Deep Trust Blue */
  --primary-500: #235FA3;   /* Action hover */
  --primary-100: #E7EEF8;   /* Tinted bg */

  --accent-500: #29DBBD;    /* subtle accent if needed */
  --ok: #10B981;            /* success */
  --warn: #F59E0B;
  --danger: #EF4444;

  --ring: rgba(35, 95, 163, 0.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.16);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --container: 1100px;
  --container-pad: 20px;

  --header-h: 54px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.55 "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: inline-block; vertical-align: middle; }

/* Links */
a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Sections */
section { padding: 52px 0; }
.section-title {
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.subheadline, .about-intro { color: var(--muted); }

/* Cards */
.card, .service-card, .reason-card, .value-card {
  background: var(--surface);
  border: 1px solid rgba(2, 6, 23, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Buttons (generic) */
button, .btn, .cta-button, .primary-cta, .cta-option, .btn-primary, .btn-secondary, .btn-tertiary {
  -webkit-tap-highlight-color: transparent;
}
.cta-button, .primary-cta, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--primary-600);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform .06s ease, background .18s ease, box-shadow .18s ease;
}
.cta-button:hover, .primary-cta:hover, .btn-primary:hover { background: var(--primary-500); text-decoration: none; }
.cta-button:active, .primary-cta:active, .btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: #fff; color: var(--ink);
  border: 1px solid rgba(2, 6, 23, 0.12);
  padding: 10px 14px; border-radius: var(--radius-md);
}
.btn-tertiary {
  background: transparent; color: var(--muted);
  border: 1px dashed rgba(2, 6, 23, 0.18);
  padding: 10px 14px; border-radius: var(--radius-md);
}

/* =========================================================
   Header (auto-hide + shrink hooks preserved) — NO H-SCROLL
   ========================================================= */
   .site-header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(115%) blur(6px);
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(2,6,23,.05);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .site-header.is-hidden { transform: translateY(-100%); }
  .site-header.shrink { box-shadow: var(--shadow-sm); }
  
  .topbar {
    background: var(--primary-700); color: #E8EEF7;
    font-size: 12.5px;
  }
  .topbar .container { padding-block: 6px; text-align: center; font-size: 12px; }
  @media (max-width: 699px) {
    .topbar .container { padding-block: 4px; font-size: 11.5px; }
  }
  
  /* Add breathing room inside the header on phones */
  .header-inner { padding: 6px 0 2px; }
  @media (max-width: 699px) {
    .site-header .container { padding-inline: 18px; } /* was default 20, ensure header gets its own padding */
  }
  
  .header-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
  }
  
  /* Logo: slightly smaller by default; more shrink on scroll */
  .logo { width: 136px; height: auto; transition: transform .18s ease, opacity .18s ease; }
  .site-header.shrink .logo { transform: scale(.82); opacity: .98; }
  @media (max-width: 399px) {
    .logo { width: 124px; } /* very small phones */
  }
  
  /* ==============================
     NAV — wraps instead of scroll
     ============================== */
  .main-nav {
    display: flex;
    gap: 10px;
    padding: 6px 0 0;
    flex-wrap: wrap;                 /* allow wrapping */
    row-gap: 6px;                    /* pleasant vertical spacing when wrapping */
    justify-content: center;         /* center pills when they wrap */
    overflow: visible;               /* no scrollbars */
  }
  
  /* Base chip style (desktop/tablet) */
  .main-nav a {
    position: relative;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(2,6,23,.06);
    background: rgba(255,255,255,.7);
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease, background .15s ease;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 1 auto;                  /* let pills shrink a bit if needed */
    max-width: 100%;
  }
  
  /* Compact chips on phones to fit more per line */
  @media (max-width: 699px) {
    .main-nav { gap: 8px; row-gap: 6px; }
    .main-nav a { padding: 7px 10px; font-size: 14px; }
  }
  
  /* Ultra-compact on very small phones */
  @media (max-width: 399px) {
    .main-nav { gap: 6px; row-gap: 6px; }
    .main-nav a {
      padding: 6px 8px;
      font-size: 13px;
      border: 1px solid rgba(2,6,23,.05);
      background: rgba(255,255,255,.6);
    }
  }
  
  /* Hover/active feel */
  .main-nav a:hover {
    border-color: rgba(35,95,163,.25);
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.10);
    text-decoration: none;
  }
  .main-nav a:active { transform: translateY(1px); }
  
  /* Accessible focus ring */
  .main-nav a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(35,95,163,.28);
  }
  
  /* Animated underline */
  .main-nav a::after {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg, rgba(21,52,90,.0), rgba(35,95,163,.9), rgba(21,52,90,.0));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
    border-radius: 2px;
  }
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after { transform: scaleX(1); }
  
  /* CTA dropdown preserved; slightly slimmer on phones */
  .cta-dropdown { position: relative; }
  .cta-dropdown .cta-button {
    padding: 10px 12px;
    background: var(--primary-600);
    border-radius: 999px;
  }
  @media (max-width: 699px) {
    .cta-dropdown .cta-button {
      padding: 8px 11px;             /* slimmer CTA to free horizontal space */
      font-size: 14px;
    }
  }
  
  /* Dropdown menu unchanged */
  .dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 220px; background: #fff;
    border: 1px solid rgba(2,6,23,0.08); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); padding: 8px; list-style: none; margin: 0;
  }
  .dropdown-menu.hidden { display: none; }
  .dropdown-menu li a {
    display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink);
  }
  .dropdown-menu li a:hover { background: var(--primary-100); text-decoration: none; }
  
  /* Desktop refinements remain */
  @media (min-width: 700px) {
    .logo { width: 168px; }
    .header-inner { padding: 8px 0 4px; }
    .main-nav { gap: 12px; row-gap: 0; flex-wrap: nowrap; } /* back to single row */
    .main-nav a { padding: 8px 14px; }
  }
  @media (min-width: 980px) {
    .logo { width: 180px; }
  }

  /* ===== Remove persistent focus glow on mobile nav pills ===== */
@media (hover: none) {
  .main-nav a:focus,
  .main-nav a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Also hide the underline after tap */
  .main-nav a:focus::after,
  .main-nav a:focus-visible::after {
    transform: scaleX(0) !important;
  }
}

  

/* =========================================================
   Hero — mobile-first breathing room + sleeker CTAs
   ========================================================= */
   .hero-section {
    background: linear-gradient(180deg, #fff 0%, #F7FAFF 100%);
    border-bottom: 1px solid rgba(2,6,23,0.06);
  }
  
  /* Give the hero its own generous side padding on small screens
     (respects notches via safe-area insets) */
  .hero-section .container {
    padding-left: max(clamp(16px, 5.5vw, 28px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 5.5vw, 28px), env(safe-area-inset-right));
  }
  
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
    padding: 20px 0 32px;                 /* a touch more breathing room */
  }
  
  /* Tweak heading for tiny devices – slightly taller line-height */
  .hero-text h1 {
    font-size: clamp(1.6rem, 4.6vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 6px 0 12px;
  }
  
  /* Subheadline a hair larger but softer color comes from existing vars */
  .hero-text .subheadline {
    font-size: 1rem;
  }
  
  /* CTA group remains single-column by default */
  .cta-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;                             /* a bit more space between pills */
    margin-top: 18px;
  }
  
  /* Sleeker CTA pills: lighter chrome, subtle elevation, smoother press */
  .cta-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--ink);
    border: 1px solid rgba(2,6,23,0.10);
    padding: 12px 16px;
    border-radius: 999px;                  /* fully rounded for “chip” look */
    font-weight: 700;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
    transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease, background .15s ease;
  }
  .cta-option:hover {
    border-color: rgba(35,95,163,0.25);    /* var(--primary-500) tint */
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,23,42,0.12);
    text-decoration: none;
  }
  .cta-option:active { transform: translateY(1px); }
  .cta-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring);
  }
  
  /* Keep hover “ring” behavior tidy without heavy wiggle */
  .cta-option:hover { text-decoration: none; }
  
  /* Hero image stays centered */
  .hero-image { display: grid; place-items: center; }
  
  /* --------- Small breakpoints for better layout on narrow phones --------- */
  @media (max-width: 399px) {
    .hero-text h1 { font-size: clamp(1.55rem, 5.4vw, 2.1rem); }
    .cta-option { padding: 11px 14px; font-size: 0.98rem; }
  }
  
  /* --------- When there’s just enough room, allow 2-up CTAs --------- */
  @media (min-width: 420px) and (max-width: 699px) {
    .cta-group { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  
  /* --------- Tablet/desktop keep your previous proportions --------- */
  @media (min-width: 700px) {
    .hero-inner {
      grid-template-columns: 1.1fr .9fr;
      gap: 22px;
      padding: 28px 0 36px;
    }
    .cta-group { grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
  

/* =========================================================
   Services — refined background + sleeker cards
   ========================================================= */
   .services-section {
    /* Subtle layered background: soft tint + faint radial glow */
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(35,95,163,0.06), transparent 60%),
      linear-gradient(180deg, #F7FAFF 0%, #F5F7FA 100%);
    border-top: 1px solid rgba(2,6,23,0.04);
    border-bottom: 1px solid rgba(2,6,23,0.04);
  }
  
  /* Give this section a bit more breathing room on phones */
  .services-section .container {
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }
  
  .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
  }
  
  /* Sleeker service “pills” */
  .service-card {
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(2,6,23,0.06);
    border-radius: 18px;                  /* rounder */
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
    transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  .service-card:hover {
    transform: translateY(-1px);
    border-color: rgba(35,95,163,0.20);   /* var(--primary-500) tint */
    box-shadow: 0 10px 26px rgba(15,23,42,0.12);
    background: #ffffff;
  }
  
  /* Icon chip with gentle sheen */
  .service-card .service-icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    color: var(--primary-600);
    background:
      linear-gradient(180deg, #ffffff, #F2F6FD);
    border: 1px solid rgba(35,95,163,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    margin-bottom: 10px;
  }
  
  /* Text rhythm */
  .service-card h3 {
    margin: 4px 0 6px;
    font-size: 1.06rem;
    letter-spacing: -0.01em;
  }
  .service-card p {
    color: var(--muted);
    margin: 0 0 10px;
  }
  
  /* Link affordance */
  .service-card a {
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
    border-bottom: 1px dashed rgba(35,95,163,0.35);
  }
  .service-card a:hover {
    border-bottom-color: transparent;
    text-decoration: none;
  }
  
  /* Responsive: 2-up then 3-up as space allows */
  @media (min-width: 520px) {
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  }
  @media (min-width: 980px) {
    .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .service-card { padding: 18px; border-radius: 20px; }
  }
  

/* =========================================================
   Why Choose Us — refined & sleek contrast section
   ========================================================= */
   .why-choose-us {
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(35,95,163,0.05), transparent 60%),
      linear-gradient(180deg, #FFFFFF 0%, #F9FBFE 100%);
    border-top: 1px solid rgba(2,6,23,0.04);
    border-bottom: 1px solid rgba(2,6,23,0.04);
    padding-top: 56px;
    padding-bottom: 56px;
  }
  
  .why-choose-us .container {
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }
  
  .reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 18px;
    align-items: stretch; /* ensures all cards equal height */
  }
  
  /* Sleeker reason “cards” */
  .reason-card {
    background: #fff;
    border: 1px solid rgba(2,6,23,0.06);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
    transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    display: flex;
    flex-direction: column;   /* keeps text + icon aligned vertically */
    justify-content: space-between;
  }
  
  .reason-card:hover {
    transform: translateY(-1px);
    border-color: rgba(35,95,163,0.20);
    box-shadow: 0 10px 26px rgba(15,23,42,0.10);
    background: #fff;
  }
  
  /* Text handling */
  .reason-title {
    margin-top: 12px;
    margin-bottom: 6px;
  }
  
  .reason-text {
    color: var(--muted-text, #6B7280);
    font-size: 0.95rem;
    line-height: 1.45;
    margin-top: 0.25rem;
    flex-grow: 1;
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4; /* ✅ modern, standards-based property */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  
  .reason-card:hover .reason-text {
    -webkit-line-clamp: unset;   /* expand on hover */
    line-clamp: unset; /* ✅ modern, standards-based property */
  }
  
  .reason-note {
    font-size: 0.8rem;
    color: var(--muted-text, #6B7280);
    margin-top: 0.5rem;
    line-height: 1.4;
  }

  .fee-more {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--muted-text, #6B7280);
  }
  
  .fee-more summary {
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
    list-style: none;
  }
  
  .fee-more summary::-webkit-details-marker {
    display: none;
  }
  
  .fee-body {
    margin-top: 6px;
    color: var(--muted-text, #6B7280);
    line-height: 1.45;
  }
  
  
  
  /* Icon chip — slightly translucent “glass” effect */
  .icon-wrapper {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--primary-600);
    background: linear-gradient(180deg, #F3F7FB, #E7EEF8);
    border: 1px solid rgba(35,95,163,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    margin-bottom: 10px;
  }
  
  /* Text rhythm */
  .reason-title {
    margin: 4px 0 6px;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
    font-weight: 700;
  }
  .reason-text {
    color: var(--muted);
    line-height: 1.55;
  }
  
  /* Subtle hover color accent (only title + icon) */
  .reason-card:hover .reason-title {
    color: var(--primary-600);
  }
  .reason-card:hover .icon-wrapper {
    background: linear-gradient(180deg, #FFFFFF, #E8F1FD);
    border-color: rgba(35,95,163,0.25);
  }
  
  /* Responsive: 2-up then 4-up */
  @media (min-width: 520px) {
    .reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  }
  @media (min-width: 980px) {
    .reasons-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .reason-card { padding: 20px; border-radius: 20px; }
  }
  

/* =========================================================
   Claims Process — clean mobile stack, sleek timeline
   ========================================================= */
   .claims-process {
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(35,95,163,0.05), transparent 60%),
      linear-gradient(180deg, #F7FAFF 0%, #F5F7FA 100%);
    border-top: 1px solid rgba(2,6,23,0.04);
    border-bottom: 1px solid rgba(2,6,23,0.04);
  }
  
  /* Section padding matches the newer sections */
  .claims-process .container {
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }
  
  .timeline {
    position: relative;
    display: grid;
    gap: 16px;
    margin-top: 16px;
    counter-reset: step;
  }
  
  /* Each step becomes a neat icon+text card with consistent grid */
  .timeline-step { position: relative; }
  
  .step-content {
    display: grid;
    grid-template-columns: 44px 1fr;          /* icon column + content */
    gap: 12px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(2,6,23,0.08);
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
    transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
  }
  
  .step-content:hover {
    transform: translateY(-1px);
    border-color: rgba(35,95,163,0.20);
    box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  }
  
  /* Icon chip — glassy/premium */
  .step-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    color: var(--primary-600);
    background: linear-gradient(180deg, #FFFFFF, #F2F6FD);
    border: 1px solid rgba(35,95,163,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  }
  
  /* Ensure SVGs fit neatly */
  .step-icon svg {
    width: 22px; height: 22px;
  }
  
  /* Titles and copy */
  .step-title {
    margin: 2px 0 6px;
    font-size: 1.06rem;
    letter-spacing: -0.01em;
    font-weight: 700;
  }
  .step-content p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
  }
  
  /* Connector between steps on mobile — soft line under each card */
  .timeline-step:not(:last-child)::after {
    content: "";
    display: block;
    height: 16px;                 /* space then arrow/next card */
  }
  
  /* Use the existing arrow nodes; make them subtle and aligned */
  .timeline-arrow {
    text-align: center;
    color: rgba(2,6,23,0.35);
    font-size: 18px;
    line-height: 1;
    margin: -6px 0 -2px;          /* pull arrows closer to cards */
  }
  
  /* ---------- Responsive timeline for larger screens ---------- */
  @media (min-width: 700px) {
    /* Two-column masonry feel with a central guide line */
    .timeline {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 22px;  /* row, column */
    }
    .timeline-arrow { display: none; } /* not needed on desktop/tablet */
  
    /* Draw a faint vertical spine between columns */
    .timeline::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(
        to bottom,
        rgba(35,95,163,0.0) 0%,
        rgba(35,95,163,0.12) 18%,
        rgba(35,95,163,0.12) 82%,
        rgba(35,95,163,0.0) 100%
      );
      transform: translateX(-0.5px);
      pointer-events: none;
    }
  
    /* Add slight inward padding so cards don't crash into the spine */
    .timeline-step:nth-child(odd) .step-content { margin-right: 8px; }
    .timeline-step:nth-child(even) .step-content { margin-left: 8px; }
  }
  
  /* Ultra-small phones tightening */
  @media (max-width: 399px) {
    .step-content { padding: 14px; border-radius: 16px; }
    .step-title { font-size: 1.02rem; }
  }
  
  /* Motion respect */
  @media (prefers-reduced-motion: reduce) {
    .step-content,
    .step-content:hover { transition: none; transform: none; }
  }

  /* ===== Claims Process: fix squished paragraph/auto-placement ===== */
.step-content {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr); /* prevent content shrink */
  gap: 12px;
  align-items: start;
}

/* Keep the icon in col 1; let it naturally span rows */
.step-icon {
  grid-column: 1;
  grid-row: 1 / span 2; /* h3 + p next to it */
}

/* Force title and paragraph into the content column */
.step-title,
.step-content p {
  grid-column: 2 / -1;
}

/* Tiny phones: slightly smaller icon column */
@media (max-width: 399px) {
  .step-content { grid-template-columns: 36px minmax(0, 1fr); }
  .step-icon svg { width: 20px; height: 20px; }
}

/* Remove desktop spine line in Claims Process */
@media (min-width: 700px) {
  .timeline::before { content: none !important; }
}

  

/* =========================================================
   Register Interest Form — premium, mobile-first
   ========================================================= */
   .interest-form-section {
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(35,95,163,0.05), transparent 60%),
      linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
    border-top: 1px solid rgba(2,6,23,0.04);
    border-bottom: 1px solid rgba(2,6,23,0.04);
  }
  .interest-form-section .container {
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }
  
  /* Card */
  .interest-form {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid rgba(2,6,23,0.08);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.10);
    padding: 18px;
  }
  
  /* Field groups */
  .form-group { display: grid; gap: 8px; margin-bottom: 14px; }
  label { font-weight: 700; letter-spacing: -0.01em; }
  
  /* Inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    appearance: none;
    background: #fff;
    border: 1px solid rgba(2,6,23,0.16);
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit; color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  input::placeholder, textarea::placeholder { color: #9CA3AF; }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px var(--ring);
    background: #fff;
  }
  
  /* Select arrow (pure CSS) */
  select {
    background-image:
      linear-gradient(45deg, transparent 50%, #6B7280 50%),
      linear-gradient(135deg, #6B7280 50%, transparent 50%);
    background-position:
      calc(100% - 16px) calc(1em + 4px),
      calc(100% - 12px) calc(1em + 4px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }
  
  /* Textarea */
  textarea { resize: vertical; min-height: 110px; }
  
  /* Helper text */
  .helper-text { margin: -2px 0 0; font-size: 0.92rem; color: var(--muted); }
  
  /* Checkboxes */
  input[type="checkbox"] {
    width: 18px; height: 18px; vertical-align: middle; accent-color: var(--primary-600);
  }
  .form-group > label > a { text-decoration: underline; }
  
  /* Turnstile + Submit */
  .form-actions {
    display: grid; gap: 10px; align-items: center; margin-top: 6px;
  }
  @media (min-width: 420px) {
    .form-actions {
      grid-template-columns: 1fr auto;    /* Turnstile then button */
      gap: 12px;
    }
  }
  .cta-button {
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
  }
  
  /* Messages */
  .form-error { color: var(--danger); margin: 8px 0 0; }
  .success-message { color: var(--ok); margin: 10px 0 0; }
  .hidden { display: none !important; }
  
  /* Honeypot — hide completely (keeps it in DOM for bots) */
  .hp-wrap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px,1px,1px,1px) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }
  
  /* Tiny screens */
  @media (max-width: 399px) {
    .interest-form { padding: 16px; border-radius: 18px; }
    .cta-button { padding: 11px 16px; font-size: 0.98rem; }
  }
  
  /* ===== Center Turnstile on small screens ===== */
@media (max-width: 419px) {
  .form-actions {
    display: grid;
    justify-items: center;   /* centers turnstile and button horizontally */
    text-align: center;      /* ensures alignment if any inline elements */
  }
  .form-actions .cf-turnstile {
    margin-bottom: 8px;      /* slight gap before button */
  }
}


/* =========================================================
   About / Our Values — premium, cohesive finish
   ========================================================= */
   .about-us {
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(35,95,163,0.05), transparent 60%),
      linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border-top: 1px solid rgba(2,6,23,0.04);
    border-bottom: 1px solid rgba(2,6,23,0.04);
    padding-top: 56px;
    padding-bottom: 56px;
  }
  
  .about-us .container {
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }
  
  .about-header {
    text-align: center;
    margin-bottom: 24px;
  }
  
  .about-header h2.section-title {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    margin-bottom: 8px;
  }
  
  .about-header p.about-intro {
    color: var(--muted);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
  }
  
  /* Grid of value cards */
  .values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
  }
  
  /* Each value “card” */
  .value-card {
    background: #fff;
    border: 1px solid rgba(2,6,23,0.06);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
    transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .value-card:hover {
    transform: translateY(-1px);
    border-color: rgba(35,95,163,0.20);
    box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  }
  
  /* Icon style — crisp and prominent */
  .value-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 12px;
    color: var(--primary-600);
    background: linear-gradient(180deg, #FFFFFF, #F1F5FA);
    border: 1px solid rgba(35,95,163,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    margin-bottom: 10px;
  }
  
  .value-card h3 {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 4px 0 8px;
  }
  
  .value-card p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
  }
  
  /* Hover accent on icon and heading */
  .value-card:hover .value-icon {
    background: linear-gradient(180deg, #FFFFFF, #E8F1FD);
    border-color: rgba(35,95,163,0.25);
  }
  .value-card:hover h3 {
    color: var(--primary-600);
  }
  
  /* Responsive columns */
  @media (min-width: 520px) {
    .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  }
  @media (min-width: 980px) {
    .values-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .value-card { padding: 20px; border-radius: 20px; }
  }
  
/* =========================================================
   Footer — modernised, high-contrast & accessible
   ========================================================= */
   .site-footer {
    background: radial-gradient(1200px 600px at 50% -10%, rgba(41,219,189,0.08), transparent 70%),
                linear-gradient(180deg, #0E1A2B 0%, #08101B 100%);
    color: #E6EDF7;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  
  .footer-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px clamp(16px, 5vw, 28px);
  }
  
  /* ---- Top grid ---- */
  .footer-top {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 700px) {
    .footer-top {
      grid-template-columns: 1.2fr .9fr .9fr 1.4fr;
      gap: 28px;
    }
  }
  
  /* ---- Dividers ---- */
  .footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 28px 0;
  }
  
  /* ---- Branding block ---- */
  .brand-name {
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: 1.2rem;
    color: #FFFFFF;
  }
  .brand-tag {
    color: #BFD1EA;
    margin: 6px 0 12px;
    line-height: 1.4;
  }
  
  .reg-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  .badge, .badge-outline {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
  }
  .badge { background: rgba(255,255,255,0.12); }
  .badge-outline { background: transparent; }
  
  /* ---- Footer columns ---- */
  .footer-links h3,
  .footer-contact h3,
  .footer-compliance h3 {
    margin: 0 0 10px;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  
  .footer-links ul,
  .footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
  }
  
  /* ---- Links: brighter, easier to spot ---- */
  .footer-links a,
  .footer-contact a,
  .footer-compliance a,
  .foot-meta a {
    position: relative;
    color: #8CC5FF;                   /* brighter base */
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease, transform .08s ease;
  }
  .footer-links a::after,
  .footer-contact a::after,
  .footer-compliance a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 1px;
    background: rgba(140,197,255,0.4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
  }
  .footer-links a:hover,
  .footer-contact a:hover,
  .footer-compliance a:hover,
  .foot-meta a:hover {
    color: #29DBBD;                   /* teal accent */
    transform: translateY(-1px);
  }
  .footer-links a:hover::after,
  .footer-contact a:hover::after,
  .footer-compliance a:hover::after {
    transform: scaleX(1);
  }
  
  /* ---- Bottom bar ---- */
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    color: #BFD1EA;
    font-size: 0.92rem;
  }
  .foot-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .foot-meta a {
    color: #8CC5FF;
    text-decoration: none;
    font-weight: 500;
  }
  .foot-meta a:hover {
    color: #29DBBD;
  }
  
  /* ---- Small screens adjustments ---- */
  @media (max-width: 699px) {
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .footer-wrap { padding: 32px 18px; }
  }
  

/* =========================================================
   Sticky CTA (appears after hero)
   ========================================================= */
.sticky-cta {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 40;
  padding: 12px 18px; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-600), var(--primary-500));
  color: #fff; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.sticky-cta.visible { opacity: 1; pointer-events: auto; }

/* =========================================================
   Policy Modals (.modal) and Coming Soon (.comingsoon-modal)
   — premium glass, crisp panels, mobile-first (CLEAN)
   ========================================================= */

/* ---------- Shared backdrop behavior ---------- */
.modal.policy-modal,
.comingsoon-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(9,17,28,0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.modal.policy-modal.show,
.comingsoon-modal.show { opacity: 1; pointer-events: auto; }

/* ---------- Policy modal panel ---------- */
.modal.policy-modal .modal-content {
  width: min(720px, calc(100% - 40px));
  background: #fff;
  color: var(--ink);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.24);
  padding: clamp(16px, 4vw, 22px);
  max-height: 82vh;
  overflow: auto;
  transform: translateY(6px) scale(.992);
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.modal.policy-modal.show .modal-content { transform: none; }
.modal.policy-modal .modal-body { margin: 10px 0 16px; }
#close-privacy, #close-terms, #close-cookie-policy { width: 100%; }

/* ---------- Coming Soon modal panel ---------- */
.comingsoon-modal .modal-panel {
  margin: auto;
  position: relative;
  z-index: 1;
  width: min(720px, calc(100% - 40px));
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border-radius: 24px;
  border: 1px solid rgba(2,6,23,0.06);
  box-shadow: 0 30px 80px rgba(15,23,42,0.25);
  padding: clamp(22px, 4.5vw, 28px);
  transform: translateY(10px) scale(.985);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.comingsoon-modal.show .modal-panel { transform: none; }

/* ---------- Close button ---------- */
.modal-close {
  position: absolute; right: 14px; top: 14px;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(2,6,23,0.1);
  background: #fff; color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(15,23,42,0.12);
  transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease;
}
.modal-close:hover {
  transform: translateY(-1px);
  border-color: rgba(35,95,163,0.25);
  box-shadow: 0 14px 30px rgba(15,23,42,0.18);
}

/* ---------- Header ---------- */
.modal-header {
  display: grid; gap: 10px; margin-bottom: 18px; text-align: center;
}
.modal-icon {
  width: 60px; height: 60px; border-radius: 14px;
  display: grid; place-items: center; margin: 0 auto;
  color: var(--primary-600);
  background: linear-gradient(180deg, #E9F3FF, #D7E8FF);
  border: 1px solid rgba(35,95,163,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.modal-header h2 {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; margin: 0;
}
.modal-header p {
  color: var(--muted); margin: 0 auto; max-width: 560px; line-height: 1.6;
}

/* ---------- Choice grid & pills ---------- */
.choice-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px;
}
@media (min-width: 520px) {
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.pill {
  display: grid; gap: 6px; align-items: start; text-align: left;
  padding: 16px; border-radius: 18px;
  border: 1px solid rgba(2,6,23,0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  transition: transform .1s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.pill:hover {
  transform: translateY(-2px);
  border-color: rgba(35,95,163,0.25);
  background: linear-gradient(180deg, #FFFFFF, #F2F7FF);
  box-shadow: 0 12px 28px rgba(15,23,42,0.12);
}
.pill-title { font-weight: 700; color: var(--ink); font-size: 1rem; }
.pill-sub   { color: var(--muted); font-size: 0.93rem; line-height: 1.5; }

/* ---------- Divider ---------- */
.divider { height: 1px; background: rgba(2,6,23,0.08); margin: 18px 0; }

/* ---------- CTA row / button (HIGH CONTRAST TEXT) ---------- */
.cta-row { display: flex; justify-content: center; margin-top: 4px; }
.primary-cta {
  min-width: 220px;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;                /* stronger text */
  background: var(--primary-600);
  color: #ffffff !important;       /* force visible text */
  border: 1px solid rgba(0,0,0,0.0);
  box-shadow: 0 8px 24px rgba(35,95,163,0.28);
  text-decoration: none;
  text-align: center;
  transition: background .2s ease, transform .08s ease, box-shadow .25s ease, color .2s ease;
  /* optional subtle lift for readability on bright screens */
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.primary-cta:hover {
  background: var(--primary-500);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(35,95,163,0.32);
  color: #ffffff !important;
}
.primary-cta:active { transform: translateY(0); }

/* ---------- Links inside modals ---------- */
.modal.policy-modal .modal-content a,
.comingsoon-modal .modal-panel a {
  color: var(--primary-600);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(35,95,163,0.35);
}
.modal.policy-modal .modal-content a:hover,
.comingsoon-modal .modal-panel a:hover { border-bottom-color: transparent; }

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  .comingsoon-modal .modal-panel { border-radius: 18px; padding: 18px; }
  .pill { padding: 14px; }
  .primary-cta { min-width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .modal.policy-modal, .comingsoon-modal { transition: none; }
  .modal.policy-modal .modal-content, .comingsoon-modal .modal-panel { transition: none; transform: none; }
}

/* ---------- Safe-area nicety ---------- */
@supports(padding: max(0px)) {
  .modal.policy-modal .modal-content,
  .comingsoon-modal .modal-panel {
    padding-left: max(clamp(18px,4.5vw,26px), env(safe-area-inset-left));
    padding-right: max(clamp(18px,4.5vw,26px), env(safe-area-inset-right));
  }
}

/* ===== Invisible full-viewport modal backdrop (no white button) ===== */
.comingsoon-modal .modal-backdrop,
.modal.policy-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* sits under the panel */
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;

  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;

  -webkit-appearance: none;
  appearance: none;

  color: transparent;         /* hide any text nodes */
  font-size: 0;
  line-height: 0;

  cursor: pointer;            /* so users know they can click to close */
}

/* Ensure the panel is above the backdrop */
.comingsoon-modal .modal-panel,
.modal.policy-modal .modal-content {
  position: relative;
  z-index: 1;
}

/* Optional: remove focus ring on touch devices only */
@media (hover: none) {
  .comingsoon-modal .modal-backdrop:focus,
  .modal.policy-modal .modal-backdrop:focus {
    outline: none;
  }
}

/* =========================================================
   Dropdown Menu
   ========================================================= */

   /* ===== Fix: dropdown transparency bleed ===== */
.cta-dropdown {
  position: relative;
  z-index: 300;      /* higher than other header children */
  isolation: isolate; /* creates its own stacking context */
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: #fff; /* ensure solid background */
  border: 1px solid rgba(2,6,23,0.08);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15,23,42,0.12);
  padding: 8px;
  list-style: none;
  margin: 0;
  z-index: 310;                          /* above .cta-dropdown */
  pointer-events: auto;                  /* capture clicks */
}

.dropdown-menu.hidden { display: none; }

/* Strengthen link hit areas and ensure they capture clicks */
.dropdown-menu li a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  pointer-events: auto;
}
.dropdown-menu li a:hover {
  background: var(--primary-100);
  color: var(--primary-700);
  text-decoration: none;
}

/* When the menu is open, temporarily disable clicks on other header links */
.site-header:has(.dropdown-menu:not(.hidden)) .main-nav a,
.site-header:has(.dropdown-menu:not(.hidden)) .brand a,
.site-header:has(.dropdown-menu:not(.hidden)) .footer-links a {
  pointer-events: none;
}

/* But keep the dropdown itself clickable */
.site-header:has(.dropdown-menu:not(.hidden)) .dropdown-menu,
.site-header:has(.dropdown-menu:not(.hidden)) .dropdown-menu * {
  pointer-events: auto;
}

/* Optional: tiny interaction shield inside the header area to catch stray taps */
.site-header:has(.dropdown-menu:not(.hidden))::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%; bottom: auto;
  height: 20px;             /* small strip below header */
  pointer-events: auto;     /* blocks click-through immediately under header */
}



/* =========================================================
   Cookie Banner (ID + buttons preserved)
   ========================================================= */
#cookie-banner.cookie-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  background: #0E1A2B; color: #E6EDF7;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 14px;
}
.cookie-banner.hidden { display: none !important; }
.cookie-banner_inner { display: grid; gap: 12px; }
.cookie-text a { color: #B7D7FF; text-decoration: underline; }

.cookie-actions {
  display: grid; gap: 8px;
  grid-template-columns: 1fr;
}
#cookie-accept.btn-primary { background: #18A058; }
#cookie-accept.btn-primary:hover { background: #12824A; }

/* =========================================================
   Reveal/Fade Animations (class names preserved)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }

  .fade-in { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
  .fade-in.show { opacity: 1; transform: none; }

  .fade-in-up { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
  .fade-in-up.visible { opacity: 1; transform: none; }
}

/* =========================================================
   Responsive (tablet/desktop)
   ========================================================= */
@media (min-width: 700px) {
  .main-nav { justify-content: flex-start; gap: 18px; }

  .hero-inner {
    grid-template-columns: 1.1fr .9fr; gap: 22px; padding: 28px 0 36px;
  }
  .cta-group { grid-template-columns: repeat(3, minmax(0,1fr)); }

  .services-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
  .reasons-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }

  .timeline { gap: 18px; }
  .step-content { padding: 16px; }
  .interest-form { padding: 18px; }

  .footer-top {
    grid-template-columns: 1.2fr .9fr .9fr 1.6fr; gap: 20px;
  }

  .cookie-actions { grid-template-columns: 1fr 1fr auto; align-items: center; }
}

@media (min-width: 980px) {
  .logo { width: 200px; }
  .hero-text h1 { font-size: 2.6rem; }
  .section-title { font-size: 1.9rem; }
}

/* =========================================================
   Small utilities
   ========================================================= */
.visually-hidden {
  position: absolute !important; clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px; overflow: hidden;
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}