/* ========================================================================
   R27 — responsive hero fit + public card/font polish
   Scope: presentation only. Routes, tool logic, APIs, SEO content and admin
   behavior are intentionally untouched.
   ======================================================================== */

/* Headline is intentionally tighter so it reads cleanly without dominating
   the image at common laptop/desktop widths. */
body:not(.admin-body) .r24-hero-copy h1{
  max-width:700px!important;
  font-size:clamp(44px,4.05vw,60px)!important;
  line-height:1.08!important;
  letter-spacing:-.018em!important;
  text-wrap:balance!important;
}
body:not(.admin-body) .r24-hero-copy h1 span{display:inline-block!important}

/* Keep the full justice-scale scene visible instead of cropping its pans/base. */
body:not(.admin-body) .r24-hero-visual{
  display:grid!important;
  place-items:stretch!important;
  background:linear-gradient(180deg,#f7f6f0 0%,#f0eee7 100%)!important;
}
body:not(.admin-body) .r24-hero-visual>picture{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#f7f6f0 0%,#f1efe8 100%)!important;
}
body:not(.admin-body) .r24-hero-visual>picture>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
}

/* Usage card: cleaner contrast and less visual obstruction over the image. */
body:not(.admin-body) .r24-how{
  border-color:rgba(216,231,226,.92)!important;
  background:rgba(255,255,255,.965)!important;
  box-shadow:0 12px 30px rgba(5,39,43,.13)!important;
}
body:not(.admin-body) .r24-how>strong{font-weight:850!important;letter-spacing:0!important}
body:not(.admin-body) .r24-how span{line-height:1.4!important}

/* R28: remove the hero usage overlay card as requested. */
body:not(.admin-body) .r24-how{display:none!important}

