/*!
 * Haramain Taxi — hero (plain, no illustration) + site footer.
 * Same .hrw- prefix convention as haramain-menu.css so both stay theme-safe.
 * Footer uses the solid brand green (per "use green background like the
 * third [logo]" request); the hero is a deliberately plain, typographic
 * treatment — solid green background, no photo or illustration — per
 * "plain and elegant with no rendered image".
 */

/* ---------- Hero (plain/typographic) ---------- */
.hrw-hero{
  position:relative;color:#fff;overflow:hidden;text-align:center;
  background:linear-gradient(160deg,#0e6b4e 0%,#0b5d43 45%,#0a4a37 100%);
}
.hrw-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.10),transparent 60%);
}
.hrw-hero-inner{
  position:relative;z-index:2;max-width:820px;margin:0 auto;padding:96px 20px 84px;
  display:flex;flex-direction:column;align-items:center;
}
.hrw-hero-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px;}
.hrw-hero-badge{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  padding:6px 16px;border-radius:30px;font-size:.78rem;font-weight:600;letter-spacing:.02em;
}
.hrw-hero h1{
  font-family:'Poppins',system-ui,sans-serif;color:#fff;font-size:clamp(1.9rem,4.2vw,2.9rem);
  max-width:720px;margin:0 0 .5em;line-height:1.28;font-weight:700;
}
.hrw-hero h1 .hrw-hero-accent{color:#e6c563;}
.hrw-hero-rule{width:64px;height:3px;border-radius:2px;background:#d4af37;margin:0 0 26px;}
.hrw-hero-lead{font-size:clamp(1rem,1.4vw,1.12rem);max-width:600px;color:#dcece3;margin:0 0 18px;line-height:1.7;}

/* Rotating route/service strip — optional, only rendered when [haramain_hero]
 * is given a "services" attribute (the homepage uses it). All items are
 * always present in the HTML (each is just faded via opacity, never
 * removed), so nothing here hides content from search engines — it's the
 * same "one visible card at a time" pattern used by any on-page carousel. */
.hrw-hero-services{
  position:relative;min-height:1.5em;margin:0 0 30px;
  font-family:'Poppins',system-ui,sans-serif;font-weight:600;
  font-size:clamp(.95rem,1.6vw,1.08rem);color:#e6c563;text-align:center;
}
.hrw-hero-service-item{
  position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.hrw-hero-service-item.is-active{opacity:1;position:relative;}
@media (prefers-reduced-motion:reduce){
  .hrw-hero-services{min-height:auto;}
  .hrw-hero-service-item{position:static;opacity:1;display:block;margin-bottom:4px;transition:none;}
}

.hrw-hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.hrw-hero .hrw-btn-outline{background:transparent;color:#fff !important;border:2px solid rgba(255,255,255,.55);}
.hrw-hero .hrw-btn-outline:hover{background:rgba(255,255,255,.12);}
.hrw-hero .hrw-btn-primary{background:#0e7a5f;}
.hrw-hero .hrw-btn-primary:hover{background:#0a5c47;}

/* Compact variant ([haramain_hero compact="yes"]) — content-first pages
   like the rate list, where a full-height banner would push the prices
   (the reason the visitor came) below the fold. */
.hrw-hero-compact .hrw-hero-inner{padding:44px 20px 40px;}
.hrw-hero-compact h1{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:.4em;}
.hrw-hero-compact .hrw-hero-rule{margin-bottom:18px;}
.hrw-hero-compact .hrw-hero-lead{margin-bottom:0;font-size:clamp(.94rem,1.3vw,1.04rem);}
.hrw-hero-compact .hrw-hero-badges{margin-bottom:16px;}

@media (max-width:640px){
  .hrw-hero-inner{padding:64px 20px 56px;}
  .hrw-hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:320px;}
  .hrw-hero-compact .hrw-hero-inner{padding:32px 18px 30px;}
}

/* ---------- Footer ---------- */
.hrw-footer{background:#0b5d43;color:#cfe4da;padding:56px 0 20px;font-size:.9rem;font-family:'Inter',system-ui,sans-serif;}
.hrw-footer-inner{max-width:1180px;margin:0 auto;padding:0 20px;}
.hrw-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:36px;margin-bottom:36px;}
.hrw-footer h4{color:#fff;font-size:1rem;margin:0 0 16px;font-family:'Poppins',system-ui,sans-serif;}
.hrw-footer-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:#fff !important;text-decoration:none;margin-bottom:14px;}
.hrw-footer-logo .hrw-mark{background:#fff;color:#0b5d43;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;position:relative;flex-shrink:0;}
.hrw-footer-logo .hrw-mark i{position:absolute;bottom:7px;left:10px;width:16px;height:2.5px;border-radius:2px;background:#d4af37;font-style:normal;}
.hrw-footer p{color:#bcd6c8;margin:0 0 16px;}
.hrw-footer ul{list-style:none;padding:0;margin:0;}
.hrw-footer ul li{margin-bottom:10px;}
.hrw-footer a{color:#cfe4da;text-decoration:none;}
.hrw-footer a:hover{color:#e6c563;}
.hrw-footer-social{display:flex;gap:10px;}
.hrw-footer-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.hrw-footer-social a:hover{background:rgba(255,255,255,.22);}
.hrw-footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);padding-top:18px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#9fc2af;font-size:.82rem;
}

@media (max-width:860px){ .hrw-footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .hrw-footer-grid{grid-template-columns:1fr;} .hrw-footer-bottom{flex-direction:column;} }

/* ---------- Route page ([haramain_route] and the 6 per-route presets) ----------
 * Just a heading + spacing wrapper around the existing quote/table/fleet
 * mounts — those already have their own styles from haramain-rates.css, so
 * this only needs to add the intro heading treatment and vertical rhythm
 * between the three stacked blocks. No page-level max-width here, same as
 * every other shortcode in this plugin — it inherits the theme's own
 * content column width. */
.hrw-route-page{margin:0 0 44px;font-family:'Inter',system-ui,sans-serif;}
.hrw-route-intro{text-align:center;margin-bottom:30px;}
.hrw-route-intro h2{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:clamp(1.3rem,3vw,1.8rem);margin:0 0 10px;font-weight:700;
}
.hrw-route-intro p{color:var(--muted,#5b6b78);font-size:1rem;max-width:640px;margin:0 auto;line-height:1.6;}
.hrw-route-page .hrw-quote-mount{margin-bottom:30px;}
.hrw-route-page .hrw-table-mount{margin-bottom:8px;}
.hrw-route-page .hrw-fleet-mount{margin-top:24px;}

@media (max-width:640px){
  .hrw-route-page{margin-bottom:32px;}
  .hrw-route-intro{margin-bottom:22px;}
}

/* ---------- Homepage ([haramain_homepage] + its building-block shortcodes)
 * Sections alternate white / very light green ("tint") backgrounds for
 * visual rhythm. Everything inside a section is capped at a readable
 * max-width via .hrw-home-section-inner so it never runs edge-to-edge on
 * wide theme content columns. */
.hrw-home{font-family:'Inter',system-ui,sans-serif;}
.hrw-home-section{padding:64px 20px;}
.hrw-home-section-inner{max-width:1180px;margin:0 auto;}
.hrw-home-tint{background:#f4f9f6;}
.hrw-home-section-head{text-align:center;max-width:680px;margin:0 auto 40px;}
.hrw-home-section-head h2{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 12px;font-weight:700;
}
.hrw-home-section-lead{color:var(--muted,#5b6b78);font-size:1.02rem;line-height:1.7;margin:0;}

/* Fare calculator — the site's single most important conversion action, so
 * it gets special treatment: the very first section after the hero, extra
 * card shadow, and a gold eyebrow label to draw the eye ahead of every
 * other section. (An earlier version pulled this section up to overlap
 * the hero itself for a "floating card" look, but real WordPress themes
 * render the hero at different heights depending on their own fonts/CSS,
 * so the overlap amount that looked right in testing ended up slicing
 * through the heading text on the live site — not worth the fragility,
 * so this stays in normal document flow with no overlap.) */
.hrw-home-quote{
  padding-top:48px;
  /* Tinted band behind the calculator. The card itself is white, so on a
     white section (as it was) it had no visible edge on a phone and read
     as plain page content rather than the site's main call to action. */
  background:linear-gradient(180deg,#eaf4ef 0%,#f4f9f6 100%);
  border-bottom:1px solid #dceae3;
}
.hrw-home-quote .hrw-home-section-inner{max-width:740px;}
/* The section already provides the tinted band here, so strip the panel
   that .hrw-quote-mount carries for standalone use — otherwise the
   calculator would sit on two nested tinted boxes. */
.hrw-home-quote .hrw-quote-mount{
  background:none;border:0;padding:0;border-radius:0;
}
.hrw-home-quote .hr-quote-card{
  box-shadow:0 18px 40px rgba(11,63,45,.16);
  border:1px solid #cfe0d8;
  border-top:4px solid #d4af37;
}
.hrw-home-eyebrow{
  display:inline-block;background:#0b5d43;color:#e6c563;font-weight:700;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;padding:6px 16px;border-radius:30px;margin-bottom:14px;
}

@media (max-width:640px){
  .hrw-home-quote{padding-top:36px;}
  .hrw-home-section{padding:44px 16px;}
  .hrw-home-section-head{margin-bottom:28px;}
}

/* ---------- Features trust strip ---------- */
.hrw-features-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.hrw-feature-card{
  background:#fff;border:1px solid #d5e2dc;border-radius:14px;padding:26px 20px;text-align:center;
  box-shadow:0 3px 12px rgba(11,93,67,.08);
}
.hrw-home-tint .hrw-feature-card{background:#fff;}
.hrw-feature-icon{display:block;font-size:1.9rem;margin-bottom:12px;}
.hrw-feature-card h3{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:1.02rem;margin:0 0 8px;font-weight:700;
}
.hrw-feature-card p{color:var(--muted,#5b6b78);font-size:.9rem;line-height:1.55;margin:0;}

@media (max-width:900px){ .hrw-features-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .hrw-features-grid{grid-template-columns:1fr;} }

/* ---------- Routes grid ----------
 * auto-fit/minmax instead of a fixed column count so any number of cards
 * (7 today, more later) wraps cleanly without an odd lonely card stranded
 * on the last row. Each card gets a colored icon badge + a colored top
 * accent bar so the grid reads as branded, not a flat white block. */
/* Explicit 3 columns rather than auto-fit: with six cards, auto-fit packed
   4 into the first row and left 2 stranded in the second, which read as a
   mistake. 3+3 is balanced at every desktop width. */
.hrw-routes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
@media (max-width:900px){ .hrw-routes-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .hrw-routes-grid{grid-template-columns:1fr;} }
.hrw-route-card{
  display:flex;flex-direction:column;background:#fff;
  /* 2px on every side, in a tone dark enough to stay visible on a phone
     against both the white and the tinted section backgrounds. */
  border:2px solid #cddfd7;border-radius:16px;
  padding:0 0 22px;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  box-shadow:0 4px 14px rgba(11,93,67,.10);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* Gold/green accent bar as a real flex child rather than an absolutely
   positioned ::before — as a ::before it painted over the card's own top
   border, which is why the border looked like it was missing on one side. */
.hrw-route-card-accent{
  display:block;height:5px;width:100%;flex-shrink:0;
  background:linear-gradient(90deg,#0e7a5f 0%,#0b5d43 45%,#d4af37 100%);
}
.hrw-route-card-body{display:flex;flex-direction:column;flex-grow:1;padding:22px 20px 0;}
.hrw-route-card:hover{
  transform:translateY(-4px);box-shadow:0 16px 32px rgba(11,93,67,.18);border-color:#0e7a5f;
}
.hrw-route-card-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
  width:56px;height:56px;border-radius:16px;margin-bottom:16px;font-size:1.6rem;
  background:linear-gradient(135deg,#0e7a5f,#0b5d43);
  box-shadow:0 6px 16px rgba(11,93,67,.30);
  /* Inline SVGs inherit this, so the line art is always white on the green
     tile without needing a fill colour baked into each icon. */
  color:#fff;
}
.hrw-route-card-icon svg{width:34px;height:34px;display:block;}
/* When an owner supplies a real photo instead, it fills the whole tile. */
.hrw-route-card-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.hrw-route-card h3{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:1.08rem;margin:0 0 8px;font-weight:700;line-height:1.35;
}
.hrw-route-card p{color:var(--muted,#5b6b78);font-size:.89rem;line-height:1.6;margin:0 0 20px;flex-grow:1;}
/* Real button treatment, not a bare text link. */
.hrw-route-card-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  align-self:flex-start;margin-top:auto;
  background:#0b5d43;color:#fff;font-weight:700;font-size:.9rem;
  padding:11px 22px;border-radius:9px;
  box-shadow:0 3px 8px rgba(11,93,67,.24);
  transition:background .18s ease,box-shadow .18s ease;
}
.hrw-route-card-cta span{transition:transform .18s ease;}
.hrw-route-card:hover .hrw-route-card-cta{background:#0e7a5f;box-shadow:0 6px 14px rgba(11,93,67,.32);}
.hrw-route-card:hover .hrw-route-card-cta span{transform:translateX(3px);}
@media (max-width:560px){
  /* Full-width tap target on a phone. */
  .hrw-route-card-cta{align-self:stretch;padding:13px 22px;}
}

/* ---------- How it works ---------- */
.hrw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.hrw-step{text-align:center;padding:0 10px;}
.hrw-step-num{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:#0b5d43;color:#fff;font-family:'Poppins',system-ui,sans-serif;font-weight:700;
  font-size:1.05rem;margin:0 auto 16px;
}
.hrw-step h3{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:1rem;margin:0 0 8px;font-weight:700;
}
.hrw-step p{color:var(--muted,#5b6b78);font-size:.88rem;line-height:1.55;margin:0;}

@media (max-width:900px){ .hrw-steps{grid-template-columns:1fr 1fr;row-gap:32px;} }
@media (max-width:560px){ .hrw-steps{grid-template-columns:1fr;} }

/* ---------- SEO content block ---------- */
.hrw-seo-content{max-width:820px;margin:0 auto;}
.hrw-seo-content h2{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 18px;font-weight:700;text-align:center;
}
.hrw-seo-content p{color:#41504a;font-size:.98rem;line-height:1.8;margin:0 0 16px;}
.hrw-seo-content p:last-child{margin-bottom:0;}
.hrw-seo-content strong{color:var(--navy,#0b5d43);}

/* ---------- Rate list page ([haramain_rate_page]) ---------- */
.hrw-rate-page .hrw-home-quote{padding-top:36px;padding-bottom:44px;}
.hrw-rate-facts{padding-top:40px;padding-bottom:40px;}
.hrw-facts-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
}
.hrw-fact{
  display:flex;align-items:flex-start;gap:13px;
  background:#fff;border:1px solid #d5e2dc;border-radius:13px;padding:16px 18px;
  box-shadow:0 2px 9px rgba(11,93,67,.06);
}
.hrw-fact-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:11px;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0e7a5f,#0b5d43);
}
.hrw-fact h3{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:.94rem;margin:0 0 4px;font-weight:700;line-height:1.3;
}
.hrw-fact p{color:var(--muted,#5b6b78);font-size:.84rem;line-height:1.55;margin:0;}

@media (max-width:640px){
  .hrw-rate-facts{padding-top:30px;padding-bottom:30px;}
  .hrw-facts-grid{grid-template-columns:1fr;gap:11px;}
  .hrw-rate-page .hrw-home-quote{padding-top:28px;padding-bottom:34px;}
}

/* ---------- Pricing FAQ accordion ([haramain_rate_faq]) ----------
 * Colours are pinned with !important across every state on purpose. Many
 * WordPress themes repaint buttons on `button:focus`, and on a phone a TAP
 * matches :focus (not :focus-visible) — which previously left a dark theme
 * background sitting under dark text and made tapped questions unreadable.
 * Pinning every state here means no theme rule can reproduce that. */
.hrw-pfaq{font-family:'Inter',system-ui,sans-serif;max-width:860px;margin:0 auto;}
.hrw-pfaq,.hrw-pfaq *{box-sizing:border-box;}
.hrw-pfaq-heading{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43) !important;
  font-size:clamp(1.4rem,3.2vw,1.95rem);font-weight:700;text-align:center;margin:0 0 28px;
}
.hrw-pfaq-list{display:flex;flex-direction:column;gap:12px;}
.hrw-pfaq-item{
  background:#fff !important;border:1.5px solid #d5e2dc;border-radius:12px;overflow:hidden;
  box-shadow:0 3px 12px rgba(11,93,67,.07);
}
.hrw-pfaq-q,
.hrw-pfaq-q:hover,
.hrw-pfaq-q:focus,
.hrw-pfaq-q:focus-visible,
.hrw-pfaq-q:active,
.hrw-pfaq-item.is-open .hrw-pfaq-q{
  color:#0b5d43 !important;border:none !important;box-shadow:none !important;
  text-shadow:none !important;opacity:1 !important;
}
.hrw-pfaq-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  text-align:left;background-color:#fff !important;cursor:pointer;
  padding:17px 19px;font-size:1rem;font-weight:600;font-family:inherit;
  -webkit-appearance:none;appearance:none;outline:none;
  -webkit-tap-highlight-color:transparent;
  /* Themes commonly ship `button{white-space:nowrap}`, which would force a
     long question onto one line and clip it inside the card. */
  white-space:normal !important;
}
.hrw-pfaq-q:hover,
.hrw-pfaq-q:focus,
.hrw-pfaq-q:focus-visible,
.hrw-pfaq-item.is-open .hrw-pfaq-q{background-color:#f7faf8 !important;}
.hrw-pfaq-q:active{background-color:#eaf2ee !important;}
.hrw-pfaq-qtext{
  flex:1 1 auto;min-width:0;white-space:normal !important;
  overflow-wrap:break-word;line-height:1.45;color:#0b5d43 !important;
}
.hrw-pfaq-num{color:#d4af37 !important;font-weight:700;margin-right:9px;}
.hrw-pfaq-icon{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:#eef3f0 !important;color:#0b5d43 !important;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;font-weight:700;margin-top:1px;
  transition:background .2s ease,color .2s ease;
}
.hrw-pfaq-item.is-open .hrw-pfaq-icon{background:#0e7a5f !important;color:#fff !important;}
.hrw-pfaq-a-wrap{max-height:0;overflow:hidden;transition:max-height .3s ease;background-color:#fff !important;}
.hrw-pfaq-a{padding:0 19px 18px;}
.hrw-pfaq-a p{color:#41504a !important;font-size:.93rem;line-height:1.75;margin:0;}

@media (max-width:560px){
  .hrw-pfaq-q{padding:15px 15px;font-size:.94rem;}
  .hrw-pfaq-a{padding:0 15px 16px;}
  .hrw-pfaq-a p{font-size:.89rem;}
}

/* Accent word inside a section heading on a LIGHT background (route pages).
   Deliberately a deeper gold than the hero's #e6c563: that lighter tone is
   tuned for the dark green hero and would fail contrast on white. This one
   measures ~4.9:1 against white, so it passes WCAG AA for normal text as
   well as headings. */
.hrw-route-intro h2 .hrw-accent,
.hrw-home-section-head h2 .hrw-accent{color:#8a6d10;}

/* ---------- Related-page links under a route's rates ----------
 * Internal linking between the routes people actually pair up (the return
 * leg, the Ziyarah tour at the destination, the rate list). Good for
 * visitors, and it spreads page authority around the site instead of
 * leaving each route page as a dead end. */
.hrw-related{
  margin:30px auto 0;max-width:760px;
  background:#f4f9f6;border:1px solid #dceae3;border-radius:14px;padding:20px 22px;
}
.hrw-related-title{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:1rem;font-weight:700;margin:0 0 12px;
}
.hrw-related ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.hrw-related li{margin:0;}
.hrw-related a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border:1px solid #d5e2dc;border-radius:10px;
  padding:12px 15px;text-decoration:none;color:#0b5d43;font-weight:600;font-size:.92rem;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.hrw-related a:hover{border-color:#0e7a5f;box-shadow:0 5px 14px rgba(11,93,67,.14);transform:translateY(-1px);}
.hrw-related-arrow{color:#d4af37;font-weight:700;flex-shrink:0;}
.hrw-related a:hover .hrw-related-arrow{color:#0e7a5f;}

@media (max-width:560px){
  .hrw-related{padding:16px;border-radius:12px;margin-top:24px;}
  .hrw-related a{padding:12px 13px;font-size:.88rem;}
}

/* ---------- Blog cards ([haramain_blog]) ---------- */
.hrw-blog{font-family:'Inter',system-ui,sans-serif;max-width:1180px;margin:0 auto;}
.hrw-blog,.hrw-blog *{box-sizing:border-box;}
.hrw-blog-heading{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:clamp(1.4rem,3.2vw,1.95rem);font-weight:700;text-align:center;margin:0 0 28px;
}
.hrw-blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.hrw-blog-card{
  display:flex;flex-direction:column;background:#fff;
  border:2px solid #cddfd7;border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:0 4px 14px rgba(11,93,67,.10);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hrw-blog-card:hover{transform:translateY(-4px);border-color:#0e7a5f;box-shadow:0 16px 32px rgba(11,93,67,.18);}
.hrw-blog-media{display:block;aspect-ratio:16/9;background:#eef3f0;overflow:hidden;}
.hrw-blog-media img{width:100%;height:100%;object-fit:cover;display:block;}
.hrw-blog-body{display:flex;flex-direction:column;flex-grow:1;padding:18px 18px 20px;}
.hrw-blog-card h3{
  font-family:'Poppins',system-ui,sans-serif;color:var(--navy,#0b5d43);
  font-size:1.02rem;font-weight:700;line-height:1.4;margin:0 0 8px;
}
.hrw-blog-card p{color:var(--muted,#5b6b78);font-size:.88rem;line-height:1.6;margin:0 0 16px;flex-grow:1;}
.hrw-blog-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  color:#0b5d43;font-weight:700;font-size:.88rem;
}
.hrw-blog-card:hover .hrw-blog-more span{transform:translateX(3px);}
.hrw-blog-more span{transition:transform .18s ease;}
.hrw-blog-all{text-align:center;margin:24px 0 0;}
.hrw-blog-all a{color:#0b5d43;font-weight:700;text-decoration:none;font-size:.95rem;}
.hrw-blog-all a:hover{text-decoration:underline;}

@media (max-width:560px){
  .hrw-blog-grid{grid-template-columns:1fr;gap:14px;}
  .hrw-blog-card{border-radius:14px;}
}