/* Centobin Law Office — home page */
body{margin:0;background:#fff;font-family:'Libre Franklin',system-ui,sans-serif;color:#1c2430;-webkit-font-smoothing:antialiased}
  *{box-sizing:border-box}
  a{color:#0b4a8f;text-decoration:none}
  a:hover{color:#c9a227}
  /* inline links inside body copy (charge/defence/process copy blocks,
     accordion answers, section leads, etc.) sit close in color to the
     surrounding prose — underline them so they're distinguishable without
     relying on color alone (WCAG 1.4.1 / axe link-in-text-block) */
  p a,li a{text-decoration:underline;text-decoration-color:rgba(11,74,143,.4);text-underline-offset:2px}
  h1,h2,h3,h4{margin:0;text-wrap:pretty}
  p{margin:0}
  a{transition:color 150ms ease}
  /* grid items default to min-width:auto and refuse to shrink below their
     content's natural size, which can force a track (and the whole grid)
     wider than its container once nested flex rows / long list items are
     involved — this is inert everywhere else, so apply it universally */
  .grid>*{min-width:0}
  /* real photo dropped into a .ph placeholder wrapper (per the recipe in
     HANDOFF.md) — keep the wrapper's sizing/position, just fill it and
     clip instead of showing the hatched placeholder pattern */
  .ph-photo{background:none;overflow:hidden}
  .ph-photo img{width:100%;height:100%;object-fit:cover;display:block}
  /* portrait photos (team, author bio): keep faces in frame instead of a
     center-crop that can clip the top of the head */
  .team-row .ph-photo img,.author-bio-photo .ph-photo img{object-position:top center}
  /* table of contents (article sidebar) */
  .toc{background:#fff;border:1px solid #e2ddd0;border-top:3px solid #c9a227;padding:22px 24px}
  .toc-title{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#666c75}
  .toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .toc-list a{font-size:14px;line-height:1.4;color:#0b4a8f}
  .toc-list a:hover{color:#c9a227}
  /* author bio (end of article body) */
  .author-bio{margin-top:40px;padding-top:32px;border-top:1px solid #e2ddd0;display:flex;gap:20px;align-items:flex-start}
  .author-bio-photo{flex:none;width:84px;height:84px}
  .author-bio-photo .ph{width:100%;height:100%;height:auto;aspect-ratio:1;border-radius:50%}
  .author-bio-label{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#666c75}
  .author-bio-name{margin-top:4px;font-family:Lora,serif;font-size:19px;font-weight:600;color:#0b4a8f}
  .author-bio-role{margin-top:2px;font-size:13px;color:#6b7480}
  .author-bio-text{margin-top:10px;font-size:14.5px;line-height:1.7;color:#4a5563;max-width:64ch}
  .author-bio-link{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;color:#0b4a8f}
  .author-bio-link:hover{color:#c9a227}
  @media (max-width:520px){.author-bio{flex-direction:column;align-items:flex-start}}
  @keyframes omMenuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes omFadeUp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:120ms !important}
    [data-om-press]:active{transform:none !important}
    .mobile-nav{transform:none !important;opacity:0;pointer-events:none;transition:opacity 120ms ease !important}
    .mobile-nav.open{opacity:1;pointer-events:auto}
    .m-group{transform:none !important}
  }

/* --- header dropdowns --- */
.nav-item .menu{display:none}
.nav-item.open .menu{display:block}
.chev{display:flex;opacity:.55;transition:transform 200ms cubic-bezier(.32,.72,0,1),opacity 160ms ease}
.nav-item.open .chev{transform:rotate(180deg);opacity:.9}

/* --- FAQ accordion --- */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms cubic-bezier(.32,.72,0,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > *{min-height:0;overflow:hidden;padding:0 !important}
.faq-a > * > *{margin-inline:24px}
.faq-a > * > *:last-child{margin-bottom:24px}
.faq-item.open{border-inline-start-color:#c9a227 !important}
.faq-sign{transition:transform 200ms cubic-bezier(.32,.72,0,1),background 200ms ease,color 200ms ease}
.faq-item.open .faq-sign{background:#c9a227;color:#12233a;transform:rotate(180deg)}

/* --- searchable comboboxes --- */
.combo-list{display:none;position:absolute;top:calc(100% + 4px);inset-inline:0;z-index:5;max-height:216px;overflow:auto;background:#fff;border:1px solid #dcd7c9;box-shadow:0 14px 30px rgba(11,74,143,.14);transform-origin:top center;animation:omMenuIn 150ms cubic-bezier(.23,1,.32,1)}
.combo-list.open{display:block}
.combo-option{padding:12px 15px;font-size:14px;color:#2b3542;cursor:pointer;border-bottom:1px solid #f2efe6}
.combo-empty{padding:12px 15px;font-size:13.5px;color:#666c75}
@media (hover:hover) and (pointer:fine){.combo-option:hover{background:#f6f3ec;color:#0b4a8f}}

/* --- press feedback --- */
.press:active{transform:scale(.97)}

/* --- generated hover / active states --- */
@media (hover:hover) and (pointer:fine){.x1:hover{color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x2:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x3:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x4:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x5:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x6:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x7:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x8:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x9:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x10:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x11:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x12:hover{color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x13:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x14:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x15:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x16:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x17:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x18:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x19:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x20:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x21:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x22:hover{color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x23:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x24:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x25:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x26:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x27:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x28:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x29:hover{color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x30:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x31:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x32:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x33:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x34:hover{color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x35:hover{color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x36:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x37:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x38:hover{background:#f6f3ec;color:#0b4a8f}}
@media (hover:hover) and (pointer:fine){.x39:hover{background:#c9a227;color:#12233a}
.x39:hover .u208{color:#5c4a12}
.x39:hover .u209{color:#12233a}}
.x39:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.x40:hover{background:#0b4a8f;color:#fff}}
.x40:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.x41:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x42:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x43:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x44:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x45:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x46:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x47:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x48:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x49:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x50:hover{box-shadow:0 14px 34px rgba(0,0,0,.22);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x51:hover{background:#fff}}
.x51:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.x52:hover{background:#efeadd}}
@media (hover:hover) and (pointer:fine){.x53:hover{background:#efeadd}}
@media (hover:hover) and (pointer:fine){.x54:hover{background:#efeadd}}
@media (hover:hover) and (pointer:fine){.x55:hover{background:#0b4a8f;color:#fff}}
.x55:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.x56:hover{box-shadow:0 16px 34px rgba(0,0,0,.24);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x57:hover{box-shadow:0 16px 34px rgba(0,0,0,.24);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x58:hover{box-shadow:0 16px 34px rgba(0,0,0,.24);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x59:hover{box-shadow:0 16px 34px rgba(0,0,0,.24);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x60:hover{box-shadow:0 16px 34px rgba(0,0,0,.24);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x61:hover{box-shadow:0 16px 34px rgba(0,0,0,.24);transform:translateY(-2px)}}
@media (hover:hover) and (pointer:fine){.x62:hover{background:#fff}}
.x62:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.x63:hover{background:#c9a227;color:#12233a}}
.x63:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.x64:hover{background:#c9a227;color:#12233a}}
.x64:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.x65:hover{background:#c9a227;color:#12233a}}
.x65:active{transform:scale(0.97)}


/* ============================================================
   RESPONSIVE  (inline styles hold the desktop layout, so these
   class-based overrides use !important deliberately)
   ============================================================ */

/* ---------- mobile header + fullscreen menu ---------- */
.burger{display:none;align-items:center;justify-content:center;margin-inline-start:auto;width:46px;height:46px;background:transparent;border:none;cursor:pointer;padding:0}
.burger-lines{position:relative;display:block;width:26px;height:16px}
.burger-lines span{position:absolute;inset-inline-start:0;height:2px;background:#0b4a8f;border-radius:2px;transition:transform 320ms cubic-bezier(.32,.72,0,1),width 320ms cubic-bezier(.32,.72,0,1),opacity 160ms ease}
.burger-lines span:nth-child(1){top:0;width:26px}
.burger-lines span:nth-child(2){top:7px;width:18px}
.burger-lines span:nth-child(3){top:14px;width:22px}
.burger[aria-expanded="true"] .burger-lines span:nth-child(1){transform:translateY(7px) rotate(45deg);width:26px}
.burger[aria-expanded="true"] .burger-lines span:nth-child(2){opacity:0;transform:translateX(10px)}
.burger[aria-expanded="true"] .burger-lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:26px}

.mobile-nav{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:#fff;transform:translateX(100%);transition:transform 260ms cubic-bezier(.32,.72,0,1),visibility 260ms;visibility:hidden}
.mobile-nav.open{transition:transform 420ms cubic-bezier(.32,.72,0,1)}
.mobile-nav.open{transform:none;visibility:visible}
.m-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid #e9e6df}
.m-top img{height:42px;width:auto;display:block}
.m-close{position:relative;width:44px;height:44px;background:transparent;border:none;cursor:pointer}
.m-close span{position:absolute;top:21px;inset-inline-start:10px;width:24px;height:2px;background:#0b4a8f;border-radius:2px}
.m-close span:first-child{transform:rotate(45deg)}
.m-close span:last-child{transform:rotate(-45deg)}
.m-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

.m-group{border-bottom:1px solid #eee9dd;opacity:0;transform:translateX(18px);transition:opacity 320ms ease,transform 420ms cubic-bezier(.32,.72,0,1)}
.m-group:last-child,.m-group:has(+ .m-cta){border-bottom:none}
.mobile-nav.open .m-group{opacity:1;transform:none}
.mobile-nav.open .m-group:nth-child(1){transition-delay:90ms}
.mobile-nav.open .m-group:nth-child(2){transition-delay:130ms}
.mobile-nav.open .m-group:nth-child(3){transition-delay:170ms}
.mobile-nav.open .m-group:nth-child(4){transition-delay:210ms}
.mobile-nav.open .m-group:nth-child(5){transition-delay:250ms}
.mobile-nav.open .m-group:nth-child(6){transition-delay:290ms}
.m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;min-height:56px;font:600 16px/1.3 'Libre Franklin',sans-serif;color:#0b4a8f;text-align:start;cursor:pointer}
.m-head > span:first-child{flex:1;text-align:start}
.m-head a{color:inherit;flex:1;text-align:start}
.m-head .chev{margin-inline-start:auto;color:#c9a227;transition:transform 260ms cubic-bezier(.32,.72,0,1)}
.m-group.open .m-head .chev{transform:rotate(180deg)}
.m-links{display:grid;grid-template-rows:0fr;transition:grid-template-rows 340ms cubic-bezier(.32,.72,0,1)}
.m-group.open .m-links{grid-template-rows:1fr}
.m-links-inner{min-height:0;overflow:hidden}
.m-links a{display:block;padding:13px 22px;font-size:14.5px;color:#3d4753;border-top:1px solid #f4f1e8;text-align:start}
.m-links a.m-view-all{font-weight:700;color:#0b4a8f;border-top:none}
.m-cta{padding:18px 22px 26px}
.m-cta a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:15px 17px;text-align:center;background:#0b4a8f;color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.u210{font-size:9.5px;font-weight:600;letter-spacing:.16em;line-height:1;color:#c9a227}
.u211{font-size:15.5px;font-weight:700;letter-spacing:.03em;line-height:1;color:#fff}
body.menu-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .mobile-nav{transition:none}
  .m-group{transition:none;opacity:1;transform:none}
}

@media (max-width:1200px){
  .grid[data-g="4"]{grid-template-columns:repeat(2,1fr) !important}
  /* the divider lines between stat cells (.u47/.u48) are meant for a
     single row of 4 — once the trust-strip grid wraps to 2 columns (and
     eventually stacks to 1), the same border-left reads as a stray
     vertical line rather than a divider, so drop it here. Its left
     padding existed to clear that border too — left on its own, it
     indents "900+" (the row-2, column-1 cell, styled the same as the
     row-1 column-2 cell) relative to "4.9" directly above it, so it has
     to go as well for the two rows to line up flush-left. */
  .u47,.u48{border-left:none !important;padding-left:0 !important}
}

@media (max-width:1080px){
  .burger{display:flex}
  .nav-desktop{display:none !important}
  [data-nav-cta]{display:none !important}
  .header-row{height:auto !important;padding-top:14px !important;padding-bottom:14px !important;gap:14px !important;justify-content:space-between !important}
  .grid[data-g="split"],.grid[data-g="2"],.u85{grid-template-columns:1fr !important;gap:28px !important}
  .grid[data-g="3"]{grid-template-columns:repeat(2,1fr) !important}
  section{padding-left:24px !important;padding-right:24px !important}
  h1{font-size:40px !important}
  h2{font-size:30px !important;max-width:none !important}
  /* hero: once the split grid stacks to one column, pull the booking form
     up to sit right under the heading instead of trailing after the
     eyebrow/description/notice-panel/CTA row/trust strip. The copy block
     has no styling of its own, so display:contents lets its children and
     the form share one reorderable list without touching page markup. */
  #hero .u26 > div:first-child{display:contents}
  #hero .u26 .u27{order:1}
  #hero .u26 .u30{order:2}
  #hero .u26 .hero-sub{order:3}
  #hero .u26 .u49{order:4}
  #hero .u26 .u31{order:5}
  #hero .u26 .u32{order:6}
  #hero .u26 .action-row{order:7}
  #hero .u26 .u42{order:8}
}

/* footer accordion (mobile only) */
.f-chev{display:none}

@media (max-width:760px){
  .f-col{border-bottom:1px solid rgba(255,255,255,.16)}
  .f-col:last-of-type{border-bottom:none}
  .f-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;min-height:52px;cursor:pointer;text-align:start}
  .f-head h4{flex:1;text-align:start;font-size:13px !important}
  .f-chev{display:flex;margin-inline-start:auto;color:#e6c95f;transition:transform 200ms cubic-bezier(.32,.72,0,1)}
  .f-col.open .f-chev{transform:rotate(180deg)}
  .f-links{display:grid;grid-template-rows:0fr;transition:grid-template-rows 340ms cubic-bezier(.32,.72,0,1)}
  .f-col.open .f-links{grid-template-rows:1fr}
  .f-links-inner{min-height:0;overflow:hidden}
  .f-links-inner > div{margin-top:0 !important;padding-bottom:16px;gap:14px !important}
}

@media (max-width:760px){
  .util-row{height:auto !important;padding:10px 18px !important;flex-wrap:wrap;gap:6px 14px;justify-content:center !important;text-align:center}
  .util-row > div{flex-wrap:wrap;justify-content:center;gap:6px 14px !important}
  .grid{grid-template-columns:1fr !important;gap:16px !important}
  .grid > *{grid-column:span 1 !important}
  section{padding-top:48px !important;padding-bottom:48px !important;padding-left:18px !important;padding-right:18px !important}
  footer{padding-left:18px !important;padding-right:18px !important}
  h1{font-size:31px !important;line-height:1.15 !important;max-width:none !important}
  h2{font-size:24px !important;line-height:1.28 !important;max-width:none !important;text-align:left !important}
  h3{font-size:17px !important}
  p{max-width:none !important}
  #book{padding:24px !important}
  .card{padding:22px 18px !important}
  .cta:not([data-nav-cta]){display:block !important;width:100% !important;text-align:center;padding-top:16px !important;padding-bottom:16px !important}
  .action-row{flex-direction:column !important;align-items:stretch !important}
  .ph{height:200px !important}
  .footer-legal{flex-direction:column !important;gap:8px;text-align:center}
}

@media (max-width:420px){
  h1{font-size:27px !important}
  .stat-num{font-size:21px !important}
}

/* ---------- card carousels ---------- */
.car-bar{display:none;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:12px}
.swipe-hint{display:flex;align-items:center;gap:6px;font:600 11px/1 'Libre Franklin',sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.car-nav{display:flex;gap:8px}
.car-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:1px solid currentColor;color:inherit;opacity:.75;cursor:pointer;transition:opacity 160ms ease,background 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.car-btn:hover{opacity:1;background:rgba(127,127,127,.12)}}
.car-btn:active{transform:scale(.95)}
.car-btn:disabled{opacity:.28;cursor:default;transform:none}
.car-scroll{scrollbar-width:none;-ms-overflow-style:none}
.car-scroll::-webkit-scrollbar{display:none}

@media (min-width:761px){
  .grid.car-d{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .grid.car-d > *{flex:0 0 calc(25% - 15px);scroll-snap-align:start}
  @media (max-width:1080px){.grid.car-d > *{flex:0 0 calc(50% - 10px)}}
  .car-d-bar{display:flex}
}

@media (max-width:760px){
  .grid.car-m{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;padding-bottom:8px}
  .grid.car-m > *{flex:0 0 82% !important;scroll-snap-align:start;grid-column:auto !important}
  .car-m-bar{display:flex}
  .car-btn{width:44px;height:44px}
}

/* commercial litigation banner sits below the services carousel */
@media (max-width:760px){
  .lit-card{flex-direction:column !important;align-items:flex-start !important;gap:14px !important;padding:22px 18px !important}
}

/* whole charge card is clickable via its heading link */
.card{position:relative}
.card-link{color:#0b4a8f;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
/* featured post gets the same whole-card click treatment as regular post cards */
#featured .grid{position:relative}
@media (hover:hover) and (pointer:fine){
  .card:hover .card-link{color:#c9a227}
}

@media (max-width:760px){
  .util-contact{display:none !important}
  /* keep the notice on a single line */
  .util-row{flex-wrap:nowrap !important;padding:9px 14px !important}
  .util-msg{flex-wrap:nowrap !important;gap:8px !important;font-size:11px;white-space:nowrap}
  .util-msg > span{white-space:nowrap}
  .util-msg > span:last-child::before{content:"·";margin-inline-end:8px;opacity:.6}
}
@media (max-width:400px){
  /* below this the two notices cannot share a line — keep the one that converts */
  .util-msg{font-size:11px;gap:0 !important}
  .util-msg > span:first-child{display:none !important}
  .util-msg > span:last-child::before{content:none}
}

/* ============================================================
   EXTRACTED PAGE RULES
   One class per unique declaration set, lifted out of the markup.
   Section anchors: #hero #charges #urgent-cta #about #immigration #services #why-us #faq #takeaways #contact #blog #testimonials #site-footer
   ============================================================ */
.u1{width:100%;background:#0b4a8f;color:#fff}
.u2{max-width:1440px;margin:0 auto;padding:0 32px;height:38px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;letter-spacing:.02em}
.u3{display:flex;align-items:center;gap:26px}
.u4{display:flex;align-items:center;gap:8px}
.u5{width:6px;height:6px;border-radius:50%;background:#c9a227}
.u6{opacity:.75}
.u7{display:flex;align-items:center;gap:22px}
.u8{color:#fff}
.u9{opacity:.35}
.u10{color:#fff;font-weight:600}
.u11{width:100%;background:#fff;border-bottom:1px solid #e9e6df;box-shadow:0 1px 12px rgba(11,74,143,.05);position:sticky;top:0;z-index:100;transition:box-shadow 220ms ease}
.u12{max-width:1440px;margin:0 auto;padding:0 32px;height:88px;display:flex;align-items:center;justify-content:space-between;gap:32px;transition:height 220ms cubic-bezier(.4,0,.2,1)}
.u13{display:flex;align-items:center;flex:none}
.u14{height:52px;width:auto;display:block;transition:height 220ms cubic-bezier(.4,0,.2,1)}
.u15{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500;color:#1c2430}
.u16{position:relative;padding:32px 0;cursor:pointer;transition:padding 220ms cubic-bezier(.4,0,.2,1)}
@media (min-width:1081px){
  .u11.is-scrolled{box-shadow:0 4px 20px rgba(11,74,143,.12)}
  .u11.is-scrolled .u12{height:64px}
  .u11.is-scrolled .u14{height:40px}
  .u11.is-scrolled .u16{padding:20px 0}
}
.u17{display:flex;align-items:center;gap:6px;color:#1c2430}
.u18{position:absolute;top:100%;left:-18px;z-index:20;min-width:250px;background:#fff;border:1px solid #e9e6df;border-top:2px solid #c9a227;box-shadow:0 20px 44px rgba(11,74,143,.14);padding:10px 0;transform-origin:top center;animation:omMenuIn 150ms cubic-bezier(.23,1,.32,1)}
.u19{display:block;padding:9px 22px;font-size:13.5px;color:#2b3542}
.u20{position:absolute;top:100%;left:-18px;z-index:20;min-width:270px;background:#fff;border:1px solid #e9e6df;border-top:2px solid #c9a227;box-shadow:0 20px 44px rgba(11,74,143,.14);padding:10px 0;transform-origin:top center;animation:omMenuIn 150ms cubic-bezier(.23,1,.32,1)}
.u21{position:absolute;top:100%;left:-18px;z-index:20;min-width:290px;background:#fff;border:1px solid #e9e6df;border-top:2px solid #c9a227;box-shadow:0 20px 44px rgba(11,74,143,.14);padding:10px 0;transform-origin:top center;animation:omMenuIn 150ms cubic-bezier(.23,1,.32,1)}
.u22{padding:32px 0;color:#1c2430}
.u23{position:absolute;top:100%;right:-18px;z-index:20;min-width:200px;background:#fff;border:1px solid #e9e6df;border-top:2px solid #c9a227;box-shadow:0 20px 44px rgba(11,74,143,.14);padding:10px 0;transform-origin:top center;animation:omMenuIn 150ms cubic-bezier(.23,1,.32,1)}
.u24{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;background:#0b4a8f;color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:11px 22px;border-radius:2px;transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease,color 160ms ease}
.u25{background:#f6f3ec;padding:70px 32px 70px}
.u26{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.u27{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.u28{height:1px;width:34px;background:#c9a227}
.u29{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#826816}
.u30{font-family:Lora,Georgia,serif;font-size:52px;line-height:1.1;font-weight:600;color:#0b4a8f;letter-spacing:-.01em;max-width:20ch}
.u31{margin-top:20px;font-size:17px;line-height:1.65;color:#3d4753;max-width:58ch}
.u32{margin-top:28px;padding:24px 28px;background:#0b4a8f;border-top:3px solid #c9a227;max-width:58ch;box-shadow:0 18px 40px rgba(11,74,143,.16)}
.u33{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f0d475}
.u33::after{content:"";flex:1;height:1px;background:rgba(201,162,39,.45)}
.u34{margin-top:10px;font-family:Lora,Georgia,serif;font-size:17px;line-height:1.7;color:#eef3f9}
.u34 a{color:#f0d475;text-decoration:underline;text-decoration-color:rgba(240,212,117,.5);text-underline-offset:3px}
.u34 a:hover{text-decoration-color:#f0d475}
.u34 strong{color:#fff}
.u35{margin-top:26px;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.u36{display:flex;align-items:center;background:#c9a227;color:#12233a;font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:17px 26px;border-radius:2px;transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease,color 160ms ease}
.u37{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;padding:10px 22px;background:#fff;border:1px solid #e2ddd0}
.u37>div{min-width:0}
.u38{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#666c75}
.u39{font-family:Lora,serif;font-size:20px;font-weight:600;color:#0b4a8f}
.u40{width:1px;align-self:stretch;background:#e6e1d4}
.u41{margin-top:22px;font-size:16px;line-height:1.65;color:#3d4753;max-width:58ch}
.u42{margin-top:32px;padding-top:24px;border-top:1px solid #e2ddd0;display:grid;grid-template-columns:repeat(4,1fr)}
.u43{padding-right:20px}
.u44{font-family:Lora,serif;font-size:26px;font-weight:600;color:#0b4a8f}
.u45{color:#c9a227}
.u46{font-size:12px;line-height:1.4;color:#636b76;margin-top:4px}
.u47{padding:0 20px;border-left:1px solid #e6e1d4}
.u48{padding-left:20px;border-left:1px solid #e6e1d4}
.u49{background:#fff;padding:34px;box-shadow:0 18px 50px rgba(11,74,143,.12);border-top:4px solid #0b4a8f}
.u50{font-family:Lora,serif;font-size:23px;font-weight:600;color:#0b4a8f;line-height:1.3}
.u51{margin-top:10px;font-size:13.5px;line-height:1.6;color:#6b7480}
.u52{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.u53{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.u54{width:20px;height:20px;border-radius:50%;background:#0b4a8f;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.u55{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#666c75}
.u56{position:relative}
.u57{width:100%;padding:14px 15px;border:1px solid #dcd7c9;background:#faf8f3;font-family:'Libre Franklin',sans-serif;font-size:14px;color:#1c2430;outline:none}
.u58{display:none;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;background:#0b4a8f;color:#fff}
.u59{font-size:14px;font-weight:600}
.u60{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#e6c95f;cursor:pointer}
.u61{display:none;flex-direction:column;gap:14px}
.u62{width:100%;padding:14px 15px;border:1px solid #dcd7c9;background:#faf8f3;font-family:'Libre Franklin',sans-serif;font-size:14px;color:#1c2430;outline:none;resize:vertical}
.u63{width:100%;padding:17px;background:#0b4a8f;color:#fff;border:none;font-family:'Libre Franklin',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease,color 160ms ease}
.u64{font-size:11.5px;line-height:1.5;color:#666c75;text-align:center}
.u65{max-width:1440px;margin:56px auto 0}
.u66{height:340px;margin-top:40px;background:#e8e3d6;display:flex;align-items:center;justify-content:center;border:1px solid #d8d2c2}
.u67{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:.08em;color:#8d8774}
.u68{background:#0b4a8f;color:#fff;padding:82px 32px}
/* .u103/.u132 are generic prose classes reused across both light- and
   dark-background sections; their own fixed dark-gray color wins over the
   inherited white when they land inside this dark section, so pin them
   back to a readable light color here specifically */
.u68 .u103,.u68 .u103 strong,.u68 .u132,.u68 .u75{color:rgba(255,255,255,.8)}
.u69{max-width:1440px;margin:0 auto}
.u70{font-family:Lora,serif;font-size:38px;line-height:1.25;font-weight:600;text-align:center;max-width:40ch;margin:0 auto}
.u71{display:grid;grid-template-columns:1fr 1fr;gap:22px 44px;margin-top:36px;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.82)}
.u72{display:flex;flex-direction:column;gap:16px}
.u73{margin-top:46px;display:flex;align-items:center;gap:16px;justify-content:center}
.u74{height:1px;width:60px;background:rgba(255,255,255,.25)}
.u75{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#806914}
.u76{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2x2{grid-template-columns:repeat(2,1fr)}
.u77{background:#fff;padding:26px 22px 24px;border-bottom:3px solid #c9a227;transition:box-shadow 200ms ease,transform 200ms cubic-bezier(.23,1,.32,1)}
.u78{width:46px;height:46px;border-radius:2px;background:#0b4a8f;margin-bottom:16px;display:flex;align-items:center;justify-content:center;transition:background 200ms ease}
.u79{width:23px;height:23px;color:#fff;transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){.card:hover .u78{background:#c9a227}.card:hover .u79{color:#12233a}}
.u80{font-size:16.5px;font-weight:600;line-height:1.3}
.u81{margin-top:9px;font-size:13.5px;line-height:1.6;color:#5b6573}
.u82{background:#f6f3ec;padding:70px 32px}
.u83{max-width:1080px;margin:0 auto;position:relative;background:#12233a;padding:56px 60px;overflow:hidden}
.u84{display:none}
.u85{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:center}
.u86{font-family:Lora,serif;font-size:31px;line-height:1.25;font-weight:600;color:#fff;max-width:36ch}
.u87{margin-top:14px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.7);max-width:58ch}
.u88{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.u89{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.u90{font-family:Lora,serif;font-size:26px;font-weight:600;color:#fff}
.u91{margin-top:6px;background:#c9a227;color:#12233a;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:16px 26px;transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease,color 160ms ease}
.u92{background:#fff;padding:88px 32px}
.u93{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.u94{height:430px;background:#eceadf;border:1px solid #dcd8c9;display:flex;align-items:flex-end;justify-content:center;padding:18px}
.u95{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#8d8774;text-align:center}
.u96{margin-top:-1px;background:#0b4a8f;color:#fff;padding:24px 26px}
.u97{font-family:Lora,serif;font-size:22px;font-weight:600}
.u98{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#e6c95f;margin-top:4px}
.u99{margin-top:14px;font-family:Lora,serif;font-style:italic;font-size:15px;line-height:1.6;color:rgba(255,255,255,.85)}
.u100{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:8px;font-size:14px}
.u101{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.u102{font-family:Lora,serif;font-size:36px;line-height:1.25;font-weight:600;color:#0b4a8f;max-width:36ch}
.u103{margin-top:22px;display:flex;flex-direction:column;gap:15px;font-size:15.5px;line-height:1.75;color:#4a5563}
.u104{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.u105{display:block;padding:16px 18px;background:#f6f3ec;border-left:2px solid #c9a227;font-size:13.5px;font-weight:600;line-height:1.4;color:#0b4a8f}
.u106{vertical-align:-2px}
.u107{display:inline-block;margin-top:26px;border:1px solid #0b4a8f;color:#0b4a8f;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:15px 26px;transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease,color 160ms ease}
.u108{background:#f6f3ec;padding:82px 32px}
.u109{font-family:Lora,serif;font-size:34px;line-height:1.3;font-weight:600;color:#0b4a8f;text-align:center;max-width:54ch;margin:0 auto}
.u110{margin-top:38px;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.u111{display:flex;flex-direction:column;gap:15px;font-size:15px;line-height:1.75;color:#4a5563}
.u112{height:420px;background:#e8e3d6;border:1px solid #d8d2c2;display:flex;align-items:center;justify-content:center}
.u113{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#8d8774}
.u114{background:#12233a;color:#fff;padding:82px 32px}
.u115{font-family:Lora,serif;font-size:36px;line-height:1.25;font-weight:600;text-align:center}
.u116{margin-top:14px;text-align:center;font-size:15px;color:rgba(255,255,255,.65)}
/* .u116 is reused as-is on dark sections and, with the .body-dark
   modifier, on light ones — inline links need light-on-dark styling only
   in the former case, since the default navy link color is already
   correct wherever .body-dark applies */
.u116:not(.body-dark) a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.u117{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.u118{background:#fff;padding:30px 26px;border-bottom:3px solid #c9a227;transition:box-shadow 200ms ease,transform 200ms cubic-bezier(.23,1,.32,1)}
.u119{width:46px;height:46px;border-radius:2px;background:#0b4a8f;margin-bottom:16px;display:flex;align-items:center;justify-content:center;transition:background 200ms ease}
@media (hover:hover) and (pointer:fine){.card:hover .u119{background:#c9a227}}
.u120{font-size:18px;font-weight:600;line-height:1.3}
.u121{margin-top:10px;font-size:13.5px;line-height:1.65;color:#5b6573}
.u122{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.u123{margin-top:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:28px 30px;display:flex;gap:24px;align-items:center}
.u124{flex:none;width:42px;height:42px;background:rgba(201,162,39,.25);border:1px solid rgba(201,162,39,.5);display:flex;align-items:center;justify-content:center}
.u125{color:#e6c95f}
.u126{flex:1}
.u127{font-size:18px;font-weight:600;color:#fff}
.u128{margin-top:8px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.7);max-width:90ch}
.u129{flex:none;display:inline-flex;align-items:center;gap:5px;color:#e6c95f;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.u130{max-width:70ch}
.u131{font-family:Lora,serif;font-size:36px;line-height:1.25;font-weight:600;color:#0b4a8f}
.u132{margin-top:16px;font-size:15.5px;line-height:1.7;color:#5b6573}
.u133{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.u134{background:#0b4a8f;color:#fff;padding:32px 30px;display:flex;gap:20px}
.u135{flex:none;width:40px;height:40px;border-radius:50%;background:#c9a227;display:flex;align-items:center;justify-content:center}
.u136{color:#12233a}
.u137{font-size:18.5px;font-weight:600;line-height:1.3}
.u138{margin-top:10px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.78)}
.u139{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e6e2d6}
.u140{background:#f6f3ec;padding:22px 24px}
.u141{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#826816}
.u142{margin-top:6px;font-size:14px;line-height:1.5;color:#2b3542}
.u143{max-width:1000px;margin:0 auto}
.u144{font-family:Lora,serif;font-size:34px;line-height:1.3;font-weight:600;color:#0b4a8f;text-align:center}
.u145{margin-top:34px;display:flex;flex-direction:column;gap:12px}
.u146{background:#fff;border:1px solid #e6e1d4;border-left:3px solid #c9a227}
.u147{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;cursor:pointer}
.u148{font-size:16.5px;font-weight:600;line-height:1.45;color:#0b4a8f}
.u149{flex:none;width:26px;height:26px;border-radius:50%;background:#f1ecdb;color:#0b4a8f;display:flex;align-items:center;justify-content:center}
.u150{padding:0 24px 24px;animation:omFadeUp 180ms cubic-bezier(.23,1,.32,1)}
.u151{font-size:14.5px;line-height:1.75;color:#4a5563;max-width:88ch}
.u152{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.u153{background:#fff;border:1px solid #e6e1d4;border-left:3px solid transparent}
.u154{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.u155{font-family:Lora,serif;font-size:34px;line-height:1.3;font-weight:600;color:#0b4a8f}
.u156{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.u157{display:flex;gap:14px;font-size:15px;line-height:1.7;color:#4a5563;overflow-wrap:anywhere}
.u158{flex:none;margin-top:8px;width:7px;height:7px;background:#c9a227}
.u159{height:420px;background:#eceadf;border:1px solid #dcd8c9;display:flex;align-items:center;justify-content:center}
.u160{background:#0b4a8f}
.u161{max-width:1440px;margin:0 auto;padding:72px 32px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.u162{font-family:Lora,serif;font-size:34px;line-height:1.25;font-weight:600;color:#fff;max-width:38ch}
.u163{margin-top:14px;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.75);max-width:62ch}
.u164{display:flex;gap:28px}
.u165{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.u166{font-family:Lora,serif;font-size:24px;font-weight:600;color:#fff}
.u167{background:#c9a227;color:#12233a;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:17px 30px;transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease,color 160ms ease}
.u168{background:#faf8f3;padding:82px 32px}
.u169{text-align:center}
.u170{font-family:Lora,serif;font-size:34px;font-weight:600;color:#0b4a8f;margin-top:8px}
.u171{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.u172{position:relative;background:#fff;border:1px solid #eae5d8}
.u173{height:190px;background:#eceadf;display:flex;align-items:center;justify-content:center}
.u174{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#8d8774}
.u175{padding:24px}
.u176{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#826816}
.u177{margin-top:10px;font-size:19px;font-weight:600;color:#0b4a8f;line-height:1.35}
.u178{display:inline-block;margin-top:16px;background:#0b4a8f;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:12px 20px;transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease,color 160ms ease}
.u179{margin-top:26px;display:flex;justify-content:center;gap:8px;align-items:center;font-size:13.5px;color:#5b6573}
.u180{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#0b4a8f;color:#fff;font-weight:600}
.u181{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid #e2ddd0}
.u182{padding:0 6px}
.u183{padding:0 12px;height:34px;display:flex;align-items:center;border:1px solid #e2ddd0}
.u184{background:#f2efe6;padding:82px 32px}
.u185{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.u186{background:#fff;padding:30px 28px;border-top:3px solid #c9a227}
.u187{font-family:Lora,serif;font-size:40px;line-height:.8;color:#e0d6b8}
.u188{margin-top:14px;font-size:14.5px;line-height:1.75;color:#4a5563}
.u189{margin-top:20px;padding-top:16px;border-top:1px solid #efebdf;display:flex;align-items:center;justify-content:space-between}
.u190{font-size:14.5px;font-weight:600;color:#0b4a8f}
.u191{font-size:13px;color:#c9a227;letter-spacing:.1em}
.u192{margin-top:26px;display:flex;justify-content:center;align-items:center;gap:16px}
.u193{width:9px;height:9px;border-radius:50%;background:#0b4a8f}
.u194{width:9px;height:9px;border-radius:50%;background:#cfc9b7}
.u195{margin-left:12px;font-size:13px;color:#636b76}
.u196{background:#0b4a8f;color:rgba(255,255,255,.8);padding:64px 32px 0}
.u197{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.u198{background:#fff;padding:12px 16px;display:inline-block}
.u199{height:40px;width:auto;display:block}
.u200{margin-top:18px;font-size:13.5px;line-height:1.8}
.u201{margin-top:16px;font-size:13.5px;line-height:1.9}
.u202{margin-top:18px;display:flex;gap:10px}
.u203{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.u204{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#e6c95f}
.u205{margin-top:16px;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.u206{color:rgba(255,255,255,.82)}
.u207{max-width:1440px;margin:48px auto 0;padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.68)}

/* ---------- numbered badges (process steps, why-us) ---------- */
.num-badge{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin-bottom:14px;background:#0b4a8f;color:#fff;font:700 15px/1 'Libre Franklin',sans-serif;border-radius:50%}
.num-badge--gold{margin-bottom:0;background:#c9a227;color:#12233a}

/* ---------- hub page: hero subhead + trust strip ---------- */
.hero-sub{margin-top:14px;font:600 22px/1.35 Lora,Georgia,serif;color:#2b3542}
.trust-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:32px;padding-top:22px;border-top:1px solid #e2ddd0;font:600 13.5px/1.4 'Libre Franklin',sans-serif;color:#0b4a8f}
.trust-strip span{display:flex;align-items:center;gap:10px}
.trust-strip span + span::before{content:"";width:5px;height:5px;border-radius:50%;background:#c9a227}
.duty-media{margin-bottom:20px}

/* nested carousels stay grids — a half-width 4-up carousel is unreadable */
.grid .grid.car-d{display:grid !important;overflow:visible}

@media (max-width:760px){
  .hero-sub{font-size:19px !important}
  .trust-strip{gap:8px 14px;font-size:12.5px}
}



/* light-section variants of the dark-band heading/intro */
.head-dark{color:#0b4a8f}
.body-dark{color:#4a5563;max-width:92ch;margin-inline:auto}

.lead-outro{padding-bottom:22px}

/* ---------- criminal-record impact list ---------- */
.impact-list{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.impact-item{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;background:#fff;border:1px solid #eae5d8;border-inline-start:3px solid #c9a227;transition:box-shadow 200ms ease,transform 200ms cubic-bezier(.23,1,.32,1)}
.impact-item p{margin:0;font:400 14.5px/1.65 'Libre Franklin',sans-serif;color:#4a5563}
.impact-item strong{color:#0b4a8f}
.impact-icon{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:2px;background:#e6edf6;color:#0b4a8f}
@media (hover:hover) and (pointer:fine){
  .impact-item:hover{box-shadow:0 10px 26px rgba(11,74,143,.10);transform:translateY(-1px)}
}
@media (max-width:760px){.impact-item{padding:14px 14px;gap:12px}}

/* press feedback for every remaining pressable surface */
.faq-q,.m-head,.f-head{-webkit-tap-highlight-color:transparent}
.card-link{transition:color 160ms ease}
.combo-option{transition:background 140ms ease,color 140ms ease}
.m-links a,.f-links a{transition:color 150ms ease,background 150ms ease}
.m-cta a{transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease}
.m-cta a:active{transform:scale(.98)}

/* ============================================================
   MOTION PASS — remaining interactive surfaces
   ============================================================ */

/* combobox rows: cursor lands on a row, row acknowledges it (feedback) */
.combo-option{transition:background 140ms ease,color 140ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.combo-option:hover{transform:translateX(4px)}}
.combo-option:active{background:#efeadd}

/* selected-area bar replaces the search field — bridge the swap (preventing a jarring change) */
#area-chosen{animation:swapIn 200ms cubic-bezier(.23,1,.32,1)}
@keyframes swapIn{from{opacity:0;transform:translateY(-4px) scale(.99)}to{opacity:1;transform:none}}

/* step 2 + description appear once an area is chosen (state indication) */
#step2{animation:stepIn 240ms cubic-bezier(.32,.72,0,1)}
@keyframes stepIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* text inputs: focus is feedback, not decoration */
input,textarea,select{transition:border-color 160ms ease,background 160ms ease,box-shadow 160ms ease}
input:focus,textarea:focus,select:focus{border-color:#c9a227;background:#fff;box-shadow:0 0 0 3px rgba(201,162,39,.18)}

/* keyboard focus ring, matched to the brand rather than the browser default */
a:focus-visible,button:focus-visible,.faq-q:focus-visible,.m-head:focus-visible,.f-head:focus-visible{outline:2px solid #c9a227;outline-offset:2px;border-radius:2px}

/* pressable rows acknowledge the tap (feedback) */
.faq-q,.m-head,.f-head{transition:background 160ms ease}
.faq-q:active,.m-head:active,.f-head:active{background:rgba(11,74,143,.04)}

/* logo + footer social chips */
.u13,.u203{transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 160ms ease}
.u13:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.u203:hover{transform:translateY(-2px)}}

/* impact cards + trust strip already animate; give the numbered badges a press-free lift with their card */
@media (hover:hover) and (pointer:fine){
  .card:hover .num-badge{transform:translateY(-1px)}
}
.num-badge{transition:transform 200ms cubic-bezier(.23,1,.32,1)}

@media (prefers-reduced-motion: reduce){
  #area-chosen,#step2{animation:none}
  .combo-option:hover{transform:none}
  .u203:hover,.card:hover .num-badge{transform:none}
}

/* CTA hover states (the base a:hover gold would otherwise erase gold buttons) */
@media (hover:hover) and (pointer:fine){
  a.cta.u36:hover,a.cta.u167:hover,a.cta.u91:hover{background:#0b4a8f;color:#fff}
  a.cta.u107:hover{background:#0b4a8f;color:#fff}
  a.cta.u178:hover{background:#c9a227;color:#12233a}
  .m-cta a:hover{background:#c9a227;color:#12233a}
  .m-cta a:hover .u210{color:#5c4a12}
  .m-cta a:hover .u211{color:#12233a}
}

/* process steps: two per row at every width above mobile (must outrank the ≤1080 collapse) */
.grid.steps-grid[data-g="2"]{grid-template-columns:repeat(2,1fr) !important}
@media (max-width:760px){.grid.steps-grid[data-g="2"]{grid-template-columns:1fr !important}}

/* ---------- data table (penalty matrix) ---------- */
.table-wrap{margin-top:32px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #eae5d8}
.data-table{width:100%;border-collapse:collapse;font:400 14.5px/1.5 'Libre Franklin',sans-serif;color:#4a5563}
.data-table th{padding:16px 18px;text-align:start;background:#0b4a8f;color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.data-table td{padding:15px 18px;border-top:1px solid #f0ece0}
.data-table tbody tr:first-child td{border-top:none}
.data-table td:first-child{font-weight:600;color:#0b4a8f}
.data-table tbody tr{transition:background 160ms ease}
@media (hover:hover) and (pointer:fine){.data-table tbody tr:hover{background:#faf8f3}}
@media (max-width:760px){
  .data-table{font-size:13.5px}
  .data-table th,.data-table td{padding:12px 14px}
}

.ct{margin-top:30px;display:grid;grid-template-columns:.85fr 1.6fr;background:#fff;border:1px solid #e2ddd0}
.ct-list{display:flex;flex-direction:column;background:#faf8f2;border-right:1px solid #e9e6df}
.ct-tab{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:20px 20px;background:none;border:0;border-bottom:1px solid #ece9db;cursor:pointer;position:relative;transition:background 150ms ease}
.ct-tab:last-child{border-bottom:0}
.ct-tab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#c9a227;transform:scaleY(0);transform-origin:center;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.ct-tab[aria-selected="true"]{background:#fff}
.ct-tab[aria-selected="true"]::before{transform:scaleY(1)}
.ct-ico{width:42px;height:42px;flex:none;border-radius:2px;background:#e6edf6;border:none;display:flex;align-items:center;justify-content:center;color:#0b4a8f;transition:background 150ms ease,color 150ms ease,border-color 150ms ease}
.ct-tab[aria-selected="true"] .ct-ico{background:#0b4a8f;color:#fff}
.ct-tab-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ct-name{font-family:Lora,Georgia,serif;font-size:15.5px;font-weight:600;line-height:1.25;color:#0b4a8f}
.ct-sec{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#666c75}
.ct-chev{flex:none;color:#c2bda9;opacity:0;transform:translateX(-4px);transition:opacity 150ms ease,transform 200ms cubic-bezier(.23,1,.32,1)}
.ct-tab[aria-selected="true"] .ct-chev{opacity:1;transform:none;color:#c9a227}
/* the panel column stretches to match the tab list's height, which can
   run much taller than a short panel's own content (a list of 6-8
   charges vs. one title + a short paragraph) — center the visible panel
   in that space instead of leaving it pinned to the top with a dead gap
   below it */
.ct-panels{padding:34px 38px 36px;display:flex;flex-direction:column;justify-content:center}
.ct-panel[hidden]{display:none}
.ct-title{font-family:Lora,Georgia,serif;font-size:27px;line-height:1.2;font-weight:600;color:#0b4a8f}
.ct-meta{margin-top:18px;display:inline-grid;grid-template-columns:repeat(3,auto);gap:1px;background:#e9e6df;border:1px solid #e9e6df;justify-content:start}
.ct-stat{background:#faf8f2;padding:12px 18px;display:flex;flex-direction:column;gap:5px}
.ct-stat-k{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#666c75}
.ct-stat-v{font-family:Lora,Georgia,serif;font-size:16px;font-weight:600;color:#12233a}
.ct-stat--max .ct-stat-v{color:#8f2f2f}
.ct-stat-v em{font-family:system-ui,sans-serif;font-style:normal;font-size:11px;font-weight:500;color:#666c75;letter-spacing:.02em}
.ct-copy{margin-top:16px;font-size:15.5px;line-height:1.7;color:#3d4753;max-width:64ch}
.ct-cta{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0b4a8f;border-bottom:2px solid #c9a227;padding-bottom:6px;transition:color 150ms ease,gap 200ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .ct-tab:hover{background:#fff}
  .ct-tab:hover .ct-chev{opacity:1;transform:none}
  .ct-cta:hover{color:#826816;gap:14px}
}
.ct-tab:focus-visible{outline:2px solid #c9a227;outline-offset:-2px}
@media (max-width:900px){
  .ct{grid-template-columns:1fr}
  .ct-list{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #e9e6df;scrollbar-width:none}
  .ct-list::-webkit-scrollbar{display:none}
  .ct-tab{flex:0 0 auto;width:auto;min-width:236px;border-bottom:0;border-right:1px solid #ece9db}
  .ct-tab::before{top:auto;bottom:0;right:0;width:auto;height:3px;transform:scaleX(0)}
  .ct-tab[aria-selected="true"]::before{transform:scaleX(1)}
  .ct-chev{display:none}
  .ct-panels{padding:26px 22px 28px}
  .ct-title{font-size:22px}
  .ct-meta{display:grid;grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .ct-tab::before,.ct-chev,.ct-cta{transition:none}
  .ct-chev{transform:none}
}

/* defence picker */
.df{margin-top:34px}
.df-prompt{font-family:Lora,Georgia,serif;font-size:19px;font-weight:600;color:#0b4a8f}
.df-chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.df-chip{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;background:#faf8f2;border:1px solid #e2ddd0;cursor:pointer;font-size:13.5px;font-weight:600;color:#3d4753;transition:background 150ms ease,color 150ms ease,border-color 150ms ease}
.df-chip i,.df-chip svg{color:#826816;flex:none}
.df-chip[aria-selected="true"]{background:#0b4a8f;border-color:#0b4a8f;color:#fff}
.df-chip[aria-selected="true"] svg{color:#f0d475}
.df-chip:focus-visible{outline:2px solid #c9a227;outline-offset:2px}
.df-panels{margin-top:20px;background:#faf8f2;border:1px solid #e2ddd0;border-top:3px solid #c9a227;padding:32px 34px}
.df-panel[hidden]{display:none}
.df-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.df-title{font-family:Lora,Georgia,serif;font-size:26px;line-height:1.2;font-weight:600;color:#0b4a8f}
.df-stat{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#826816;border:1px solid #e6dcbf;background:#fff;padding:6px 10px}
.df-copy{margin-top:15px;font-size:15.5px;line-height:1.75;color:#3d4753;max-width:78ch}
@media (hover:hover) and (pointer:fine){.df-chip:hover{border-color:#c9a227}}
@media (max-width:760px){.df-panels{padding:24px 20px}.df-title{font-size:21px}.df-chip{font-size:12.5px;padding:11px 13px}}

/* process timeline */
.pt{margin-top:40px}
/* flex + space-between (not a fixed-column grid) so this works whatever
   the step count is (pages use anywhere from 3 to 7), and so the first
   node sits flush with the line's start and the last node sits flush
   with its end, with the rest evenly spaced between them */
.pt-rail{position:relative;display:flex;justify-content:space-between;gap:8px}
.pt-line{position:absolute;left:0;right:0;top:19px;height:2px;background:#e2ddd0}
.pt-line-fill{height:100%;background:#c9a227;width:0;transition:width 300ms cubic-bezier(.23,1,.32,1)}
.pt-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 10px 0 0;background:none;border:0;cursor:pointer;text-align:left}
.pt-node:last-child{align-items:flex-end;text-align:right;padding-right:0}
.pt-dot{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid #e2ddd0;display:flex;align-items:center;justify-content:center;font-family:Lora,Georgia,serif;font-size:16px;font-weight:600;color:#666c75;transition:background 150ms ease,border-color 150ms ease,color 150ms ease}
.pt-node[aria-selected="true"] .pt-dot{background:#0b4a8f;border-color:#c9a227;color:#f0d475}
.pt-node.is-done .pt-dot{border-color:#c9a227;color:#826816}
.pt-when{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#826816}
.pt-label{font-size:13.5px;line-height:1.4;font-weight:600;color:#5b6573;transition:color 150ms ease}
.pt-node[aria-selected="true"] .pt-label{color:#0b4a8f}
.pt-node:focus-visible{outline:2px solid #c9a227;outline-offset:2px}
.pt-panels{margin-top:30px;background:#fff;border:1px solid #e2ddd0;padding:34px 36px}
.pt-panel[hidden]{display:none}
.pt-step-k{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#826816}
.pt-title{margin-top:9px;font-family:Lora,Georgia,serif;font-size:26px;line-height:1.25;font-weight:600;color:#0b4a8f}
.pt-copy{margin-top:14px;font-size:15.5px;line-height:1.75;color:#3d4753;max-width:76ch}
.pt-nav{margin-top:26px;padding-top:20px;border-top:1px solid #ece9db;display:flex;flex-wrap:wrap;gap:10px}
.pt-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;background:#fff;border:1px solid #d8d0bb;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0b4a8f;cursor:pointer;transition:background 150ms ease,color 150ms ease,border-color 150ms ease}
.pt-btn--primary{background:#0b4a8f;border-color:#0b4a8f;color:#fff}
.pt-btn[disabled]{opacity:.4;cursor:default}
.pt-btn:focus-visible{outline:2px solid #c9a227;outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .pt-node:hover .pt-dot{border-color:#c9a227}
  .pt-btn:not([disabled]):hover{border-color:#c9a227}
  .pt-btn--primary:not([disabled]):hover{background:#0a3f79}
}
@media (max-width:900px){
  .pt-rail{display:flex;overflow-x:auto;gap:0;scrollbar-width:none}
  .pt-rail::-webkit-scrollbar{display:none}
  .pt-line{display:none}
  .pt-node{flex:0 0 auto;min-width:180px;padding-right:16px}
  .pt-panels{padding:24px 20px}
  .pt-title{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.pt-line-fill{transition:none}}

/* why-us switcher */
.wu{margin-top:40px;display:grid;grid-template-columns:.8fr 1.2fr;gap:0;border:1px solid #e2ddd0}
.wu-list{display:flex;flex-direction:column;background:#faf8f2;border-right:1px solid #e9e6df}
.wu-item{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:20px 22px;background:none;border:0;border-bottom:1px solid #ece9db;cursor:pointer;transition:background 150ms ease}
.wu-item:last-child{border-bottom:0}
.wu-item[aria-selected="true"]{background:#fff}
.wu-n{font-family:Lora,Georgia,serif;font-size:15px;font-weight:600;color:#726b51;flex:none;transition:color 150ms ease}
.wu-item[aria-selected="true"] .wu-n{color:#816819}
.wu-t{font-size:14.5px;line-height:1.45;font-weight:600;color:#5b6573;transition:color 150ms ease}
.wu-item[aria-selected="true"] .wu-t{color:#0b4a8f}
.wu-item:focus-visible{outline:2px solid #c9a227;outline-offset:-2px}
/* same stretch-vs-short-content mismatch as .ct-panels above */
.wu-panels{position:relative;background:#0b4a8f;padding:40px 42px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.wu-panel[hidden]{display:none}
.wu-ghost{position:absolute;top:8px;right:26px;font-family:Lora,Georgia,serif;font-size:118px;line-height:1;font-weight:600;color:rgba(255,255,255,.07)}
.wu-title{position:relative;font-family:Lora,Georgia,serif;font-size:27px;line-height:1.25;font-weight:600;color:#fff;max-width:26ch}
.wu-copy{position:relative;margin-top:16px;font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.78);max-width:60ch}
.wu-copy a{color:#f0d475;text-decoration:underline;text-decoration-color:rgba(240,212,117,.5);text-underline-offset:3px}
.wu-cta{position:relative;margin-top:26px;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#12233a;background:#c9a227;padding:14px 22px;transition:gap 200ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .wu-item:hover{background:#fff}
  .wu-cta:hover{gap:14px}
}
@media (max-width:900px){
  .wu{grid-template-columns:1fr}
  .wu-list{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #e9e6df;scrollbar-width:none}
  .wu-list::-webkit-scrollbar{display:none}
  .wu-item{flex:0 0 auto;min-width:210px;border-bottom:0;border-right:1px solid #ece9db;padding:16px 18px}
  .wu-panels{padding:28px 22px}
  .wu-ghost{font-size:82px;right:16px}
  .wu-title{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.wu-cta{transition:none}}

/* outcome board */
.ol{margin-top:32px}
.ol-legend{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid #e6e1d4}
.ol-legend-t{font-family:Lora,Georgia,serif;font-size:18px;font-weight:600;color:#0b4a8f}
.ol-legend-h{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#826816}
/* flex-wrap (not a fixed 4-column grid) so this adapts to however many
   outcomes a page has (2 to 6 across the site) — a fixed 4-up grid left
   a single card stranded alone in its own row for the common 5-item case */
.ol-cols{margin-top:18px;display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.ol-col{flex:1 1 240px;max-width:340px;display:flex;flex-direction:column;gap:14px;text-align:left;padding:18px 18px 20px;background:#faf8f2;border:1px solid #e2ddd0;border-top:3px solid #e2ddd0;cursor:pointer;transition:background 150ms ease,border-color 150ms ease,box-shadow 200ms ease}
.ol-col[aria-selected="true"]{background:#fff;border-top-color:#c9a227;box-shadow:0 14px 32px rgba(11,74,143,.09)}
.ol-rank{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#826816}
.ol-head{display:flex;align-items:flex-start;gap:11px}
.ol-ico{width:36px;height:36px;flex:none;border-radius:2px;background:#e6edf6;border:none;display:flex;align-items:center;justify-content:center;color:#0b4a8f;transition:background 150ms ease,color 150ms ease,border-color 150ms ease}
.ol-col[aria-selected="true"] .ol-ico{background:#0b4a8f;color:#fff}
.ol-name{font-family:Lora,Georgia,serif;font-size:15.5px;line-height:1.3;font-weight:600;color:#0b4a8f}
.ol-rows{display:flex;flex-direction:column;gap:9px;margin-top:2px;padding-top:12px;border-top:1px solid #ece9db}
.ol-row{display:flex;flex-direction:column;gap:3px}
.ol-k{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#656c75}
.ol-cell{display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:1.4;font-weight:600;color:#3d4753}
.ol-cell svg{flex:none;margin-top:2px}
.ol-cell.is-good svg{color:#2e6b45}
.ol-cell.is-cond svg{color:#826816}
.ol-col:focus-visible{outline:2px solid #c9a227;outline-offset:2px}
.ol-panels{margin-top:16px;background:#0b4a8f;padding:28px 32px}
.ol-panel[hidden]{display:none}
.ol-title{font-family:Lora,Georgia,serif;font-size:22px;line-height:1.25;font-weight:600;color:#fff}
.ol-copy{margin-top:12px;font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.78);max-width:76ch}
.ol-copy a{color:#f0d475;text-decoration:underline;text-decoration-color:rgba(240,212,117,.5);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.ol-col:hover{border-color:#d8d0bb;background:#fff}}
@media (max-width:900px){
  .ol-cols{display:flex;overflow-x:auto;gap:12px;scrollbar-width:none;padding-bottom:4px}
  .ol-cols::-webkit-scrollbar{display:none}
  .ol-col{flex:0 0 76%}
  .ol-panels{padding:22px 20px}
  .ol-title{font-size:19px}
}

.u208{font-size:9.5px;font-weight:600;letter-spacing:.16em;line-height:1;color:#dcb94a;white-space:nowrap}
.u209{font-size:15px;font-weight:700;letter-spacing:.03em;line-height:1;color:#fff;white-space:nowrap}

.u212{max-width:1440px;margin:66px auto 0;padding-top:44px;border-top:1px solid #ece7da}
.u213{display:inline-block;margin-top:34px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#826816}
@media (max-width:860px){.u212{margin-top:44px;padding-top:32px}}

.u77 h3{color:#0b4a8f}
.u202 a.u203{color:#fff}
.u202 a.u203:hover{color:#12233a}

.pa-ct{margin-top:38px}
.pa-list{margin-top:20px}
.pa-list .u157{font-size:14.5px}

#why-trust h3.u120{margin-top:18px}

.u214{margin-top:14px;font-family:Lora,Georgia,serif;font-style:italic;font-size:17px;line-height:1.5;color:#0b4a8f}
.team-row .u37{margin-top:22px}
.team-row h3.u120{margin-top:30px}
.team-row .u156{margin-top:16px}
.team-row .ph{align-self:start}
@media (max-width:1080px){.team-row .ph{order:-1}}

#hero.u25:not(:has(.u65)){padding-bottom:56px}

#article aside .u37{margin-top:18px}
#article aside .u107{margin-top:18px}
#article .u120{margin-top:38px}
#article .impact-list{margin-top:22px}
#article .u145{margin-top:20px}
@media (min-width:1081px){#article aside{position:sticky;top:24px}}

#hero .u176{margin-top:14px}
[data-block="featured-detail"] .u176{margin-top:14px}
[data-block="featured-detail"] .u155{margin-top:10px}

/* Webzstore footer credit */
.wz-credit{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  opacity:.75;
  transition:opacity 220ms cubic-bezier(.22,.61,.36,1), transform 220ms cubic-bezier(.22,.61,.36,1);
}
.wz-credit:hover,
.wz-credit:focus-visible{opacity:1;transform:translateY(-1px)}
.wz-credit:hover,
.wz-credit:focus-visible,
.wz-credit:hover strong,
.wz-credit:focus-visible strong{text-decoration:none}
.wz-credit strong{font-weight:700}
.wz-credit-logo{
  width:22px;
  height:22px;
  border-radius:5px;
  display:block;
  flex:0 0 22px;
  object-fit:cover;
  transition:transform 220ms cubic-bezier(.22,.61,.36,1);
}
.wz-credit:hover .wz-credit-logo,
.wz-credit:focus-visible .wz-credit-logo{transform:scale(1.06)}
@media (prefers-reduced-motion: reduce){
  .wz-credit,.wz-credit-logo{transition:none}
  .wz-credit:hover,.wz-credit:focus-visible{transform:none}
  .wz-credit:hover .wz-credit-logo{transform:none}
}

/* ============ Multi-step forms ============ */
/* The booking form sits on a white card (.u49); the contact form sits on a dark
   panel. Both share these tokens, and .cl-form--contact overrides them. */
.cl-form{
  --cl-bg:#f7f9fc;
  --cl-border:#cbd6e2;
  --cl-border-hover:#9db1c7;
  --cl-text:#14202e;
  --cl-label:#33465c;
  --cl-focus:#0b4a8f;
  --cl-ring:rgba(11,74,143,.16);
  --cl-error:#b3261e;
  --cl-error-ring:rgba(179,38,30,.14);
  --cl-success:#1a7f4b;
  --cl-muted:#5b6b7d;
  --cl-step-fill:#0b4a8f;
  --cl-step-on:#fff;
}
.cl-form-body{display:flex;flex-direction:column;gap:18px}

.cl-steps{display:flex;gap:10px;list-style:none;margin:2px 0 2px;padding:0;flex-wrap:wrap}
.cl-step{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--cl-label);opacity:.5;
  transition:opacity 260ms cubic-bezier(.22,.61,.36,1);
}
.cl-step span{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  border:1.5px solid currentColor;
  font-size:12px;font-weight:700;line-height:1;
  transition:background-color 260ms cubic-bezier(.22,.61,.36,1),color 260ms cubic-bezier(.22,.61,.36,1),border-color 260ms cubic-bezier(.22,.61,.36,1);
}
.cl-step.is-active{opacity:1}
.cl-step.is-done{opacity:.75}
.cl-step.is-active span,.cl-step.is-done span{
  background:var(--cl-step-fill);
  border-color:var(--cl-step-fill);
  color:var(--cl-step-on);
}

.cl-panel{border:0;margin:0;padding:0;min-inline-size:0;display:none}
.cl-panel.is-active{display:flex;flex-direction:column;gap:16px;animation:cl-fade 320ms cubic-bezier(.22,.61,.36,1) both}
@keyframes cl-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cl-legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.cl-field{display:flex;flex-direction:column;gap:6px;position:relative;min-width:0}
.cl-field[hidden],.cl-form [hidden]{display:none !important}
.cl-label{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--cl-label)}
.cl-optional{font-weight:400;opacity:.65}
.cl-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.cl-row{grid-template-columns:1fr}}

.cl-input{
  width:100%;box-sizing:border-box;
  padding:13px 14px;
  font:inherit;font-size:15px;line-height:1.3;
  color:var(--cl-text);
  background:var(--cl-bg);
  border:1.5px solid var(--cl-border);
  border-radius:10px;
  transition:border-color 200ms cubic-bezier(.22,.61,.36,1),box-shadow 200ms cubic-bezier(.22,.61,.36,1),background-color 200ms cubic-bezier(.22,.61,.36,1);
  -webkit-appearance:none;appearance:none;
}
.cl-input::placeholder{color:var(--cl-muted);opacity:.8}
.cl-input:hover{border-color:var(--cl-border-hover)}
.cl-input:focus{outline:none;border-color:var(--cl-focus);box-shadow:0 0 0 3px var(--cl-ring)}
.cl-textarea{resize:vertical;min-height:96px}
/* One shorthand, so an earlier `background:` on .cl-input cannot leave the
   chevron tiling across the field. */
.cl-select{
  padding-right:40px;cursor:pointer;
  background:var(--cl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333465c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 13px center / 17px;
}
.cl-input[type="date"]{min-height:49px}

.cl-error{display:none;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--cl-error)}
.cl-field.has-error .cl-input{border-color:var(--cl-error);box-shadow:0 0 0 3px var(--cl-error-ring)}
.cl-field.has-error .cl-error{display:block;animation:cl-fade 200ms ease both}

.cl-hint{font-size:12.5px;color:var(--cl-muted);margin:-4px 0 0;line-height:1.45}

.cl-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cl-actions .cl-submit{flex:1 1 auto}
.cl-back{
  background:none;border:0;padding:8px 2px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--cl-label);
  transition:color 200ms ease,transform 200ms cubic-bezier(.22,.61,.36,1);
}
.cl-back:hover{color:var(--cl-focus);transform:translateX(-2px)}
.cl-next{width:100%}

.cl-status{
  margin:0;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;
  color:var(--cl-text);background:var(--cl-bg);border:1px solid var(--cl-border);
  animation:cl-fade 260ms ease both;
}
.cl-status.is-ok{color:var(--cl-success);border-color:var(--cl-success);font-weight:600}
.cl-status.is-error{color:var(--cl-error);border-color:var(--cl-error)}

/* contact page variant — dark panel */
.cl-form--contact{
  --cl-bg:rgba(255,255,255,.06);
  --cl-border:rgba(255,255,255,.18);
  --cl-border-hover:rgba(255,255,255,.34);
  --cl-text:#eef3f8;
  --cl-label:#c7d4e2;
  --cl-focus:#7fb2ee;
  --cl-ring:rgba(127,178,238,.22);
  --cl-error:#ff9b9b;
  --cl-error-ring:rgba(255,143,143,.18);
  --cl-success:#7fe0ae;
  --cl-muted:#93a6ba;
  --cl-step-fill:#f2f6fa;
  --cl-step-on:#0f1a26;
  background:linear-gradient(160deg,rgba(20,32,46,.97),rgba(13,22,33,.99));
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:30px;
  color:#eef3f8;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.6);
}
.cl-form--contact .cl-select{
  background:var(--cl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7d4e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 13px center / 17px;
}
.cl-form--contact .cl-input option{color:#14202e;background:#fff}
@media (max-width:640px){.cl-form--contact{padding:22px 18px;border-radius:14px}}
.cl-form-head{margin-bottom:22px}
.cl-form-title{margin:0 0 6px;font-size:clamp(20px,2.4vw,25px);line-height:1.2;font-weight:700}
.cl-form-sub{margin:0;font-size:14.5px;line-height:1.55;opacity:.72}

@media (prefers-reduced-motion: reduce){
  .cl-panel.is-active,.cl-status,.cl-field.has-error .cl-error{animation:none}
  .cl-input,.cl-back,.cl-step,.cl-step span{transition:none}
  .cl-back:hover{transform:none}
}

/* Office location map */
.cl-map{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.cl-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:640px){.cl-map{aspect-ratio:1/1;border-radius:12px}}

/* CTA band — full-bleed background image */
.cta-band--bg{position:relative;isolation:isolate;background-color:#0d1621}
.cta-band--bg::before{
  content:'';
  position:absolute;inset:0;z-index:-2;
  background-image:var(--cta-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.cta-band--bg::after{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,16,25,.94) 0%,rgba(9,16,25,.88) 45%,rgba(9,16,25,.72) 100%);
}
.cta-band--bg,.cta-band--bg h2,.cta-band--bg p,.cta-band--bg a{color:#f2f6fa}
.cta-band--bg .u166{color:#fff}
@media (max-width:860px){
  .cta-band--bg::after{background:linear-gradient(180deg,rgba(9,16,25,.93) 0%,rgba(9,16,25,.9) 100%)}
}

/* footer legal row now carries three items (copyright, policies, credit) */
.footer-legal{gap:18px 28px;flex-wrap:wrap;align-items:center;padding-left:20px;padding-right:20px}
.footer-legal > *{min-width:0}
@media (max-width:1024px){.footer-legal{justify-content:center;text-align:center}}

/* ============ Scheduler: calendar + time slots ============ */
/* Once enhanced, the native date/select keep the value but leave the layout.
   They stay in the accessibility tree only as the form's data carriers. */
.cl-sched.is-enhanced [data-native-schedule]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Two trigger fields side by side; each opens its own floating popover, so the
   panels no longer compete for inline width. */
.cl-sched-ui{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:560px){.cl-sched-ui{grid-template-columns:minmax(0,1fr)}}

.cl-picker{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.cl-picker-trigger{
  display:flex;align-items:center;gap:10px;width:100%;
  box-sizing:border-box;padding:13px 14px;
  font:inherit;font-size:15px;line-height:1.3;text-align:left;
  color:var(--cl-text);background:var(--cl-bg);
  border:1.5px solid var(--cl-border);border-radius:10px;cursor:pointer;
  transition:border-color 200ms cubic-bezier(.22,.61,.36,1),box-shadow 200ms cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){.cl-picker-trigger:hover:not(:disabled){border-color:var(--cl-border-hover)}}
.cl-picker-trigger:focus-visible{outline:none;border-color:var(--cl-focus);box-shadow:0 0 0 3px var(--cl-ring)}
.cl-picker.is-open .cl-picker-trigger{border-color:var(--cl-focus);box-shadow:0 0 0 3px var(--cl-ring)}
.cl-picker-trigger:disabled{opacity:.55;cursor:not-allowed}
.cl-picker-value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cl-picker-value.is-empty{color:var(--cl-muted);font-weight:400}
.cl-picker-ico{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--cl-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cl-picker-chev{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--cl-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms cubic-bezier(.22,.61,.36,1)}
.cl-picker.is-open .cl-picker-chev{transform:rotate(180deg)}

/* the popover itself */
.cl-pop{
  position:absolute;z-index:40;top:calc(100% + 8px);left:0;
  min-width:290px;max-width:min(340px,calc(100vw - 32px));
  border-radius:14px;
  background:var(--cl-pop-bg,#fff);
  border:1px solid var(--cl-border);
  box-shadow:0 20px 46px -18px rgba(9,22,40,.42),0 2px 8px rgba(9,22,40,.08);
  padding:14px;
  animation:cl-pop-in 170ms cubic-bezier(.22,.61,.36,1) both;
}
.cl-pop[hidden]{display:none}
@keyframes cl-pop-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
/* flip to the right edge for the second field so it never leaves the card */
.cl-picker[data-picker="time"] .cl-pop{left:auto;right:0}
@media (max-width:560px){
  .cl-picker .cl-pop{left:0;right:0;min-width:0;max-width:none}
}
.cl-form--contact{--cl-pop-bg:#16212e}

.cl-pop-foot{
  display:flex;gap:8px;justify-content:space-between;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--cl-border);
}
.cl-pop-btn{
  padding:7px 11px;border-radius:8px;border:1.5px solid transparent;
  background:none;font:inherit;font-size:12.5px;font-weight:650;
  color:var(--cl-focus);cursor:pointer;
  transition:background-color 170ms ease,border-color 170ms ease;
}
@media (hover:hover){.cl-pop-btn:hover{background:var(--cl-ring);border-color:var(--cl-focus)}}
.cl-pop-btn:focus-visible{outline:2px solid var(--cl-focus);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .cl-pop{animation:none}
  .cl-picker-trigger,.cl-picker-chev,.cl-pop-btn{transition:none}
  .cl-picker.is-open .cl-picker-chev{transform:none}
}

.cl-cal,.cl-slots{border:0;background:none;padding:0}

.cl-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cl-cal-title{
  font-size:14.5px;font-weight:700;letter-spacing:.01em;color:var(--cl-text);
  text-align:center;flex:1 1 auto;
}
.cl-cal-nav{
  flex:0 0 auto;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;border:1.5px solid var(--cl-border);
  background:transparent;color:var(--cl-text);cursor:pointer;
  transition:background-color 180ms cubic-bezier(.22,.61,.36,1),border-color 180ms cubic-bezier(.22,.61,.36,1),transform 180ms cubic-bezier(.22,.61,.36,1);
}
.cl-cal-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.cl-cal-nav:hover{border-color:var(--cl-focus);background:var(--cl-ring)}}
.cl-cal-nav:active{transform:scale(.94)}

.cl-cal-dow{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;
  margin-bottom:5px;
}
.cl-cal-dow span{
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cl-muted);padding:3px 0;
}

.cl-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cl-cal-pad{display:block}
.cl-cal-day{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:40px;aspect-ratio:1/1;
  padding:0;margin:0;
  font:inherit;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--cl-text);
  background:transparent;border:1.5px solid transparent;border-radius:9px;
  cursor:pointer;
  transition:background-color 160ms cubic-bezier(.22,.61,.36,1),color 160ms cubic-bezier(.22,.61,.36,1),border-color 160ms cubic-bezier(.22,.61,.36,1),transform 160ms cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){
  .cl-cal-day:not(.is-closed):not(.is-selected):hover{background:var(--cl-ring);border-color:var(--cl-focus)}
}
.cl-cal-day:not(.is-closed):active{transform:scale(.93)}
.cl-cal-day.is-closed{
  color:var(--cl-muted);opacity:.4;cursor:default;
  background:transparent;border-color:transparent;
}
.cl-cal-day.is-today::after{
  content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--cl-focus);
}
.cl-cal-day.is-selected{
  background:var(--cl-focus);
  border-color:var(--cl-focus);
  color:#fff;
  box-shadow:0 4px 14px -5px var(--cl-focus);
}
.cl-cal-day.is-selected.is-today::after{background:#fff}

.cl-slots-head{
  font-size:13px;font-weight:700;color:var(--cl-text);
  padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid var(--cl-border);
}
.cl-slots-body{max-height:290px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.cl-slot-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.cl-slot-group + .cl-slot-group{margin-top:14px}
.cl-slot-label{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cl-muted);margin-bottom:7px;
}
.cl-slot-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.cl-slot{
  min-height:40px;padding:8px 6px;
  font:inherit;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--cl-text);
  background:transparent;
  border:1.5px solid var(--cl-border);border-radius:9px;
  cursor:pointer;white-space:nowrap;
  transition:background-color 160ms cubic-bezier(.22,.61,.36,1),color 160ms cubic-bezier(.22,.61,.36,1),border-color 160ms cubic-bezier(.22,.61,.36,1),transform 160ms cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){
  .cl-slot:not(.is-selected):hover{border-color:var(--cl-focus);background:var(--cl-ring)}
}
.cl-slot:active{transform:scale(.95)}
.cl-slot.is-selected{
  background:var(--cl-focus);border-color:var(--cl-focus);color:#fff;
  box-shadow:0 4px 14px -5px var(--cl-focus);
}

.cl-sched-err{
  margin:10px 0 0;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--cl-error);
}

/* One focus treatment for every control in the widget. */
.cl-cal-day:focus-visible,
.cl-slot:focus-visible,
.cl-cal-nav:focus-visible{
  outline:2px solid var(--cl-focus);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .cl-cal-day,.cl-slot,.cl-cal-nav{transition:none}
  .cl-cal-day:active,.cl-slot:active,.cl-cal-nav:active{transform:none}
}

/* Windows High Contrast: system colors must survive. */
@media (forced-colors: active){
  .cl-cal-day.is-selected,.cl-slot.is-selected{
    background:Highlight;color:HighlightText;border-color:Highlight;forced-color-adjust:none;
  }
  .cl-cal-day.is-closed{color:GrayText;opacity:1}
  .cl-cal-day:focus-visible,.cl-slot:focus-visible,.cl-cal-nav:focus-visible{outline:2px solid CanvasText}
}

/* ============ Legal pages (privacy, terms, disclaimer) ============ */
/* the legal hero sits on the light page-intro background, not the dark one */
.legal-updated{margin-top:14px;font-size:13.5px;font-weight:500;color:#5b6b7d}
.legal-prose{max-width:74ch;margin:0 auto;color:#4a5563;font-size:15.5px;line-height:1.75}
.legal-prose > * + *{margin-top:16px}
.legal-prose h2{
  font-family:Lora,serif;font-size:clamp(20px,2.3vw,24px);line-height:1.3;
  font-weight:600;color:#0b4a8f;margin-top:38px;scroll-margin-top:90px;
}
.legal-prose h2:first-child{margin-top:0}
.legal-prose h3{
  font-size:16.5px;font-weight:700;color:#14202e;margin-top:26px;line-height:1.4;
}
.legal-prose ul,.legal-prose ol{margin-left:0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.legal-prose li{padding-left:2px}
.legal-prose li::marker{color:#0b4a8f}
.legal-prose a{color:#0b4a8f;text-decoration:underline;text-underline-offset:2px}
.legal-prose a:hover{text-decoration-thickness:2px}
.legal-prose strong{color:#14202e;font-weight:650}
.legal-prose .legal-callout{
  margin-top:22px;padding:16px 18px;border-radius:12px;
  background:#f2f6fb;border:1px solid #d4e2f2;border-left:4px solid #0b4a8f;
}
.legal-prose .legal-callout p{margin:0}
.legal-prose .legal-callout > * + *{margin-top:10px}
.legal-prose dl{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.legal-prose dt{font-weight:700;color:#14202e}
.legal-prose dd{margin:2px 0 0}
@media (max-width:640px){.legal-prose{font-size:15px}}

/* footer legal links */
.footer-legal-links{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.footer-legal-links a{color:inherit;text-decoration:none;transition:color 180ms ease}
.footer-legal-links a:hover,.footer-legal-links a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* CASL marketing-consent checkbox */
.cl-consent{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 13px;
  border:1.5px solid var(--cl-border);border-radius:11px;
  background:var(--cl-bg);
  cursor:pointer;
  transition:border-color 180ms cubic-bezier(.22,.61,.36,1),background-color 180ms cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){.cl-consent:hover{border-color:var(--cl-border-hover)}}
.cl-consent input[type="checkbox"]{
  flex:0 0 auto;
  width:19px;height:19px;margin:1px 0 0;
  accent-color:var(--cl-focus);
  cursor:pointer;
}
.cl-consent input[type="checkbox"]:focus-visible{outline:2px solid var(--cl-focus);outline-offset:2px}
.cl-consent span{font-size:13px;line-height:1.5;color:var(--cl-label)}
.cl-consent:has(input:checked){border-color:var(--cl-focus);background:var(--cl-ring)}
@media (prefers-reduced-motion: reduce){.cl-consent{transition:none}}

/* Legacy globals at the top of this file (`input:focus`, `select:focus`) set a
   background shorthand and a gold border. Those beat .cl-input/.cl-select on
   specificity, which wiped the select chevron on focus and replaced the form's
   focus ring. Re-assert the form's own treatment above them. */
.cl-form .cl-input:focus{
  outline:none;
  border-color:var(--cl-focus);
  background:var(--cl-bg);
  box-shadow:0 0 0 3px var(--cl-ring);
}
.cl-form .cl-select:focus{
  background:var(--cl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333465c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 13px center / 17px;
}
.cl-form--contact .cl-select:focus{
  background:var(--cl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7d4e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 13px center / 17px;
}

/* ============================================================
   Global mobile corrections
   Appended last so these win over the earlier breakpoint rules.
   ============================================================ */

/* 1. Outcome cards went full-bleed-ish in a swipe rail; on a phone they should
      simply stack and fill the column. */
@media (max-width:900px){
  .ol-cols{display:flex;flex-direction:column;overflow-x:visible;gap:14px;padding-bottom:0}
  .ol-col{flex:1 1 auto;width:100%;min-width:0;max-width:none}
}

/* 2. FAQ rows carried a transparent left border, so only the open row showed
      one. Give every row a visible rail that turns gold when it opens. */
.u153{border-left-color:#e2ddd0 !important}
.faq-item.open,.u146{border-left-color:#c9a227 !important}

/* 3. Charge tabs: on a phone the rail scrolled sideways and clipped later tabs.
      JS unpicks the tab semantics at this width; here the two grid children are
      hoisted with display:contents and interleaved, so each header sits directly
      above its own panel. */
@media (max-width:900px){
  .ct.is-stacked .ct-list,
  .ct.is-stacked .ct-panels{display:contents}
  .ct.is-stacked{display:flex;flex-direction:column;border-left:0;border-right:0}
  .ct.is-stacked .ct-tab{
    width:100%;min-width:0;display:flex;gap:12px;align-items:center;
    border:0;border-top:1px solid #e9e6df;border-radius:0;
    background:#faf8f2;padding:15px 18px;cursor:pointer;text-align:left;
  }
  .ct.is-stacked .ct-tab::before{display:none}
  .ct.is-stacked .ct-tab-txt{flex:1 1 auto;min-width:0;text-align:left}
  /* the chevron carries the open/closed state, so it must be visible here */
  .ct.is-stacked .ct-tab .ct-chev{
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;margin-inline-start:auto;width:22px;height:22px;color:#8a7a4a;
    transform:rotate(90deg);
    transition:transform 380ms cubic-bezier(.22,.61,.36,1);
  }
  .ct.is-stacked .ct-tab[aria-expanded="true"] .ct-chev{transform:rotate(-90deg)}
  .ct.is-stacked .ct-tab[aria-expanded="true"]{background:#fff}
  .ct.is-stacked .ct-chev svg{
    width:16px;height:16px;display:block;fill:none;stroke:currentColor;
    stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  }
  .ct.is-stacked .ct-panel{padding:4px 18px 26px;border-top:0}
  .ct.is-stacked .ct-panel[hidden]{display:none}
  .ct.is-stacked .ct-title{font-size:20px;margin-top:0}
  .ct.is-stacked .ct-meta{grid-template-columns:1fr}
}

/* 4. Process timeline. The rail scrolled sideways, the connecting line was
      switched off and labels sat left-aligned under their dots. Below 560px the
      labels are dropped entirely -- five to seven of them cannot read at ~70px
      apiece -- and the panel underneath already names the current step. */
@media (max-width:760px){
  .pt-rail{
    display:flex;justify-content:space-between;align-items:flex-start;
    overflow-x:visible;gap:4px;position:relative;
  }
  .pt-line{display:block;position:absolute;left:18px;right:18px;top:17px;height:2px;background:#e2ddd0}
  .pt-node{
    flex:1 1 0;min-width:0;padding:0;
    align-items:center;text-align:center;gap:7px;position:relative;z-index:1;
  }
  .pt-dot{width:36px;height:36px;flex:0 0 36px;font-size:15px}
  .pt-label{text-align:center;font-size:11.5px;line-height:1.3;hyphens:auto}
  .pt-when{text-align:center;font-size:9px;letter-spacing:.1em}
}
@media (max-width:560px){
  .pt-label,.pt-when{display:none}
  .pt-dot{width:32px;height:32px;flex:0 0 32px;font-size:14px}
  .pt-line{top:15px}
}

/* 5. The phone block stacked its "Call now" label above the number, which made
      the control taller than its neighbours. Label and number now share a line,
      centred, with the label reduced to a caption. */
@media (max-width:400px){
  .phone-box .u39{font-size:16.5px}
  .phone-box .u38{font-size:9px;letter-spacing:.08em}
}

/* 6. Carousel progress dots were being squeezed out of round by their flex
      parent. Lock the box so they stay circular. */
.u193,.u194{
  flex:0 0 9px;width:9px;height:9px;aspect-ratio:1/1;
  border-radius:50%;display:inline-block;padding:0;
}

/* 7. Footer columns sat two-up at phone widths. Stack them so each menu runs
      the full width, one after another. */
@media (max-width:760px){
  .u197[data-g="4"]{grid-template-columns:1fr !important;gap:0 !important}
  .u197 > .f-col,.u197 > div{width:100%;min-width:0}
}

/* Footer social icons: real brand marks rather than letterforms. */
.u202 a.u203{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  font-size:0;line-height:0;
}
.u202 a.u203 svg{width:17px;height:17px;display:block;fill:currentColor}

/* Footer menu accordion (phone widths).
   One row per menu: label left, chevron right, a hairline under every row but
   the last. The open/close is a grid-template-rows 0fr->1fr transition, which
   animates to the content's real height without measuring it in JS; the inner
   column fades and lifts slightly on the same curve so the panel arrives as one
   movement rather than a height change with text popping in. */
@media (max-width:760px){
  .u197 .f-col{
    border-bottom:1px solid rgba(255,255,255,.16);
    border-top:0;
  }
  .u197 .f-col:last-child{border-bottom:0}

  .u197 .f-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    width:100%;padding:17px 0;min-height:56px;
    text-align:left;cursor:pointer;
  }
  .u197 .f-head h4{
    flex:1 1 auto;min-width:0;margin:0;
    text-align:left;
  }
  .u197 .f-chev{
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;margin-inline-start:auto;
    width:26px;height:26px;color:#e6c95f;
    transition:transform 420ms cubic-bezier(.22,.61,.36,1);
  }
  .u197 .f-chev svg{
    width:17px;height:17px;display:block;
    fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .u197 .f-col.open .f-chev{transform:rotate(180deg)}

  .u197 .f-links{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows 420ms cubic-bezier(.22,.61,.36,1);
  }
  .u197 .f-col.open .f-links{grid-template-rows:1fr}
  /* clipping alone leaves the links focusable and announced while the panel is
     shut; visibility takes them out of the tab order and the a11y tree, delayed
     on close so it does not cut the height animation short. */
  .u197 .f-links-inner{
    min-height:0;overflow:hidden;
    visibility:hidden;transition:visibility 0s linear 420ms;
  }
  .u197 .f-col.open .f-links-inner{visibility:visible;transition:visibility 0s linear 0s}
  .u197 .f-links-inner > div{
    padding-bottom:20px;
    opacity:0;transform:translateY(-6px);
    transition:opacity 300ms ease 40ms,transform 420ms cubic-bezier(.22,.61,.36,1);
  }
  .u197 .f-col.open .f-links-inner > div{opacity:1;transform:none}
}

@media (max-width:760px) and (prefers-reduced-motion: reduce){
  .u197 .f-links,.u197 .f-chev,.u197 .f-links-inner > div{transition:none}
  .u197 .f-col.open .f-chev{transform:none}
}

@media (max-width:900px) and (prefers-reduced-motion: reduce){
  .ct.is-stacked .ct-tab .ct-chev{transition:none}
}

/* ---- Defence picker: accordion on a phone, matching the charge tabs ---- */
@media (max-width:900px){
  .df.is-stacked{display:flex;flex-direction:column;gap:0;border:1px solid #e2ddd0;background:#fff}
  .df.is-stacked .df-prompt{order:-1;padding:16px 18px 0}
  .df.is-stacked .df-chips,
  .df.is-stacked .df-panels{display:contents}

  .df.is-stacked .df-chip{
    width:100%;min-width:0;margin:0;border-radius:0;
    display:flex;align-items:center;gap:12px;text-align:left;
    border:0;border-top:1px solid #e9e6df;background:#faf8f2;
    padding:15px 18px;font-size:14px;
  }
  .df.is-stacked .df-chip svg,
  .df.is-stacked .df-chip .df-ico{flex:0 0 auto}
  .df.is-stacked .df-chip::after{
    content:'';flex:0 0 auto;margin-inline-start:auto;
    width:9px;height:9px;border-right:2px solid #8a7a4a;border-bottom:2px solid #8a7a4a;
    transform:rotate(-45deg);transform-origin:center;
    transition:transform 380ms cubic-bezier(.22,.61,.36,1);
  }
  .df.is-stacked .df-chip[aria-expanded="true"]::after{transform:rotate(45deg)}
  .df.is-stacked .df-chip[aria-expanded="true"]{background:#fff}

  .df.is-stacked .df-panels{margin:0}
  .df.is-stacked .df-panel{
    margin:0;padding:4px 18px 24px;border:0;background:#fff;
  }
  .df.is-stacked .df-panel[hidden]{display:none}
}
@media (max-width:900px) and (prefers-reduced-motion: reduce){
  .df.is-stacked .df-chip::after{transition:none}
}

/* ---- Process timeline: equal gaps, line only between the dots ----
   The connecting line is drawn per node, from this dot's edge to the next
   one's, so the spacing is whatever the flex track gives it and no segment
   can hang off either end. Works for any number of steps. */
@media (max-width:760px){
  /* The dot shrinks to whatever an even share of the rail allows, so 3 steps and
     11 steps both fit one row at any width. --pt-n is the step count, written by
     the component; cqw measures the rail itself rather than the viewport. */
  .pt-rail{gap:0;container-type:inline-size}
  .pt-dot{
    --pt-dot:clamp(19px, calc(100cqw / var(--pt-n, 5) - 7px), 36px);
    width:var(--pt-dot);height:var(--pt-dot);flex:0 0 var(--pt-dot);
    font-size:clamp(9.5px, calc(var(--pt-dot) * .44), 16px);
    position:relative;z-index:1;
  }
  .pt-node,
  .pt-node:first-child,
  .pt-node:last-child{
    align-items:center;text-align:center;padding:0;
  }
  .pt-line{display:none}
  .pt-node::after{
    content:'';position:absolute;z-index:0;
    height:2px;background:#e2ddd0;
    --pt-dot:clamp(19px, calc(100cqw / var(--pt-n, 5) - 7px), 36px);
    top:calc(var(--pt-dot) / 2 - 1px);
    left:calc(50% + var(--pt-dot) / 2 + 2px);
    width:calc(100% - var(--pt-dot) - 4px);
  }
  .pt-node:last-child::after{content:none}
}

/* ---- CTA panel: the same photographic backdrop as the CTA band ----
   CTAPanel is a separate component from CTABand and never received the
   treatment, which is why the homepage's urgent-CTA stayed flat. */
.u83{
  background-color:#12233a;
  background-image:
    linear-gradient(100deg,rgba(11,20,34,.94) 0%,rgba(11,20,34,.88) 46%,rgba(11,20,34,.74) 100%),
    url('/images/stock/cta-law-library.webp');
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}

/* ============ Targeted spacing and imagery corrections ============ */

/* 1. Breathing room under the booking form's submit button. */
.u49 .u64{padding-top:14px}

/* 2. About -> "Our Legal Team": the portrait sits in a plain .u154 grid with no
      .team-row class, so it never picked up the top-centre crop the team page
      uses. Anchor it to the top and give it the same solid backdrop. */
#legal-team .ph-photo img{object-position:top center}
#legal-team .ph{background:#eceadf}

/* 3 + 4. Team member portraits: taller, and the first section starts closer to
   the top of the page so the lead lawyer is not pushed below the fold. */
.team-row .ph{height:520px !important}
.team-row .ph-photo img{object-position:top center}
@media (max-width:1080px){.team-row .ph{height:460px !important}}
@media (max-width:760px){.team-row .ph{height:400px !important}}
@media (max-width:430px){.team-row .ph{height:340px !important}}

/* The lead lawyer's section starts closer to the page top. Keyed by id because
   these sections are not the first <section> siblings -- the hero is. */
#obinna-ononuju{padding-top:34px}
@media (max-width:760px){#obinna-ononuju{padding-top:24px}}

/* 6. Phone block: match the height and alignment of the buttons beside it.
      It was shorter than a .cta and its two lines sat on different baselines. */
/* Some blocks render one chip, others two (direct + toll-free). The container
   wraps -- forcing one line gives it a min-content floor wider than a phone
   viewport -- and align-content:stretch still lets a single line fill the row. */
.phone-box{
  display:flex;align-items:stretch;align-content:stretch;justify-content:center;
  gap:14px;flex-wrap:wrap;
}
.phone-box > div{
  display:flex;align-items:center;justify-content:center;
  gap:9px;min-height:54px;padding:10px 16px;
  border:1px solid #e6e1d4;border-radius:10px;background:#fff;
  flex:1 1 auto;min-width:0;
}
.phone-box .u38{
  flex:0 0 auto;font-size:9.5px;letter-spacing:.12em;line-height:1;
  white-space:nowrap;opacity:.85;align-self:center;
}
.phone-box .u39{
  flex:0 1 auto;min-width:0;
  font-size:18px;line-height:1;white-space:nowrap;align-self:center;
}
.phone-box .u40{display:none}
@media (max-width:430px){
  .phone-box > div{min-height:48px;padding:9px 12px;gap:7px}
  .phone-box .u39{font-size:16.5px}
  .phone-box .u38{font-size:9px;letter-spacing:.07em}
}
/* on dark sections the chip must not become a white slab */
.u108 .phone-box > div,
.cta-band--bg .phone-box > div,
.u83 .phone-box > div{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}

/* The hero pairs a CTA with the phone chip inside .action-row. Stretching the
   row makes the chip exactly as tall as the button beside it, whatever that
   button's label wraps to, instead of guessing a fixed height. */
.action-row{display:flex;align-items:stretch;flex-wrap:wrap;gap:14px}
.action-row > .cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;margin-top:0}
/* .u37 carries its own padding, which capped how tall the chip could grow */
.action-row > .phone-box{margin-top:0;padding:0;flex:0 1 auto}
.action-row > .phone-box > div{align-self:stretch}
@media (max-width:640px){
  .action-row{flex-direction:column;align-items:stretch}
  .action-row > .phone-box,.action-row > .cta{width:100%}
  /* stacked: every chip takes its own full-width row, button-height each */
  .phone-box > div{flex:1 1 100%}
}

/* Reusable visually-hidden utility. Used to give a link a descriptive
   accessible name (and anchor text) without changing what the button shows. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}