/*
 * ============================================================
 *  US Area Immigration Services — style.css
 *
 *  INDEX
 *  01. Design Tokens        11. Journey Tabs         21. Eligibility Grid
 *  02. Reset & Base         12. Section Hero Band    22. Highlight Box
 *  03. Topbar               13. Content Grid+Sidebar 23. Comparison Table
 *  04. Navbar & Logo        14. Checklist Cards      24. Duration Timeline
 *  05. Buttons              15. Process Cards        25. Global Cards
 *  06. Homepage Hero        16. BP Items             26. Testimonials
 *  07. Trust Bar            17. Service Pillars      27. EB-1C Steps
 *  08. Generic Section      18. Roadmap              28. Service Cards (9-up)
 *  09. Services Grid        19. Green Card Banner    29. First-Year Timeline
 *  10. How-It-Works         20. Facts Strip          30. Why Grid
 *                                                    31. FAQ Accordion
 *                                                    32. Settle Tabs
 *                                                    33. CTA Banner
 *                                                    34. Footer
 *                                                    35. Responsive
 * ============================================================
 */

/* ─── 01. DESIGN TOKENS ─────────────────────────────────────
   Edit colours, shadows, and gradients in this block only.  */
:root {
  --navy:         #0B1D3A;
  --blue:         #1A3A6B;
  --blue-mid:     #2A5298;
  --blue-light:   #3B6FC0;
  --blue-pale:    #E8F0FE;
  --white:        #FFFFFF;
  --off-white:    #F5F7FB;
  --gold:         #C9A84C;
  --gold-light:   #E4CA73;
  --gold-dark:    #A88A30;
  --gold-shimmer: linear-gradient(135deg,#C9A84C 0%,#E4CA73 40%,#C9A84C 60%,#A88A30 100%);
  --text-dark:    #0D1B2A;
  --text-mid:     #3D5A80;
  --text-light:   #8CA3BE;
  --shadow-soft:  0 4px 24px rgba(11,29,58,.08);
  --shadow-mid:   0 8px 40px rgba(11,29,58,.12);
  --shadow-gold:  0 4px 20px rgba(201,168,76,.25);
  --radius:       16px;
  --radius-sm:    10px;
  --green-ok:     #138808;
  --amber-warn:   #B45309;
  --red-long:     #B91C1C;
}

/* ─── 02. RESET & BASE ──────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; color:var(--text-dark); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img  { max-width:100%; display:block; }
a    { color:inherit; }

/* ─── 03. TOPBAR ────────────────────────────────────────── */
.topbar { background:var(--navy); color:var(--white); font-size:.8rem; padding:6px 0; }
.topbar-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.topbar a { color:var(--gold-light); text-decoration:none; }
.topbar a:hover { color:var(--gold); }

/* ─── 04. NAVBAR & LOGO ─────────────────────────────────── */
.navbar { background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-bottom:2px solid var(--gold); position:sticky; top:0; z-index:1000; transition:box-shadow .3s; }
.navbar.scrolled { box-shadow:var(--shadow-mid); }
.nav-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center; height:72px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-icon { width:44px; height:44px; background:var(--gold-shimmer); border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:800; color:var(--navy); font-size:1.1rem; }
.logo-text { font-family:'Playfair Display',serif; font-weight:700; font-size:1.15rem; color:var(--navy); line-height:1.2; }
.logo-text span { color:var(--gold-dark); }
.nav-links { display:flex; gap:24px; list-style:none; align-items:center; }
.nav-links a { text-decoration:none; color:var(--text-dark); font-weight:500; font-size:.88rem; position:relative; padding:4px 0; transition:color .2s; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--gold); transition:width .3s; }
.nav-links a:hover, .nav-links a.active { color:var(--gold-dark); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { width:24px; height:2px; background:var(--navy); border-radius:2px; transition:.3s; }

/* ─── 05. BUTTONS ───────────────────────────────────────── */
.btn-gold { background:var(--gold-shimmer); color:var(--navy); font-weight:700; font-size:.85rem; padding:10px 24px; border:none; border-radius:6px; cursor:pointer; letter-spacing:.03em; text-transform:uppercase; transition:all .3s; text-decoration:none; display:inline-block; box-shadow:var(--shadow-gold); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(201,168,76,.4); }
.btn-blue { background:var(--navy); color:var(--white); font-weight:600; font-size:.9rem; padding:14px 32px; border:none; border-radius:6px; text-decoration:none; display:inline-block; cursor:pointer; transition:all .3s; }
.btn-blue:hover { opacity:.88; transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--white); font-weight:600; font-size:.9rem; padding:12px 28px; border:2px solid var(--gold); border-radius:6px; cursor:pointer; transition:all .3s; text-decoration:none; display:inline-block; }
.btn-outline:hover { background:var(--gold); color:var(--navy); }
.btn-outline-dark { background:transparent; color:var(--white); font-weight:600; font-size:.9rem; padding:14px 32px; border:2px solid var(--gold); border-radius:6px; cursor:pointer; transition:all .3s; text-decoration:none; display:inline-block; text-align:center; }
.btn-outline-dark:hover { background:var(--gold); color:var(--navy); }