/* Homepage tool/service cards. */
body:not(.admin-body) .r24-portal-grid{
  gap:16px!important;
}
body:not(.admin-body) .r24-portal-grid .portal-card{
  min-height:124px!important;
  padding:18px 18px!important;
  gap:14px!important;
  border:1px solid #d9e6e2!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,#ffffff 0%,#fbfefd 100%)!important;
  box-shadow:0 7px 22px rgba(5,48,59,.055)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
body:not(.admin-body) .r24-portal-grid .portal-card:hover{
  transform:translateY(-3px)!important;
  border-color:#bfd8d1!important;
  box-shadow:0 15px 34px rgba(5,48,59,.10)!important;
}
body:not(.admin-body) .r24-portal-grid .portal-card>span{
  display:grid!important;
  place-items:center!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#ecf8f4,#dff1eb)!important;
  border:1px solid #cfe5de!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(5,48,59,.06)!important;
  font-size:25px!important;
  line-height:1!important;
}
body:not(.admin-body) .r24-portal-grid .portal-card h3{
  margin-bottom:5px!important;
  color:#083d47!important;
  font-size:18px!important;
  line-height:1.3!important;
  font-weight:800!important;
}
body:not(.admin-body) .r24-portal-grid .portal-card p{
  color:#60767b!important;
  font-size:12.8px!important;
  line-height:1.58!important;
}
body:not(.admin-body) .r24-portal-grid .portal-card>b{
  color:#0a7067!important;
  font-size:18px!important;
}

/* Tool/guide cards: make the supplied SVG artwork large and crisp enough to
   function as a real visual logo rather than a tiny thumbnail. */
body:not(.admin-body) .card.visual-card.icon-card{
  border-color:#d9e6e2!important;
  border-radius:20px!important;
  box-shadow:0 7px 22px rgba(5,48,59,.055)!important;
}
body:not(.admin-body) .card.visual-card.icon-card:hover{
  border-color:#bfd7d1!important;
  box-shadow:0 15px 34px rgba(5,48,59,.10)!important;
  transform:translateY(-3px)!important;
}
body:not(.admin-body) .card.visual-card.icon-card .card-media.logo-media{
  min-height:116px!important;
  height:116px!important;
  padding:12px 16px!important;
  background:linear-gradient(145deg,#f8fcfb 0%,#eef7f4 100%)!important;
  border-right:0!important;
  border-bottom:1px solid #e2ece9!important;
}
body:not(.admin-body) .card.visual-card.icon-card .card-media.logo-media img{
  width:min(132px,82%)!important;
  max-width:132px!important;
  max-height:92px!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 10px rgba(5,48,59,.06))!important;
}
body:not(.admin-body) .card.visual-card.icon-card .card-content{
  padding:16px 18px 18px!important;
}
body:not(.admin-body) .card.visual-card.icon-card h3{
  color:#093b45!important;
  font-size:18px!important;
  line-height:1.36!important;
  font-weight:800!important;
  letter-spacing:-.006em!important;
}
body:not(.admin-body) .card.visual-card.icon-card p{
  color:#5d7378!important;
  font-size:12.8px!important;
  line-height:1.62!important;
}
body:not(.admin-body) .card.visual-card.icon-card .pill{
  border-radius:999px!important;
  font-weight:750!important;
}
body:not(.admin-body) .card.visual-card.icon-card .arrow{
  color:#096a64!important;
  font-weight:850!important;
}

/* Better keyboard focus without changing any click behavior. */
body:not(.admin-body) .portal-card:focus-visible,
body:not(.admin-body) .card.visual-card:focus-visible,
body:not(.admin-body) .r24-quick-links a:focus-visible{
  outline:3px solid rgba(9,112,103,.28)!important;
  outline-offset:3px!important;
}

@media(max-width:1100px) and (min-width:761px){
  body:not(.admin-body) .r24-hero-copy h1{
    font-size:clamp(40px,4.5vw,50px)!important;
    line-height:1.1!important;
  }
}

@media(max-width:760px){
  body:not(.admin-body) .r24-hero-visual,
  body:not(.admin-body) .r24-hero-visual>picture,
  body:not(.admin-body) .r24-hero-visual>picture>img{
    height:264px!important;
    min-height:264px!important;
  }
  body:not(.admin-body) .r24-hero-visual>picture>img{
    object-fit:contain!important;
    object-position:center center!important;
  }
  body:not(.admin-body) .r24-hero-copy{
    padding:22px 18px 24px!important;
  }
  body:not(.admin-body) .r24-hero-copy h1{
    max-width:100%!important;
    font-size:clamp(31px,8.7vw,39px)!important;
    line-height:1.11!important;
    letter-spacing:-.012em!important;
  }
  body:not(.admin-body) .r24-how{
    left:10px!important;
    right:10px!important;
    bottom:9px!important;
    padding:10px 11px!important;
  }
  body:not(.admin-body) .r24-how>div{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr) auto minmax(0,1.1fr)!important;
    gap:4px!important;
  }
  body:not(.admin-body) .r24-how span{
    font-size:8.7px!important;
    line-height:1.35!important;
  }
  body:not(.admin-body) .r24-portal-grid .portal-card{
    min-height:104px!important;
    padding:14px!important;
    gap:12px!important;
  }
  body:not(.admin-body) .r24-portal-grid .portal-card>span{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    border-radius:14px!important;
    font-size:22px!important;
  }
  body:not(.admin-body) .r24-portal-grid .portal-card h3{font-size:16px!important}
  body:not(.admin-body) .r24-portal-grid .portal-card p{font-size:11.5px!important;line-height:1.5!important}

  body:not(.admin-body) .card.visual-card.icon-card{
    grid-template-columns:112px minmax(0,1fr)!important;
    min-height:138px!important;
    border-radius:17px!important;
  }
  body:not(.admin-body) .card.visual-card.icon-card .card-media.logo-media{
    width:112px!important;
    min-width:112px!important;
    height:100%!important;
    min-height:138px!important;
    padding:12px 9px!important;
    border-right:1px solid #e2ece9!important;
    border-bottom:0!important;
  }
  body:not(.admin-body) .card.visual-card.icon-card .card-media.logo-media img{
    width:94px!important;
    max-width:94px!important;
    max-height:72px!important;
  }
  body:not(.admin-body) .card.visual-card.icon-card .card-content{
    padding:12px 13px!important;
  }
  body:not(.admin-body) .card.visual-card.icon-card h3{
    font-size:15.8px!important;
    line-height:1.31!important;
    margin-bottom:5px!important;
  }
  body:not(.admin-body) .card.visual-card.icon-card p{
    font-size:11px!important;
    line-height:1.48!important;
  }
}

@media(max-width:390px){
  body:not(.admin-body) .r24-hero-copy h1{font-size:31px!important}
  body:not(.admin-body) .r24-how span{font-size:8.2px!important}
  body:not(.admin-body) .r24-how b{width:20px!important;height:20px!important;min-width:20px!important}
}

/* R27.1 desktop hero density: keep the visual panel close to the photo's own
   aspect ratio, so the scale can fill the panel without awkward blank bands. */
