/* ==========================================================================
   Lettredocu ESTA — enhancement layer
   Load AFTER style.css. Removing this file (and enhance.js) fully reverts.
   Nothing here changes form markup, names, IDs or validation behaviour.
   ========================================================================== */

   @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap");

   /* --------------------------------------------------------------------------
      1. Tokens — brand colours kept, refined around them
      -------------------------------------------------------------------------- */
   :root {
       --fx-navy-950: #03102b;
       --fx-navy-900: #061a45;
       --fx-navy: rgb(0, 49, 128);          /* existing --bg-dark */
       --fx-blue: rgb(32, 147, 214);        /* existing --bg-primary */
       --fx-red: rgb(225, 40, 40);          /* existing --bg-action */
       --fx-red-deep: #b4151d;
       --fx-ink: #0e1c38;
       --fx-muted: #56637a;
       --fx-line: #dde4ee;
       --fx-canvas: #f3f6fa;
   
       --fx-shadow-sm: 0 1px 2px rgba(3, 16, 43, .05), 0 2px 6px rgba(3, 16, 43, .04);
       --fx-shadow: 0 2px 4px rgba(3, 16, 43, .04), 0 14px 34px -10px rgba(3, 16, 43, .16);
       --fx-shadow-lg: 0 4px 10px rgba(3, 16, 43, .05), 0 36px 70px -18px rgba(3, 16, 43, .38);
       --fx-ring: 0 0 0 4px rgba(32, 147, 214, .16);
   
       --fx-ease: cubic-bezier(.22, 1, .36, 1);
       --fx-ease-in-out: cubic-bezier(.65, 0, .35, 1);
   
       /* Override existing tokens so the whole site picks them up */
       --font-family: "Instrument Sans", "Montserrat", "Noto Sans JP", system-ui, sans-serif;
       --font-title: "Instrument Sans", "Montserrat", "Noto Sans JP", system-ui, sans-serif; /* was referenced but never defined */
       --br-base: 8px;
       --br-sm: 10px;
       --br-rd: 16px;
       --txt-dark: var(--fx-ink);
       --txt-light: var(--fx-muted);
   }
   
   /* --------------------------------------------------------------------------
      2. Base
      -------------------------------------------------------------------------- */
   html {
       scroll-behavior: smooth;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       text-rendering: optimizeLegibility;
   }
   
   ::selection { background: rgba(32, 147, 214, .22); }
   
   h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
       letter-spacing: -0.022em;
       text-wrap: balance;
   }
   h1, .h1 { line-height: 1.12; font-weight: 700; }
   h2, .h2 { line-height: 1.18; font-weight: 700; }
   
   p, .p {
       font-weight: 400;          /* 300 was too thin on most screens */
       line-height: 1.7;
       text-wrap: pretty;
   }
   
   /* Page fade-in. No fill-mode on purpose: a filled opacity animation keeps
      <main> as a stacking context, which traps modals under Bootstrap's backdrop. */
   main { animation: fx-fade .6s var(--fx-ease); }
   
   :focus-visible {
       outline: 2px solid var(--fx-blue);
       outline-offset: 3px;
   }
   
   /* --------------------------------------------------------------------------
      3. Navigation — absolute on every page
      Plain pages: navy bar, <main> is pushed down by the nav height.
      Pages that open with a dark block: see section 16.
      -------------------------------------------------------------------------- */
   :root { --fx-nav-h: 88px; }
   @media (max-width: 767.98px) {
       :root { --fx-nav-h: 72px; }
   }
   
   #navbar-id {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1030;
       height: var(--fx-nav-h);
       padding: 0;
       background-color: var(--fx-navy);
   }
   main { padding-top: var(--fx-nav-h); }
   
   #navbar-id .navbar-brand img { transition: transform .6s var(--fx-ease); }
   #navbar-id .navbar-brand:hover img { transform: rotate(-10deg) scale(1.06); }
   #navbar-id .brand-service { font-weight: 700; letter-spacing: .02em; }
   #navbar-id .language-select { transition: color .2s ease, opacity .2s ease; }
   
   /* --------------------------------------------------------------------------
      4. Hero — photo with brand-blue overlay
      -------------------------------------------------------------------------- */
   .bg-hero {
       position: relative;
       isolation: isolate;
       background-image: url("/img/backgrounds/hero-home.jpg");
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
       background-color: var(--fx-navy); /* shows while the photo loads */
   }
   .bg-hero::before {
       content: "";
       position: absolute;
       inset: 0;
       z-index: -1;
       pointer-events: none;
       background:
           radial-gradient(60% 80% at 12% 15%, rgba(32, 147, 214, .38), transparent 65%),
           linear-gradient(135deg, rgba(3, 16, 43, .92) 0%, rgba(0, 49, 128, .84) 50%, rgba(0, 49, 128, .70) 100%);
   }
   
   #landing h1 { letter-spacing: -0.03em; }
   
   /* --------------------------------------------------------------------------
      5. Surfaces / cards
      -------------------------------------------------------------------------- */
   .bg { border-color: rgba(255, 255, 255, .7); }
   
   .title-badge {
       background-color: rgba(255, 255, 255, .1);
       border: 1px solid rgba(255, 255, 255, .18);
       -webkit-backdrop-filter: blur(8px);
       backdrop-filter: blur(8px);
       padding: 8px 14px;
       font-size: var(--fs-md);
       font-weight: 500;
   }
   
   .basic-img-lg { border-radius: 22px; }
   
   .esta-preview { border: 1px solid var(--fx-line); }
   
   /* --------------------------------------------------------------------------
      6. Buttons
      -------------------------------------------------------------------------- */
   .btn {
       border-radius: 12px;
       font-weight: 600;
       letter-spacing: .005em;
       /* original used transition: (var(--transition)), which is invalid */
       transition:
           transform .25s var(--fx-ease),
           box-shadow .35s var(--fx-ease),
           background-color .25s ease,
           border-color .25s ease,
           color .25s ease;
   }
   .btn:active { transform: translateY(1px) scale(.985); }
   
   .btn span::after { transition: transform .4s var(--fx-ease); }
   .btn:hover span::after {
       right: -22px;
       transform: translateX(5px);
       transition: transform .4s var(--fx-ease);
   }
   
   .btn-cta {
       background-color: var(--fx-red);
       background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
       border-color: var(--fx-red);
       box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(225, 40, 40, .75);
   }
   .btn-cta:hover,
   .btn-cta:focus-visible {
       background-color: var(--fx-red-deep);
       border-color: var(--fx-red-deep);
       transform: translateY(-2px);
       box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 18px 34px -12px rgba(225, 40, 40, .8);
   }
   .btn-cta:active { transform: translateY(0) scale(.985); }
   
   .btn-primary {
       background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
       box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 22px -12px rgba(32, 147, 214, .8);
   }
   .btn-primary:hover {
       background-color: #1a82c0;
       border-color: #1a82c0;
       transform: translateY(-1px);
   }
   
   .btn-outline-light:hover { background-color: rgba(255, 255, 255, .08); }
   .btn-outline-dark { border-color: var(--fx-line); }
   .btn-outline-dark:hover { background-color: var(--fx-canvas); border-color: #c5d1e0; }
   
   /* --------------------------------------------------------------------------
      7. Forms — visual only; validation states still win on specificity
      -------------------------------------------------------------------------- */
   label, .label { font-weight: 600; color: var(--fx-ink); }
   
   .form-control,
   .form-select,
   .custom-select-countries,
   .custom-select-phone-parent,
   .input-group {
       border-color: var(--fx-line);
       background-color: #fff;
       transition: border-color .2s ease, box-shadow .3s var(--fx-ease), background-color .2s ease;
   }
   .form-control:hover,
   .form-select:hover,
   .custom-select-countries:hover,
   .custom-select-phone-parent:hover {
       border-color: #a8bbd3;
   }
   .form-control:focus,
   .form-select:focus,
   .form-custom-floating > .form-control:focus {
       border-color: var(--fx-blue);
       box-shadow: var(--fx-ring);
   }
   .custom-select-countries:focus-within,
   .custom-select-phone-parent:focus-within,
   .input-group:focus-within {
       border-color: var(--fx-blue);
       box-shadow: var(--fx-ring);
   }
   .form-control::placeholder { color: #9aa7ba; }
   
   .form-step-section { border-bottom-color: var(--fx-line); }
   
   /* Country picker dropdown */
   .dropdown-country {
       overflow-x: hidden;
       overflow-y: auto;
       border: 1px solid var(--fx-line);
       border-radius: 12px;
       background-color: #fff;
       box-shadow: var(--fx-shadow-lg);
       scrollbar-width: thin;
       scrollbar-color: #c5d1e0 transparent;
   }
   .dropdown-country.show {
       transform-origin: top center;
       animation: fx-drop .28s var(--fx-ease);
   }
   .dropdown-country div { transition: background-color .15s ease, color .15s ease; }
   .dropdown-country div:nth-of-type(even) { background-color: transparent; }
   .dropdown-country div:hover { background-color: rgba(32, 147, 214, .08); color: var(--fx-navy); }
   
   /* Segmented radio pills (travel reason etc.) */
   .custom-radio-field label {
       border-radius: 10px;
       font-weight: 500;
       transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .3s var(--fx-ease);
   }
   .custom-radio-field label:hover { background-color: #e5ecf5; }
   .custom-radio-field input[type="radio"]:checked + label {
       background-color: var(--fx-navy);
       border-color: var(--fx-navy);
       color: #fff;
       box-shadow: 0 8px 18px -10px rgba(0, 49, 128, .8);
   }
   
   /* Selection cards (individual / group, declarations) */
   .custom-checkbox {
       background-color: #fff;
       transition: border-color .2s ease, box-shadow .3s var(--fx-ease), transform .3s var(--fx-ease), background-color .2s ease;
   }
   .custom-checkbox:hover {
       border-color: #a8bbd3;
       box-shadow: var(--fx-shadow-sm);
   }
   .custom-checkbox.checked,
   .custom-declaration-checkbox.checked {
       background-color: rgba(25, 135, 84, .045);
       animation: fx-pop .4s var(--fx-ease);
   }
   
   /* --------------------------------------------------------------------------
      8. Progress steps (application funnel)
      -------------------------------------------------------------------------- */
   .steps__item__icon {
       height: .35rem;
       border-radius: 999px;
       background-color: #e3e9f1;
   }
   .steps__item-finish .steps__item__icon,
   .steps__item-completed .steps__item__icon {
       transform-origin: left center;
       animation: fx-grow .9s var(--fx-ease) both;
   }
   .steps__item-process .steps__item__icon {
       background-image: linear-gradient(90deg, var(--bg-success) 0%, #9becab 50%, var(--bg-success) 100%);
       background-size: 200% 100%;
       animation: fx-grow .9s var(--fx-ease) both, fx-shimmer 2.6s linear 1s infinite;
       transform-origin: left center;
   }
   
   /* --------------------------------------------------------------------------
      9. How it works — this content is a real sequence, so the numbers stay
      -------------------------------------------------------------------------- */
   .home-process {
       font-weight: 700;
       font-variant-numeric: tabular-nums;
       letter-spacing: -0.04em;
   }
   .process-divider {
       transform-origin: left center;
       transition: transform 1.2s var(--fx-ease) .25s;
   }
   .fx-ready [data-fx]:not(.fx-in) .process-divider { transform: scaleX(0); }
   
   /* --------------------------------------------------------------------------
      10. FAQ accordion — motion answers the click
      -------------------------------------------------------------------------- */
   .collapsing { transition: height .45s var(--fx-ease); }
   
   .accordion-item,
   .accordion-item:not(:first-of-type) {
       border: 1px solid var(--fx-line);
       transition: border-color .25s ease, box-shadow .35s var(--fx-ease);
   }
   .accordion-item:hover { border-color: #c5d1e0; }
   .accordion-item:has(.accordion-button:not(.collapsed)) {
       border-color: rgba(32, 147, 214, .45);
   }
   .accordion-button { font-weight: 600; }
   .accordion-button::after {
       width: 2rem;
       height: 2rem;
       flex-shrink: 0;
       border-radius: 50%;
       background-color: var(--fx-canvas);
       background-position: center;
       background-size: .85rem;
       transition: transform .45s var(--fx-ease), background-color .25s ease;
   }
   .accordion-button:not(.collapsed)::after { background-color: rgba(32, 147, 214, .12); }
   .accordion-body {
       line-height: 1.75;
       transition: opacity .4s ease .05s, transform .45s var(--fx-ease) .05s;
   }
   .accordion-collapse.collapse:not(.show) .accordion-body {
       opacity: 0;
       transform: translateY(-6px);
   }
   
   /* --------------------------------------------------------------------------
      11. Footer
      -------------------------------------------------------------------------- */
   footer {
       background-color: var(--fx-navy-950);
       background-image:
           radial-gradient(70% 100% at 0% 100%, rgba(0, 49, 128, .55), transparent 70%),
           radial-gradient(45% 80% at 100% 100%, rgba(32, 147, 214, .12), transparent 70%);
   }
   
   /* The band behind the closing image ends in exactly the footer's top colour */
   .bg-pattern::after {
       background: linear-gradient(180deg, var(--fx-navy-900) 0%, var(--fx-navy-950) 100%) !important;
   }
   .footer h6 { font-weight: 600; letter-spacing: .01em; }
   .footer ul li a {
       background-image: linear-gradient(currentColor, currentColor);
       background-size: 0% 1px;
       background-position: 0 100%;
       background-repeat: no-repeat;
       padding-bottom: 2px;
       transition: background-size .4s var(--fx-ease), color .25s ease;
   }
   .footer ul li a:hover { background-size: 100% 1px; }
   .footer-bottom { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
   
   /* --------------------------------------------------------------------------
      12. Cookie notice & flash messages
      -------------------------------------------------------------------------- */
   .cookieAlert {
       border-radius: 18px;
       border: 1px solid var(--fx-line);
       box-shadow: var(--fx-shadow-lg);
       animation: fx-rise .7s var(--fx-ease) 1s both;
   }
   .cookieAlert .btn { border-radius: 10px; }
   @media (max-width: 767px) {
       .cookieAlert { border-radius: 18px 18px 0 0; }
   }
   
   .message { animation: fx-drop .45s var(--fx-ease) both; }
   .message.error { border-bottom: 1px solid rgba(225, 40, 40, .2); }
   
   /* --------------------------------------------------------------------------
      13. Scroll reveal — only active once enhance.js adds .fx-ready
      -------------------------------------------------------------------------- */
   .fx-ready [data-fx] {
       opacity: 0;
       transform: translate3d(0, 18px, 0);
       transition: opacity .8s var(--fx-ease), transform .9s var(--fx-ease);
       transition-delay: var(--fx-delay, 0s);
   }
   .fx-ready [data-fx="fade"] { transform: none; }
   .fx-ready [data-fx="lift"] { transform: translate3d(0, 28px, 0) scale(.985); }
   .fx-ready [data-fx].fx-in { opacity: 1; transform: none; }
   
   /* --------------------------------------------------------------------------
      14. Keyframes
      -------------------------------------------------------------------------- */
   @keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
   @keyframes fx-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
   @keyframes fx-drop { from { opacity: 0; transform: translateY(-6px) scaleY(.97); } to { opacity: 1; transform: none; } }
   @keyframes fx-pop { 0% { transform: scale(1); } 40% { transform: scale(.985); } 100% { transform: scale(1); } }
   @keyframes fx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
   @keyframes fx-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
   
   /* --------------------------------------------------------------------------
      15. Reduced motion — scoped to this layer so existing spinners keep working
      -------------------------------------------------------------------------- */
   @media (prefers-reduced-motion: reduce) {
       html { scroll-behavior: auto; }
       main,
       .cookieAlert,
       .message,
       .dropdown-country.show,
       .custom-checkbox.checked,
       .custom-declaration-checkbox.checked,
       .steps__item__icon { animation: none !important; }
       .btn,
       .btn-cta:hover,
       .btn-primary:hover { transform: none !important; }
       .collapsing { transition: none; }
   }
   
   /* ==========================================================================
      16. Pages that open with a dark block (home hero, application steps)
      The nav turns transparent and sits over the block. The block reserves the
      nav's height with a transparent top border, so its own padding classes and
      the forms inside it are untouched and never sit under the nav.
      ========================================================================== */
   body:has(.bg-hero, .bg-head-block, .bg-head-block-big) main { padding-top: 0; }
   
   body:has(.bg-hero, .bg-head-block, .bg-head-block-big) #navbar-id {
       background-color: transparent;
       border-bottom: 1px solid rgba(255, 255, 255, .08);
   }
   
   .bg-hero,
   .bg-head-block,
   .bg-head-block-big {
       border-top: var(--fx-nav-h) solid transparent;
       background-origin: border-box;
   }
   .bg-hero::before { top: calc(var(--fx-nav-h) * -1); }
   
   /* Application-step header: the hero's tone without the photo, so the form leads */
   .bg-head-block,
   .bg-head-block-big {
       background-color: var(--fx-navy);
       background-image:
           radial-gradient(60% 90% at 12% 10%, rgba(32, 147, 214, .30), transparent 65%),
           linear-gradient(135deg, var(--fx-navy-950) 0%, var(--fx-navy-900) 45%, var(--fx-navy) 100%);
       background-repeat: no-repeat;
   }
   
   /* Flash messages appear just under the nav instead of behind it */
   body:has(.bg-hero, .bg-head-block, .bg-head-block-big) main > .message {
       position: absolute;
       top: var(--fx-nav-h);
       left: 0;
       right: 0;
   }
   
   /* ==========================================================================
      17. Home page — the "Get started" card
      Field rules use :where() so Bootstrap's .is-invalid / .is-valid still win.
      ========================================================================== */
   .bg-hero .bg {
       border: 1px solid rgba(255, 255, 255, .65);
       border-radius: 24px;
       box-shadow:
           0 1px 0 rgba(255, 255, 255, .9) inset,
           0 2px 6px rgba(3, 16, 43, .08),
           0 44px 90px -28px rgba(3, 16, 43, .6);
   }
   
   .bg-hero .bg :is(h2, h3, h4, .h2, .h3, .h4) {
       font-size: clamp(1.35rem, 2vw, 1.65rem);
       letter-spacing: -0.025em;
       text-align: left !important;
       margin-bottom: 1.25rem;
   }
   
   /* Question labels: quieter, so the fields carry the weight */
   .bg-hero .bg :is(label, .label):not(.custom-checkbox):not(.form-check-label):not(.custom-checkbox-label) {
       font-size: .8rem;
       font-weight: 600;
       color: var(--fx-muted);
       letter-spacing: .005em;
   }
   
   /* Filled fields: soft grey at rest, white with a blue ring when active */
   :where(.bg-hero .bg) .form-control,
   :where(.bg-hero .bg) .form-select,
   :where(.bg-hero .bg) .custom-select-countries {
       height: 54px;
       background-color: #f3f6fa;
       border-color: transparent;
   }
   :where(.bg-hero .bg) .form-control:not(.is-invalid):hover,
   :where(.bg-hero .bg) .form-select:not(.is-invalid):hover,
   :where(.bg-hero .bg) .custom-select-countries:hover {
       background-color: #edf1f7;
       border-color: #d3dce8;
   }
   :where(.bg-hero .bg) .form-control:focus,
   :where(.bg-hero .bg) .form-select:focus,
   :where(.bg-hero .bg) .custom-select-countries:focus-within {
       background-color: #fff;
       border-color: var(--fx-blue);
       box-shadow: var(--fx-ring);
   }
   
   /* Passport checkbox */
   .bg-hero .bg .form-check-input {
       width: 1.15em;
       height: 1.15em;
       border-radius: 6px;
       border-color: #b7c4d6;
       cursor: pointer;
       transition: background-color .2s ease, border-color .2s ease, box-shadow .3s var(--fx-ease);
   }
   .bg-hero .bg .form-check-input:checked {
       background-color: var(--fx-navy);
       border-color: var(--fx-navy);
   }
   .bg-hero .bg .form-check-input:focus { box-shadow: var(--fx-ring); }
   
   /* Travel reason cards: brand navy for the selected state instead of validation green */
   :where(.bg-hero .bg) .custom-checkbox {
       border-color: var(--fx-line);
       border-radius: 14px;
   }
   :where(.bg-hero .bg) .custom-checkbox:hover {
       border-color: #a8bbd3;
       transform: translateY(-2px);
       box-shadow: var(--fx-shadow);
   }
   .bg-hero .bg .custom-checkbox.checked {
       border-color: var(--fx-navy);
       box-shadow: 0 0 0 1px var(--fx-navy) inset, 0 10px 22px -14px rgba(0, 49, 128, .7);
       background-color: rgba(0, 49, 128, .035);
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23003180' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
   }
   .bg-hero .bg .custom-checkbox.checked svg path { fill: var(--fx-navy); }
   
   /* Apply button: tighter glow so it reads as part of the card */
   .bg-hero .bg .btn-cta {
       border-radius: 14px;
       box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 22px -14px rgba(225, 40, 40, .85);
   }
   .bg-hero .bg .btn-cta:hover {
       box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 18px 30px -14px rgba(225, 40, 40, .9);
   }
   
   /* ==========================================================================
      18. Hero content (landing.php)
      ========================================================================== */
   
   /* One load sequence for the hero: headline, intro, then the card.
      The card animation also replays when JS swaps #existingApplicant/#newApplicant. */
   .bg-hero h1 { animation: fx-rise .9s var(--fx-ease) .1s both; }
   .bg-hero h1 + p { animation: fx-rise .9s var(--fx-ease) .22s both; }
   #newApplicant:not(.d-none),
   #existingApplicant:not(.d-none) { animation: fx-card-in .8s var(--fx-ease) .15s both; }
   
   @keyframes fx-card-in {
       from { opacity: 0; transform: translateY(18px) scale(.985); }
       to { opacity: 1; transform: none; }
   }
   
   /* ---- Continue your application ---- */
   #existingApplicant img[src$="/flags/us.svg"] {
       display: block;
       width: 60px;
       height: 60px;
       padding: 5px;
       border-radius: 50%;
       background-color: #fff;
       box-shadow: 0 0 0 1px var(--fx-line), 0 12px 26px -12px rgba(0, 49, 128, .55);
       animation:
           fx-flag-in .7s var(--fx-ease) .35s both,
           fx-saved-ring 2.8s ease-out 1.4s infinite;
   }
   #existingApplicant .h3 {
       text-align: center !important;
       font-size: clamp(1.4rem, 2.1vw, 1.75rem);
       letter-spacing: -0.025em;
       margin-top: .9rem;
       margin-bottom: .6rem !important;
   }
   #existingApplicant p {
       text-align: center;
       color: var(--fx-muted);
       max-width: 40ch;
       margin-left: auto;
       margin-right: auto;
   }
   /* "Want to start over?" becomes a ticket stub under a perforation */
   #existingApplicant .text-light.mt-3 {
       margin-top: 1.5rem !important;
       padding-top: 1.1rem;
       border-top: 1px dashed #cdd7e4;
   }
   #existingApplicant .text-light.mt-3 .fs-medium { color: var(--fx-muted); font-size: .875rem; }
   #checkApplicant {
       margin-left: .35rem;
       padding: 0 0 2px;
       background-color: transparent !important;
       color: var(--fx-navy) !important;
       font-weight: 600;
       background-image: linear-gradient(currentColor, currentColor);
       background-size: 0% 1px;
       background-position: 0 100%;
       background-repeat: no-repeat;
       transition: background-size .35s var(--fx-ease), color .2s ease;
   }
   #checkApplicant:hover { color: var(--fx-blue) !important; background-size: 100% 1px; }
   
   #existingApplicant .h3,
   #existingApplicant p,
   #existingApplicant .btn,
   #existingApplicant .text-light.mt-3 { animation: fx-rise .6s var(--fx-ease) both; }
   #existingApplicant .h3 { animation-delay: .45s; }
   #existingApplicant p { animation-delay: .55s; }
   #existingApplicant .btn { animation-delay: .65s; }
   #existingApplicant .text-light.mt-3 { animation-delay: .75s; }
   
   @keyframes fx-flag-in {
       from { opacity: 0; transform: scale(.6) rotate(-12deg); }
       to { opacity: 1; transform: none; }
   }
   @keyframes fx-saved-ring {
       0%   { box-shadow: 0 0 0 1px var(--fx-line), 0 0 0 0 rgba(32, 147, 214, .38), 0 12px 26px -12px rgba(0, 49, 128, .55); }
       70%  { box-shadow: 0 0 0 1px var(--fx-line), 0 0 0 14px rgba(32, 147, 214, 0), 0 12px 26px -12px rgba(0, 49, 128, .55); }
       100% { box-shadow: 0 0 0 1px var(--fx-line), 0 0 0 14px rgba(32, 147, 214, 0), 0 12px 26px -12px rgba(0, 49, 128, .55); }
   }
   
   /* ---- Travel reason: compact pills (icon + label side by side) ---- */
   #newApplicant .custom-checkbox {
       flex: 1 1 0;
       min-width: 0;
       min-height: 56px;
       margin: 0 !important;
       padding: .75rem 2.1rem .75rem .9rem !important;
   }
   #newApplicant .custom-checkbox:not(:last-child) { margin-right: .6rem !important; }
   #newApplicant .custom-checkbox-label {
       display: flex;
       align-items: center;
       gap: .55rem;
       min-width: 0;
   }
   #newApplicant .custom-checkbox-label svg { width: 20px; height: 20px; flex: none; }
   #newApplicant .custom-checkbox .label {
       margin: 0 !important;
       font-size: .9rem;
       font-weight: 600;
       color: var(--fx-ink);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   #newApplicant .custom-checkbox.checked .label { color: var(--fx-navy); }
   
   @media (max-width: 575.98px) {
       #newApplicant .custom-checkbox { padding: .7rem .7rem !important; min-height: 72px; }
       #newApplicant .custom-checkbox-label { flex-direction: column; align-items: flex-start; gap: .4rem; }
       #newApplicant .custom-checkbox.checked { background-position: right .55rem top .6rem; }
   }
   
   @media (prefers-reduced-motion: reduce) {
       .bg-hero h1,
       .bg-hero h1 + p,
       #newApplicant,
       #existingApplicant,
       #existingApplicant * { animation: none !important; }
   }
   
   /* ==========================================================================
      19. Language picker (built by enhance.js on top of the native <select>)
      ========================================================================== */
   .fx-lang { position: relative; }
   
   /* Native select + its flag stay in the DOM but out of sight */
   .fx-lang .fx-lang-native,
   .fx-lang .language-flag {
       position: absolute !important;
       width: 1px !important;
       height: 1px !important;
       opacity: 0 !important;
       overflow: hidden !important;
       pointer-events: none !important;
   }
   
   .fx-lang-btn {
       display: inline-flex;
       align-items: center;
       gap: .55rem;
       height: 40px;
       padding: 0 .8rem 0 .35rem;
       border: 1px solid rgba(255, 255, 255, .18);
       border-radius: 999px;
       background-color: rgba(255, 255, 255, .08);
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
       color: #fff;
       font: 600 .8125rem/1 var(--font-family);
       letter-spacing: .06em;
       cursor: pointer;
       transition: background-color .2s ease, border-color .2s ease;
   }
   .fx-lang-btn:hover,
   .fx-lang.is-open .fx-lang-btn {
       background-color: rgba(255, 255, 255, .16);
       border-color: rgba(255, 255, 255, .32);
   }
   .fx-lang-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
   
   .fx-lang-flag {
       width: 28px;
       height: 28px;
       flex-shrink: 0;
       border-radius: 50%;
       object-fit: cover;
       box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75);
   }
   .fx-lang-chev {
       width: 12px;
       height: 12px;
       opacity: .75;
       transition: transform .35s var(--fx-ease);
   }
   .fx-lang.is-open .fx-lang-chev { transform: rotate(180deg); }
   
   .fx-lang-menu {
       position: absolute;
       top: calc(100% + 10px);
       right: 0;
       z-index: 1040;
       min-width: 210px;
       margin: 0;
       padding: 6px;
       list-style: none;
       background-color: #fff;
       border-radius: 16px;
       box-shadow: 0 0 0 1px rgba(3, 16, 43, .06), var(--fx-shadow-lg);
       opacity: 0;
       visibility: hidden;
       transform: translateY(-6px) scale(.97);
       transform-origin: top right;
       transition: opacity .18s ease, transform .3s var(--fx-ease), visibility 0s linear .3s;
   }
   .fx-lang.is-open .fx-lang-menu {
       opacity: 1;
       visibility: visible;
       transform: none;
       transition: opacity .2s ease, transform .4s var(--fx-ease), visibility 0s;
   }
   
   .fx-lang-option {
       display: flex;
       align-items: center;
       gap: .75rem;
       padding: .6rem .7rem;
       border-radius: 10px;
       color: var(--fx-ink);
       font-size: .9375rem;
       font-weight: 500;
       cursor: pointer;
       outline: none;
       transition: background-color .15s ease, color .15s ease;
   }
   .fx-lang-option .fx-lang-flag {
       width: 22px;
       height: 22px;
       box-shadow: 0 0 0 1px var(--fx-line);
   }
   .fx-lang-option:hover,
   .fx-lang-option:focus { background-color: var(--fx-canvas); }
   .fx-lang-option:focus-visible { box-shadow: inset 0 0 0 2px rgba(32, 147, 214, .5); }
   .fx-lang-option[aria-selected="true"] { color: var(--fx-navy); font-weight: 600; }
   
   .fx-lang-check {
       width: 16px;
       height: 16px;
       margin-left: auto;
       color: var(--fx-blue);
       opacity: 0;
   }
   .fx-lang-option[aria-selected="true"] .fx-lang-check { opacity: 1; }
   
   /* Items settle in one after another as the menu opens */
   .fx-lang.is-open .fx-lang-option {
       animation: fx-lang-item .35s var(--fx-ease) both;
       animation-delay: calc(var(--i, 0) * 25ms + 40ms);
   }
   @keyframes fx-lang-item {
       from { opacity: 0; transform: translateY(-4px); }
       to { opacity: 1; transform: none; }
   }
   
   @media (prefers-reduced-motion: reduce) {
       .fx-lang-menu,
       .fx-lang.is-open .fx-lang-menu { transition: none; transform: none; }
       .fx-lang.is-open .fx-lang-option { animation: none; }
   }
   
   /* ==========================================================================
      20. Hero waves (injected by enhance.js)
      Two translucent drifting layers for texture, then a static front wave in
      the next section's colour so the hero flows into the page.
      ========================================================================== */
   .fx-waves {
       position: absolute;
       left: 0;
       right: 0;
       bottom: -1px;
       z-index: -1;
       height: clamp(70px, 10vw, 160px);
       overflow: hidden;
       pointer-events: none;
   }
   .fx-wave {
       position: absolute;
       left: 0;
       bottom: 0;
       height: 100%;
       display: block;
   }
   .fx-wave--back,
   .fx-wave--mid { width: 200%; }
   .fx-wave--front { width: 100%; }
   
   .fx-wave--back path { fill: rgba(255, 255, 255, .06); }
   .fx-wave--mid path { fill: rgba(32, 147, 214, .16); }
   .fx-wave--front path { fill: var(--bg-light); }
   
   .fx-wave--back { animation: fx-wave-drift 46s linear infinite; }
   .fx-wave--mid { animation: fx-wave-drift 30s linear infinite reverse; }
   
   @keyframes fx-wave-drift {
       from { transform: translate3d(0, 0, 0); }
       to { transform: translate3d(-50%, 0, 0); }
   }
   
   @media (prefers-reduced-motion: reduce) {
       .fx-wave--back,
       .fx-wave--mid { animation: none; }
   }
   
   /* ==========================================================================
      21. Hero star arc (injected by enhance.js, static)
      Behind the hero content; the waves (added later in the DOM) sit over it.
      ========================================================================== */
   .fx-arc {
       position: absolute;
       inset: 0;
       z-index: -1;
       pointer-events: none;
   }
   .fx-star {
       position: absolute;
       width: var(--s);
       height: var(--s);
       opacity: var(--a);
       transform: translate(-50%, -50%) rotate(var(--r));
   }
   .fx-star svg {
       display: block;
       width: 100%;
       height: 100%;
       fill: #fff;
   }
   /* On stacked layouts the arc would run behind the text, so it's desktop only */
   /* It needs the gap between the copy and the card (xl layout and up) */
   @media (max-width: 1199.98px) {
       .fx-arc { display: none; }
   }
   
   /* ==========================================================================
      22. Brand lockup — smaller mark, "ESTA" with a quiet Lettredocu caption
      Applies to the nav and the footer logo (both use .navbar-brand .brand).
      "Lettredocu" is a brand name, so it doesn't need translating.
      ========================================================================== */
   .navbar-brand {
       align-items: center;
       gap: .7rem;
       margin-right: 0;
   }
   .navbar-brand img {
       width: 38px;
       height: 38px;
       margin: 0;
       border-radius: 50%;
       box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 16px -6px rgba(0, 0, 0, .45);
   }
   .navbar-brand .brand {
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
       line-height: 1;
   }
   .navbar-brand .brand-service,
   #navbar-id .brand-service {
       margin: 0;
       font-size: 1.125rem;
       font-weight: 700;
       letter-spacing: .08em;
       line-height: 1;
       color: #fff;
   }
   .navbar-brand .brand::after {
       content: "Visa processing";
       margin-top: .3rem;
       font-size: .72rem;
       font-weight: 500;
       letter-spacing: .02em;
       line-height: 1;
       color: rgba(255, 255, 255, .62);
   }
   #navbar-id .navbar-brand:hover img { transform: rotate(-8deg); }
   
   @media (max-width: 767.98px) {
       .navbar-brand img { width: 34px; height: 34px; }
       .navbar-brand .brand-service,
       #navbar-id .brand-service { font-size: 1rem; }
   }
   
   /* ==========================================================================
      23. Below the hero (basic-content.php) — flat surfaces, hairlines, no shadows
      ========================================================================== */
   main section .h2 { letter-spacing: -0.025em; }
   
   /* ---- Why choose us: flat cards, icon tile on top ---- */
   section.bg-light > .container > .row > [class*="col"] > .bg-sm.bg-white {
       padding: 1.75rem !important;
       border: 1px solid var(--fx-line);
       border-radius: 20px;
       transition: border-color .25s ease;
   }
   section.bg-light > .container > .row > [class*="col"] > .bg-sm.bg-white:hover { border-color: #c5d1e0; }
   section.bg-light > .container > .row > [class*="col"] > .bg-sm.bg-white > .d-flex {
       flex-direction: column !important;
   }
   section.bg-light > .container > .row > [class*="col"] > .bg-sm.bg-white .icon {
       box-sizing: content-box;
       width: 20px;
       height: 20px;
       padding: 10px;
       margin: 0 0 .25rem !important;
       border-radius: 12px;
       background-color: rgba(32, 147, 214, .1);
   }
   section.bg-light > .container > .row > [class*="col"] > .bg-sm.bg-white .h4 {
       display: block;
       font-size: 1.15rem;
       margin-bottom: .55rem;
   }
   section.bg-light > .container > .row > [class*="col"] > .bg-sm.bg-white .text-light {
       display: block;
       font-size: .95rem;
       line-height: 1.65;
   }
   
   /* ---- How it works: a journey track that fills stop by stop ----
      Final state is the default, so without JS (or with reduced motion) the
      section simply shows the completed track. enhance.js adds .fx-track to
      hold it in the "pending" state, then .fx-track-on when it scrolls in.
      The rail runs centre-to-centre behind the stops; each stop wears a white
      ring, so the rail stops at an even gap on both sides of every stop.     */
   .col-lg-12:has(> .home-grid-process) { margin-bottom: 0 !important; }
   
   .home-grid-process {
       --node: 52px;
       --gap: 56px;
       --rail: 2px;
       grid-column-gap: var(--gap);
       grid-row-gap: 0;
   }
   .process-item { position: relative; }
   .process-item > div { width: 100%; }
   .process-item-wrap { margin-bottom: 1.5rem; }
   .process-divider { display: none !important; }
   
   /* Stops */
   .home-process {
       position: relative;
       z-index: 1;
       flex: none;
       display: inline-grid;
       place-items: center;
       box-sizing: border-box;
       width: var(--node);
       height: var(--node);
       border: 2px solid var(--fx-navy);
       border-radius: 50%;
       background-color: var(--fx-navy);
       color: #fff;
       font-size: .95rem;
       font-weight: 700;
       line-height: 1;
       letter-spacing: 0;
       font-variant-numeric: tabular-nums;
       box-shadow: 0 0 0 8px #fff;
       transition:
           background-color .45s ease var(--d, 0s),
           border-color .45s ease var(--d, 0s),
           color .45s ease var(--d, 0s);
   }
   
   /* Arrival: the last stop shows a check instead of "03" */
   .process-item:last-child .home-process {
       font-size: 0;
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M6 12.5l4 4L18 8.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
       background-position: center;
       background-size: 24px;
       background-repeat: no-repeat;
   }
   
   /* Rail: grey base + navy fill, centre of one stop to centre of the next */
   .process-item:not(:last-child)::before,
   .process-item:not(:last-child)::after {
       content: "";
       position: absolute;
       top: calc(var(--node) / 2 - var(--rail) / 2);
       left: calc(var(--node) / 2);
       right: calc(-1 * (var(--gap) + var(--node) / 2));
       height: var(--rail);
       pointer-events: none;
   }
   .process-item:not(:last-child)::before { background-color: #e1e7ef; }
   .process-item:not(:last-child)::after {
       background-color: var(--fx-navy);
       transform-origin: left center;
       transition: transform .75s var(--fx-ease-in-out) var(--seg, 0s);
   }
   
   /* Text */
   .process-title { display: block; font-size: 1.25rem; letter-spacing: -0.015em; }
   .process-item p { margin-top: .6rem !important; max-width: 34ch; }
   .process-title,
   .process-item p {
       transition: opacity .6s ease var(--d, 0s), transform .7s var(--fx-ease) var(--d, 0s);
   }
   
   /* Timing: stop 1 → rail → stop 2 → rail → stop 3 */
   .process-item:nth-child(1) { --d: 0s;   --seg: .15s; }
   .process-item:nth-child(2) { --d: .85s; --seg: 1s; }
   .process-item:nth-child(3) { --d: 1.7s; }
   
   /* Pending state (before the section scrolls into view) */
   .fx-track:not(.fx-track-on) .home-process {
       background-color: #fff;
       border-color: #d3dce8;
       color: var(--fx-muted);
   }
   .fx-track:not(.fx-track-on) .process-item:last-child .home-process {
       font-size: .95rem;
       background-image: none;
   }
   .fx-track:not(.fx-track-on) .process-item::after { transform: scaleX(0); }
   .fx-track:not(.fx-track-on) .process-title,
   .fx-track:not(.fx-track-on) .process-item p {
       opacity: 0;
       transform: translateY(10px);
   }
   .fx-track.fx-track-on .home-process { animation: fx-node-pop .55s var(--fx-ease) var(--d, 0s) both; }
   @keyframes fx-node-pop {
       0% { transform: scale(1); }
       45% { transform: scale(1.08); }
       100% { transform: scale(1); }
   }
   
   .fx-notrans *,
   .fx-notrans *::before,
   .fx-notrans *::after { transition: none !important; }
   
   /* Small screens: the same journey, vertical */
   @media (max-width: 998.98px) {
       .home-grid-process { --node: 46px; }
       .process-item { padding: 0 0 2.25rem calc(var(--node) + 20px); }
       .process-item:last-child { padding-bottom: 0; }
       .process-item-wrap { position: absolute; top: 0; left: 0; margin: 0; }
       .process-title { padding-top: .65rem; }
       .process-item:not(:last-child)::before,
       .process-item:not(:last-child)::after {
           top: calc(var(--node) / 2);
           bottom: calc(-1 * var(--node) / 2);
           left: calc(var(--node) / 2 - var(--rail) / 2);
           right: auto;
           width: var(--rail);
           height: auto;
       }
       .process-item:not(:last-child)::after { transform-origin: center top; }
       .fx-track:not(.fx-track-on) .process-item::after { transform: scaleY(0); }
   }
   
   /* ---- Offer: one calm panel, price card with a hairline, divided list ---- */
   section.pt-0 > .container > .bg.bg-light {
       padding: clamp(1.5rem, 4vw, 3.5rem) !important;
       border: 0;
       border-radius: 28px;
       background-color: var(--fx-canvas) !important;
   }
   section.pt-0 > .container > .bg.bg-light .bg-sm.bg-white {
       padding: 1.75rem !important;
       border-color: var(--fx-line) !important;
       border-radius: 20px;
   }
   section.pt-0 > .container > .bg.bg-light .bg-sm.bg-white .h4 { font-size: 1.05rem; }
   section.pt-0 > .container > .bg.bg-light .bg-sm.bg-white .h2 {
       font-size: clamp(2.25rem, 4vw, 3rem);
       line-height: 1;
       letter-spacing: -0.035em;
       font-variant-numeric: tabular-nums;
   }
   section.pt-0 > .container > .bg.bg-light .bg-sm.bg-white .fs-small { display: block; margin-top: .6rem; }
   section.pt-0 > .container > .bg.bg-light .col-lg-7 > p.fs-medium {
       font-size: 1.25rem;
       font-weight: 600;
       letter-spacing: -0.015em;
       color: var(--fx-ink);
       margin-bottom: 1.25rem;
   }
   section.pt-0 > .container > .bg.bg-light ul li {
       align-items: center;
       margin-bottom: 0 !important;
       padding: .95rem 0;
   }
   section.pt-0 > .container > .bg.bg-light ul li + li { border-top: 1px solid var(--fx-line); }
   section.pt-0 > .container > .bg.bg-light ul li img { flex: none; width: 22px; height: 22px; }
   section.pt-0 > .container > .bg.bg-light ul li .p {
       margin: 0 0 0 .8rem !important;
       color: var(--fx-ink) !important;
   }
   section.pt-0 > .container > .bg.bg-light > .row.mt-3 .fs-medium {
       display: block;
       max-width: 70ch;
       margin: 0 auto;
       font-size: .8rem;
       line-height: 1.6;
   }
   
   /* ---- FAQ ---- */
   section.bg-light .col-lg-10.text-center > p { color: var(--fx-muted); }
   
   /* ---- Closing call to action ---- */
   section.bg-pattern img[src$="/flags/us.svg"] {
       width: 56px;
       height: 56px;
       padding: 5px;
       border-radius: 50%;
       background-color: #fff;
       box-shadow: 0 0 0 1px var(--fx-line);
   }
   section.bg-pattern .h2 { margin-top: .75rem; }
   section.bg-pattern p {
       max-width: 60ch;
       margin-left: auto;
       margin-right: auto;
       color: var(--fx-muted);
   }
   section.bg-pattern .basic-img-lg { height: clamp(260px, 36vw, 460px); }
   
   /* ==========================================================================
      24. Application steps (pages with the .bg-head-block header)
      Everything sits inside :where() so it has class-level specificity only;
      Bootstrap's .is-invalid / .is-valid and your validation classes still win.
      ========================================================================== */
   
   /* ---- Header ---- */
   .bg-head-block .title-badge { align-items: center; gap: .1rem; padding: 6px 14px 6px 6px; }
   .bg-head-block .title-badge img { width: 24px; height: 24px; border-radius: 50%; }
   .bg-head-block .title-badge .h5 { font-size: .85rem; font-weight: 600; margin-bottom: 0; }
   .bg-head-block h1 { letter-spacing: -0.02em; margin-bottom: .5rem; }
   .bg-head-block h1 + p { font-size: .95rem; }
   
   /* ---- Form card: flat, generous, one hairline ---- */
   :where(body:has(.bg-head-block)) section.bg-light .bg.bg-white {
       padding: clamp(1.5rem, 4vw, 3rem) !important;
       border: 1px solid var(--fx-line);
       border-radius: 24px;
   }
   
   /* Section titles inside the form */
   :where(body:has(.bg-head-block)) .form-step-section {
       padding-bottom: 1.75rem;
       margin-bottom: 1.75rem;
       border-bottom-color: var(--fx-line);
   }
   :where(body:has(.bg-head-block)) .form-step-section > h4 {
       font-size: 1.3rem;
       letter-spacing: -0.02em;
       margin-bottom: 1.5rem !important;
   }
   
   /* Labels: quieter than the fields (radio labels contain their input, so they're skipped) */
   :where(body:has(.bg-head-block) .bg.bg-white) label:not(:has(input)):not(.form-check-label) {
       margin-bottom: .4rem;
       font-size: .8rem;
       font-weight: 600;
       color: var(--fx-muted);
   }
   
   /* Filled fields, same as the home form */
   :where(body:has(.bg-head-block) .bg.bg-white) .form-control,
   :where(body:has(.bg-head-block) .bg.bg-white) .form-select,
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-countries {
       height: 54px;
       background-color: #f3f6fa;
       border-color: transparent;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .form-control:not(.is-invalid):hover,
   :where(body:has(.bg-head-block) .bg.bg-white) .form-select:not(.is-invalid):hover,
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-countries:hover {
       background-color: #edf1f7;
       border-color: #d3dce8;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .form-control:focus,
   :where(body:has(.bg-head-block) .bg.bg-white) .form-select:focus,
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-countries:focus-within {
       background-color: #fff;
       border-color: var(--fx-blue);
       box-shadow: var(--fx-ring);
   }
   :where(body:has(.bg-head-block) .bg.bg-white) small.text-danger:not(:empty) {
       display: block;
       margin-top: .35rem;
       font-size: .78rem;
       font-weight: 500;
   }
   
   /* Yes / No: a segmented control the height of a field.
      CakePHP nests each radio inside its label, so :has() reads the state. */
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-radio-field {
       display: inline-flex;
       gap: 4px;
       height: 54px;
       padding: 4px;
       border-radius: 12px;
       background-color: #f3f6fa;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-radio-field label {
       position: relative;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 88px;
       margin: 0;
       padding: 0 1.25rem;
       border: 0;
       border-radius: 9px;
       background-color: transparent;
       color: var(--fx-muted);
       font-size: .9rem;
       font-weight: 600;
       transition: background-color .2s ease, color .2s ease, box-shadow .3s var(--fx-ease);
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-radio-field label:hover { color: var(--fx-ink); }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-radio-field input[type="radio"] {
       position: absolute;
       opacity: 0;
       pointer-events: none;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-radio-field label:has(input:checked) {
       background-color: #fff;
       color: var(--fx-navy);
       box-shadow: 0 1px 2px rgba(3, 16, 43, .08), 0 0 0 1px rgba(3, 16, 43, .05);
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-radio-field label:has(input:focus-visible) {
       box-shadow: var(--fx-ring);
   }
   
   /* Conditional follow-up fields (e.g. #aliasesForm): no tinted box, so the
      inputs look exactly like every other field. The relationship to the
      question that revealed them is shown by indentation and a left rule. */
   :where(body:has(.bg-head-block) .bg.bg-white) .bg-light.p-3 {
       margin: 1.25rem 0 0 !important;
       padding: .25rem 0 .25rem 1.25rem !important;
       border: 0;
       border-left: 2px solid rgba(32, 147, 214, .35);
       border-radius: 0;
       background-color: transparent !important;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .bg-light.p-3 > .row { margin-bottom: 0 !important; }
   :where(body:has(.bg-head-block) .bg.bg-white) .bg-light.p-3:not(.d-none) {
       animation: fx-drop .35s var(--fx-ease) both;
   }
   
   /* Footer of the card: the Next button */
   :where(body:has(.bg-head-block) .bg.bg-white) .btn-cta { min-width: 200px; }
   @media (max-width: 575.98px) {
       :where(body:has(.bg-head-block) .bg.bg-white) .btn-cta { width: 100%; }
       :where(body:has(.bg-head-block) .bg.bg-white) .custom-radio-field { display: flex; }
       :where(body:has(.bg-head-block) .bg.bg-white) .custom-radio-field label { flex: 1; }
   }
   
   /* ==========================================================================
      26. Step forms — spacing, yes/no questions, uploads, back button
      ========================================================================== */
   
   /* ---- One spacing rhythm: 8px label → control, 20px between rows ----
      The markup mixes .my-auto, .mt-1, .my-2 and .mb-2, and conditional panels
      sit between rows, so spacing is applied between visible siblings instead
      of below every group. Hidden panels (d-none) take no space at all.      */
   :where(body:has(.bg-head-block) .bg.bg-white) label:not(:has(input)):not(.form-check-label) {
       display: block;
       margin: 0 0 .5rem !important;
       line-height: 1.35;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) :is(.form-control, .form-select, .custom-select-countries, .custom-radio-field, .d-grid) {
       margin-top: 0 !important;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .form-step-section .form-group { margin: 0 !important; }
   :where(body:has(.bg-head-block) .bg.bg-white) .form-step-section .row { margin-bottom: 0 !important; }
   :where(body:has(.bg-head-block) .bg.bg-white) :is(.form-step-section, .form-step-section > form, .form-step-section > .d-flex, .bg-light.p-3, #idNumberBlock) > :is(.row, div[id]) + :is(.row, div[id]) {
       margin-top: 1.25rem;
   }
   @media (max-width: 991.98px) {
       :where(body:has(.bg-head-block) .bg.bg-white) .form-step-section .row > [class*="col"] + [class*="col"] { margin-top: 1.25rem; }
   }
   
   /* ---- Yes / No questions: the question reads as content, toggle on the right ---- */
   :where(body:has(.bg-head-block) .bg.bg-white) .form-group.d-flex {
       align-items: center;
       gap: .75rem 1.5rem;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .form-group.d-flex > label {
       margin: 0 !important;
       max-width: 60ch;
       color: var(--fx-ink);
       font-size: .95rem;
       font-weight: 500;
       line-height: 1.45;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .form-group.d-flex > .custom-radio-field {
       flex: none;
       margin: 0 !important;
   }
   @media (max-width: 767.98px) {
       :where(body:has(.bg-head-block) .bg.bg-white) .form-group.d-flex { align-items: flex-start; }
   }
   
   /* ---- Help badges and their tooltips ---- */
   .tooltip-badge {
       display: inline-grid;
       place-items: center;
       width: 18px;
       height: 18px;
       padding: 0;
       margin-left: .4rem;
       border-radius: 50%;
       background-color: rgba(0, 49, 128, .08);
       color: var(--fx-navy);
       font-size: .68rem;
       font-weight: 700;
       vertical-align: middle;
       transition: background-color .2s ease, color .2s ease;
   }
   .tooltip-badge:hover { background-color: var(--fx-navy); color: #fff; }
   :where(body:has(.bg-head-block) .bg.bg-white) span.d-flex:has(> label + .tooltip-badge) { align-items: flex-start; }
   .tooltip-inner {
       padding: 1rem 1.1rem;
       border: 1px solid var(--fx-line);
       border-radius: 14px;
       box-shadow: var(--fx-shadow-lg);
   }
   
   /* ---- File uploads: a drop-zone style tile ---- */
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]) {
       position: relative;
       display: block;
       height: 64px;
       margin: 0;
       padding: 0;
       border: 1.5px dashed #c5d1e0 !important;
       border-radius: 14px;
       background-color: #f8fafc;
       transition: border-color .2s ease, background-color .2s ease, box-shadow .3s var(--fx-ease);
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]):hover {
       border-color: var(--fx-blue) !important;
       background-color: #f3f8fd;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]:focus-visible) {
       border-color: var(--fx-blue) !important;
       box-shadow: var(--fx-ring);
   }
   /* A file has been chosen (the input is required, so it turns :valid) */
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]:valid) {
       border-style: solid !important;
       border-color: #6ccf97 !important;
       background-color: #f6fef9;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]:valid)::after {
       content: "";
       position: absolute;
       top: 50%;
       right: 16px;
       width: 22px;
       height: 22px;
       transform: translateY(-50%);
       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='9' fill='%23079455'/%3e%3cpath d='m6.2 10.3 2.5 2.5 5-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
       pointer-events: none;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]) .input { height: 100%; }
   
   /* "Choose file" label becomes a button inside the tile */
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]) label {
       position: absolute;
       top: 50%;
       left: 10px;
       z-index: 2;
       display: inline-flex;
       align-items: center;
       gap: .45rem;
       min-width: 0;
       height: 42px;
       margin: 0 !important;
       padding: 0 .95rem;
       transform: translateY(-50%);
       border: 1px solid var(--fx-line);
       border-radius: 10px;
       background-color: #fff;
       color: var(--fx-navy);
       font-size: .85rem;
       font-weight: 600;
       line-height: 1;
       white-space: nowrap;
       box-shadow: var(--fx-shadow-sm);
       cursor: pointer;
       transition: border-color .2s ease, background-color .2s ease;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]) label::before {
       content: "";
       width: 16px;
       height: 16px;
       flex: none;
       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M10 13V4m0 0L6.5 7.5M10 4l3.5 3.5M4 13.5v1A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-1' fill='none' stroke='%23003180' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]) label:hover {
       border-color: #a8bbd3;
       background-color: #f8fafc;
   }
   
   /* The native input fills the tile and shows the chosen file name */
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]) input[type="file"] {
       position: absolute;
       inset: 0;
       width: 100% !important;
       height: 100% !important;
       margin: 0;
       padding: 0 3rem 0 170px;
       border: 0;
       border-radius: 14px;
       background: transparent;
       box-shadow: none;
       color: var(--fx-muted);
       font-size: .85rem;
       line-height: 61px;
       cursor: pointer;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]) input[type="file"]::file-selector-button { display: none; }
   :where(body:has(.bg-head-block) .bg.bg-white) .input-group:has(input[type="file"]) input[type="file"]:focus { box-shadow: none; }
   
   /* ---- Back button: quiet, with a leading arrow ---- */
   :where(body:has(.bg-head-block) .bg.bg-white) .btn-outline-dark {
       gap: .55rem;
       padding-left: 1.75rem;
       padding-right: 2rem;
       border-color: var(--fx-line);
       background-color: #fff;
       color: var(--fx-ink);
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .btn-outline-dark::before {
       content: "";
       width: 14px;
       height: 14px;
       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M13 8H3m0 0 4-4M3 8l4 4' fill='none' stroke='%230e1c38' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
       transition: transform .35s var(--fx-ease);
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .btn-outline-dark:hover::before { transform: translateX(-3px); }
   @media (max-width: 575.98px) {
       :where(body:has(.bg-head-block) .bg.bg-white) .btn-outline-dark { padding-left: 1.25rem; padding-right: 1.4rem; }
   }
   
   /* ==========================================================================
      27. Modals (site-wide)
      ========================================================================== */
   .modal-backdrop { background-color: var(--fx-navy-950); }
   .modal-backdrop.show { opacity: .55; }
   .modal-backdrop.fade { transition: opacity .3s ease; }
   .modal.show { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
   
   .modal.fade .modal-dialog {
       transform: translateY(16px) scale(.97);
       transition: transform .45s var(--fx-ease), opacity .3s ease;
   }
   .modal.show .modal-dialog { transform: none; }
   @media (min-width: 576px) { .modal-dialog { max-width: 520px; } }
   
   .modal-content {
       border: 0;
       border-radius: 24px;
       overflow: hidden;
       box-shadow: 0 2px 8px rgba(3, 16, 43, .1), 0 44px 90px -28px rgba(3, 16, 43, .6);
   }
   .modal-content > .bg {
       padding: clamp(1.5rem, 4vw, 2.25rem) !important;
       border: 0;
       border-radius: 0;
   }
   .modal-content h4 { font-size: 1.35rem; letter-spacing: -0.02em; }
   .modal-content .fs-medium,
   .modal-content p { color: var(--fx-muted); line-height: 1.6; }
   .modal-content ul li { padding: .2rem 0; color: var(--fx-muted) !important; }
   .modal-content picture img.img-fluid {
       border: 1px solid var(--fx-line);
       border-radius: 14px;
   }
   
   /* Good / bad example photos */
   .modal-content .position-relative.col {
       border-radius: 14px;
       overflow: hidden;
   }
   .modal-content .position-relative.col:has(img[src*="icon-tick"]) { outline: 2px solid #12b76a; outline-offset: -2px; }
   .modal-content .position-relative.col:has(img[src*="icon-cross"]) { outline: 2px solid #f04438; outline-offset: -2px; }
   .modal-content img[src*="icon-tick"],
   .modal-content img[src*="icon-cross"] {
       box-sizing: border-box;
       width: 28px;
       height: 28px;
       padding: 5px;
       border-radius: 50%;
       background-color: #fff;
       box-shadow: var(--fx-shadow-sm);
   }
   
   @media (prefers-reduced-motion: reduce) {
       .modal.fade .modal-dialog { transition: none; transform: none; }
   }
   
   /* ==========================================================================
      28. Submit buttons: the arrow becomes a spinner (state set by enhance.js)
      ========================================================================== */
   .btn-cta span::after { transition: transform .4s var(--fx-ease), opacity .2s ease; }
   .btn-cta span::before {
       content: "";
       position: absolute;
       top: 4px;
       right: -24px;
       width: 16px;
       height: 16px;
       box-sizing: border-box;
       border: 2px solid rgba(255, 255, 255, .35);
       border-top-color: #fff;
       border-radius: 50%;
       opacity: 0;
       scale: .3;
       pointer-events: none;
       transition: opacity .25s ease .1s, scale .45s var(--fx-ease) .1s;
   }
   
   .btn-cta.fx-loading {
       cursor: progress;
       pointer-events: none;
       transform: none !important;
   }
   .btn-cta.fx-loading span::after {
       opacity: 0;
       transform: translateX(8px) scale(.3) !important;
   }
   .btn-cta.fx-loading span::before {
       opacity: 1;
       scale: 1;
       animation: fx-spin .7s linear infinite;
   }
   @keyframes fx-spin { to { rotate: 360deg; } }
   
   @media (prefers-reduced-motion: reduce) {
       .btn-cta.fx-loading span::before { animation-duration: 1.4s; }
   }
   
   /* ==========================================================================
      29. Step 3 — eligibility questions + the "Important notice" modal
      ========================================================================== */
   
   /* Card title when it sits directly in the card (step 3) */
   :where(body:has(.bg-head-block)) section.bg-light .bg.bg-white > h4 {
       font-size: 1.3rem;
       letter-spacing: -0.02em;
       margin-bottom: 1rem !important;
   }
   
   /* Ten questions as a compact list: one hairline between each, not a full section gap */
   #applicationStepThreeForm .form-step-section {
       margin: 0 -1rem;
       padding: 1.15rem 1rem;
       border-bottom: 1px solid var(--fx-line);
       border-radius: 0;
       transition: background-color .3s ease, border-radius .3s ease;
   }
   #applicationStepThreeForm .form-step-section label:not(:has(input)) {
       margin: 0 !important;
       max-width: 72ch;
       color: var(--fx-ink);
       font-size: .95rem;
       font-weight: 500;
       line-height: 1.55;
   }
   #applicationStepThreeForm .form-step-section .custom-radio-field { vertical-align: middle; }
   @media (max-width: 991.98px) {
       #applicationStepThreeForm .form-step-section .custom-radio-field { margin-top: .85rem !important; }
   }
   
   /* A "Yes" answer is flagged on its row, so it's clear which answers triggered the notice */
   #applicationStepThreeForm .form-step-section:has(input[value="1"]:checked) {
       background-color: #fffaeb;
       border-bottom-color: transparent;
       border-radius: 12px;
   }
   #applicationStepThreeForm .custom-radio-field label:has(input[value="1"]:checked) {
       background-color: #fff;
       color: #b54708;
       box-shadow: 0 0 0 1.5px #fdb022, 0 1px 2px rgba(3, 16, 43, .08);
   }
   #applicationStepThreeForm .form-step-section:has(input[value="1"]:checked) .custom-radio-field { background-color: #fef0c7; }
   
   /* Buttons sit clear of the last question */
   #applicationStepThreeForm > .d-flex:last-of-type { margin-top: 1.75rem !important; }
   
   /* ---- The notice modal ---- */
   #myModal .modal-content > .bg { text-align: left !important; }
   #myModal h4 {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 1rem;
       text-align: left !important;
       margin-bottom: .75rem !important;
   }
   #myModal h4::before {
       content: "";
       width: 48px;
       height: 48px;
       border-radius: 14px;
       background:
           url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M12 4 21 19.5H3z' fill='none' stroke='%23dc6803' stroke-width='1.9' stroke-linejoin='round'/%3e%3cpath d='M12 10v4.2' stroke='%23dc6803' stroke-width='1.9' stroke-linecap='round'/%3e%3ccircle cx='12' cy='16.9' r='1.15' fill='%23dc6803'/%3e%3c/svg%3e") center / 24px no-repeat,
           #fffaeb;
       box-shadow: 0 0 0 6px #fffcf5;
   }
   #myModal .fs-medium {
       display: block;
       font-size: .925rem;
       line-height: 1.65;
   }
   /* An acknowledgement, not a "go" action: navy instead of the red CTA */
   #myModal .btn-cta {
       margin-top: 1.5rem !important;
       border-color: var(--fx-navy);
       background-color: var(--fx-navy);
       background-image: none;
       box-shadow: 0 10px 22px -14px rgba(0, 49, 128, .9);
   }
   #myModal .btn-cta:hover { background-color: var(--fx-navy-900); border-color: var(--fx-navy-900); }
   
   /* ==========================================================================
      30. Step pages — consistency fixes
      ========================================================================== */
   
   /* Step 5's header uses id="landing" (the home page id), which pulls in the
      home hero's h1 size from style.css. Keep step titles at step-title size. */
   .bg-head-block h1,
   .bg-head-block#landing h1 {
       font-size: var(--fs-h3);
       color: #fff;
   }
   
   /* Yes/No rows: question left, toggle right on every step
      (step 5 uses .justify-content-start, step 2 .justify-content-between) */
   :where(body:has(.bg-head-block) .bg.bg-white) .form-group.d-flex { justify-content: space-between !important; }
   
   /* Phone number: country code + number read as one filled field */
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-phone-parent {
       height: 54px;
       border: 1px solid transparent;
       border-radius: 10px;
       background-color: #f3f6fa;
       transition: border-color .2s ease, box-shadow .3s var(--fx-ease), background-color .2s ease;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-phone-parent:hover {
       border-color: #d3dce8;
       background-color: #edf1f7;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-phone-parent:focus-within {
       border-color: var(--fx-blue);
       background-color: #fff;
       box-shadow: var(--fx-ring);
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-phone-parent .custom-select-phone-prepend {
       height: 100%;
       max-width: 130px;
       border: 0;
       border-right: 1px solid #dde4ee;
       border-radius: 10px 0 0 10px !important;
       background-color: transparent;
       box-shadow: none;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-phone-parent .custom-select-phone {
       height: 100%;
       border: 0;
       background-color: transparent;
       box-shadow: none;
   }
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-phone-parent .custom-select-phone:focus {
       background-color: transparent;
       box-shadow: none;
   }
   /* Validation still shows on the whole group */
   :where(body:has(.bg-head-block) .bg.bg-white) .custom-select-phone-parent:has(.is-invalid) {
       border-color: #dc3545;
   }
   
   /* Step 5 spacing: same rhythm as the other steps.
      Its U.S. contact rows sit in an un-named wrapper (div.mb-3), which the
      sibling rule above didn't cover, and the section intro paragraph had no
      rule at all. */
   :where(body:has(.bg-head-block) .bg.bg-white) .form-step-section .row + .row { margin-top: 1.25rem; }
   :where(body:has(.bg-head-block) .bg.bg-white) .form-step-section > .mb-3 { margin-bottom: 0 !important; }
   
   /* Section title followed by an intro paragraph */
   :where(body:has(.bg-head-block) .bg.bg-white) .form-step-section > h4:has(+ p) { margin-bottom: .5rem !important; }
   :where(body:has(.bg-head-block) .bg.bg-white) .form-step-section > h4 + p {
       max-width: 75ch;
       margin-bottom: 1.5rem;
       color: var(--fx-muted);
       font-size: .9rem;
       line-height: 1.6;
   }
   
   /* ==========================================================================
      31. Progress stepper (element/progress-stepper.php)
      Done → navy bar + check, current → bar fills on load + dot, upcoming → muted.
      ========================================================================== */
   .bg-sm.bg-white:has(> #stepper) {
       padding: 1.4rem 1.75rem 1.2rem !important;
       border: 1px solid rgba(255, 255, 255, .6);
       border-radius: 20px;
       box-shadow: 0 1px 2px rgba(3, 16, 43, .05), 0 18px 40px -20px rgba(3, 16, 43, .35);
   }
   
   #stepper { gap: 10px; }
   #stepper > div { flex: 1 1 0; min-width: 0; }
   #stepper .steps__item { width: 100%; }
   #stepper .steps__item__content { align-items: center; }
   
   /* Bars */
   #stepper .steps__item__icon {
       position: relative;
       width: 100%;
       min-width: 0;
       height: 6px;
       margin-bottom: 14px;
       overflow: hidden;
       border-radius: 999px;
       background: #e6ebf2;
       animation: none;
       transform: none;
   }
   #stepper .steps__item__icon::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       transform-origin: left center;
       transform: scaleX(0);
   }
   #stepper .steps__item-completed .steps__item__icon::after {
       background-color: var(--fx-navy);
       transform: none;
   }
   #stepper .steps__item-process .steps__item__icon::after {
       background-color: var(--fx-blue);
       animation: fx-step-fill 1s var(--fx-ease) .35s forwards;
   }
   @keyframes fx-step-fill { to { transform: scaleX(1); } }
   
   /* Titles */
   #stepper .steps__item__title {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: .4rem;
       margin-bottom: .2rem;
       font-size: .95rem;
       letter-spacing: -0.01em;
       transition: color .3s ease;
   }
   #stepper .steps__item__subTitle {
       font-size: .8rem;
       transition: color .3s ease;
   }
   
   /* Upcoming: lowlighted */
   #stepper .steps__item-wait .steps__item__title { color: #9aa7ba; font-weight: 500; }
   #stepper .steps__item-wait .steps__item__subTitle { color: #b3bdcc; }
   
   /* Done: navy with a check */
   #stepper .steps__item-completed .steps__item__title { color: var(--fx-muted); font-weight: 500; }
   #stepper .steps__item-completed .steps__item__subTitle { color: #9aa7ba; }
   #stepper .steps__item-completed .steps__item__title::before {
       content: "";
       flex: none;
       width: 16px;
       height: 16px;
       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='8' fill='%23e3eaf4'/%3e%3cpath d='m4.8 8.2 2.1 2.1 4.3-4.5' fill='none' stroke='%23003180' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
   }
   
   /* Current: full ink, bold, with a "you are here" dot */
   #stepper .steps__item-process .steps__item__title { color: var(--fx-navy); font-weight: 700; }
   #stepper .steps__item-process .steps__item__subTitle { color: var(--fx-ink); font-weight: 500; }
   #stepper .steps__item-process .steps__item__title::before {
       content: "";
       flex: none;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background-color: var(--fx-blue);
       box-shadow: 0 0 0 4px rgba(32, 147, 214, .18);
   }
   
   @media (max-width: 575.98px) {
       .bg-sm.bg-white:has(> #stepper) { padding: 1rem .9rem .85rem !important; }
       #stepper { gap: 6px; }
       #stepper .steps__item__icon { height: 5px; margin-bottom: 10px; }
       #stepper .steps__item__title { font-size: .75rem; gap: .25rem; }
       #stepper .steps__item-completed .steps__item__title::before { width: 13px; height: 13px; }
       #stepper .steps__item-process .steps__item__title::before { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(32, 147, 214, .18); }
   }
   
   @media (prefers-reduced-motion: reduce) {
       #stepper .steps__item-process .steps__item__icon::after { animation: none; transform: none; }
   }
   
   /* Held by enhance.js until load + auto-scroll have finished */
   #stepper.fx-stepper-wait .steps__item-process .steps__item__icon::after { animation-play-state: paused; }
   
   /* ==========================================================================
      32. Home hero — left column
      ========================================================================== */
   
   /* Extra shade behind the text side only, so the copy doesn't sit on the busiest
      part of the skyline. Layered on top of the existing blue overlay. */
   .bg-hero::before {
       background:
           linear-gradient(90deg, rgba(3, 16, 43, .55) 0%, rgba(3, 16, 43, .25) 45%, rgba(3, 16, 43, 0) 70%),
           radial-gradient(60% 80% at 12% 15%, rgba(32, 147, 214, .38), transparent 65%),
           linear-gradient(135deg, rgba(3, 16, 43, .92) 0%, rgba(0, 49, 128, .84) 50%, rgba(0, 49, 128, .70) 100%);
   }
   
   /* Headline + intro: shorter measure, clearer hierarchy */
   #landing h1 {
       max-width: 15ch;
       font-size: clamp(2.25rem, 4.4vw, 3.6rem);
       line-height: 1.06;
       letter-spacing: -0.035em;
   }
   #landing h1 + p {
       max-width: 50ch;
       margin-top: 1.5rem;
       color: rgba(255, 255, 255, .8) !important;
       font-size: 1.075rem;
       font-weight: 400 !important;
       line-height: 1.7;
   }
   /* The mobile copy of the intro, under the card */
   #landing .d-md-none.d-block {
       color: rgba(255, 255, 255, .8) !important;
       font-size: .95rem;
       line-height: 1.65;
   }
   
   /* Optional trust points (markup in the chat). Styled now, so they work when added. */
   .hero-points {
       display: flex;
       flex-wrap: wrap;
       gap: .6rem 1.75rem;
       margin: 2rem 0 0;
       padding: 1.5rem 0 0;
       list-style: none;
       border-top: 1px solid rgba(255, 255, 255, .14);
       max-width: 52ch;
   }
   .hero-points li {
       display: inline-flex;
       align-items: center;
       gap: .55rem;
       color: #fff;
       font-size: .9rem;
       font-weight: 500;
   }
   .hero-points svg {
       flex: none;
       width: 18px;
       height: 18px;
       color: #7cc4ef;
   }
   .bg-hero h1 + p + .hero-points { animation: fx-rise .9s var(--fx-ease) .34s both; }
   @media (max-width: 767.98px) {
       .hero-points { display: none; }
   }
   
   /* Hero bottom space: reserve the wave's height plus a clear gap, so the form
      card and trust points always finish above the wave crest at every width. */
   #landing.bg-hero { padding-bottom: calc(clamp(48px, 6.5vw, 104px) + 2rem) !important; }
   
   /* ==========================================================================
      33. Footer — tidier on all sizes, restructured on mobile
      ========================================================================== */
   
   /* Column headings: quieter than the links they introduce */
   .footer-lower h6 {
       margin-bottom: 1rem !important;
       color: rgba(255, 255, 255, .55) !important;
       font-size: .8rem;
       font-weight: 600;
       letter-spacing: .01em;
   }
   
   /* Email / phone: icon in a soft tile, so they read as tappable contact actions */
   .footer-lower ul li a:has(> img) {
       display: inline-flex;
       align-items: center;
       gap: .65rem;
       background-image: none;   /* no hover underline under the icon tile */
   }
   .footer-lower ul li a > img {
       box-sizing: content-box;
       width: 16px;
       height: 16px;
       margin: 0 !important;
       padding: 8px;
       border-radius: 10px;
       background-color: rgba(255, 255, 255, .08);
       transition: background-color .2s ease;
   }
   .footer-lower ul li a:has(> img):hover > img { background-color: rgba(255, 255, 255, .16); }
   
   .footer-bottom { gap: .75rem; }
   .footer-bottom .fs-medium { font-size: .8rem; }
   .footer-bottom img { max-width: 170px; margin-top: 0; opacity: .9; }
   
   @media (max-width: 767.98px) {
       footer { padding-top: 3rem; padding-bottom: 2rem; }
   
       /* Brand on top, then Navigation | Legal side by side, then Contact full width */
       .footer-lower .row {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 2.25rem 1.5rem;
           margin: 0;
       }
       .footer-lower .row > [class*="col"] {
           width: auto;
           max-width: none;
           margin: 0 !important;
           padding: 0;
       }
       .footer-lower .row > [class*="col"]:first-child,
       .footer-lower .row > [class*="col"]:last-child { grid-column: 1 / -1; }
       .footer-lower .row > [class*="col"]:first-child {
           padding-bottom: 1.75rem;
           border-bottom: 1px solid rgba(255, 255, 255, .1);
       }
   
       /* Links wrap instead of overflowing, with comfortable tap targets */
       .footer-lower ul li { margin: 0 !important; }
       .footer ul li a,
       .footer-lower ul li a {
           display: inline-block;
           padding: .4rem 0;
           white-space: normal;
           font-size: .9rem;
           line-height: 1.35;
       }
       .footer-lower ul li a:has(> img) { display: inline-flex; padding: .3rem 0; }
   
       /* Contact actions stack as full rows */
       .footer-lower .row > [class*="col"]:last-child ul { gap: .35rem; }
   
       .footer-bottom {
           margin-top: 2.25rem;
           padding-top: 1.5rem;
       }
       .footer-bottom img { max-width: 150px; }
   }