/*
 * Standalone lead-form card component. Visual language is deliberately ported from the
 * homepage's `.profile-wizard` (assets/css/home.css) so a "light" service page still reads as
 * the same brand/product, without loading all of home.css (which is homepage-specific and would
 * risk selector collisions on an inner page). Single-panel only — no step progress, no
 * back/next — since every current use of this component asks for a small, fixed set of fields
 * in one screen. Relies on the shared `:root` custom properties already defined in
 * inner-pages.css, which is enqueued first on every page that loads this file.
 */

/* Compact hero for a "light" service page — a smaller, single-column relative of
   service-pages.css's `.service-hero` (840px min-height, built for its big two-column
   illustrated card layout). This page has no card to balance, so it stays short. */
.lf-hero { position: relative; overflow: hidden; padding: 168px 0 68px; color: var(--white); background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 54%, #16498f 100%); }
.lf-hero::before { position: absolute; inset: 0; opacity: .9; background: radial-gradient(circle at 82% 20%, rgba(255,255,255,.13), transparent 30%), radial-gradient(circle at 100% 100%, rgba(240,184,26,.16), transparent 34%); content: ""; }
.lf-hero .shell { position: relative; z-index: 1; max-width: 760px; }
.lf-hero .eyebrow { color: var(--gold-light); }
.lf-hero h1 { max-width: 640px; margin-bottom: 18px; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.05em; }
.lf-hero h1 em { color: var(--gold-light); font-style: normal; }
.lf-hero-copy { max-width: 560px; margin: 0; color: #dceaff; font-size: 16px; line-height: 1.65; }

.lf-section { padding: 78px 0 104px; background: var(--cream); }
.lf-head { max-width: 640px; margin: 0 auto 34px; text-align: center; }
.lf-head .eyebrow { justify-content: center; }
.lf-head h2 { margin: 0 0 12px; font-size: clamp(28px, 3.2vw, 38px); }
.lf-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.lf-card { position: relative; width: min(100%, 620px); margin: 0 auto; padding: clamp(28px, 4.4vw, 44px); border: 1px solid rgba(5,32,79,.09); border-radius: 26px; background: rgba(255,255,255,.98); box-shadow: 0 25px 60px rgba(4,26,60,.1); }
.lf-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.lf-form-head { margin-bottom: 22px; }
.lf-kicker { display: block; margin-bottom: 6px; color: #a56e08; font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.lf-form-head h3 { margin: 0; color: var(--navy); font: 600 clamp(22px, 2.3vw, 27px)/1.16 "Poppins", Arial, sans-serif; letter-spacing: -.03em; }

.lf-error { margin: 0 0 18px; padding: 10px 12px; border-left: 3px solid #bb2727; border-radius: 5px; color: #8f1e1e; background: #fff1f1; font-size: 12px; font-weight: 600; }
.lf-error[hidden] { display: none; }

.lf-question { margin-bottom: 22px; }
.lf-question-title { display: block; margin: 0 0 10px; color: #314965; font-size: 12px; font-weight: 700; }
.lf-question-title i { margin-left: 3px; color: #b45b18; font-style: normal; }

/* Country choices are a variable-length list (10 destinations + Others), not a fixed 2/3-up
   grid like the homepage's shorter question sets — auto-fill lets it wrap cleanly at any card
   width instead of hardcoding a column count that would leave an awkward short last row. */
.lf-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
.lf-choice { position: relative; display: block; min-width: 0; cursor: pointer; touch-action: manipulation; }
.lf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.lf-choice > span { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border: 1px solid #dce4ec; border-radius: 10px; color: #26405f; background: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.lf-choice:hover > span { border-color: #a8bad0; background: #f8fbfd; transform: translateY(-1px); }
.lf-choice input:checked + span { border-color: #d99c13; color: var(--navy); background: #fff8df; box-shadow: inset 0 0 0 1px rgba(240,184,26,.28); }
.lf-choice input:focus-visible + span { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.lf-choice img { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: 0 1px 3px rgba(4,26,60,.18); object-fit: cover; }
.lf-choice-other { display: grid; width: 20px; height: 20px; flex: none; place-items: center; border: 1px solid #dfc272; border-radius: 50%; color: #73500a; background: #fffdf3; font-size: 12px; font-style: normal; }

.lf-fields { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 4px; }
.lf-fields label { display: block; color: #314965; font-size: 12px; font-weight: 700; }
.lf-fields input { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 11px 13px; border: 1px solid #d6e0e9; border-radius: 9px; color: var(--navy); background: #fbfcfd; font: 500 13px/1.3 "Poppins", Arial, sans-serif; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.lf-fields input::placeholder { color: #98a6b6; opacity: 1; }
.lf-fields input:focus { border-color: #8da4bf; outline: 3px solid rgba(240,184,26,.28); background: var(--white); }

.lf-actions { margin-top: 28px; }
.lf-submit { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 9px; cursor: pointer; touch-action: manipulation; color: var(--navy); background: var(--gold); font: 700 13px/1 "Poppins", Arial, sans-serif; box-shadow: 0 9px 18px rgba(240,184,26,.22); transition: transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease; }
.lf-submit:hover, .lf-submit:focus-visible { background: var(--gold-light); box-shadow: 0 12px 23px rgba(240,184,26,.3); transform: translateY(-1px); }
.lf-submit:disabled { cursor: wait; opacity: .6; transform: none; }
.lf-note { margin: 14px 0 0; color: #728195; font-size: 10.5px; line-height: 1.55; text-align: center; }

.lf-success { display: none; min-height: 360px; align-content: center; justify-items: center; padding: 30px 3px; text-align: center; }
.lf-success.is-visible { display: grid; }
.lf-success-icon { display: grid; width: 56px; height: 56px; margin-bottom: 20px; place-items: center; border-radius: 50%; color: #0d6b50; background: #e4f6ef; }
.lf-success-icon svg { width: 26px; height: 26px; }
.lf-success h3 { margin: 0; color: var(--navy); font: 600 clamp(22px, 2.3vw, 27px)/1.16 "Poppins", Arial, sans-serif; letter-spacing: -.03em; }
.lf-success p { max-width: 400px; margin: 12px auto 0; color: #5e728a; font-size: 13.5px; line-height: 1.7; }

/* Work Visa's light service template gets a career-led visual hierarchy. */
.lf-hero { padding: 130px 0 64px; }
.lf-hero::before { background: radial-gradient(circle at 74% 20%, rgba(255,255,255,.12), transparent 26%), radial-gradient(circle at 100% 94%, rgba(240,184,26,.17), transparent 32%); }
.lf-hero .shell { max-width: var(--shell, 1200px); }
.lf-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); align-items: center; gap: clamp(34px, 7vw, 104px); }
.lf-hero-content { max-width: 650px; padding: 26px 0; }
.lf-hero-points { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 26px 0 0; padding: 0; list-style: none; color: #e6f0ff; font-size: 12px; font-weight: 700; }
.lf-hero-points li { display: flex; align-items: center; gap: 8px; }
.lf-hero-points span { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border: 1px solid rgba(237,246,255,.23); border-radius: 9px; color: var(--gold-light); background: rgba(255,255,255,.08); }
.lf-hero-points svg { width: 16px; height: 16px; }
.lf-hero-visual { position: relative; width: min(100%, 430px); margin: 0; justify-self: end; }
.lf-hero-photo-frame { position: relative; z-index: 2; height: clamp(385px, 39vw, 506px); overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 28px 82px 28px 28px; background: #dce8f1; box-shadow: 0 26px 56px rgba(0,0,0,.25); }
.lf-hero-photo-frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,25,61,0) 53%, rgba(4,25,61,.34) 100%); content: ""; pointer-events: none; }
.lf-hero-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.lf-hero-orbit { position: absolute; z-index: 1; display: block; border: 1px solid rgba(240,184,26,.55); border-radius: 50%; pointer-events: none; }
.lf-hero-orbit-one { width: 190px; height: 190px; top: -38px; right: -64px; }
.lf-hero-orbit-two { width: 116px; height: 116px; bottom: 18px; left: -50px; border-color: rgba(222,235,255,.38); }
.lf-career-tag { position: absolute; z-index: 3; right: -30px; bottom: 28px; display: grid; width: min(238px, 64%); grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.68); border-radius: 13px; color: var(--navy); background: rgba(255,255,255,.94); box-shadow: 0 14px 27px rgba(2,18,49,.2); }
.lf-career-tag > span { display: grid; width: 34px; height: 34px; grid-row: span 2; place-items: center; border-radius: 9px; color: #a36c05; background: #fff4cf; }
.lf-career-tag svg { width: 17px; height: 17px; }
.lf-career-tag small { align-self: end; color: #75849a; font: 700 8px/1.2 "DM Mono", monospace; letter-spacing: .08em; }
.lf-career-tag strong { align-self: start; color: var(--navy); font: 700 12px/1.25 "Poppins", Arial, sans-serif; }
.lf-route-graphic { display: flex; align-items: center; justify-content: center; gap: 11px; max-width: 560px; margin: 30px auto 0; padding: 15px 18px; border: 1px solid #dee6ed; border-radius: 16px; background: rgba(255,255,255,.76); box-shadow: 0 12px 30px rgba(4,26,60,.055); }
.lf-route-node { display: grid; min-width: 100px; justify-items: center; gap: 6px; color: #435a75; font-size: 10px; line-height: 1.2; }
.lf-route-node > span { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #d8e3ec; border-radius: 10px; color: #1f548f; background: #f5f9fc; }
.lf-route-node svg { width: 18px; height: 18px; }
.lf-route-node b { font-weight: 700; white-space: nowrap; }
.lf-route-node--gold { color: #896009; }
.lf-route-node--gold > span { border-color: #efd187; color: #a36c05; background: #fff7dd; }
.lf-route-graphic > i { display: block; flex: none; color: #9aacbf; line-height: 0; }
.lf-route-graphic > i svg { display: block; width: 35px; height: 10px; }

/* A wide desktop form removes unnecessary vertical travel: destinations use four columns,
   and the three contact fields share one row. The compact mobile rules below deliberately
   return to roomy, touch-friendly choices and a single input column. */
.lf-card { width: min(100%, 1080px); }
.lf-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lf-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.lf-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(255px, 320px); align-items: center; gap: 18px; }
.lf-note { margin: 0; text-align: left; }

/* Work Visa split form: destination context stays visually distinct from the details that
   personalise it. The two panes balance at desktop width; neither becomes a narrow column. */
.lf-form-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; gap: clamp(28px, 4vw, 52px); }
.lf-country-pane { padding-right: clamp(28px, 4vw, 52px); border-right: 1px solid #e2e9ef; }
.lf-country-pane .lf-question { margin: 0; }
.lf-country-pane .lf-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-details-pane { display: flex; flex-direction: column; min-width: 0; }
.lf-details-pane .lf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.lf-details-pane .lf-fields label:last-child { grid-column: 1 / -1; }
.lf-message { display: block; margin-top: 16px; color: #314965; font-size: 12px; font-weight: 700; }
.lf-message span { color: #8898aa; font-weight: 500; }
.lf-message textarea { display: block; width: 100%; min-height: 92px; margin-top: 8px; padding: 11px 13px; border: 1px solid #d6e0e9; border-radius: 9px; color: var(--navy); background: #fbfcfd; font: 500 13px/1.5 "Poppins", Arial, sans-serif; resize: vertical; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.lf-message textarea::placeholder { color: #98a6b6; opacity: 1; }
.lf-message textarea:focus { border-color: #8da4bf; outline: 3px solid rgba(240,184,26,.28); background: var(--white); }
.lf-details-pane .lf-actions { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.lf-details-pane .lf-note { text-align: center; }

@media (max-width: 900px) {
  .lf-form-layout { grid-template-columns: 1fr; gap: 24px; }
  .lf-country-pane { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid #e2e9ef; }
  .lf-country-pane .lf-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) and (min-width: 641px) {
  .lf-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-actions { grid-template-columns: 1fr; gap: 13px; }
  .lf-note { text-align: center; }
}

@media (max-width: 640px) {
  .lf-choice-grid { grid-template-columns: repeat(2, 1fr); }
  .lf-card { padding: 26px 20px; border-radius: 20px; }
  .lf-fields { grid-template-columns: 1fr; }
  .lf-country-pane .lf-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-details-pane .lf-fields { grid-template-columns: 1fr; }
  .lf-actions { grid-template-columns: 1fr; gap: 13px; }
  .lf-note { margin: 0; text-align: center; }
  .lf-hero { padding: 114px 0 48px; }
  .lf-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .lf-hero-content { padding: 0; }
  .lf-hero-visual { width: min(100%, 390px); justify-self: center; }
  .lf-hero-photo-frame { height: 410px; border-radius: 22px 56px 22px 22px; }
  .lf-career-tag { right: 14px; bottom: 15px; width: min(228px, 72%); }
  .lf-hero-orbit-one { right: -46px; }
  .lf-hero-orbit-two { left: -38px; }
  .lf-route-graphic { gap: 5px; padding: 13px 7px; }
  .lf-route-node { min-width: 0; flex: 1 1 0; font-size: 9px; }
  .lf-route-graphic > i svg { width: 18px; }
}