/*
 * Final consistency and accessibility layer.
 * Kept separate from the migrated styles so future WordPress edits remain safe.
 */
:root {
    --shrey-ink: #0A142B;
    --shrey-copy: #1F3D82;
    --shrey-red: #134BC3;
    --shrey-soft: #F2F5FB;
    --shrey-line: #DAE2F2;
    --shrey-radius: 18px;
    --shrey-shadow: 0 18px 46px rgba(10, 20, 43, .09);
}

html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body { overflow-x: hidden; color: var(--shrey-ink); text-rendering: optimizeLegibility; }
img { max-width: 100%; }
.site-logo-heading { margin: 0; line-height: 1; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(14, 54, 141, .38);
    outline-offset: 3px;
}
.shrey-skip-link:focus { z-index: 999999; }

/* Shared footer: readable, compact and consistent on every page. */
.footer .custom-btn-box,
.footer a.custom-btn { display: none !important; }
.footer .second-footer .row > .widget-area { min-width: 0; }
.footer .widget p,
.footer .widget a,
.footer .enhanced-text-widget p {
    overflow-wrap: anywhere;
    word-break: normal;
}
.footer .prt-advertiser {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.footer .prt-advertiser img { margin: 0 !important; }

/* Destination pages: one coherent editorial system. */
.sg-country-page {
    --sg-copy: var(--shrey-copy);
    --sg-line: var(--shrey-line);
    background: #fff;
}
.sg-country-shell { width: min(1180px, calc(100% - 48px)); }
.sg-country-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 56px;
    border-bottom: 1px solid var(--shrey-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}
.sg-country-nav .sg-country-shell { min-height: 56px; }
.sg-country-nav a { min-height: 48px; padding-top: 16px; padding-bottom: 13px; }
.sg-country-hero { padding: 34px 0 30px; background: linear-gradient(180deg, #F2F5FB, #fff); }
.sg-hero-grid { min-height: 390px; border-radius: 22px; box-shadow: var(--shrey-shadow); }
.sg-hero-copy { padding: clamp(34px, 4.5vw, 64px); }
.sg-hero-copy h1 { max-width: 720px; margin: 14px 0 18px; font-size: clamp(2.5rem, 4.8vw, 4.75rem); line-height: .98; letter-spacing: -.045em; }
.sg-hero-copy p,
.sg-section-heading p,
.sg-process-intro p,
.sg-country-card p,
.sg-program-card p,
.sg-step-card p,
.sg-cost-card p,
.sg-wage-note p,
.sg-life-grid p,
.sg-final-grid p {
    font-size: 1rem;
    line-height: 1.66;
}
.sg-hero-meta { flex-wrap: wrap; }
.sg-section { padding: 64px 0; }
.sg-section + .sg-section { border-top: 1px solid rgba(221, 225, 234, .72); }
.sg-section-heading { margin-bottom: 28px; }
.sg-section-heading h2 { font-size: clamp(2rem, 3.2vw, 3.35rem); letter-spacing: -.035em; }
.sg-country-card,
.sg-program-card,
.sg-cost-card,
.sg-step-card,
.sg-life-grid article { height: auto; min-height: 0; }
.sg-country-card,
.sg-program-card { padding: 24px; }
.sg-program-card .sg-card-number { margin-bottom: 28px; }
.sg-process-panel,
.sg-cost-grid,
.sg-expense-panel,
.sg-wage-note,
.sg-final-grid aside { box-shadow: 0 12px 34px rgba(10, 20, 43, .06); }
.sg-process-intro { padding: 38px; }
.sg-process-grid { padding: 16px 26px; }
.sg-step-card { padding: 17px 10px; }
.sg-cost-card { padding: 22px; }
.sg-life-grid article { padding: 22px; }
.sg-life-grid h3 { margin-top: 18px; }
.sg-data-note { color: var(--shrey-copy); }
.sg-source-links a { min-height: 42px; align-items: center; }

/* Shared mobile header and content rhythm. */
@media (max-width: 991px) {
    html { scroll-padding-top: 92px; }
    .site-header-menu,
    .site-header-menu.is_stuck { position: relative !important; }
    .site-branding { min-width: 0; }
    #logo-img { width: auto !important; max-width: 158px !important; max-height: 52px !important; object-fit: contain; }
    /* The logo's white badge uses a diagonal clip-path that reads as a small
       desktop accent but becomes a jarring angular wedge at mobile width.
       Keep the white background (the logo text is dark, needs the contrast)
       but square it off into a plain soft-cornered box instead of a diagonal cut. */
    .prt-header-style-01 .site-navigation > div:first-child {
        clip-path: none !important;
        box-shadow: none !important;
        border-radius: 0 0 14px 0;
    }
    .menubar { min-width: 46px; min-height: 46px; }
    .menu-mobile {
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .mega-menu-link { min-height: 46px; display: flex !important; align-items: center; }
    .mega-submenu .mega-menu-link { min-height: 44px; }
    .sg-country-shell { width: min(100% - 32px, 760px); }
    .sg-country-hero { padding-top: 20px; }
    .sg-hero-grid { min-height: 0; }
    .sg-hero-copy { padding: 34px; }
    .sg-section { padding: 52px 0; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .prt-header-style-01 .top_bar {
        display: block !important;
        min-height: 32px !important;
        padding: 0 !important;
    }
    .prt-header-style-01 .top_bar .d-flex { min-height: 32px !important; }
    .prt-header-style-01 .top_bar_contact_item {
        font-size: .8rem !important;
        line-height: 32px !important;
        letter-spacing: 0 !important;
    }
    .prt-header-style-01 .top_bar_contact_item:first-child,
    .prt-header-style-01 .top_bar_social { display: none !important; }
    .site-header-menu { min-height: 70px; }
    .site-branding { padding: 8px 0; }
    #logo-img { max-width: 138px !important; max-height: 46px !important; }
    .header_extra { gap: 6px; }
    .header_btn { display: none !important; }
    .menu-mobile .mega-menu-link { font-size: .93rem !important; line-height: 1.35 !important; }
    .sg-country-shell { width: calc(100% - 28px); }
    .sg-country-nav { top: 0; min-height: 50px; }
    .sg-country-nav .sg-country-shell { min-height: 50px; padding: 0 8px; }
    .sg-country-nav-links { min-width: 0; width: 100%; }
    .sg-country-nav a { min-width: 0; min-height: 42px; padding: 11px 3px 9px; font-size: .68rem; }
    .sg-country-hero { padding: 12px 0 24px; }
    .sg-hero-grid { grid-template-columns: minmax(0, 1fr); border-radius: 15px; box-shadow: 0 12px 28px rgba(10, 20, 43, .08); }
    .sg-hero-image, .sg-hero-image img { min-height: 210px; max-height: 240px; }
    .sg-hero-copy { min-width: 0; padding: 26px 22px 28px; }
    .sg-hero-copy h1 { max-width: 100%; overflow-wrap: break-word; font-size: clamp(2rem, 8.4vw, 2.3rem); line-height: 1.02; }
    .sg-hero-copy p,
    .sg-section-heading p,
    .sg-country-card p,
    .sg-program-card p,
    .sg-step-card p,
    .sg-cost-card p,
    .sg-wage-note p,
    .sg-life-grid p,
    .sg-final-grid p { font-size: .98rem; line-height: 1.62; }
    .sg-hero-actions { align-items: stretch; }
    .sg-primary-button, .sg-secondary-button { justify-content: center; min-height: 46px; }
    .sg-section { padding: 42px 0; }
    .sg-section-heading { margin-bottom: 20px; }
    .sg-section-heading h2 { font-size: clamp(1.85rem, 8.5vw, 2.55rem); line-height: 1.04; }
    .sg-country-card, .sg-program-card, .sg-cost-card { padding: 20px; }
    .sg-process-intro { padding: 28px 22px; }
    .sg-process-grid { padding: 6px 16px; }
    .sg-step-card { padding: 16px 4px; }
    .sg-earnings-band > div { padding: 16px 18px; }
    .sg-earnings-band strong { font-size: 1.2rem; }
    .sg-wage-note, .sg-final-grid aside { padding: 24px 20px; }
    .sg-source-links { display: grid; grid-template-columns: 1fr; }
    .sg-source-links a { width: 100%; }

    .footer .second-footer {
        padding: 26px 0 18px !important;
    }
    .footer .second-footer > .container {
        width: calc(100% - 36px) !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .footer .second-footer > .container > .row {
        display: block !important;
        margin: 0 !important;
    }
    .footer .second-footer .row > .widget-area,
    .footer .second-footer .row > .widget-area:first-child,
    .footer .second-footer .row > .widget-area:nth-child(2),
    .footer .second-footer .row > .widget-area:nth-child(3) {
        display: block !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: 18px 0 !important;
        border: 0 !important;
    }
    .footer .second-footer .row > .widget-area:first-child { padding-top: 0 !important; }
    .footer .second-footer .row > .widget-area + .widget-area {
        border-top: 1px solid rgba(255, 255, 255, .11) !important;
    }
    .footer .widget-title { margin-bottom: 10px !important; }
    .footer .widget-title h3 {
        padding-bottom: 11px !important;
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }
    .footer .widget-title h3::after { width: 24px !important; }
    .footer .widget p,
    .footer .widget a,
    .footer .enhanced-text-widget p {
        font-size: .9rem !important;
        line-height: 1.62 !important;
    }
    .footer .widget .widgte-text > p { margin-bottom: 12px !important; }
    .footer .menu-footer-quick-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 3px 16px !important;
        margin: 0 0 12px !important;
    }
    .footer .menu-footer-quick-links li {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    .footer .menu-footer-quick-links li a {
        min-height: 34px !important;
        padding: 4px 0 !important;
        white-space: normal !important;
    }
    .footer .second-footer .widget_social { padding-top: 6px !important; }
    .footer .social-icons { display: flex !important; gap: 9px; }
    .footer .social-icons li { margin: 0 !important; }
    .footer .prt-advertiser { margin-top: 10px !important; }
    .footer .prt-advertiser img {
        width: 42px !important;
        height: 28px !important;
        border: 0 !important;
        border-radius: 4px !important;
    }
    .footer .bottom-footer-text { padding: 13px 18px !important; }
    .footer .cpy-text {
        font-size: .75rem !important;
        line-height: 1.5 !important;
    }
    #totop {
        right: 14px !important;
        bottom: 14px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    /* AOS hides these at opacity:0 until JS triggers the scroll-in; shortening the
       transition alone still leaves content invisible if JS is slow, blocked, or
       the trigger never fires. Show everything immediately instead. */
    [data-aos] { opacity: 1 !important; transform: none !important; }
}
.shrey-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Release 2.3.5: compact footer composition. */
@media (min-width: 992px) {
  .footer .second-footer {
    padding: 24px 0 18px !important;
  }

  .footer .second-footer > .container {
    width: min(1240px, calc(100% - 56px)) !important;
  }

  .footer .second-footer > .container > .row {
    grid-template-columns: 1.08fr .96fr 1.2fr !important;
    align-items: start !important;
  }

  .footer .second-footer .row > .widget-area,
  .footer .second-footer .row > .widget-area:first-child,
  .footer .second-footer .row > .widget-area:nth-child(3) {
    padding: 0 26px !important;
  }

  .footer .second-footer .row > .widget-area:first-child {
    padding-left: 0 !important;
  }

  .footer .second-footer .row > .widget-area:nth-child(3) {
    padding-right: 0 !important;
  }

  .footer .second-footer .row > .widget-area:nth-child(2) {
    padding: 17px 19px !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.08) !important;
  }

  .footer .widget-title {
    margin-bottom: 9px !important;
  }

  .footer .widget-title h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .footer .widget-title h3::after {
    width: 25px !important;
    margin-top: 7px !important;
  }

  .footer .widget p,
  .footer .widget a,
  .footer .enhanced-text-widget p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .footer .widget .widgte-text > p {
    margin-bottom: 10px !important;
  }

  .footer .menu-footer-quick-links {
    gap: 2px 12px !important;
    margin-bottom: 8px !important;
  }

  .footer .menu-footer-quick-links li a {
    min-height: 25px !important;
    padding: 2px 4px !important;
  }

  .footer .second-footer .widget-area:nth-child(2) .enhanced-text-widget::before {
    margin-bottom: 6px !important;
    font-size: 8px !important;
  }

  .footer .second-footer .widget-area:nth-child(2) .widget-title h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .footer .second-footer .widget-area:nth-child(2) p {
    margin-bottom: 9px !important;
  }

  .footer .second-footer .widget-area:nth-child(2) .prt-advertiser {
    gap: 7px !important;
    margin-top: 10px !important;
  }

  .footer .second-footer .widget-area:nth-child(2) .prt-advertiser a {
    height: 48px !important;
    padding: 28px 4px 5px !important;
    border-radius: 8px !important;
    background-position: center 6px !important;
    background-size: 28px 19px !important;
    font-size: 8px !important;
  }

  .footer .enhanced-text-widget .res-767-pb-18 p {
    margin-bottom: 7px !important;
    padding-left: 25px !important;
    font-size: 12px !important;
  }

  .footer .footer-social-follow {
    margin-top: 10px !important;
    gap: 10px !important;
  }

  .footer .footer-social-follow > span {
    font-size: 8px !important;
  }

  .footer .widget_social .social-icons li a {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }

  .footer .bottom-footer-text {
    padding: 9px 0 !important;
  }

  /* Three matching footer cards instead of one card + two plain dividers. */
  .footer .second-footer .row > .widget-area,
  .footer .second-footer .row > .widget-area:first-child,
  .footer .second-footer .row > .widget-area:nth-child(3) {
    padding: 22px 26px !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .028) !important;
  }

  .footer .second-footer .row > .widget-area:nth-child(2) {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .1) !important;
  }

  .footer .second-footer > .container > .row {
    gap: 18px !important;
  }
}

@media (max-width: 991px) {
  .footer .second-footer {
    padding-top: 20px !important;
    padding-bottom: 12px !important;
  }

  .footer .second-footer .row > .widget-area,
  .footer .second-footer .row > .widget-area:first-child,
  .footer .second-footer .row > .widget-area:nth-child(2),
  .footer .second-footer .row > .widget-area:nth-child(3) {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .footer .bottom-footer-text {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

/* Government-approval credential badge, in the first footer column. */
.footer .shrey-footer-credential {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.footer .shrey-footer-credential-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: var(--shrey-red);
  font-size: 17px;
  box-shadow: 0 10px 22px rgba(14, 54, 141, .3);
}
.footer .shrey-footer-credential-text {
  display: block;
  color: rgba(255, 255, 255, .68);
  font-size: 12.5px;
  line-height: 1.5;
}
.footer .shrey-footer-credential-text strong {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* "Why Shrey Group" stats: keep the 3-up row on mobile instead of one tall stack, and drop the leftover decorative underline that doesn't fit the card treatment. */
.broken-section .services-info-fid .prt-fid.style1:before {
  display: none !important;
}
@media (max-width: 991px) {
  /* The desktop 500-540px panel minimum height was surviving on mobile (an earlier
     reset to 0 lost the cascade to a later unconditional rule), stretching the
     stat cards and intro block apart via justify-content: space-between. */
  .broken-section .col-bg-img-one,
  .broken-section .prt-right-span.spacing-1 {
    min-height: 0 !important;
  }
}
@media (max-width: 575px) {
  .broken-section .services-info-fid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .broken-section .services-info-fid .prt-fid.style1 {
    min-height: 0 !important;
    padding: 16px 8px !important;
    text-align: center;
  }
  .broken-section .services-info-fid .prt-fid-inner {
    font-size: 22px !important;
    line-height: 22px !important;
  }
  .broken-section .services-info-fid .prt-fid-inner span {
    font-size: 22px !important;
    line-height: 22px !important;
  }
  .broken-section .services-info-fid .prt-fid-title {
    font-size: 10px !important;
    line-height: 1.3;
  }
}

/* Hero text spans nearly full width on mobile, so a light patch in the photo
   (clothing, sky) can land right behind it wherever the left-to-right fade
   thins out. Keep the scrim dark and even across the board on mobile/tablet. */
@media (max-width: 991px) {
  .shrey-hero-slide:before {
    background: linear-gradient(180deg, rgba(7, 14, 29, .93), rgba(7, 14, 29, .9)) !important;
  }
}

/* "Countries / Universities / Certified Agents / Visa Approvals" stat cards:
   drop the outline, keep the tinted background + shadow for separation. */
.home01-fid-section .prt-fid,
.home01-fid-section .prt-fid.style2 {
  border: 0 !important;
}

.shrey-hero-proof,
.shrey-hero-proof > div {
  border: 0 !important;
}

/* Hero: a slow-drifting ambient glow behind the content — pure CSS, GPU-cheap
   (opacity/transform only), automatically neutralized by the reduced-motion
   rule above via animation-duration. */
.shrey-premium-hero:after {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(46, 105, 234, .22), transparent 68%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  animation: shreyHeroGlowDrift 14s ease-in-out infinite;
}
@keyframes shreyHeroGlowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-36px, 26px) scale(1.08); }
}
@media (max-width: 767px) {
  .shrey-premium-hero:after { width: 380px; height: 380px; top: -120px; right: -140px; }
}

/* CTA buttons: a light sheen sweep on hover, layered on top of the existing
   lift/darken transition. */
.shrey-hero-primary,
.shrey-hero-secondary,
.footer .custom-btn {
  position: relative;
  overflow: hidden;
}
.shrey-hero-primary:before,
.shrey-hero-secondary:before,
.footer .custom-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.shrey-hero-primary:hover:before,
.shrey-hero-secondary:hover:before,
.footer .custom-btn:hover:before {
  left: 130%;
}

/* Card hover depth: a touch more lift + a soft teal glow, additive to
   whatever hover transform each card already had. */
.shrey-visa-card,
.home01-immigration-and-services-section .featured-imagebox-portfolio.style1,
.home01-fid-section .prt-fid {
  transition: transform .35s cubic-bezier(.16,.8,.24,1), box-shadow .35s ease;
}
.shrey-visa-card:hover,
.home01-immigration-and-services-section .featured-imagebox-portfolio.style1:hover,
.home01-fid-section .prt-fid:hover {
  box-shadow: 0 22px 48px rgba(19, 75, 195, .22);
}

/* Mobile bottom nav bar: phone-only quick access, the header keeps the full menu.
   Floating glass pill, dimensional-layering style (blur + elevation), with a
   soft teal chip marking the active tab instead of a bare color change. */
.shrey-mobile-nav {
  display: none;
}
@media (max-width: 767px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .shrey-mobile-nav {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    padding: 7px 6px;
    background: rgba(7, 14, 29, .82);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    animation: shreyNavRise .5s cubic-bezier(.16,.8,.24,1) both;
  }
  @keyframes shreyNavRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .shrey-mobile-nav a,
  .shrey-mobile-nav button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    padding: 6px 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .15s ease;
  }
  .shrey-mobile-nav a:active,
  .shrey-mobile-nav button:active { transform: scale(.92); }
  .shrey-mobile-nav a i,
  .shrey-mobile-nav button i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 22px;
    font-size: 16px;
    transition: background .2s ease, transform .25s ease;
  }
  .shrey-mobile-nav a.is-active {
    color: #fff;
    background: rgba(119, 158, 242, .14);
  }
  .shrey-mobile-nav a.is-active i {
    color: #779EF2;
    background: rgba(119, 158, 242, .18);
    border-radius: 10px;
  }
  .shrey-more-toggle[aria-expanded="true"] { color: #fff; background: rgba(119, 158, 242, .14); }
  .shrey-more-toggle[aria-expanded="true"] i { color: #779EF2; transform: rotate(90deg); }
  #totop { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* "More" sheet */
  .shrey-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(7, 14, 29, .55);
    opacity: 0;
    transition: opacity .28s ease;
  }
  .shrey-more-backdrop.is-open { opacity: 1; }
  .shrey-more-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    max-height: 72vh;
    overflow-y: auto;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 20, 43, .96);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity .28s ease, transform .28s cubic-bezier(.16,.8,.24,1);
  }
  .shrey-more-sheet.is-open { opacity: 1; transform: translateY(0) scale(1); }
  .shrey-more-handle {
    width: 36px;
    height: 4px;
    margin: 2px auto 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
  }
  .shrey-more-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .7);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  .shrey-more-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  .shrey-more-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    transition: background .2s ease, transform .15s ease;
  }
  .shrey-more-quick a:active { transform: scale(.95); }
  .shrey-more-quick a i { font-size: 19px; color: #779EF2; }
  .shrey-more-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .shrey-more-list li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
  .shrey-more-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    font-weight: 600;
  }
  .shrey-more-list a i:first-child { width: 20px; color: #779EF2; font-size: 15px; text-align: center; }
  .shrey-more-list a i.fa-angle-right { margin-left: auto; color: rgba(255, 255, 255, .32); font-size: 13px; }
}