/* ─── 06. HOMEPAGE HERO ─────────────────────────────────── */
.hero { position:relative; min-height:92vh; background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 50%,var(--blue-mid) 100%); display:flex; align-items:center; overflow:hidden; }
.hero-glow { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.15),transparent 70%); top:-100px; right:-100px; pointer-events:none; }
.hero-inner { max-width:1280px; margin:0 auto; padding:80px 24px; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; position:relative; z-index:2; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.3); border-radius:40px; padding:6px 16px; font-size:.8rem; color:var(--gold-light); font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:20px; }
.hero-badge .dot { width:8px; height:8px; background:var(--gold); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.hero h1 { font-family:'Playfair Display',serif; font-weight:800; font-size:clamp(2.4rem,4.5vw,3.8rem); color:var(--white); line-height:1.12; margin-bottom:20px; }
.hero h1 .gold { color:var(--gold-light); }
.hero h1 .thin { font-weight:400; font-style:italic; font-size:.85em; }
.hero-sub { color:rgba(255,255,255,.75); font-size:1.1rem; line-height:1.7; margin-bottom:32px; max-width:520px; }
.hero-cta { display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:32px; margin-top:48px; }
.hero-stat { text-align:center; }
.hero-stat-num { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:700; color:var(--gold-light); }
.hero-stat-label { font-size:.78rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.hero-card { background:rgba(255,255,255,.06); backdrop-filter:blur(20px); border:1px solid rgba(201,168,76,.25); border-radius:20px; padding:40px; position:relative; }
.hero-card::before { content:''; position:absolute; top:-1px; left:40px; right:40px; height:3px; background:var(--gold-shimmer); border-radius:0 0 4px 4px; }
.hero-card h3 { font-family:'Playfair Display',serif; color:var(--white); font-size:1.4rem; margin-bottom:24px; }
.journey-step { display:flex; gap:16px; align-items:center; margin-bottom:12px; border-radius:10px; padding:12px 36px 12px 12px; margin-left:-12px; transition:background .22s, border-left-color .22s, transform .22s; cursor:pointer; text-decoration:none; border-left:3px solid transparent; position:relative; outline:none; }
.journey-step:hover  { background:rgba(201,168,76,.12); border-left-color:var(--gold); transform:translateX(4px); }
.journey-step:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:10px; }
.journey-step::after { content:'→'; position:absolute; right:14px; top:50%; transform:translateY(-50%) translateX(-4px); color:var(--gold-light); font-size:1rem; opacity:0; transition:opacity .22s, transform .22s; pointer-events:none; }
.journey-step:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
.journey-step-num { width:36px; height:36px; min-width:36px; background:var(--gold-shimmer); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:var(--navy); transition:transform .22s, box-shadow .22s; flex-shrink:0; }
.journey-step:hover .journey-step-num { transform:scale(1.1); box-shadow:0 0 0 4px rgba(201,168,76,.2); }
.journey-step-text h4 { color:var(--white); font-size:.95rem; margin-bottom:3px; }
.journey-step-text p { color:rgba(255,255,255,.55); font-size:.82rem; line-height:1.5; }

/* ─── 07. TRUST BAR ─────────────────────────────────────── */
.trust-bar { background:var(--white); border-bottom:1px solid #E8ECF2; padding:28px 0; }
.trust-bar-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; justify-content:center; align-items:center; gap:48px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:500; color:var(--text-mid); }
.trust-icon { width:38px; height:38px; background:var(--blue-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }

/* ─── 08. GENERIC SECTION ───────────────────────────────── */
.section { padding:80px 0; }
.section-inner { max-width:1280px; margin:0 auto; padding:0 24px; }
.section-label { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:10px; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; color:var(--navy); margin-bottom:16px; line-height:1.2; }
.section-sub { color:var(--text-mid); font-size:1.05rem; line-height:1.65; max-width:600px; }
.bg-offwhite { background:var(--off-white); }
.bg-navy { background:var(--navy); }
.bg-navy .section-label { color:var(--gold-light); }
.bg-navy .section-title { color:var(--white); }
.bg-navy .section-sub   { color:rgba(255,255,255,.6); }
.text-center { text-align:center; }
.text-center .section-sub { margin-left:auto; margin-right:auto; }

/* ─── 09. SERVICES GRID ─────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:48px; }
.service-card { background:var(--white); border-radius:var(--radius); padding:32px; border:1px solid #E8ECF2; transition:all .3s; position:relative; overflow:hidden; text-decoration:none; display:block; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold-shimmer); opacity:0; transition:opacity .3s; }
.service-card:hover { box-shadow:var(--shadow-mid); border-color:var(--gold); transform:translateY(-4px); }
.service-card:hover::before { opacity:1; }
.service-icon { width:52px; height:52px; background:var(--blue-pale); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px; }
.service-card h4 { font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--navy); margin-bottom:8px; }
.service-card p  { color:var(--text-mid); font-size:.9rem; line-height:1.6; }
.service-card .card-link { display:inline-flex; align-items:center; gap:4px; color:var(--gold-dark); font-size:.85rem; font-weight:600; margin-top:14px; }

/* ─── 10. HOW-IT-WORKS ──────────────────────────────────── */
.how-timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:56px; position:relative; z-index:2; }
.how-timeline::before { content:''; position:absolute; top:28px; left:10%; right:10%; height:1px; background:rgba(201,168,76,.2); z-index:1; }
.how-step { text-align:center; position:relative; }
.how-step-num { width:56px; height:56px; margin:0 auto 16px; background:var(--gold-shimmer); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:700; font-size:1.2rem; color:var(--navy); position:relative; z-index:2; }
.how-step h4 { font-size:.95rem; font-weight:600; margin-bottom:6px; color:var(--white); }
.how-step p  { font-size:.82rem; color:rgba(255,255,255,.5); line-height:1.55; }

/* ─── 11. JOURNEY TABS (L-1A sub-steps) ─────────────────── */
.journey-tabs { display:flex; gap:0; border-bottom:2px solid #E8ECF2; overflow-x:auto; margin-top:48px; }
.journey-tab { padding:14px 28px; border:none; background:none; cursor:pointer; font-weight:600; font-size:.9rem; color:var(--text-mid); border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .3s; white-space:nowrap; }
.journey-tab:hover { color:var(--navy); }
.journey-tab.active { color:var(--gold-dark); border-bottom-color:var(--gold); }
.journey-tab .tab-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:var(--blue-pale); border-radius:50%; font-size:.75rem; color:var(--blue-mid); margin-right:8px; font-weight:700; }
.journey-tab.active .tab-num { background:var(--gold-shimmer); color:var(--navy); }
.journey-panel { display:none; padding:48px 0; }
.journey-panel.active { display:block; }

/* ─── 12. SECTION HERO BAND ─────────────────────────────── */
.section-hero { background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 50%,var(--blue-mid) 100%); padding:80px 0 60px; position:relative; overflow:hidden; }
.section-hero-glow { position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.12),transparent 70%); top:-150px; right:-100px; pointer-events:none; }
.section-hero-inner { max-width:1280px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }
.section-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.3); border-radius:40px; padding:6px 18px; font-size:.78rem; color:var(--gold-light); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.section-hero h2 { font-family:'Playfair Display',serif; font-weight:800; font-size:clamp(2rem,4vw,3rem); color:var(--white); line-height:1.15; margin-bottom:16px; max-width:700px; }
.section-hero h2 .gold { color:var(--gold-light); }
.section-hero-sub { color:rgba(255,255,255,.65); font-size:1.05rem; line-height:1.7; max-width:620px; }
.section-hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }

/* ─── 13. CONTENT GRID & SIDEBAR ────────────────────────── */
.content-wrap  { padding:72px 0; }
.content-inner { max-width:1280px; margin:0 auto; padding:0 24px; }
.content-grid  { display:grid; grid-template-columns:2.2fr 1fr; gap:64px; align-items:start; }
.content-body p  { color:var(--text-mid); font-size:.96rem; line-height:1.75; margin-bottom:20px; }
.content-body h3 { font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--navy); margin:40px 0 16px; padding-top:20px; border-top:1px solid #E8ECF2; }
.content-body h4 { font-size:1.1rem; color:var(--blue); margin:28px 0 12px; font-weight:600; }
.content-body ul, .content-body ol { margin:16px 0 24px 20px; color:var(--text-mid); font-size:.93rem; line-height:1.8; }
.content-body li { margin-bottom:6px; }
.content-body strong { color:var(--navy); }
.sidebar { position:sticky; top:96px; }
.sidebar-card  { background:var(--off-white); border:1px solid #E8ECF2; border-radius:var(--radius); padding:28px; margin-bottom:24px; }
.sidebar-card h4 { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--navy); margin-bottom:12px; }
.sidebar-card p  { font-size:.87rem; color:var(--text-mid); line-height:1.6; margin-bottom:14px; }
.sidebar-card ul { list-style:none; margin:0; padding:0; }
.sidebar-card li { padding:10px 0; border-bottom:1px solid #E8ECF2; font-size:.88rem; color:var(--text-mid); }
.sidebar-card li:last-child { border-bottom:none; }
.sidebar-card a  { color:var(--blue-mid); text-decoration:none; font-weight:500; }
.sidebar-card a:hover { color:var(--gold-dark); }
.sidebar-cta    { background:var(--navy); border-radius:var(--radius); padding:32px; text-align:center; }
.sidebar-cta h4 { font-family:'Playfair Display',serif; color:var(--white); font-size:1.15rem; margin-bottom:10px; }
.sidebar-cta p  { color:rgba(255,255,255,.6); font-size:.87rem; margin-bottom:20px; line-height:1.6; }

/* ─── 14. CHECKLIST CARDS ───────────────────────────────── */
.checklist-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:32px 0; }
.checklist-card { background:var(--white); border:1px solid #E8ECF2; border-radius:14px; padding:24px; transition:all .3s; }
.checklist-card:hover { border-color:var(--gold); box-shadow:var(--shadow-soft); transform:translateY(-3px); }
.checklist-card .icon { width:44px; height:44px; background:var(--blue-pale); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:12px; }
.checklist-card h4 { font-size:.95rem; color:var(--navy); margin-bottom:6px; }
.checklist-card p  { font-size:.84rem; color:var(--text-mid); line-height:1.55; }

/* ─── 15. PROCESS CARDS ─────────────────────────────────── */
.process-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:32px 0; }
.process-card { background:var(--white); border:1px solid #E8ECF2; border-radius:14px; padding:28px; transition:all .3s; position:relative; overflow:hidden; }
.process-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold-shimmer); opacity:0; transition:opacity .3s; }
.process-card:hover { border-color:var(--gold); box-shadow:var(--shadow-soft); transform:translateY(-3px); }
.process-card:hover::before { opacity:1; }
.process-card .icon { width:48px; height:48px; background:var(--blue-pale); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:14px; }
.process-card h4 { font-size:1rem; color:var(--navy); margin-bottom:8px; }
.process-card p  { font-size:.85rem; color:var(--text-mid); line-height:1.6; }