@media(min-width:761px){
  body:not(.admin-body) .r24-hero-grid{min-height:540px!important}
  body:not(.admin-body) .r24-hero-copy{padding:36px 42px 34px!important}
  body:not(.admin-body) .r24-eyebrow{margin-bottom:12px!important;padding:7px 11px!important;font-size:11.5px!important}
  body:not(.admin-body) .r24-hero-copy h1{
    font-size:clamp(42px,3.65vw,54px)!important;
    line-height:1.06!important;
    margin-bottom:14px!important;
  }
  body:not(.admin-body) .r24-hero-copy>p{font-size:14.5px!important;line-height:1.68!important;margin-bottom:16px!important}
  body:not(.admin-body) .r24-search{padding:8px!important;border-radius:14px!important}
  body:not(.admin-body) .r24-search>label{padding-bottom:6px!important;font-size:11.5px!important}
  body:not(.admin-body) .r24-search-row input{height:50px!important;min-height:50px!important;font-size:13.5px!important}
  body:not(.admin-body) .r24-search-row button{height:44px!important;min-height:44px!important;padding:0 22px!important}
  body:not(.admin-body) .r24-quick-links{margin-top:10px!important}
  body:not(.admin-body) .r24-quick-links a{min-height:32px!important;padding:6px 11px!important;font-size:10.5px!important}
  body:not(.admin-body) .r24-free-note{margin-top:14px!important;padding:10px 12px!important;font-size:10.8px!important;line-height:1.45!important}
  body:not(.admin-body) .r24-hero-visual,
  body:not(.admin-body) .r24-hero-visual>picture,
  body:not(.admin-body) .r24-hero-visual>picture>img{min-height:540px!important}
  body:not(.admin-body) .r24-hero-visual>picture>img{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* R27.2 homepage tools: three readable cards per row instead of six cramped
   columns. This affects only the homepage r24 portal group. */
body:not(.admin-body) .r24-portal-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}
body:not(.admin-body) .r24-portal-grid .portal-card{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 20px!important;
  align-items:center!important;
}
body:not(.admin-body) .r24-portal-grid .portal-card>b{display:block!important;align-self:center!important}
@media(max-width:1050px) and (min-width:621px){
  body:not(.admin-body) .r24-portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  body:not(.admin-body) .r24-portal-grid{grid-template-columns:1fr!important;gap:9px!important}
  body:not(.admin-body) .r24-portal-grid .portal-card{
    grid-template-columns:48px minmax(0,1fr) 18px!important;
    min-height:88px!important;
  }
  body:not(.admin-body) .r24-portal-grid .portal-card>b{display:block!important;font-size:15px!important}
}


/* R29: use one clean centered icon badge on list cards so mobile does not show
   multiple mini-illustrations from the wide SVG thumbnails. */
body:not(.admin-body) .card.visual-card.icon-card .card-media.clean-logo-media{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  width:100%!important;
  min-height:116px!important;
  height:116px!important;
  padding:14px!important;
  background:linear-gradient(145deg,#f8fcfb 0%,#eef7f4 100%)!important;
  border-right:0!important;
  border-bottom:1px solid #e2ece9!important;
}
body:not(.admin-body) .card.visual-card.icon-card .card-media.clean-logo-media .card-icon-badge{
  display:grid!important;
  place-items:center!important;
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid rgba(8,78,79,.10)!important;
  box-shadow:0 8px 24px rgba(4,46,56,.08)!important;
  font-size:30px!important;
  line-height:1!important;
}
@media(max-width:760px){
  body:not(.admin-body) .card.visual-card.icon-card .card-media.clean-logo-media{
    width:112px!important;
    min-width:112px!important;
    height:100%!important;
    min-height:138px!important;
    padding:12px 10px!important;
    border-right:1px solid #e2ece9!important;
    border-bottom:0!important;
  }
  body:not(.admin-body) .card.visual-card.icon-card .card-media.clean-logo-media .card-icon-badge{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    border-radius:16px!important;
    font-size:25px!important;
  }
}


/* R30: cleaner public-facing hero copy and more stable headline wrapping. */
body:not(.admin-body) .r24-hero-copy h1 .r24-head-line{display:block!important}
body:not(.admin-body) .r24-hero-copy h1 .r24-head-line.accent{color:#127d72!important}
@media(min-width:761px){
  body:not(.admin-body) .r24-hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)!important;min-height:548px!important}
  body:not(.admin-body) .r24-hero-copy h1{
    max-width:640px!important;
    font-size:clamp(38px,3.3vw,50px)!important;
    line-height:1.06!important;
    margin-bottom:14px!important;
  }
  body:not(.admin-body) .r24-hero-copy h1 .r24-head-line{white-space:nowrap!important}
}
@media(max-width:1180px) and (min-width:761px){
  body:not(.admin-body) .r24-hero-copy h1{font-size:clamp(34px,3.25vw,44px)!important}
  body:not(.admin-body) .r24-hero-copy>p{font-size:14px!important;line-height:1.62!important}
}
@media(max-width:760px){
  body:not(.admin-body) .r24-hero-copy h1{max-width:100%!important;font-size:clamp(29px,8vw,36px)!important}
  body:not(.admin-body) .r24-hero-copy h1 .r24-head-line{white-space:normal!important}
  body:not(.admin-body) .r24-free-note strong{display:block!important;font-size:11px!important;line-height:1.4!important}
}


/* R32: mobile typography cleanup so Bangla headings do not look awkward. */
@media(max-width:760px){
  body:not(.admin-body) .r24-hero-copy{padding:22px 16px 20px!important}
  body:not(.admin-body) .r24-hero-copy h1{
    font-size:25px!important;
    line-height:1.14!important;
    letter-spacing:-.022em!important;
    margin-bottom:10px!important;
    max-width:100%!important;
  }
  body:not(.admin-body) .r24-hero-copy h1 br{display:block!important}
  body:not(.admin-body) .r24-hero-copy>p{font-size:12.6px!important;line-height:1.72!important;margin-bottom:14px!important}
  body:not(.admin-body) .r24-search>label{font-size:10.8px!important}
  body:not(.admin-body) .r24-search-row input{font-size:11.4px!important}

  body:not(.admin-body) .r13-section-head,
  body:not(.admin-body) .section-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:6px!important;
  }
  body:not(.admin-body) .r13-section-head h2,
  body:not(.admin-body) .section-head h2{
    width:100%!important;
    font-size:19px!important;
    line-height:1.18!important;
    letter-spacing:-.02em!important;
    white-space:normal!important;
    text-wrap:balance!important;
    margin:0!important;
  }
  body:not(.admin-body) .r13-section-head>a,
  body:not(.admin-body) .section-head>a{
    white-space:normal!important;
    font-size:11px!important;
    line-height:1.35!important;
    align-self:flex-end!important;
  }
  body:not(.admin-body) .section-note{font-size:11.6px!important;line-height:1.55!important}
}