/* ==========================================================================
   SHREY DESIGN PALETTE  (canonical source of truth)
   --------------------------------------------------------------------------
   The brand hues were already right for this sector (navy = institutional
   trust, teal = education/growth) and they measure well, so this formalizes
   them into a scale rather than re-hueing the site:

     teal #134BC3 on white ............ 6.5:1  (AA text, AAA large)
     teal #103FA3 w/ white text ....... 8.6:1  (AAA)
     teal #779EF2 on navy #0E1C3C ..... 7.5:1  (AAA)
     copy #1F3D82 on white ............ 8.6:1  (AAA)
     muted #505F7E on white ........... 4.8:1  (AA)

   What this block fixes, beyond documenting the scale:
     1. --shrey-red-dark was identical to --shrey-red, so every primary-CTA
        hover changed nothing but the translate. Now genuinely darker.
     2. Legacy pink tints (#F2F5FB/#F2F5FB/#ffdadd and 11 near-duplicates)
        survived from the old red branding and clashed with teal. Rewritten to
        the teal tints at source. Semantic red/amber alert colours were left
        alone -- they carry meaning, not branding.

   The "red" variable names are legacy (they hold teal); they are kept so the
   ~200 existing call sites keep working. Prefer the --sg-* tokens in new code.
   ========================================================================== */