/* ─── 16. BUSINESS PLAN ITEMS ───────────────────────────── */
.bp-list { display:grid; grid-template-columns:1fr; gap:16px; margin:32px 0; }
.bp-item { background:var(--off-white); border:1px solid #E8ECF2; border-radius:12px; padding:24px; display:flex; gap:16px; align-items:flex-start; transition:all .3s; }
.bp-item:hover { border-color:var(--gold); box-shadow:var(--shadow-soft); }
.bp-num { width:40px; height:40px; min-width:40px; background:var(--gold-shimmer); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:700; font-size:.9rem; color:var(--navy); }
.bp-item h4 { font-size:.95rem; color:var(--navy); margin-bottom:4px; }
.bp-item p  { font-size:.85rem; color:var(--text-mid); line-height:1.6; }

/* ─── 17. SERVICE PILLARS ───────────────────────────────── */
.pillars-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0; }
.pillar { background:var(--white); border:1px solid #E8ECF2; border-radius:var(--radius); padding:28px; text-align:center; transition:all .3s; position:relative; overflow:hidden; }
.pillar::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--gold-shimmer); opacity:0; transition:opacity .3s; }
.pillar:hover { border-color:var(--gold); box-shadow:var(--shadow-mid); transform:translateY(-4px); }
.pillar:hover::after { opacity:1; }
.pillar .icon { width:56px; height:56px; margin:0 auto 14px; background:var(--blue-pale); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.pillar h4 { font-family:'Playfair Display',serif; font-size:1rem; color:var(--navy); margin-bottom:8px; }
.pillar p  { font-size:.84rem; color:var(--text-mid); line-height:1.6; }

/* ─── 18. ROADMAP ───────────────────────────────────────── */
.roadmap { margin:32px 0; }
.roadmap-item { display:flex; gap:20px; margin-bottom:24px; align-items:flex-start; }
.roadmap-marker { width:48px; min-width:48px; text-align:center; }
.roadmap-dot { width:16px; height:16px; background:var(--gold); border-radius:50%; margin:4px auto 0; position:relative; }
.roadmap-dot::after { display:none; }
.roadmap-period { font-size:.7rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.06em; margin-top:8px; }
.roadmap-content h4 { font-size:1rem; color:var(--navy); margin-bottom:4px; }
.roadmap-content p  { font-size:.88rem; color:var(--text-mid); line-height:1.6; }

/* ─── 19. GREEN CARD BANNER ─────────────────────────────── */
.gc-banner { background:linear-gradient(135deg,var(--gold-dark),var(--gold),var(--gold-light)); border-radius:20px; padding:48px; margin:48px 0; position:relative; overflow:hidden; }
.gc-banner::before { content:''; position:absolute; top:-30px; right:-30px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.1); }
.gc-banner h3 { font-family:'Playfair Display',serif; color:var(--navy); font-size:1.5rem; margin-bottom:12px; }
.gc-banner p  { color:var(--navy); opacity:.75; font-size:.95rem; line-height:1.65; max-width:600px; }
.gc-banner .btn-blue { margin-top:20px; }

