/* ─── Global resets ─────────────���─────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
button,[type=button],[type=reset],[type=submit] { appearance: button; }
input[type=date],input[type=datetime-local],input[type=month],input[type=time] { appearance: listbox; }
[type=search] { appearance: none; }

/* ─── Tablet (≤ 991px) ──────────────────��─────────────────── */
@media (max-width: 991.98px) {
  /* Nav */
  #site-header .navbar-collapse { padding-top: .75rem; }
  #site-header .navbar-nav { padding-bottom: .5rem; }

  /* Sections */
  .ab-section, .ab-section-alt { padding: 60px 0; }
  .faq-section { padding: 50px 0 60px; }
  .stats-showcase { padding: 50px 0; }
  .cta-band { padding: 55px 0; }

  /* About – story col order fix */
  .ab-section .row > .col-lg-6:first-child { margin-bottom: 3rem; }

  /* Map / contact form grid */
  .contact-map-grid { grid-template-columns: 1fr !important; }

  /* Footer columns */
  .sb-footer .row > [class*="col-lg"] { margin-bottom: 1.75rem; }
}

/* ─── Mobile (≤ 767px) ──────────────────────��─────────────── */
@media (max-width: 767.98px) {
  /* Global */
  .container { padding-left: 16px; padding-right: 16px; }
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.5rem; }
  h3, .h3 { font-size: 1.25rem; }
  .btn { white-space: normal; }
  .dropdown-menu { max-height: 65vh; overflow-y: auto; }

  /* Hero sections */
  .ab-hero, .faq-hero { padding: 80px 0 50px !important; }
  .ab-hero h1, .faq-hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .ab-hero-btns, .cta-btns { flex-direction: column !important; align-items: stretch !important; }
  .ab-hero-btns a, .cta-btns a { justify-content: center !important; }

  /* Values / team grids */
  .values-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .story-grid { grid-template-columns: 1fr !important; }

  /* FAQ grid */
  .faq-cards { grid-template-columns: 1fr !important; }
  .faq-categories { gap: .4rem !important; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.25rem !important; }
  .stat-num { font-size: 2.2rem !important; }

  /* Contact page */
  .contact-info-grid { grid-template-columns: 1fr 1fr !important; }
  .contact-map-grid { grid-template-columns: 1fr !important; }

  /* Feature floated badges */
  .feat-badge-float { bottom: 10px; right: 10px; }

  /* About floated badge */
  .ab-section .position-relative > div[style*="position:absolute"] { bottom: -10px !important; right: -10px !important; padding: .8rem 1rem !important; }

  /* Loan band */
  .loan-band-inner { flex-direction: column; text-align: center; }
  .lb-right { justify-content: center !important; flex-wrap: wrap; }
  .lb-right a { flex: 1; min-width: 160px; justify-content: center; }

  /* Footer */
  .sf-bottom { flex-direction: column; text-align: center; }
  .sf-bottom-links { justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; }
  .sf-payments { justify-content: flex-start; flex-wrap: wrap; }

  /* Accordion */
  .acc-header h4 { font-size: .88rem !important; }
}