:root {
  /* Brand — teal */
  --sg-teal-50:  #E9EFFD;   /* tint: icon chips, soft fills */
  --sg-teal-100: #F1F5FE;
  --sg-teal-300: #779EF2;   /* light: text/icons on dark surfaces */
  --sg-teal-500: #134BC3;
  --sg-teal-600: #134BC3;   /* BASE: primary CTA, links, accents */
  --sg-teal-700: #103FA3;   /* hover / pressed */
  --sg-teal-800: #0E368D;

  /* Surfaces — navy */
  --sg-navy-900: #070E1D;   /* deepest: hero base */
  --sg-navy-800: #0A142B;   /* page dark sections */
  --sg-navy-700: #0E1C3C;   /* raised card on dark */
  --sg-navy-600: #0E1C3C;

  /* Neutrals */
  --sg-ink:   #0A142B;      /* headings */
  --sg-copy:  #1F3D82;      /* body text */
  --sg-muted: #505F7E;      /* secondary/meta text */
  --sg-line:  #DAE2F2;      /* borders, dividers */
  --sg-soft:  #F2F5FB;      /* subtle section background */
  --sg-white: #ffffff;

  /* Semantic */
  --sg-success: #103FA3;
  --sg-warning: #6E5527;
  --sg-danger:  #b3261e;

  /* Legacy aliases re-pointed at the scale. Redefining these here is what
     repairs the dead hover states across all ~7 primary-button rules at once. */
  --shrey-red-dark: var(--sg-teal-700);
}

/* The legacy pink tints themselves were rewritten to teal at source across the
   stylesheets (28 occurrences), so no per-selector overrides are needed here. */

/* --------------------------------------------------------------------------
   On-dark accent correction.
   teal-600 (#134BC3) is tuned for light surfaces (6.5:1 on white). Several
   accents used it on DARK surfaces, landing at 2.2-2.8:1 -- well under AA.
   teal-300 is the palette's on-dark counterpart and measures 7.5:1 there.
   -------------------------------------------------------------------------- */
.shrey-visa-services .shrey-section-kicker,
.shrey-visa-heading h2 span,
.shrey-visa-card .shrey-visa-type,
.home01-testimonial-section .text-base-skin,
.home01-testimonial-section .section-title .title-header h3,
.broken-section .col-bg-img-one .shrey-service-intro > span {
  color: var(--sg-teal-300) !important;
}