/* ─── 20. FACTS STRIP ───────────────────────────────────── */
.facts-strip { background:var(--white); border-bottom:1px solid #E8ECF2; padding:32px 0; }
.facts-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.fact { text-align:center; }
.fact-num   { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:700; color:var(--blue-mid); margin-bottom:4px; transition:color .22s; }
.fact-label { font-size:.82rem; color:var(--text-mid); line-height:1.4; transition:color .22s; }
/* Clickable journey-step facts */
a.fact { cursor:pointer; border-radius:10px; transition:background .22s, transform .22s, box-shadow .22s; position:relative; }
a.fact:hover { background:rgba(201,168,76,.1); transform:translateY(-3px); box-shadow:0 6px 20px rgba(11,29,58,.08); }
a.fact:hover .fact-num { color:var(--gold-dark); }
a.fact:hover .fact-label { color:var(--navy); }
a.fact:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* ─── 21. ELIGIBILITY GRID ──────────────────────────────── */
.elig-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:32px 0; }
.elig-card { background:var(--white); border:1px solid #E8ECF2; border-radius:14px; padding:24px; transition:all .3s; }
.elig-card:hover { border-color:var(--gold); box-shadow:var(--shadow-soft); transform:translateY(-3px); }
.elig-card .icon { width:44px; height:44px; background:var(--blue-pale); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:12px; }
.elig-card h4 { font-size:.95rem; color:var(--navy); margin-bottom:6px; }
.elig-card p  { font-size:.84rem; color:var(--text-mid); line-height:1.55; }

/* ─── 22. HIGHLIGHT BOX ─────────────────────────────────── */
.highlight-box { background:linear-gradient(135deg,rgba(201,168,76,.06),rgba(26,58,107,.04)); border:1px solid rgba(201,168,76,.25); border-radius:var(--radius); padding:28px; margin:32px 0; }
.highlight-box h4 { font-family:'Playfair Display',serif; color:var(--navy); font-size:1.1rem; margin-bottom:10px; }
.highlight-box p  { font-size:.9rem; color:var(--text-mid); line-height:1.7; }

/* ─── 23. COMPARISON TABLE ──────────────────────────────── */
.cmp-table { width:100%; border-collapse:collapse; margin:24px 0; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-soft); font-size:.9rem; }
.cmp-table th { background:var(--navy); color:var(--white); padding:16px; text-align:left; font-family:'Playfair Display',serif; font-weight:600; }
.cmp-table td { padding:14px 16px; border-bottom:1px solid #E8ECF2; color:var(--text-mid); }
.cmp-table tr:nth-child(even) { background:var(--off-white); }
.cmp-table td:first-child { font-weight:600; color:var(--navy); }

/* ─── 24. DURATION TIMELINE ─────────────────────────────── */
.dur-timeline { display:flex; gap:16px; margin:28px 0; flex-wrap:wrap; }
.dur-step { flex:1; min-width:140px; background:var(--off-white); border:1px solid #E8ECF2; border-radius:12px; padding:20px; text-align:center; }
.dur-period { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--gold-dark); margin-bottom:4px; }
.dur-step h4 { font-size:.85rem; color:var(--navy); margin-bottom:4px; }
.dur-step p  { font-size:.78rem; color:var(--text-mid); line-height:1.5; }

/* ─── 25. GLOBAL CARDS ──────────────────────────────────── */
.global-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px; }
.global-card { background:var(--white); border-radius:var(--radius); padding:36px; text-align:center; border:1px solid #E8ECF2; transition:all .3s; }
.global-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-mid); border-color:var(--gold); }
.global-card-icon { width:64px; height:64px; margin:0 auto 16px; background:var(--blue-pale); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
.global-card h4 { font-family:'Playfair Display',serif; font-size:1.1rem; color:var(--navy); margin-bottom:8px; }
.global-card p  { font-size:.88rem; color:var(--text-mid); line-height:1.6; }

/* ─── 26. TESTIMONIALS ──────────────────────────────────── */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px; }
.testimonial-card { background:var(--off-white); border-radius:var(--radius); padding:32px; position:relative; border:1px solid #E8ECF2; }
.testimonial-card::before { content:'\201C'; font-family:'Playfair Display',serif; font-size:4rem; color:var(--gold); position:absolute; top:16px; right:24px; line-height:1; opacity:.4; }
.testimonial-stars  { color:var(--gold); margin-bottom:12px; letter-spacing:2px; }
.testimonial-card p { font-size:.92rem; color:var(--text-mid); line-height:1.65; margin-bottom:16px; font-style:italic; }
.testimonial-author { font-weight:600; color:var(--navy); font-size:.9rem; }
.testimonial-role   { font-size:.8rem; color:var(--text-light); }

/* ─── 27. EB-1C STEPS ───────────────────────────────────── */
.visa-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin:32px 0; }
.visa-step-card { background:var(--off-white); border-radius:12px; padding:24px; text-align:center; border:1px solid transparent; transition:all .3s; }
.visa-step-card:hover { border-color:var(--blue-light); background:var(--white); box-shadow:var(--shadow-soft); }
.visa-step-num { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:700; color:var(--blue-mid); margin-bottom:8px; }
.visa-step-card h4 { font-size:.9rem; color:var(--navy); margin-bottom:6px; }
.visa-step-card p  { font-size:.8rem; color:var(--text-mid); line-height:1.5; }
.eb1c-cta { background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%); border-radius:20px; padding:48px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.eb1c-cta h3 { font-family:'Playfair Display',serif; color:var(--white); font-size:1.6rem; margin-bottom:8px; }
.eb1c-cta p  { color:rgba(255,255,255,.7); font-size:.95rem; }

