/* ---------------------------------------------------------------
   JAJ Immigration - site stylesheet
   One file, no build step. Edit the tokens below to restyle the
   whole site. Colours are taken from the logo artwork.
   --------------------------------------------------------------- */

/* Netlify injects its own "badge/HUD" iframe straight into <body> on every
   deployed page (see the <script src="/.netlify/scripts/hud..."> tag right
   before </html> — that's Netlify's own platform code, not ours). On narrow
   screens it can overlap page content, as it did over the rate cards on
   consultation.html. Hiding it here is an ordinary CSS override of an
   element in the page's own DOM, same as hiding any other in-page widget. */
#nl-hud-frame, #nl-badge-frame{display:none !important}

:root{
  /* brand, sampled from the logo file */
  --lime:#A9CF46;          /* logo background */
  --plum:#302B49;          /* logo wordmark, used for all body text */

  /* derived working colours */
  --lime-deep:#5F7F1B;     /* lime dark enough for text on white */
  --plum-deep:#211D33;     /* footer and header strip */
  --paper:#FFFFFF;
  --mist:#F2F4EC;          /* pale band, tinted toward the lime */
  --line:#DBDDD2;
  --ink-soft:#5E5A70;
  --flag:#A8421C;          /* draft notes only, not a brand colour */

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --measure:62ch;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#161324; --mist:#1F1B33; --line:#352F4D;
    --plum:#EDEAF5; --plum-deep:#0F0D1A; --ink-soft:#A9A3BE;
    --lime-deep:#BFE066; --flag:#E29070;
  }
}
:root[data-theme="dark"]{
  --paper:#161324; --mist:#1F1B33; --line:#352F4D;
  --plum:#EDEAF5; --plum-deep:#0F0D1A; --ink-soft:#A9A3BE;
  --lime-deep:#BFE066; --flag:#E29070;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--plum);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--lime-deep)}
.wrap{max-width:1060px; margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; margin:0}
h1{font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-0.015em}
h2{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.6rem}
h3{font-family:var(--sans); font-size:1.1rem; font-weight:600}
p{margin:.7rem 0; max-width:var(--measure)}
section{padding:60px 0; border-top:1px solid var(--line)}
:focus-visible{outline:3px solid var(--lime-deep); outline-offset:2px}

/* --- licence strip -------------------------------------------------
   The Code requires the registered name near the beginning of any
   advertisement, plus a link to the public register. This strip is
   how the site satisfies that, so do not remove it.
   ------------------------------------------------------------------ */
.licence-strip{background:var(--plum-deep); color:#EDEAF5; font-size:.86rem; padding:9px 0}
.licence-strip .wrap{display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; justify-content:center; text-align:center}
.licence-strip a{color:var(--lime)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--lime); display:inline-block; margin-right:8px}

/* --- header --- */
header{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:18px; padding:10px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--plum)}
.brand img{width:52px; height:52px; object-fit:contain}
.brand b{font-family:var(--serif); font-size:1.15rem; font-weight:600; display:block; line-height:1.1}
.brand span{font-size:.7rem; color:var(--ink-soft)}
nav{margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-size:.94rem}
nav a{color:var(--plum); text-decoration:none}
nav a:hover, nav a:focus-visible{text-decoration:underline}
nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--lime)}

/* --- buttons --- */
.btn{
  display:inline-block; background:var(--plum); color:#fff; text-decoration:none;
  padding:12px 22px; border-radius:4px; font-weight:600; font-size:.95rem;
  border:1px solid var(--plum);
}
.btn:hover{background:var(--plum-deep)}
.btn.lime{background:var(--lime); border-color:var(--lime); color:#302B49}
.btn.lime:hover{background:#9AC136}
.btn.ghost{background:transparent; color:var(--plum); border-color:var(--line)}
.btn.ghost:hover{background:var(--mist)}

/* --- hero --- */
.hero{display:grid; grid-template-columns:1.25fr .9fr; gap:48px; align-items:start; padding:60px 0 54px}
.lede{font-size:1.1rem; color:var(--ink-soft)}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.fineprint{font-size:.9rem; color:var(--ink-soft); margin-top:18px}

/* --- licence card --- */
.card{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--mist)}
.card .top{background:var(--lime); color:#302B49; padding:10px 18px; font-size:.82rem; font-weight:600}
.card .body{padding:18px}
.card dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:.92rem}
.card dt{color:var(--ink-soft)}
.card dd{margin:0; font-weight:600}
.card .foot{padding:0 18px 18px; font-size:.84rem; color:var(--ink-soft)}
.card .foot p{max-width:none}

/* --- service list --- */
.services{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 24px}
.svc{padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--paper);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; position:relative}
.svc:hover{transform:translateY(-3px); box-shadow:0 10px 24px -12px rgba(48,43,73,.28); border-color:var(--lime)}
.svc h3{margin-bottom:3px}
.svc p{margin:0; color:var(--ink-soft); font-size:.95rem; max-width:none}
.svc a{text-decoration:none; color:var(--plum); display:block}
.svc a:hover h3{text-decoration:underline}
.svc .more{display:inline-block; margin-top:10px; font-size:.86rem; font-weight:600; color:var(--lime-deep);
  opacity:0; transform:translateX(-6px); transition:opacity .18s ease, transform .18s ease}
