/* ===================================================================
   AssignmentToppers - MASTER MOBILE & TABLET RESPONSIVE STYLESHEET
   Engineered for Mobile Chrome, Safari iOS, Firefox Mobile & Tablets
   =================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Ensure desktop elements are never disturbed */
@media (min-width: 1101px) {
  .mobile-nav-header {
    display: none !important;
  }
  .nav-backdrop {
    display: none !important;
  }
  .nav-menu-inner {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===================================================================
   TABLET & SMARTPHONE BREAKPOINT (max-width: 991px)
   =================================================================== */
@media screen and (max-width: 1100px) {

  /* --- TOP NOTICE BAR --- */
  .top-notice-bar {
    padding: 0.45rem 1rem !important;
    font-size: 0.82rem !important;
  }

  .top-notice-bar .container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.35rem !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .top-notice-left {
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }

  .top-notice-right {
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
  }

  /* --- HEADER BAR --- */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  }

  .nav-container {
    height: 70px !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .brand-logo {
    gap: 0.65rem !important;
    margin-right: 0 !important;
  }

  .brand-logo img {
    height: 44px !important;
    width: auto !important;
  }

  .brand-text-main {
    font-size: 1.12rem !important;
  }

  .brand-tagline {
    font-size: 0.6rem !important;
    letter-spacing: 0.8px !important;
  }

  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
  }

  .nav-actions .btn {
    padding: 0.55rem 0.95rem !important;
    font-size: 0.82rem !important;
    min-height: 40px !important;
  }

  /* Hamburger Toggle Button */
  .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    color: #0B192C !important;
    cursor: pointer !important;
    outline: none !important;
  }

  .mobile-toggle svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* ===============================================================
     MOBILE SLIDE-OUT DRAWER (100% Touch-Safe & Scrollable)
     =============================================================== */
  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(340px, 86vw) !important;
    height: 100dvh !important;
    background: #FFFFFF !important;
    z-index: 1000001 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-menu.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.3) !important;
  }

  /* Drawer Sticky Header */
  .mobile-nav-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.1rem 1.25rem !important;
    background: linear-gradient(135deg, #0B192C 0%, #1E3E62 100%) !important;
    color: #FFFFFF !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
  }

  .mobile-nav-header-brand {
    font-family: var(--font-heading);
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.2px !important;
  }

  .mobile-nav-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    color: #FFFFFF !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .mobile-nav-close:hover,
  .mobile-nav-close:active {
    background: rgba(255, 255, 255, 0.28) !important;
  }

  /* Drawer Inner Items */
  .nav-menu-inner {
    padding: 0.75rem 1.25rem 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex-grow: 1 !important;
  }

  .nav-item {
    width: 100% !important;
    display: block !important;
  }

  .nav-link {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.95rem 0.25rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-decoration: none !important;
    min-height: 48px !important;
  }

  .nav-link:active,
  .nav-link:hover {
    color: var(--color-accent-dark) !important;
  }

  /* Services Mega Menu in Mobile Drawer (Accordion) */
  /* The desktop rules centre the panel under its item with translateX(-50%),
     and the :hover / :focus-within variants re-apply that transform after the
     link is tapped (it keeps focus). Inside the drawer the panel is in flow,
     so the transform must be cleared at the same priority. */
  .megamenu-wrapper,
  .has-megamenu:hover .megamenu-wrapper,
  .has-megamenu:focus-within .megamenu-wrapper,
  .has-megamenu.open .megamenu-wrapper {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none !important;
  }

  .has-megamenu.mobile-expanded .megamenu-wrapper {
    display: block !important;
  }

  .megamenu-content {
    background: #F8FAFC !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.35rem 0 0.75rem 0 !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 3px solid var(--color-accent) !important;
  }

  .megamenu-header-title,
  .megamenu-subtext {
    font-size: 0.78rem !important;
    margin-bottom: 0.4rem !important;
  }

  .megamenu-grid {
    grid-template-columns: 1fr !important;
    gap: 0.35rem !important;
  }

  .megamenu-card {
    padding: 0.6rem 0.75rem !important;
    background: #FFFFFF !important;
    border-radius: 6px !important;
    border: 1px solid #E2E8F0 !important;
    display: flex !important;
    flex-direction: row !important;      /* desktop cards stack icon over title */
    align-items: center !important;
    gap: 0.65rem !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  .megamenu-card-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }

  .megamenu-card-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #0B192C !important;
    margin: 0 !important;
  }

  .megamenu-card-desc {
    display: none !important;
  }

  .megamenu-footer {
    padding-top: 0.5rem !important;
    margin-top: 0.5rem !important;
    text-align: center !important;
  }

  .megamenu-footer-text {
    display: none !important;
  }

  .megamenu-footer-link {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--color-accent-dark) !important;
  }

  /* Backdrop Overlay */
  .nav-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(11, 25, 44, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1000000 !important;
  }

  .nav-backdrop.active {
    display: block !important;
  }

  body.nav-open {
    overflow: hidden !important;
    /* No touch-action:none here. The browser intersects touch-action up the
       ancestor chain, so putting `none` on <body> also blocked panning inside
       the drawer -- with nine links plus the expandable Services list the menu
       is taller than a phone screen and could not be scrolled. overflow:hidden
       already stops the page behind it moving. */
  }

  /* ===============================================================
     HERO & ORDER FORM ON MOBILE
     =============================================================== */
}