/* ─── 28. SERVICE CARDS (Settling-In 9-up grid) ─────────── */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.svc-card { background:var(--white); border:1px solid #E8ECF2; border-radius:var(--radius); padding:30px; position:relative; overflow:hidden; transition:all .35s; }
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gold-shimmer); opacity:0; transition:opacity .3s; }
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-mid); border-color:var(--gold); }
.svc-card:hover::before { opacity:1; }
.svc-icon { width:56px; height:56px; background:var(--blue-pale); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:16px; }
.svc-card h3 { font-family:'Playfair Display',serif; font-size:1.12rem; color:var(--navy); margin-bottom:8px; }
.svc-card > p { font-size:.88rem; color:var(--text-mid); line-height:1.6; margin-bottom:12px; }
.svc-card ul { list-style:none; margin:0; padding:0; }
.svc-card li { font-size:.83rem; color:var(--text-mid); padding:5px 0 5px 22px; position:relative; line-height:1.45; }
.svc-card li::before { content:'✓'; position:absolute; left:0; color:var(--gold-dark); font-weight:700; }

/* ─── 29. FIRST-YEAR TIMELINE ───────────────────────────── */
.settle-tl-section { background:var(--navy); border-radius:20px; padding:56px 48px; margin:56px 0; }
.settle-timeline { margin-top:48px; position:relative; }
.tl-item { display:grid; grid-template-columns:120px 1fr; gap:28px; padding-bottom:32px; }
.tl-period { text-align:right; }
.tl-period .big   { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; color:var(--gold-light); }
.tl-period .small { font-size:.74rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.05em; }
.tl-content { border-left:2px solid rgba(201,168,76,.25); padding-left:28px; position:relative; }
.tl-content::before { content:''; position:absolute; left:-7px; top:4px; width:12px; height:12px; background:var(--gold); border-radius:50%; }
.tl-content h4 { color:var(--white); font-size:1.05rem; margin-bottom:6px; }
.tl-content p  { color:rgba(255,255,255,.55); font-size:.88rem; line-height:1.6; }

/* ─── 30. WHY GRID ──────────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.why-card { background:var(--off-white); border:1px solid #E8ECF2; border-radius:var(--radius); padding:30px; text-align:center; transition:all .3s; }
.why-card:hover { border-color:var(--gold); box-shadow:var(--shadow-soft); transform:translateY(-4px); }
.why-card .icon { width:60px; height:60px; margin:0 auto 14px; background:var(--blue-pale); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; }
.why-card h4 { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--navy); margin-bottom:8px; }
.why-card p  { font-size:.86rem; color:var(--text-mid); line-height:1.6; }

/* ─── 31. FAQ ACCORDION ─────────────────────────────────── */
.faq-list { margin-top:36px; max-width:820px; }
.faq-item { border-bottom:1px solid #E8ECF2; padding:20px 0; }
.faq-q { font-weight:600; font-size:1rem; color:var(--navy); cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; }
.faq-q::after { content:'+'; font-size:1.3rem; color:var(--gold); transition:transform .3s; }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; font-size:.92rem; color:var(--text-mid); line-height:1.7; }
.faq-item.open .faq-a { max-height:400px; padding-top:12px; }

/* ─── 32. SETTLE TABS ───────────────────────────────────── */
.settle-tabs { display:flex; gap:0; border-bottom:2px solid #E8ECF2; overflow-x:auto; }
.settle-tab { padding:16px 36px; border:none; background:none; cursor:pointer; font-weight:600; font-size:1rem; color:var(--text-mid); border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .3s; white-space:nowrap; }
.settle-tab:hover { color:var(--navy); }
.settle-tab.active { color:var(--gold-dark); border-bottom-color:var(--gold); }
.settle-panel { display:none; padding:48px 0 0; }
.settle-panel.active { display:block; }

/* ─── 33. CTA BANNER ────────────────────────────────────── */
.cta-banner { background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%); padding:80px 0; text-align:center; position:relative; overflow:hidden; }
.cta-glow { position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.12),transparent 70%); top:-200px; left:50%; transform:translateX(-50%); }
.cta-banner h2 { font-family:'Playfair Display',serif; color:var(--white); font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:16px; position:relative; z-index:2; }
.cta-banner > .section-inner > p { color:rgba(255,255,255,.65); font-size:1.05rem; margin-bottom:32px; position:relative; z-index:2; }
.cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2; }