.svc:hover .more{opacity:1; transform:translateX(0)}
.svc.flag{border-left:3px solid var(--lime)}
.svc.hot{border-color:var(--lime)}
.badge{display:inline-block; background:var(--lime); color:#302B49; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; padding:3px 9px; border-radius:99px; margin-bottom:8px}

/* --- related services (smaller variant, reused on detail pages) --- */
.services.related{grid-template-columns:repeat(3,1fr)}
.services.related .svc{padding:16px}
.services.related h3{font-size:1rem}

/* --- back link --- */
.backlink{display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:600;
  color:var(--lime-deep); text-decoration:none; margin-bottom:18px}
.backlink:hover{text-decoration:underline}

/* --- service detail page --- */
.detail-hero{padding:44px 0 8px}
.detail-hero .badge{margin-bottom:14px}
.meta-list{margin:1.2rem 0; padding-left:20px}
.meta-list li{margin:.4rem 0; max-width:var(--measure)}

/* --- CTA block, closes every service page --- */
.cta-block{background:var(--plum-deep); color:#EDEAF5; border-radius:10px; padding:40px 32px; text-align:center}
.cta-block h2{color:#fff}
.cta-block p{color:#C7C2DA; max-width:56ch; margin-left:auto; margin-right:auto}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:22px}
.cta-actions .btn{display:inline-flex; align-items:center; gap:8px}
.btn.whatsapp{background:#25D366; border-color:#25D366; color:#0B3D19}
.btn.whatsapp:hover{background:#1EBE5A}
.btn svg{width:18px; height:18px; flex:none}

/* --- consultation form --- */
.form-card{border:1px solid var(--line); border-radius:10px; padding:30px; background:var(--mist)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px}
.form-grid .full{grid-column:1 / -1}
.form-grid label{display:block; font-size:.86rem; font-weight:600; margin-bottom:6px}
.req{color:var(--flag); margin-left:2px}
.form-title{font-family:var(--serif); font-size:1.3rem; font-weight:600; margin:0 0 4px}
.form-sub{color:var(--ink-soft); font-size:.9rem; margin:0 0 22px}
.form-section-label{
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--lime-deep); margin:26px 0 12px; padding-top:20px; border-top:1px solid var(--line);
}
.form-section-label:first-of-type{margin-top:0; padding-top:0; border-top:none}
.phone-group{display:flex; gap:8px}
.phone-group select{flex:0 0 128px}
.phone-group input{flex:1; min-width:0}

.or-divider{display:flex; align-items:center; gap:14px; margin:28px 0 22px; color:var(--ink-soft); font-size:.85rem}
.or-divider::before, .or-divider::after{content:""; flex:1; height:1px; background:var(--line)}
/* isolate: PayPal's embedded card-entry form (rendered inside
   #paypal-button-container) can set its own internal z-index without any
   awareness of this page's sticky header. isolation:isolate boxes it into
   its own stacking context, so nothing inside it can ever render above
   elements outside this block, regardless of what z-index PayPal uses. */
.paypal-block{max-width:420px; position:relative; isolation:isolate}
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:5px;
  background:var(--paper); color:var(--plum);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{
  outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 3px rgba(169,207,70,.28);
}
.form-note{font-size:.84rem; color:var(--ink-soft); margin-top:16px}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.confirm-banner{background:var(--mist); border:1px solid var(--lime); border-radius:8px; padding:16px 18px; margin-bottom:24px; font-weight:600}

/* --- numbered steps (a real sequence, so numbers are informative) --- */
ol.steps{list-style:none; margin:0; padding:0; counter-reset:s}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:46px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--line)}
ol.steps li::before{content:counter(s); font-family:var(--serif); font-size:1.6rem; color:var(--lime-deep); line-height:1.15}
ol.steps p{margin:.2rem 0 0; color:var(--ink-soft); font-size:.96rem}

/* --- people --- */
.people{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.person{
  display:flex; flex-direction:column; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px; padding:28px 26px 26px; background:var(--paper);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.person:hover{box-shadow:0 18px 36px -22px rgba(48,43,73,.32); transform:translateY(-3px); border-color:var(--lime)}
.avatar{width:128px; height:128px; border-radius:10px; object-fit:cover; object-position:top center; background:var(--mist); margin-bottom:20px}
.person h3{font-size:1.22rem}
.role{color:var(--lime-deep); font-weight:600; font-size:.87rem; margin:5px 0 14px; max-width:none}
.person p{font-size:.95rem; margin:0 0 8px; color:var(--ink-soft); max-width:none}
.person > p:last-of-type{margin-bottom:0}

/* --- plain-speaking block --- */
.plain{background:var(--mist); border-left:4px solid var(--lime); padding:24px 26px; border-radius:0 4px 4px 0}
.plain ul{margin:.6rem 0 0; padding-left:20px; max-width:var(--measure)}
.plain li{margin:.35rem 0}

.two{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}

/* --- footer --- */
footer{background:var(--plum-deep); color:#CFCADF; padding:56px 0 30px}
footer a{color:#CFCADF; text-decoration:none}
footer a:hover{color:var(--lime)}
footer h3{color:#fff; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; margin-bottom:16px}
footer p, footer li{font-size:.92rem; margin:0 0 .55rem; max-width:none; line-height:1.5}
footer ul{list-style:none; padding:0; margin:0}
.fgrid{display:grid; grid-template-columns:1.3fr .9fr .9fr 1fr; gap:32px 28px; align-items:start}
.f-brand img{width:44px; height:44px; object-fit:contain; margin-bottom:12px}
.f-brand h3{text-transform:none; letter-spacing:0; font-size:1.05rem; font-family:var(--serif)}
.f-brand p{color:#A9A3BE; max-width:30ch}
.social-row{display:flex; gap:10px; margin-top:6px}
.social-row a{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-weight:700; font-size:.78rem;
  transition:background .15s ease, transform .15s ease; text-decoration:none;
}
.social-row a:hover{background:var(--lime); color:#302B49; transform:translateY(-2px)}
.social-row svg{width:16px; height:16px}
.wa-icon-inline{width:13px; height:13px; vertical-align:-2px; margin-right:5px; color:#25D366; flex:none}
.legal{border-top:1px solid #352F4D; margin-top:40px; padding-top:20px; font-size:.82rem; color:#8A83A4; text-align:center; line-height:1.7}
.legal a{color:#A9A3BE}
@media (max-width:860px){ .fgrid{grid-template-columns:1fr 1fr; gap:30px} }
@media (max-width:560px){ .fgrid{grid-template-columns:1fr} }

@media (max-width:860px){
  .hero{grid-template-columns:1fr; gap:34px; padding-top:38px}
  .services,.people,.two,.services.related,.form-grid{grid-template-columns:1fr}
  nav{width:100%; margin-left:0; gap:14px}
  section{padding:44px 0}
  .cta-block{padding:30px 20px}
}
/* --- floating WhatsApp button, every page ---
   Right corner. Netlify's own "HUD" badge (an iframe it appends straight to
   <body>, outside our markup) used to collide with this in the same corner;
   it's now hidden outright via #nl-hud-frame/#nl-badge-frame above, so the
   button is free to sit in its natural, expected spot again. */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:9px;
  background:#25D366; color:#0B3D19; text-decoration:none;
  padding:13px 16px; border-radius:99px; font-weight:700; font-size:.92rem;
  box-shadow:0 10px 24px -8px rgba(11,61,25,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(11,61,25,.55)}
.wa-float svg{width:22px; height:22px; flex:none}
.wa-float .wa-label{white-space:nowrap}
@media (max-width:640px){
  .wa-float .wa-label{display:none}
  .wa-float{padding:13px; right:14px; bottom:14px}
}

/* --- how it works, redesigned as hoverable graphic cards --- */
.how-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:h}
.how-card{
  counter-increment:h; position:relative; padding:26px 20px 22px; border:1px solid var(--line);
  border-radius:10px; background:var(--paper); text-align:left;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.how-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px -14px rgba(48,43,73,.3); border-color:var(--lime)}
.how-card .how-num{
  position:absolute; top:-12px; left:20px; width:26px; height:26px; border-radius:50%;
  background:var(--lime); color:#302B49; font-family:var(--serif); font-weight:700;
  font-size:.9rem; display:flex; align-items:center; justify-content:center;
}
.how-card .how-icon{width:40px; height:40px; color:var(--lime-deep); margin-bottom:14px}
.how-card h3{margin-bottom:6px}
.how-card p{margin:0; font-size:.92rem; color:var(--ink-soft)}
@media (max-width:860px){ .how-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .how-grid{grid-template-columns:1fr} }

/* --- FAQ accordion --- */
.faq-list{max-width:760px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 30px 18px 0; font-weight:600; font-family:var(--serif);
  font-size:1.05rem; position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; position:absolute; right:0; top:16px; font-size:1.4rem; color:var(--lime-deep);
  transition:transform .18s ease; font-family:var(--sans);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--ink-soft); margin:0 0 18px; max-width:var(--measure)}

/* --- pricing / rate cards (consultation booking) --- */
.rate-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0}
.rate-card{
  display:block; border:2px solid var(--line); border-radius:10px; padding:22px 22px 20px;
  cursor:pointer; background:var(--paper); transition:border-color .15s ease, box-shadow .15s ease;
}
.rate-card:has(input:checked){border-color:var(--lime-deep); box-shadow:0 0 0 3px rgba(169,207,70,.22)}
.rate-card input{margin-right:10px}
.rate-card .price{font-family:var(--serif); font-size:1.7rem; font-weight:600; margin:8px 0 4px}
.rate-card .dur{color:var(--ink-soft); font-size:.88rem}
.rate-card .desc{color:var(--ink-soft); font-size:.92rem; margin-top:8px}
@media (max-width:640px){ .rate-cards{grid-template-columns:1fr} }

/* --- pay options row (mobile money etc, manual for now) --- */
.pay-options{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px}
.pay-options .opt{border:1px solid var(--line); border-radius:8px; padding:16px; text-align:center; font-size:.88rem; color:var(--ink-soft)}
.pay-options .opt b{display:block; color:var(--plum); font-size:.98rem; margin-bottom:4px}
@media (max-width:640px){ .pay-options{grid-template-columns:1fr} }

/* --- media placeholder (photo/video not supplied yet) --- */
.media-slot{
  border:1px dashed var(--line); border-radius:8px; background:var(--mist);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--ink-soft); font-size:.85rem; text-align:center; padding:40px 20px; min-height:200px;
}
.media-slot svg{width:34px; height:34px; opacity:.7}
.media-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
@media (max-width:860px){ .media-grid{grid-template-columns:1fr} }

/* --- person WhatsApp mini button --- */
.wa-mini{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.85rem; font-weight:600;
  color:#0B3D19; background:#25D366; padding:6px 12px; border-radius:99px; text-decoration:none;
}
.wa-mini svg{width:14px; height:14px}
.wa-mini:hover{background:#1EBE5A}

/* --- lead capture popup (timed / exit-intent) --- */
.lead-popup{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px}
.lead-popup[hidden]{display:none}
.lead-popup-backdrop{position:absolute; inset:0; background:rgba(33,29,51,.55)}
.lead-popup-card{
  position:relative; background:var(--paper); border-radius:12px; max-width:420px; width:100%;
  padding:30px 26px 24px; box-shadow:0 30px 60px -20px rgba(0,0,0,.4); border-top:4px solid var(--lime);
  max-height:90vh; overflow-y:auto;
}
.lead-popup-close{
  position:absolute; top:12px; right:14px; background:none; border:none; font-size:1.5rem; line-height:1;
  color:var(--ink-soft); cursor:pointer; padding:4px;
}
.lead-popup-close:hover{color:var(--plum)}
.lead-popup-tag{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--lime-deep); margin:0 0 10px}
.lead-popup-card h3{font-size:1.3rem; margin:0 0 10px; font-family:var(--serif)}
.lead-popup-sub{color:var(--ink-soft); font-size:.9rem; margin:0 0 20px; max-width:none}
#leadForm input, #leadForm select{
  width:100%; font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:5px;
  background:var(--paper); color:var(--plum); margin-bottom:12px;
}
#leadForm input:focus, #leadForm select:focus{
  outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 3px rgba(169,207,70,.28);
}
#leadForm .phone-group{margin-bottom:12px}
#leadForm .phone-group input, #leadForm .phone-group select{margin-bottom:0}
.lead-popup-submit{width:100%; text-align:center; border:none; cursor:pointer; margin-top:4px; justify-content:center}
.lead-popup-trust{font-size:.78rem; color:var(--ink-soft); text-align:center; margin:14px 0 0; max-width:none}
.lead-popup-skip{display:block; text-align:center; font-size:.85rem; color:var(--ink-soft); margin-top:14px; text-decoration:underline; background:none; border:none; cursor:pointer; width:100%}
.lead-popup-skip:hover{color:var(--plum)}
#leadPopupThanks .cta-actions{justify-content:flex-start; margin-top:18px}
@media (max-width:480px){ .lead-popup-card{padding:26px 20px 20px} }

@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}