/* ─── Small mobile (≤ 480px) ──────────────────��──────────── */
@media (max-width: 480px) {
  /* Typography scale */
  .sec-h2 { font-size: 1.5rem !important; }
  .sec-lead { font-size: .88rem !important; }

  /* Grids → single column */
  .values-grid, .team-grid, .faq-cards { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .contact-info-grid { grid-template-columns: 1fr !important; }

  /* Hero card number */
  .hc-number { font-size: .9rem !important; letter-spacing: .08em !important; }

  /* Steps */
  .steps-row { grid-template-columns: 1fr !important; }
  .steps-row::before { display: none !important; }

  /* FAQs */
  .faq-section-title { font-size: 1.25rem !important; }

  /* Section padding */
  .ab-section, .ab-section-alt,
  .hp-section, .hp-section-alt,
  .faq-section { padding: 40px 0 !important; }
  .cta-band, .stats-showcase { padding: 40px 0 !important; }
  .faq-hero, .ab-hero { min-height: auto !important; }

  /* Back to top */
  #backToTop { bottom: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; font-size: .8rem; }

  /* Form rows */
  .form-row, .row2, .row3 { grid-template-columns: 1fr !important; }

  /* Footer */
  .sf-bottom-links { flex-direction: column; gap: .3rem; }
  .sb-footer .col-lg-2, .sb-footer .col-sm-6 { width: 50%; float: left; padding: 0 .5rem; margin-bottom: 1.25rem; }
}

/* ─── Very small (≤ 360px) ──────────────────��─────────────── */
@media (max-width: 360px) {
  .sb-footer .col-lg-2, .sb-footer .col-sm-6 { width: 100%; float: none; }
  .ss-item { width: 50%; }
  .counter-card { padding: 1.2rem; }
}

/* ─── Bank Cards page ────────────────────────────────────── */
@media (max-width: 767.98px) {
  .bc-hero { padding: 90px 0 70px !important; }
  .bc-hero h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .bc-hero-sub { font-size: .88rem !important; }
  .bc-card-stack { display: none; } /* hide 3D stack on mobile to save space */
  .bc-section, .bc-section-alt { padding: 55px 0 !important; }
  .bc-products-grid { grid-template-columns: 1fr !important; }
  .bc-feat-grid { grid-template-columns: 1fr 1fr !important; }
  .bc-sec-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .bc-feat-grid, .bc-sec-grid { grid-template-columns: 1fr !important; }
  .bc-cmp-wrap { padding: 0 !important; }
  .bc-net-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── Credit Cards page ──────────────────────────────────── */
@media (max-width: 767.98px) {
  .carousel-section { padding: 70px 0 50px !important; }
  .cards-grid { grid-template-columns: 1fr !important; }
  .ct-info-panel { padding: 1.25rem !important; }
}

/* ─── Contact page ───────────────────────────────────────── */
@media (max-width: 767.98px) {
  .ct-hero { padding: 90px 0 70px !important; }
  .ct-hero h1 { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
  .ct-channels-grid { grid-template-columns: 1fr !important; }
  .ct-layout { grid-template-columns: 1fr !important; }
  .ct-hero-pills { gap: .5rem !important; }
  .ct-hero-pill { font-size: .7rem !important; padding: .3rem .8rem !important; }
}
@media (max-width: 480px) {
  .ct-field-row { grid-template-columns: 1fr !important; }
  .ct-timeline { grid-template-columns: 1fr !important; }
  .ct-faq-grid { grid-template-columns: 1fr !important; }
}

/* ─── Security / Privacy / Terms pages ──────────────────── */
@media (max-width: 767.98px) {
  .sc-hero, .pp-hero, .tc-hero { padding: 90px 1rem 55px !important; }
  .sc-grid { grid-template-columns: 1fr !important; }
  .sc-body, .pp-body, .tc-body { padding: 2rem 1rem 4rem !important; }
}

/* ─── Index homepage ─────────────────────────────────────── */
@media (max-width: 767.98px) {
  .hp-hero { padding: 90px 0 60px !important; }
  .hp-hero h1 { font-size: clamp(2rem, 9vw, 3.4rem) !important; }
  .hp-hero-btns { flex-direction: column !important; align-items: stretch !important; }
  .hp-hero-btns a { justify-content: center !important; }
  .hp-stats { grid-template-columns: 1fr 1fr !important; }
  .srv-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .hp-stats { grid-template-columns: 1fr 1fr !important; }
  .hp-hero-badge { font-size: .65rem !important; }
}

/* ─── Savings Accounts page ──────────────────────────────── */
@media (max-width: 767.98px) {
  .sa-hero { padding: 90px 0 55px !important; }
  .sa-hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .sa-hero-p { font-size: .92rem !important; }
  .savings-showcase { margin-bottom: 2.5rem; }
  .savings-card { max-width: 100% !important; width: 100% !important; }
  .accounts-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
}
@media (max-width: 480px) {
  .sa-hero { padding: 80px 0 45px !important; }
  .benefits-grid { grid-template-columns: 1fr !important; }
  .req-grid { grid-template-columns: 1fr !important; }
  .sc-balance { font-size: 1.75rem !important; }
}

/* ─── Personal Loans page ────────────────────────────────── */
@media (max-width: 767.98px) {
  .pl-hero { padding: 90px 0 55px !important; }
  .pl-hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .pl-hero-p { font-size: .92rem !important; }
  .loan-calc { padding: 1.5rem !important; border-radius: 16px !important; }
  .loans-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .pl-hero { padding: 80px 0 45px !important; }
  .calc-form { grid-template-columns: 1fr !important; }
  .steps-grid { grid-template-columns: 1fr 1fr !important; }
  .loan-calc { padding: 1.1rem !important; }
}

/* ─── About page ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .ab-hero { padding: 90px 0 55px !important; }
  .ab-hero h1 { font-size: clamp(1.9rem, 9vw, 3rem) !important; }
  .story-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .ab-hero { padding: 80px 0 40px !important; }
  .values-grid { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: 1fr 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ─── Mortgages / Current Accounts / shared product pages ── */
@media (max-width: 767.98px) {
  /* Common product page hero */
  [class$="-hero"],[class*="-hero "] { padding: 90px 0 55px !important; }
  /* Common product grids */
  .products-grid, .features-grid, .rates-grid { grid-template-columns: 1fr !important; }
  .two-col-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .product-card { padding: 1.25rem !important; }
  .rate-card { padding: 1.1rem !important; }
}

/* ─── Career page ────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .jobs-grid { grid-template-columns: 1fr !important; }
  .job-card { padding: 1.25rem !important; }
}
@media (max-width: 480px) {
  .job-card-footer { flex-direction: column !important; gap: .65rem !important; }
  .job-card-footer a { width: 100% !important; text-align: center !important; justify-content: center !important; }
}

/* ─── Investment / Banking Services / Offshore pages ─────── */
@media (max-width: 767.98px) {
  .inv-grid, .bs-grid, .of-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .inv-hero h1, .bs-hero h1, .of-hero h1 { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
}

/* ─── Money Market / Interest Checking / Foreign Drafts ─── */
@media (max-width: 767.98px) {
  .mm-grid, .ic-grid, .fd-grid { grid-template-columns: 1fr !important; }
  .compare-table { font-size: .82rem !important; }
  .compare-table th, .compare-table td { padding: .65rem .75rem !important; }
  .rates-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .rates-table { min-width: 380px !important; }
}
@media (max-width: 480px) {
  .compare-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .compare-table { min-width: 460px !important; font-size: .78rem !important; }
}

/* ─── Small Business / Deposit Marketing ────────────────── */
@media (max-width: 767.98px) {
  .sb-products-grid, .dm-grid { grid-template-columns: 1fr !important; }
}

/* ─── Electronic Banking page ────────────────────────────── */
@media (max-width: 767.98px) {
  .eb-features-grid { grid-template-columns: 1fr 1fr !important; }
  .eb-hero h1 { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
}
@media (max-width: 480px) {
  .eb-features-grid { grid-template-columns: 1fr !important; }
}

/* ─── Personal Insurance page ────────────────────────────── */
@media (max-width: 767.98px) {
  .pi-plans-grid { grid-template-columns: 1fr !important; }
  .pi-hero h1 { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
}

/* ─── Global: all pages — fix header clearance ───────────── */
/* All public pages use fixed header — ensure first section clears it */
@media (max-width: 991.98px) {
  body { padding-top: 0 !important; }
  /* Hide known decorative floating orbs/blobs only */
  .hero-orb, .hero-orb-1, .hero-orb-2, .hero-orb-3,
  .bg-blob, .bg-orb, .deco-blob, .deco-orb,
  .section-orb, .float-orb, .float-blob { display: none !important; }
}

/* ─── Global form helpers (all pages) ───────────────────── */
@media (max-width: 767.98px) {
  .form-row-2 { grid-template-columns: 1fr !important; }
  .input-group { flex-wrap: wrap !important; }
  .input-group .btn { width: 100% !important; border-radius: 10px !important; margin-top: .5rem; }
}
@media (max-width: 480px) {
  .btn-lg { padding: .75rem 1.5rem !important; font-size: .9rem !important; }
  .btn-group { flex-direction: column !important; }
  .btn-group .btn { border-radius: 8px !important; margin-bottom: .35rem; }
  /* Tables: horizontal scroll wrapper */
  .table-wrap, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table { min-width: 480px; }
}