/* R33: inheritance tool clarity and flexible land-entry UX */
body:not(.admin-body) .inherit-span-2{grid-column:1/-1!important}
body:not(.admin-body) .inherit-land-box{display:grid!important;gap:12px!important;padding:15px!important;border:1px solid #ddd9d0!important;border-radius:14px!important;background:#fbfaf6!important;box-shadow:0 3px 10px rgba(25,43,36,.03)!important}
body:not(.admin-body) .inherit-land-head{display:grid!important;gap:4px!important}
body:not(.admin-body) .inherit-land-head strong{color:#173f38!important}
body:not(.admin-body) .inherit-land-head span{font-size:12px!important;color:#617069!important;line-height:1.55!important}
body:not(.admin-body) .inherit-land-preview{padding:12px 13px!important;border-radius:11px!important;border:1px dashed #9eb9b0!important;background:#f2f8f5!important;color:#21423d!important;line-height:1.6!important;font-size:13px!important}
body:not(.admin-body) .inherit-asset-breakdown small{display:block!important;margin-top:6px!important;color:#66756e!important;line-height:1.5!important}
@media(max-width:760px){body:not(.admin-body) .inherit-land-box{padding:13px!important}body:not(.admin-body) .inherit-land-preview{font-size:12px!important}}


/* R34: final separated navigation and compact professional header */
@media(min-width:1181px){
  body:not(.admin-body) .r13-header-inner{max-width:1440px!important;width:min(1440px,calc(100% - 26px))!important;gap:12px!important}
  body:not(.admin-body) .r13-brand{min-width:190px!important}
  body:not(.admin-body) .r13-desktop-nav{gap:0!important}
  body:not(.admin-body) .r13-desktop-nav a{padding:0 8px!important;font-size:12px!important;letter-spacing:-.012em!important}
}
@media(min-width:761px) and (max-width:1180px){
  body:not(.admin-body) .r13-desktop-nav a{padding:0 7px!important;font-size:11px!important}
  body:not(.admin-body) .r13-desktop-nav a:first-child,
  body:not(.admin-body) .r13-desktop-nav a:last-child{display:none!important}
}
body:not(.admin-body) .r13-desktop-nav a{font-weight:800!important}