/* ─── 34. FOOTER ────────────────────────────────────────── */
.footer { background:var(--navy); color:rgba(255,255,255,.6); padding:64px 0 0; }
.footer-inner { max-width:1280px; margin:0 auto; padding:0 24px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand h3 { font-family:'Playfair Display',serif; color:var(--white); font-size:1.3rem; margin-bottom:12px; }
.footer-brand p  { font-size:.88rem; line-height:1.65; margin-bottom:20px; }
.footer-col h4   { color:var(--gold-light); font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul   { list-style:none; }
.footer-col li   { margin-bottom:10px; }
.footer-col a    { color:rgba(255,255,255,.55); text-decoration:none; font-size:.88rem; transition:color .2s; }
.footer-col a:hover { color:var(--gold-light); }
.footer-bottom  { padding:24px 0; text-align:center; font-size:.8rem; }
.footer-bottom span { color:var(--gold); }
.disclaimer-bar { background:transparent; border-top:1px solid rgba(255,255,255,.08); padding:14px 24px; text-align:center; font-size:.78rem; color:rgba(255,255,255,.45); line-height:1.6; }

/* ─── 35. EB-1C ROUTE CARDS ─────────────────────────────── */
.routes { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:32px 0; }
.route-card { border:1px solid #E8ECF2; border-radius:var(--radius); padding:28px; position:relative; overflow:hidden; transition:all .3s; }
.route-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gold-shimmer); }
.route-card:hover { box-shadow:var(--shadow-mid); border-color:var(--gold); transform:translateY(-4px); }
.route-card h4 { font-family:'Playfair Display',serif; color:var(--navy); font-size:1.15rem; margin-bottom:6px; }
.route-tag { display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 10px; border-radius:20px; margin-bottom:12px; }
.route-tag.new    { background:rgba(180,83,9,.1);   color:var(--amber-warn); }
.route-tag.direct { background:rgba(19,136,8,.1);   color:var(--green-ok); }
.route-card p  { font-size:.88rem; color:var(--text-mid); line-height:1.65; }
.route-steps { list-style:none; margin:14px 0 0; padding:0; }
.route-steps li { font-size:.85rem; color:var(--text-mid); padding:7px 0 7px 26px; position:relative; }
.route-steps li::before { content:'✓'; position:absolute; left:0; color:var(--gold-dark); font-weight:700; }

/* ─── 36. USCIS BOX ──────────────────────────────────────── */
.uscis-box { background:var(--navy); border-radius:var(--radius); padding:36px; margin:32px 0; color:var(--white); position:relative; overflow:hidden; }
.uscis-box::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:rgba(201,168,76,.1); }
.uscis-box h3 { font-family:'Playfair Display',serif; color:var(--white); font-size:1.3rem; margin-bottom:10px; position:relative; z-index:2; }
.uscis-box p  { color:rgba(255,255,255,.65); font-size:.92rem; line-height:1.65; margin-bottom:18px; position:relative; z-index:2; }
.uscis-links { display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:2; }
.uscis-link  { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(201,168,76,.3); border-radius:8px; padding:12px 18px; color:var(--gold-light); text-decoration:none; font-size:.88rem; font-weight:600; transition:all .3s; }
.uscis-link:hover { background:rgba(201,168,76,.15); border-color:var(--gold); }

/* ─── 37. PRIORITY DATE STATUS BADGES ───────────────────── */
.pd-status   { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.74rem; font-weight:700; }
.pd-current  { background:rgba(19,136,8,.12);   color:var(--green-ok); }
.pd-moderate { background:rgba(180,83,9,.12);   color:var(--amber-warn); }
.pd-long     { background:rgba(185,28,28,.1);   color:var(--red-long); }