@media screen and (max-width: 991px) {
  .hero-section {
    min-height: auto !important;
    padding: 2.5rem 0 2rem !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
  }

  .hero-content {
    text-align: center !important;
    max-width: 100% !important;
  }

  .hero-badge {
    margin: 0 auto 1rem auto !important;
    display: inline-flex !important;
  }

  .hero-title {
    font-size: 1.95rem !important;
    line-height: 1.22 !important;
    margin-bottom: 0.85rem !important;
  }

  .hero-subheadline {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin-bottom: 1.75rem !important;
  }

  .hero-cta-group .btn {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
  }

  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    margin-top: 1rem !important;
  }

  .hero-stat-item {
    padding: 0.75rem !important;
  }

  .stat-number {
    font-size: 1.45rem !important;
  }

  .stat-label {
    font-size: 0.72rem !important;
  }

  /* --- ORDER FORM ON MOBILE --- */
  .hero-form-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  .order-card-container {
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
  }

  .order-discount-bar {
    padding: 0.75rem 1rem !important;
    font-size: 0.82rem !important;
  }

  .order-form-body {
    padding: 1.25rem 1rem !important;
  }

  .order-form-title {
    font-size: 1.45rem !important;
  }

  .order-form-subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 1.25rem !important;
  }

  .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .form-group {
    margin-bottom: 0.9rem !important;
  }

  .form-label {
    font-size: 0.85rem !important;
    margin-bottom: 0.3rem !important;
    font-weight: 600 !important;
  }

  /* CRITICAL: 16px font-size prevents iOS Safari auto-zoom */
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control {
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 0.75rem 0.95rem !important;
    border-radius: 8px !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  select.form-control {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.1em !important;
    padding-right: 2.5rem !important;
  }

  textarea.form-control {
    min-height: 90px !important;
  }

  .file-drop-zone {
    padding: 1.25rem 0.75rem !important;
    min-height: 80px !important;
  }

  .file-drop-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 0.35rem !important;
  }

  .file-drop-title {
    font-size: 0.85rem !important;
  }

  .order-form-body .btn-submit-order {
    min-height: 52px !important;
    font-size: 1rem !important;
    width: 100% !important;
    margin-top: 0.75rem !important;
  }

  /* ===============================================================
     SECTIONS & GRIDS (1-2 Columns Clean Stacking)
     =============================================================== */
  .section {
    padding: 2.75rem 0 !important;
  }

  .section-header {
    margin-bottom: 1.85rem !important;
    text-align: center !important;
  }

  .section-title {
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
  }

  .section-description {
    font-size: 0.92rem !important;
  }

  .services-grid-8 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }

  .why-grid-12 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }

  .steps-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }

  .testimonials-grid-10 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .countries-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }

  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    gap: 1.25rem !important;
  }

  .turnitin-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .turnitin-points-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Payments Section */
  .payments-wrapper {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
    padding: 1.25rem 1rem !important;
  }

  .payment-badges-row {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Final CTA */
  .final-cta-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }

  .final-cta-buttons .btn {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
  }

  /* Footer */
  .footer-top-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }

  .footer-bottom-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
  }

  /* Floating Buttons */
  .floating-actions-bar {
    right: 12px !important;
    bottom: 18px !important;
    gap: 0.5rem !important;
    z-index: 99999 !important;
  }

  .float-btn span {
    display: none !important;
  }

  .float-btn {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  /* Modal */
  .modal-box {
    width: calc(100vw - 2rem) !important;
    max-width: 440px !important;
    margin: 1rem !important;
    padding: 1.5rem 1.25rem !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }
}

