/* ==========================================================================
   GOV.CSS — Public-service / official portal skin
   Layered on top of styles.css. Linked ONLY on index.html for review.
   Goal: calm, high-contrast, plain, accessible — easy for any non-IT user.
   It restyles the existing markup; it does not change page content.
   ========================================================================== */

:root{
  --gov-navy:      #0A3D91;   /* primary official blue */
  --gov-navy-dk:   #072e6e;
  --gov-ink:       #1B1B1B;   /* body text */
  --gov-ink-soft:  #4C5566;
  --gov-line:      #D4D9E0;   /* hairline borders */
  --gov-bg:        #FFFFFF;   /* page background */
  --gov-tint:      #F3F6FA;   /* calm section band */
  --gov-tint-2:    #EAF0F7;
  --gov-green:     #0E7A4B;
  --gov-saffron:   #E86A17;
  --gov-focus:     #FFBF47;   /* GOV.UK-style focus highlight */
  --gov-r:         8px;       /* modest, institutional radius */
  --gov-shadow:    0 1px 2px rgba(16,24,40,.06);
  --gov-shadow-h:  0 6px 18px rgba(16,24,40,.10);
}

/* ---------- foundations ---------- */
body{ background:var(--gov-bg); color:var(--gov-ink); }
.wrap{ max-width:min(1200px, 94vw); }          /* narrower = calmer, more readable */

/* Flatten the whole tone: no glossy gradients or heavy shadows */
h1,h2,h3,.display{ letter-spacing:-.005em; color:var(--gov-ink); }
.grad{ background:none !important; -webkit-text-fill-color:currentColor !important;
       color:var(--gov-navy) !important; }

/* Headings that sit on dark/navy bands must stay light (overrides the rule above) */
.dark-sec h1, .dark-sec h2, .dark-sec h3, .dark-sec .sec-h2, .dark-sec .grad,
.cta-card h2, .prefoot-card h2, .cta-break h2{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}

/* Body links in running text get the standard underlined, accessible treatment */
.sec-sub a, .cap-lede a, p a{ color:var(--gov-navy); text-decoration:underline; }

/* Accessible, always-visible focus — a hard requirement for public services */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--gov-focus); outline-offset:2px; border-radius:3px;
}