/* ─── 38. PAGE-NAV PREV/NEXT BAR ────────────────────────── */
.page-nav { background:var(--off-white); border-top:1px solid #E8ECF2; padding:40px 0; }
.page-nav-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.page-nav-card { background:var(--white); border:1px solid #E8ECF2; border-radius:14px; padding:24px 32px; flex:1; min-width:260px; transition:all .3s; text-decoration:none; }
.page-nav-card:hover { border-color:var(--gold); box-shadow:var(--shadow-soft); }
.page-nav-card .dir   { font-size:.75rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.page-nav-card .title { font-family:'Playfair Display',serif; color:var(--navy); font-size:1.05rem; font-weight:600; }

/* ─── 39. RESPONSIVE ────────────────────────────────────── */
@media (max-width:1024px) {
  .routes            { grid-template-columns:1fr; }
  .hero-inner        { grid-template-columns:1fr; }
  .hero-card         { max-width:480px; }
  .services-grid     { grid-template-columns:1fr; }
  .how-timeline      { grid-template-columns:repeat(3,1fr); }
  .global-grid       { grid-template-columns:1fr 1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .footer-grid       { grid-template-columns:1fr 1fr; }
  .content-grid      { grid-template-columns:1fr; }
  .sidebar           { position:static; }
  .checklist-grid    { grid-template-columns:1fr; }
  .process-grid      { grid-template-columns:1fr; }
  .pillars-grid      { grid-template-columns:1fr 1fr; }
  .elig-grid         { grid-template-columns:1fr; }
  .facts-inner       { grid-template-columns:1fr 1fr; }
  .svc-grid          { grid-template-columns:1fr 1fr; }
  .why-grid          { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  /* ── Topbar ── */
  .topbar-inner > div:last-child { display:none; }
  .topbar-inner { justify-content:center; }
  .topbar { font-size:.76rem; padding:5px 0; }

  /* ── Navbar ── */
  .hamburger { display:flex; }
  .nav-links {
    display:none; position:absolute; top:72px; left:0; right:0;
    background:var(--white); flex-direction:column;
    padding:16px 20px 24px; border-bottom:2px solid var(--gold);
    box-shadow:var(--shadow-mid); max-height:80vh; overflow-y:auto;
  }
  .nav-links.open { display:flex; }
  .nav-links > li { border-bottom:1px solid #F0F3F8; padding:4px 0; }
  .nav-links > li:last-child { border-bottom:none; padding-top:12px; }
  .nav-links > li > a { padding:8px 0; display:block; font-size:.95rem; }
  .nav-links .btn-gold { width:100%; text-align:center; padding:12px; display:block; }

  /* ── Sections ── */
  .section { padding:52px 0; }
  .section-inner { padding:0 18px; }
  .section-hero { padding:56px 0 44px; }
  .section-hero-inner { padding:0 18px; }
  .section-hero h2 { font-size:clamp(1.7rem,6vw,2.3rem); }
  .section-hero-actions { flex-direction:column; align-items:stretch; gap:12px; }

  /* ── Buttons — full width on mobile ── */
  .hero-cta { flex-direction:column; align-items:stretch; gap:12px; }
  .btn-gold, .btn-blue, .btn-outline, .btn-outline-dark {
    width:100%; text-align:center; display:block; box-sizing:border-box;
  }

  /* ── Trust Bar ── */
  .trust-bar-inner { gap:20px; justify-content:flex-start; }
  .trust-item { font-size:.82rem; }

  /* ── Hero ── */
  .hero-inner     { padding:48px 18px 40px; }
  .hero-stats     { gap:16px; flex-wrap:wrap; justify-content:center; }
  .hero-stat-num  { font-size:1.6rem; }
  .hero-card      { padding:28px 22px; }

  /* ── Grids ── */
  .how-timeline   { grid-template-columns:1fr 1fr; }
  .global-grid    { grid-template-columns:1fr; }
  .footer-grid    { grid-template-columns:1fr; gap:28px; }
  .gc-banner      { padding:32px 24px; }
  .pillars-grid   { grid-template-columns:1fr; }
  .svc-grid       { grid-template-columns:1fr; }
  .why-grid       { grid-template-columns:1fr; }
  .services-grid  { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }

  /* ── Timeline & Tabs ── */
  .settle-tl-section { padding:32px 18px; }
  .tl-item        { grid-template-columns:1fr; gap:8px; }
  .tl-period      { text-align:left; }
  .tl-content     { border-left:none; padding-left:0; }
  .tl-content::before { display:none; }
  .journey-tab    { padding:12px 14px; font-size:.82rem; }
  .settle-tab     { padding:12px 14px; font-size:.85rem; }

  /* ── CTA ── */
  .eb1c-cta { flex-direction:column; text-align:center; padding:32px 20px; }
  .cta-actions { flex-direction:column; align-items:center; }
  .cta-actions .btn-gold, .cta-actions .btn-blue,
  .cta-actions .btn-outline, .cta-actions .btn-outline-dark { max-width:320px; }

  /* ── Page nav ── */
  .page-nav-inner { flex-direction:column; }
  .page-nav-card  { min-width:unset; }

  /* ── Journey progress stepper (inline flex) → 2x2 on mobile ── */
  .facts-inner[style*="flex"] { flex-wrap:wrap !important; }
  .facts-inner[style*="flex"] > .fact {
    flex:1 1 50% !important; min-width:50% !important;
    border-left:none !important; border-bottom:1px solid #E8ECF2;
  }

  /* ── Inline-styled grids that must collapse on mobile ── */
  .services-grid[style] { grid-template-columns:1fr !important; }
  .roadmap-item[style]  { grid-template-columns:1fr !important; gap:8px !important; }

  /* ── Footer ── */
  .footer { padding:44px 0 0; }
  .footer-inner { padding:0 18px; }
  .footer-bottom { font-size:.76rem; }
}

@media (max-width:480px) {
  /* ── Typography ── */
  .hero h1      { font-size:1.9rem; }
  .section-title { font-size:1.5rem; }

  /* ── Grids ── */
  .how-timeline  { grid-template-columns:1fr; }
  .facts-inner   { grid-template-columns:1fr 1fr; }
  .dur-timeline  { flex-direction:column; }
  .checklist-grid { grid-template-columns:1fr; }
  .process-grid  { grid-template-columns:1fr; }
  .elig-grid     { grid-template-columns:1fr; }
  .pillars-grid  { grid-template-columns:1fr; }

  /* ── Sections ── */
  .section { padding:40px 0; }
  .section-inner { padding:0 16px; }
  .section-hero { padding:44px 0 36px; }
  .section-hero-inner { padding:0 16px; }
  .hero-inner   { padding:36px 16px 32px; }

  /* ── Navbar ── */
  .nav-inner { padding:0 16px; }
  .logo-text { font-size:1rem; }

  /* ── Topbar ── */
  .topbar-inner { padding:0 16px; }

  /* ── Hero stats ── */
  .hero-stats     { gap:12px; }
  .hero-stat-num  { font-size:1.4rem; }
  .hero-stat-label { font-size:.72rem; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-brand { margin-bottom:8px; }

  /* ── CTA ── */
  .gc-banner { padding:24px 16px; }
  .gc-banner h3 { font-size:1.2rem; }
  .eb1c-cta  { padding:24px 16px; }

  /* ── Sidebar / content ── */
  .content-inner { padding:0 16px; }
  .content-wrap  { padding:44px 0; }
  .sidebar-cta { padding:24px 16px; }

  /* ── Tables ── */
  .cmp-table { font-size:.78rem; }
  .cmp-table th, .cmp-table td { padding:10px 10px; }
}