/* ===============================================================
   3. SMARTPHONE SPECIFIC (max-width: 540px)
   =============================================================== */
@media screen and (max-width: 540px) {

  .container {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .brand-logo img {
    height: 38px !important;
  }

  .brand-text-main {
    font-size: 1rem !important;
  }

  .brand-tagline {
    font-size: 0.52rem !important;
  }

  .hero-title {
    font-size: 1.62rem !important;
    letter-spacing: -0.3px !important;
  }

  .services-grid-8,
  .why-grid-12,
  .steps-grid-4,
  .countries-grid-4,
  .turnitin-points-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .service-box-card,
  .why-card,
  .step-card,
  .country-card,
  .review-card {
    padding: 1.15rem 1rem !important;
  }

  .section-title {
    font-size: 1.48rem !important;
  }

  .order-form-title {
    font-size: 1.3rem !important;
  }

  /* Blog filter buttons on phone */
  .blog-filter-row {
    gap: 0.35rem !important;
    margin-bottom: 1.75rem !important;
  }

  .blog-filter-btn {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.76rem !important;
  }

  .blog-post-wrap {
    padding: 0 0.5rem !important;
  }

  .blog-post-wrap h1 {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
  }

  .blog-hero-img {
    max-height: 260px !important;
    border-radius: 8px !important;
  }

  .blog-post-body {
    font-size: 0.98rem !important;
    line-height: 1.75 !important;
  }
}

/* ===================================================================
   HEADER LAYOUT RESILIENCE
   The header is one flex row: brand | nav | CTA cluster. Without explicit
   shrink rules the CTA's min-content width wins, the hamburger gets pushed
   past the viewport edge, and body{overflow-x:hidden} silently clips it —
   leaving phone and tablet visitors with no way to open the menu at all.
   =================================================================== */

.nav-container { flex-wrap: nowrap; min-width: 0; }
/* The brand holds its ground; the menu and CTA absorb the squeeze instead.
   It is only allowed to shrink on small phones, where nothing else can give. */
.brand-logo    { flex-shrink: 0; }
.brand-text    { min-width: 0; overflow: hidden; }
.brand-text-main,
.brand-tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-actions   { flex-shrink: 1; min-width: 0; }
.mobile-toggle { flex-shrink: 0; }

/* Nine desktop nav items need compacting before they reach the drawer
   breakpoint, or they shove the CTA off the right edge on smaller laptops. */
@media (min-width: 1101px) and (max-width: 1450px) {
  .nav-menu { min-width: 0; flex-shrink: 1; }
  .nav-container { gap: 0.75rem; }
  .brand-logo { margin-right: 0.4rem; }
  .nav-link { padding: 0.4rem 0.45rem; font-size: 0.79rem; }
  .nav-actions { gap: 0.5rem; }
  .nav-actions .btn { padding: 0.6rem 0.9rem; font-size: 0.82rem; }
  .nav-actions .btn > span { display: none; }
}

/* Drawer range: the CTA yields, the menu button never does. */
@media (max-width: 1100px) {
  .nav-actions {
    flex-direction: row !important;
    width: auto !important;
    margin-top: 0 !important;
  }
  .nav-actions .btn {
    width: auto !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .brand-logo { flex-shrink: 1; min-width: 0; }
  .nav-container {
    gap: 0.5rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
  .brand-logo img { height: 38px !important; }
  .brand-text-main { font-size: 1rem !important; }
  .nav-actions .btn { padding: 0.5rem 0.72rem !important; font-size: 0.76rem !important; }
  .nav-actions .btn > span { display: none !important; }
}

@media (max-width: 400px) {
  .brand-tagline { display: none !important; }
  .brand-text-main { font-size: 0.92rem !important; }
  .brand-logo img { height: 34px !important; }
  .nav-actions .btn { padding: 0.45rem 0.6rem !important; font-size: 0.72rem !important; }
}

/* ===================================================================
   TOUCH TARGETS — bring the stragglers up to a comfortable 44px
   =================================================================== */
@media (pointer: coarse), (max-width: 1100px) {
  .mobile-nav-close,
  .float-backtotop,
  .modal-close-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .btn-add-files {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* Narrowest phones (iPhone SE and similar): shave the CTA rather than let the
   brand name truncate. */
@media (max-width: 360px) {
  .nav-container { gap: 0.4rem !important; padding-left: 0.7rem !important; padding-right: 0.7rem !important; }
  .brand-logo img { height: 30px !important; }
  .brand-logo { min-height: 36px; }
  .brand-text-main { font-size: 0.86rem !important; }
  .nav-actions .btn { padding: 0.42rem 0.48rem !important; font-size: 0.7rem !important; }
}

/* ===================================================================
   MOBILE DRAWER STACKING
   The drawer markup lives inside .site-header, and that header is a
   sticky, z-indexed element -- so it forms a stacking context and the
   drawer's own z-index only ever competes *within* it. The backdrop is
   appended to <body>, so it sat in the root context above the entire
   header, greying the drawer out and swallowing every tap on it.
   Lifting the header above the backdrop while the drawer is open puts
   the menu back on top and makes the links tappable again.
   =================================================================== */

/* Primary fix: drop the backdrop below the header's own stacking level, so the
   drawer nested inside the header is painted above it no matter what. This is
   structural -- it does not depend on body.nav-open winning a cascade race. */
body .nav-backdrop {
  z-index: 9998 !important;
}

/* Belt and braces: while the menu is open the header is lifted clear of
   everything else on the page as well. */
body.nav-open .site-header {
  z-index: 1000002 !important;
}

/* The floating WhatsApp / chat / callback buttons would otherwise hover over
   the dimmed page while the menu is open, competing for the same taps. */
body.nav-open .floating-actions-bar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===================================================================
   DRAWER TOUCH TARGETS
   These are declared at base level rather than inside a breakpoint: the
   drawer chrome only ever exists on mobile anyway, and relying on a media
   query left the close button collapsing to zero height when the query
   did not resolve.
   =================================================================== */

.mobile-nav-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

/* Comfortable, evenly spaced rows in the drawer. 34px was under the 44px
   touch-target floor. */
.nav-menu.mobile-open .nav-menu-inner .nav-link,
.nav-menu .nav-menu-inner .nav-link {
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* The drawer scrolls on its own and must not chain that scroll to the page
   behind it once it reaches an end. */
.nav-menu {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* ===================================================================
   MOBILE TOUCH TARGETS & LEGIBILITY
   Audited at 390px. WCAG 2.2 AA asks for a 24x24 minimum; these links
   were sitting at 17-23px, and several labels were under 11px.
   =================================================================== */
@media screen and (max-width: 991px) {

  /* Contact links in the top notice bar. */
  .top-contact-link {
    display: inline-flex !important;
    align-items: center;
    min-height: 32px;
    padding: 0.25rem 0;
  }

  /* The main footer link columns -- roughly 35 links, all previously 23px.
     The row gap is trimmed so the taller rows do not add as much height. */
  .footer-links-list { gap: 0.3rem !important; }

  .footer-links-list a {
    min-height: 38px;
    display: flex !important;
    align-items: center;
  }

  /* Email / WhatsApp inside the address block. */
  .footer-address-box a {
    display: inline-block;
    min-height: 32px;
    line-height: 32px;
  }

  /* Privacy / Terms / Integrity row. */
  .footer-bottom-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  /* Any contact link, wherever it appears. These are the ones a student on a
     phone taps most, and several were unclassed inline anchors. */
  a[href^="mailto:"],
  a[href^="tel:"],
  a[href*="wa.me"] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  /* Breadcrumbs and the back link on service and blog pages. */
  .blog-breadcrumb a,
  .breadcrumb-nav a,
  .breadcrumb a,
  .blog-post-wrap > div > a,
  .blog-post-body > div > a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }

  /* Labels that had dropped below a comfortable reading size. */
  .badge-offer { font-size: 0.7rem !important; }
  .stage-timeline,
  .stage-axis { font-size: 0.7rem !important; }
  .stage-tag { font-size: 0.72rem !important; }
}

/* ===================================================================
   LONG WORDS AND OVERSIZED HEADINGS AT PHONE WIDTHS
   The inner-page heroes set font-size inline (2.8rem), so no stylesheet
   rule could reach them: "AssignmentToppers" is a single 17-character
   token that measures ~418px at that size and was being clipped by the
   hero's own overflow on a 375px screen. Cap the step with !important
   to beat the inline style, and let a long token break as a last resort
   so nothing can ever run past the edge again.
   =================================================================== */
@media screen and (max-width: 991px) {
  h1, h2, h3, h4,
  .hero-title, .section-title {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: clamp(1.7rem, 8.2vw, 2.4rem) !important;
    line-height: 1.18 !important;
  }
  h2 {
    font-size: clamp(1.3rem, 6.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }
  /* keep the article heading at the size the blog layout already chose */
  .blog-post-wrap h1 {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
  }
}

/* ===================================================================
   INLINE GRIDS
   A handful of layouts declare grid-template-columns inline, so no
   stylesheet rule could reach them and they never collapsed: about.html's
   four-column corporate details pushed the registered address and phone
   number ~536px off-canvas, where the section's overflow clipped them
   out of sight. .stack-on-mobile is the hook those elements now carry.
   =================================================================== */
@media screen and (max-width: 767px) {
  .stack-on-mobile {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .stack-on-mobile {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===================================================================
   HEADER WHILE THE DRAWER IS OPEN
   The header is lifted above the backdrop so the hamburger stays
   tappable to close the drawer. That left the logo and the gold CTA at
   full brightness beside a dimmed page — a bright sliver next to the
   panel. Fade them with the rest of the page; keep the toggle crisp.
   =================================================================== */
@media screen and (max-width: 1100px) {
  body.nav-open .brand-logo,
  body.nav-open .nav-actions .btn {
    opacity: 0.28;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.nav-open .mobile-toggle {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===================================================================
   BLOG CARD CTA TAP TARGET
   .blog-read-more is already inline-flex, but at 22px tall it fell just
   under the 24px minimum on all 46 cards. Give it a comfortable target
   without changing how the card reads.
   =================================================================== */
@media (pointer: coarse), (max-width: 1100px) {
  .blog-read-more {
    min-height: 44px;
    padding-right: 0.25rem;
  }
}

/* Inline policy links inside disclosure notes sit at ~19px on tablets. */
@media (pointer: coarse), (max-width: 1100px) {
  .blog-cta-note a,
  .cta-note a,
  .disclosure-note a {
    display: inline-block;
    min-height: 26px;
    line-height: 26px;
  }
}