/* ---------- official top strip + utility bar ---------- */
.top-note{
  background:var(--gov-navy); color:#fff; font-weight:500; letter-spacing:.01em;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,var(--gov-saffron) 0 33.3%,#fff 33.3% 66.6%,var(--gov-green) 66.6% 100%) 1;
}
.top-note b{ color:#fff; }

/* ---------- header ---------- */
.site-head{
  background:#fff; box-shadow:none; border-bottom:1px solid var(--gov-line);
  backdrop-filter:none;
}
.site-head .brand .mark{
  background:var(--gov-navy); color:#fff; border-radius:6px;
}
.site-head .brand b{ color:var(--gov-ink); }
.site-nav a{ color:var(--gov-ink); font-weight:500; }
.site-nav a:hover{ color:var(--gov-navy); text-decoration:underline; text-underline-offset:5px; }
.head-cta .signin{ color:var(--gov-navy); font-weight:600; }

/* ---------- buttons: flat, solid, rectangular-ish ---------- */
.btn{
  background:var(--gov-navy) !important; color:#fff !important;
  border:1px solid var(--gov-navy) !important; border-radius:6px !important;
  box-shadow:none !important; background-image:none !important;
  font-weight:600; letter-spacing:.005em;
}
.btn:hover{ background:var(--gov-navy-dk) !important; border-color:var(--gov-navy-dk) !important; }
.btn.ghost{
  background:#fff !important; color:var(--gov-navy) !important;
  border:2px solid var(--gov-navy) !important;
}
.btn.ghost:hover{ background:var(--gov-tint) !important; }
.btn.ghost.on-dark{ background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.7) !important; }
.btn.white{ background:#fff !important; color:var(--gov-navy) !important; border-color:#fff !important; }
.btn.white:hover{ background:var(--gov-tint) !important; }

/* ---------- calm sections: tame the dark marketing bands ---------- */
.dark-sec, .journey-sec.dark-sec{
  background:var(--gov-navy) !important;      /* single calm official colour, no gradient */
}
.section.dark-sec.alt{ background:var(--gov-navy-dk) !important; }

/* Alternate white / light-tint sections for a clean document rhythm */
.section{ background:#fff; }
.section:nth-of-type(even):not(.dark-sec){ background:var(--gov-tint); }

/* ---------- cards: white, hairline border, subtle lift on hover ---------- */
.hbox, .hosp-card, .pack, .doc-card, .review-card, .story-card,
.cmp-card, .trust-card, .cta-card, .prefoot-card{
  background:#fff !important; border:1px solid var(--gov-line) !important;
  border-radius:var(--gov-r) !important; box-shadow:var(--gov-shadow) !important;
}
.hbox:hover, .hosp-card:hover, .pack:hover, .doc-card:hover,
.story-card:hover{
  border-color:var(--gov-navy) !important; box-shadow:var(--gov-shadow-h) !important;
  transform:none !important;
}
.hbox.feat, .pack.feat{ border:2px solid var(--gov-navy) !important; }

/* Trust + CTA cards that sit on dark bands stay readable */
.trust-card{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.18) !important; }
.cta-card, .prefoot-card{ background:var(--gov-navy) !important; border:0 !important; }

/* ---------- inputs ---------- */
input, select, textarea{
  border:1px solid var(--gov-line) !important; border-radius:6px !important;
  background:#fff !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--gov-navy) !important;
}

/* ---------- accents & badges: quieter ---------- */
.kicker{ color:var(--gov-navy) !important; font-weight:700; letter-spacing:.06em; }
.pill.green, .pill.saffron, .save, .accr, .most, .verified{
  border-radius:4px !important; box-shadow:none !important; font-weight:600;
}
.tag{ border-radius:4px !important; }

/* ---------- REMOVE marketing pressure & clutter (calm, official) ---------- */
.marquee,                 /* scrolling logo ticker */
.side-rail,               /* floating action rail */
.ai-fab, .ai-panel,       /* floating AI chat */
#exit-modal,              /* exit-intent pop-up */
.hero2-banner .seal,      /* "NEW — save 40-70%" sticker */
.hero2-banner .next-btn,  /* floating arrow */
.cut-wrap{                /* glossy cut-out person over hero */
  display:none !important;
}

/* ---------- hero: clean, single banner ---------- */
.hero2{ background:#fff; padding-top:26px; }
.eyebrow2.in-badge{
  background:var(--gov-tint-2) !important; color:var(--gov-navy) !important;
  border:1px solid var(--gov-line) !important; border-radius:6px !important;
  box-shadow:none !important; font-weight:600;
}
.hero2-banner .frame{ border-radius:var(--gov-r); box-shadow:var(--gov-shadow); }
.hero2-banner .cap{
  background:#fff !important; border:1px solid var(--gov-line) !important;
  border-top:5px solid var(--gov-navy) !important;
  border-radius:var(--gov-r) !important; box-shadow:var(--gov-shadow-h) !important;
  color:var(--gov-ink) !important;
}
.hero2-banner .cap .big, .hero2-banner .cap .small{ color:var(--gov-ink) !important; }
.hero2-banner .cap .cap-lede{ color:var(--gov-ink-soft) !important; }
.hero2-banner .cap .cap-lede b{ color:var(--gov-ink) !important; }   /* was white → invisible on the white card */
.hero2-banner .cap .cap-note{ color:var(--gov-ink-soft) !important; }
.hero2-banner .cap .cap-note svg{ color:var(--gov-green) !important; }

/* ==========================================================================
   PATIENT-DRIVEN: one clear path to starting a case
   ========================================================================== */

/* Remove the competing "Ask Murshid" search from the hero — one action only */
.hero2-banner .ai-search{ display:none !important; }

/* Make the ONE primary action unmistakable; quiet the secondary routes */
.btn.lg{ font-size:1.06rem; padding:16px 26px !important; font-weight:700; }
.cap-cta .btn.lg, .steps-go .btn.lg{ width:auto; }
/* De-emphasise secondary paths so they don't compete with "Start" */
.head-cta .signin{ font-weight:500; opacity:.9; }
a.btn.ghost.on-dark[href*="wa.me"]{ opacity:.85; }

/* ---------- guided 3-step flow ---------- */
.gov-steps{ background:var(--gov-tint) !important; }
.gov-steps .steps-flow{
  list-style:none; display:grid; gap:20px; margin:34px 0 8px;
  grid-template-columns:repeat(3,1fr); counter-reset:none;
}
@media (max-width:820px){ .gov-steps .steps-flow{ grid-template-columns:1fr; } }
.step-card{
  position:relative; background:#fff; border:1px solid var(--gov-line);
  border-top:5px solid var(--gov-navy); border-radius:var(--gov-r);
  padding:26px 22px 22px; box-shadow:var(--gov-shadow);
}
.step-card .step-n{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--gov-navy); color:#fff; font-weight:700; font-size:1.2rem;
  margin-bottom:14px;
}
.step-card h3{ font-size:1.12rem; margin-bottom:8px; color:var(--gov-ink); }
.step-card p{ color:var(--gov-ink-soft); font-size:.98rem; line-height:1.55; }
/* connector arrows between steps on wide screens */
@media (min-width:821px){
  .step-card:not(:last-child)::after{
    content:"→"; position:absolute; top:50%; right:-16px; transform:translateY(-50%);
    color:var(--gov-navy); font-size:1.4rem; font-weight:700; z-index:1;
  }
}
.steps-go{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:28px; text-align:center;
}
.steps-go .steps-note{ color:var(--gov-ink-soft); font-size:.9rem; }

/* ==========================================================================
   INNER PAGES: calm hero + clean workflow timeline
   ========================================================================== */

/* Inner page hero → calm official navy banner with tricolour underline */
.page-hero{
  background:var(--gov-navy) !important; color:#fff !important;
  border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,var(--gov-saffron) 0 33.3%,#fff 33.3% 66.6%,var(--gov-green) 66.6% 100%) 1;
}
.page-hero .crumb{
  background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-radius:6px !important;
}
.page-hero .crumb a{ color:#fff !important; text-decoration:underline; }

/* Simple, neat vertical workflow — light cards, plain navy numbers, thin connector */
.wf-section{ background:var(--gov-tint) !important; }
.wf-wrap{ max-width:760px; }
.wf-step .n{
  background:var(--gov-navy) !important; color:#fff !important;
  border-radius:50% !important; box-shadow:none !important;
}
.wf-step.alt .n{ background:var(--gov-navy) !important; box-shadow:none !important; }
.wf-step::before{ background:var(--gov-line) !important; opacity:1 !important; left:23px; }
.wf-step .body{
  background:#fff; border:1px solid var(--gov-line); border-radius:var(--gov-r);
  padding:16px 20px; box-shadow:var(--gov-shadow);
}
.wf-step h3{ color:var(--gov-ink) !important; font-size:1.06rem; }
.wf-step p{ color:var(--gov-ink-soft) !important; }
.wf-step .actors .tag{
  background:var(--gov-tint-2) !important; color:var(--gov-navy) !important;
  border-radius:4px !important; font-weight:600;
}

/* ---------- footer: keep structure, flatten ---------- */
.foot-aff img.iaccia-full{ box-shadow:none; border:1px solid var(--gov-line); }
.foot-tricolor{ height:6px; }

/* ---------- motion: respect reduced-motion, keep transitions gentle ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   PREMIUM POLISH  (client feedback: "more visually impressive, private-
   institute feel" — keeps the clean base, adds depth, warmth & confidence.)
   ========================================================================== */
:root{
  --lux-gold:   #C8962E;                 /* refined accent, not flat orange */
  --lux-navy-1: #0C4AA6;
  --lux-navy-2: #072e6e;
  --lux-shadow: 0 18px 46px -18px rgba(9,30,66,.35);
  --lux-ring:   0 0 0 1px rgba(9,30,66,.06);
}

/* Warmer, less clinical page canvas */
body{ background:#FBFBFD !important; }
.section:nth-of-type(even):not(.dark-sec){ background:#F4F7FB !important; }

/* Section headings get a short tricolour accent rule — a premium signature */
.sec-head .sec-h2{ position:relative; }
.sec-head:not(.center) .sec-h2::after{
  content:""; display:block; width:54px; height:4px; margin-top:14px; border-radius:3px;
  background:linear-gradient(90deg,var(--gov-saffron),var(--gov-green));
}
.sec-head.center .sec-h2::after{
  content:""; display:block; width:54px; height:4px; margin:14px auto 0; border-radius:3px;
  background:linear-gradient(90deg,var(--gov-saffron),var(--gov-green));
}

/* Primary action: keep navy, add depth + a gold hairline = high-end, not flat */
.btn{
  background:linear-gradient(180deg,var(--lux-navy-1),var(--gov-navy)) !important;
  box-shadow:0 8px 18px -8px rgba(9,30,66,.55) !important;
}
.btn:hover{ box-shadow:0 12px 24px -8px rgba(9,30,66,.6) !important; transform:translateY(-1px); }
.btn.lg{ box-shadow:0 12px 26px -10px rgba(9,30,66,.6) !important; }

/* ---------- HERO: imagery-led, more impressive ---------- */
.hero2{
  background:
    radial-gradient(1100px 460px at 82% -10%, rgba(200,150,46,.10), transparent 60%),
    radial-gradient(900px 480px at -8% 120%, rgba(14,122,75,.08), transparent 60%),
    #FBFBFD !important;
  padding-top:30px;
}
.hero2 h1{ font-size:clamp(34px,5.2vw,60px); letter-spacing:-.02em; }
.hero2-banner .frame{ border-radius:16px; box-shadow:var(--lux-shadow); }
.hero2-banner .frame img{ border-radius:16px; }
.hero2-banner .cap{
  border-radius:16px !important; border:1px solid rgba(9,30,66,.08) !important;
  border-top:5px solid var(--gov-navy) !important;
  box-shadow:var(--lux-shadow), var(--lux-ring) !important;
}
.eyebrow2.in-badge{
  background:#fff !important; border:1px solid rgba(9,30,66,.12) !important;
  box-shadow:0 2px 8px rgba(9,30,66,.06) !important; border-radius:999px !important;
  font-weight:600;
}

/* ---------- CONFIDENCE STATS BAND (feedback: show stats prominently) ---------- */
.hero2-boxes{ gap:16px; margin-top:22px; }
.hero2-boxes .hbox{
  border-radius:14px !important; padding:18px 20px !important;
  border:1px solid rgba(9,30,66,.10) !important;
  box-shadow:0 10px 26px -16px rgba(9,30,66,.4) !important;
  background:linear-gradient(180deg,#fff, #FAFCFF) !important;
}
.hero2-boxes .hbox b{ font-size:1.35rem; color:var(--gov-navy); letter-spacing:-.01em; }
.hero2-boxes .hbox .ic{
  background:linear-gradient(150deg,var(--lux-navy-1),var(--gov-navy)) !important; color:#fff !important;
  border-radius:12px !important; box-shadow:0 8px 18px -8px rgba(9,30,66,.5) !important;
}
.hero2-boxes .hbox.feat{
  border:1px solid transparent !important;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--gov-saffron),var(--gov-green)) border-box !important;
  border:2px solid transparent !important;
}
.hero2-boxes .hbox .arr{ color:var(--lux-gold); }

/* ---------- Cards: softer, deeper, more premium ---------- */
.hbox, .hosp-card, .pack, .doc-card, .review-card, .story-card,
.cmp-card, .step-card{
  border-radius:14px !important;
}
.hosp-card:hover, .pack:hover, .doc-card:hover, .story-card:hover{
  box-shadow:var(--lux-shadow) !important; transform:translateY(-3px) !important;
}
.step-card{ box-shadow:0 12px 30px -18px rgba(9,30,66,.4) !important; }
.step-card .step-n{
  background:linear-gradient(150deg,var(--lux-navy-1),var(--gov-navy)) !important;
  box-shadow:0 8px 18px -8px rgba(9,30,66,.5) !important;
}

/* Kicker gets the gold accent for a luxe feel */
.kicker{ color:var(--gov-navy) !important; }
.kicker::before{
  content:""; display:inline-block; width:16px; height:2px; margin-right:8px;
  vertical-align:middle; background:var(--lux-gold);
}

/* Dark sections: give depth instead of a flat fill */
.dark-sec{
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(200,150,46,.14), transparent 60%),
    linear-gradient(180deg,#0C4AA6,#072e6e) !important;
}

/* Footer trust badges: refined */
.fbadges span{ border-radius:6px !important; }

/* ==========================================================================
   HERO SPLIT LAYOUT — content card beside the image (not floating over it)
   ========================================================================== */
.hero2-banner{
  display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch;
}
@media (min-width:860px){
  .hero2-banner{ grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); gap:22px; }
}

/* the card becomes a real column, not an absolute overlay */
.hero2-banner .cap{
  position:static !important; inset:auto !important; max-width:none !important;
  order:-1;                                   /* card on the left / on top */
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(24px,3vw,40px) !important;
  border-radius:16px !important; border:1px solid rgba(9,30,66,.08) !important;
  border-top:5px solid var(--gov-navy) !important;
  box-shadow:var(--lux-shadow), var(--lux-ring) !important;
  background:#fff !important;
}
.hero2-banner .cap .cap-lede{ display:block !important; }   /* keep the subtext visible in the card */
.hero2-banner .cap .big{ font-size:clamp(24px,3.2vw,34px); }

/* the image fills its own column and matches the card height */
.hero2-banner .frame{
  aspect-ratio:16/11 !important; height:100%; min-height:0;
  box-shadow:var(--lux-shadow); border-radius:16px;
}
@media (min-width:860px){
  .hero2-banner .frame{ aspect-ratio:auto !important; min-height:100%; }
}
.hero2-banner .frame > img.bg{ object-position:50% 40%; filter:saturate(.9); }
.hero2-banner .frame::after{ display:none !important; }     /* drop the dark overlay — text is on the card now */