/* ===== Base, tokens ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}

:root{
  --ink:#0B1220; --ink-2:#1F2937; --paper:#FAFAF8; --line:#E5E7EB;
  --accent:#E7A623; --accent-ink:#2D1F00;
  --surface:#FFFFFF; --alt:#F6F8FB;

  --radius-12:12px; --radius-14:14px; --radius-16:16px; --radius-18:18px;
  --shadow-sm:0 4px 10px rgba(2,6,23,.08);
  --shadow-md:0 10px 22px rgba(2,6,23,.12);
  --shadow-lg:0 18px 40px rgba(2,6,23,.16);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;

  --hero-img:url('https://halconcaravans.com/assets/img/hero/home-bg.png');

  --hero-ratio: 3042/1309;   /* set to that page’s hero W/H */
  --hero-panel-w: 48%;
  --hero-panel-top: 12%;
  --hero-panel-left: 6%;
}

body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:var(--ink-2);background:var(--paper);line-height:1.6}
h1,h2,h3,h4{color:var(--ink);margin:0 0 var(--space-2);font-family:'Merriweather',serif}
h2{font-size:clamp(24px,2.4vw,36px)} h3{font-size:clamp(18px,1.6vw,24px)}
p{margin:0 0 var(--space-2)} small{color:#cbd5e1}
.hc-container{width:min(1280px,94vw);margin-inline:auto}
.hc-center{text-align:center}
.hc-lead{color:#475569;font-size:1.05rem}
.hc-section{padding:clamp(48px,8vw,96px) 0;background:var(--surface)}
.hc-section--alt{background:var(--alt)}
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .7s,transform .7s}
.fade-in.is-visible{opacity:1;transform:translateY(0)}

/* ===== Header ===== */
.hc-header{position:sticky;top:0;z-index:50;background:#0c1422;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.header-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 20px}
.hc-logo img{height:56px;width:auto}
.hc-nav{justify-self:end}
.hc-nav__links{list-style:none;display:flex;align-items:center;gap:10px;margin:0;padding:0}
.hc-nav__links a{display:inline-flex;align-items:center;height:44px;padding:0 12px;border-radius:12px;color:#fff;font-weight:700;font-size:.98rem;transition:background .2s}
.hc-nav__links a:hover{background:rgba(255,255,255,.12)}
.hc-nav__links a.is-active{background:rgba(255,255,255,.18)}
.login-slot{margin-left:6px}
.login-btn{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
.hc-header .hc-container{width:100%;max-width:100vw;margin:0;padding-inline:clamp(8px,2vw,20px)}
.hc-burger{display:none;width:44px;height:44px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:12px;align-items:center;justify-content:center;cursor:pointer}
.hc-burger span{display:block;width:22px;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.hc-burger.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hc-burger.is-active span:nth-child(2){opacity:0}
.hc-burger.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hc-mobile{display:none;background:#0c1422;border-top:1px solid rgba(255,255,255,.1)}
.hc-mobile.open{display:block}
.hc-mobile__nav{width:min(100%,1000px);margin:0 auto;padding:14px 4vw 24px}
.hc-mobile__nav ul{list-style:none;padding:8px 0 14px;margin:0;display:grid;gap:6px}
.hc-mobile__nav a{color:#fff;font-weight:600;font-size:1rem;padding:10px 12px;border-radius:10px;display:block}
@media (max-width:1080px){.hc-nav__links{display:none}.hc-burger{display:inline-flex}}
@media (min-width:1081px){.hc-mobile{display:none !important}}

/* ===== Hero (desktop baseline) ===== */
.hc-hero{
  position:relative;color:#f9fafb;
  min-height:clamp(560px,78vh,880px);
  display:grid;align-items:end;
  background-image:var(--hero-img);
  background-size:cover;background-position:center;
}
@media (min-width:1025px){.hc-hero{background-attachment:fixed}}
.hc-hero__content{position:relative;padding:min(9vh,96px) 0}
.hc-hero__panel{max-width:760px;padding:var(--space-5);background:rgba(11,18,32,.55);border-radius:16px;box-shadow:var(--shadow-md);backdrop-filter:blur(2px)}
.hc-hero__title{font-size:clamp(22px,3.2vw + 6px,36px);color:#fff}
.hc-hero__sub{color:#e5e7eb;font-size:clamp(14px,1vw + 10px,18px);margin-bottom:var(--space-3)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;padding:10px 16px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.hc-btn--primary{background:var(--accent);color:var(--accent-ink)}
.hc-btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.hc-btn--light:hover{background:rgba(255,255,255,.1)}

/* ===== Why Halcon (smaller line icons) ===== */
.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1024px){.about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.about-grid{grid-template-columns:1fr}}
.about-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px;display:grid;grid-template-rows:auto auto 1fr;justify-items:center;text-align:center;gap:10px}
.about-rect{width:min(88%,520px);height:clamp(96px,18vw,140px);border-radius:16px;display:grid;place-items:center;border:1px solid #dbe2ff;box-shadow:var(--shadow-sm);background:#f5f7ff}
.about-svg{width:clamp(40px,26%,60px);height:auto;stroke:#000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;fill:none;display:block;margin-inline:auto}
.rect--blue{background:#f5f7ff;border-color:#DBEAFE}
.rect--green{background:#f5f7ff;border-color:#D1FAE5}
.rect--violet{background:#f5f7ff;border-color:#E9D5FF}
.rect--teal{background:#f5f7ff;border-color:#CFFAFE}
.rect--rose{background:#f5f7ff;border-color:#FFE4E6}

/* ===== Services ===== */
.services-v2{position:relative;overflow:hidden}
.services-v2__bg{position:absolute;inset:-10% -10% auto -10%;height:80%;background:
  radial-gradient(closest-corner at 25% 25%, rgba(231,166,35,.14), transparent 60%),
  radial-gradient(closest-corner at 85% 35%, rgba(37,99,235,.10), transparent 65%);filter:blur(42px);pointer-events:none}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:1024px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:24px 18px;display:grid;grid-template-rows:auto auto 1fr;justify-items:center;text-align:center;transition:transform .2s, box-shadow .2s, border-color .2s}
.svc-card:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--line)}
.svc-badge{width:84px;height:84px;border-radius:20px;display:grid;place-items:center;background:#eef2ff;border:1px solid #c7d2fe;color:#1d4ed8;margin-bottom:10px}
.svc-badge .ico{width:40px;height:40px}
.svc-card h3{margin:6px 0 4px}
.svc-card p{margin:0;color:#475569}

/* ===== Cards, grids ===== */
.hc-grid{display:grid;gap:22px}
.hc-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.hc-grid--three{grid-template-columns:1fr}}
.hc-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:var(--space-4);box-shadow:var(--shadow-sm)}
.ratio-16x9{position:relative;padding-top:56.25%;overflow:hidden;border-radius:12px;background:#f1f5f9}
.ratio-16x9>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d1d5db}
.hc-btn:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* ===== Explore carousel (arrows + dots; 4-up desktop) ===== */
.explore-stage{position:relative;overflow:visible;padding-inline:0;--rail-gap:22px}
.explore-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:1px solid var(--line);background:#fff;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.journeys-prev{left:-24px}.journeys-next{right:-24px}
.explore-arrow[disabled]{opacity:.4;cursor:default}
.explore-arrow:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.cat-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,360px);gap:var(--rail-gap);overflow-x:auto;padding:4px 2px;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-grid::-webkit-scrollbar{display:none}
@media (min-width:1024px){.cat-grid{grid-auto-columns:calc((100% - (var(--rail-gap) * 3)) / 4)}}
.cat-tile{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);display:block}
.cat-tile span{display:block;padding:12px 14px;font-weight:700;color:#0f172a}
.cat-tile img{transition:transform .35s}
.cat-tile:hover img{transform:scale(1.05)}
.explore-dots{display:flex;justify-content:center;gap:10px;margin-top:12px}
.explore-dot{width:8px;height:8px;border-radius:999px;background:#e5e7eb;transition:transform .18s,background .18s;border-width:0}
.explore-dot.is-active{background:#000;transform:scale(1.15)}
.journey-modal{display:none !important}
.region-name{text-align:center;font-weight:100}
@media (max-width:420px){.journeys-prev{left:6px}.journeys-next{right:6px}}

/* ===== Founders ===== */
.founders-circle{background:linear-gradient(180deg,#fff,#f7fafc)}
.fx-circle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}
@media (max-width:1024px){.fx-circle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fx-circle{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px;text-align:left}
.fx-circle h3{margin:4px 0 6px}

/* ===== Forms ===== */
.hc-form{background:#fff;border:1px solid var(--line);margin-top:30px;border-radius:16px;padding:var(--space-4);box-shadow:var(--shadow-sm)}
.hc-form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.hc-form label{display:grid;gap:6px;font-weight:600;color:#1f2937}
.hc-form input,.hc-form select,.hc-form textarea{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:10px;background:#fff}
.hc-form input:focus,.hc-form select:focus,.hc-form textarea:focus{outline:2px solid #bfdbfe;border-color:#60a5fa}
.hc-contact-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ===== Footer ===== */
.hc-footer{background:#0b1220;color:#cbd5e1}
.hc-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:22px;padding:28px 0}
@media (max-width:1024px){.hc-footer__grid{grid-template-columns:1fr 1fr}}
.hc-footer__grid h4{color:#e2e8f0;margin-bottom:8px}
.hc-footer__grid ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.footer-logo{width:160px;height:auto;opacity:.95}
.footer-nav-headings{font-size: 13px;}
.footer-contact .contact-card{font-size:13px;padding:12px;border-left:4px solid var(--accent);background:rgba(255,255,255,.06);border-radius:12px}
.footer-contact ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer-contact li{display:flex;align-items:center;gap:10px}
.footer-contact .ico{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.12);color:#fff}
.hc-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding:12px 0;text-align:center}

/* Footer socials spacing */
.hc-footer .hc-social{display:flex;gap:10px;align-items:center}
.hc-footer .hc-social a{display:inline-grid;place-items:center}

/* ===== MOBILE: final, unified rules ===== */

/* Changes */


/* ==== FOOTER on mobile (≤560px): 2×2 grid, phones stacked ==== */
@media (max-width: 560px){
  .hc-footer__grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand  social"
      "nav    contact";
    column-gap: 16px;
    row-gap: 18px;
  }
  .hc-footer__brand{ grid-area: brand; }
  /* Your footer HTML order is: brand, navigate, social, contact (per file) */
  .hc-footer__grid > div:nth-child(2){ grid-area: nav; }     /* Navigate */
  .hc-footer__grid > div:nth-child(3){ grid-area: social; }  /* Social   */
  .footer-contact{ grid-area: contact; }

  /* Contact → 2nd li is phone row */
  .footer-contact ul li:nth-child(2){
    display: grid;
    grid-template-columns: auto 1fr; /* [icon] [numbers] */
    column-gap: 10px;
    align-items: start;
    font-size: 0;                    /* hide the literal " | " divider node */
  }
  .footer-contact ul li:nth-child(2) .ico{ grid-column: 1; }
  .footer-contact ul li:nth-child(2) a{
    grid-column: 2;
    display: block;
    font-size: 13px;                 /* restore text size */
    white-space: nowrap;             /* keep +91 with number */
  }

  /* make sure the icon shows even if FA fails to load once */
  .footer-contact .ico{ width: 26px; height: 26px; display: grid; place-items: center; }
  .footer-contact .ico i{ font-size: 14px; }
}


.hc-header{ position: sticky; top: 0; z-index: 1000; }
.hc-hero, .hc-hero__content, .hc-hero__panel{ z-index: 0; }


/* ========== PHONE LAYOUT IMPROVEMENTS (append at end of home.css) ========== */

/* 1) Middle sections get horizontal padding on phones (hero/header/footer stay full-bleed) */
@media (max-width: 640px){
  .hc-section > .hc-container{ padding-inline: clamp(14px, 4vw, 24px); }
}

/* 2) HERO on phones (≤640px): keep full image AND scale the dark panel with it */
@media (max-width: 640px){
  .hc-hero{
    /* show entire image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;

    /* make the section height follow the image’s aspect ratio (you already set --hero-ratio in <head>) */
    aspect-ratio: var(--hero-ratio, 16/9);
    height: auto;
    min-height: 0;

    position: relative;
    display: block;
    z-index: 0; /* header should stay above */
  }
  .hc-hero__content{
    position: absolute; /* panel sits ON the image */
    inset: 0;
    padding: 0;         /* desktop padding would make the panel drift */
  }
  .hc-hero__panel{
    position: absolute;

    /* keep the same composition as desktop by using percentages */
    top:  var(--hero-panel-top, 12%);
    left: var(--hero-panel-left, 6%);
    width: var(--hero-panel-w, 48%); /* panel scales with the hero width */
    max-width: none;

    /* paddings/rounding scale too, so the panel looks like part of the poster */
    padding: clamp(10px, 2.6vw, 14px);
    border-radius: 12px;
  }

  /* scale type so the panel remains readable and proportional */
  .hc-hero__title{ font-size: clamp(16px, 4.2vw, 22px); }
  .hc-hero__sub{   font-size: clamp(12px, 3.2vw, 16px); margin-bottom: clamp(8px, 2.4vw, 12px); }
  .hero-cta .hc-btn{
    padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 12px);
    font-size: clamp(12px, 3.2vw, 14px);
    border-radius: 10px;
  }
}

/* 3) FOOTER polish on phones (≤560px): keep 2×2 grid; align headings; unify font sizes; stack phones cleanly */
@media (max-width: 560px){
  /* you already set the 2×2 grid earlier — we keep that and refine contents */
  .hc-footer__grid{
    align-items: start;          /* ensure every cell starts at same top line */
  }
  .hc-footer__grid > div > h4{
    margin: 0 0 10px;            /* identical spacing for all column headings */
    line-height: 1.2;
  }
  /* Make Navigate links and Contact text the same size for consistency */
  .hc-footer__grid ul li,
  .footer-contact .contact-card{ font-size: 13px; }

  /* Phones on separate lines, aligned under the icon */
  .footer-contact ul li:nth-child(2){
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: start;
    font-size: 0;                /* hides the literal " | " text node */
  }
  .footer-contact ul li:nth-child(2) .ico{ grid-column: 1; }
  .footer-contact ul li:nth-child(2) a{
    grid-column: 2;
    display: block;
    font-size: 13px;
    white-space: nowrap;
    
  }
}

/* 4) Header always clickable above hero (desktop & mobile) */
.hc-header{ position: sticky; top: 0; z-index: 1000; }
.hc-hero, .hc-hero__content, .hc-hero__panel{ z-index: 0; }

/* ==== PHONE HERO: image + dark panel scale together (≤640px) ==== */
@media (max-width: 640px){
  .hc-hero{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;

    aspect-ratio: var(--hero-ratio, 16/9);
    height: auto;
    min-height: 0;

    position: relative;
    display: block;
    z-index: 0;
  }
  .hc-hero__content{
    position: absolute; inset: 0; padding: 0;
  }
  .hc-hero__panel{
    position: absolute;
    top:  var(--hero-panel-top, 12%);
    left: var(--hero-panel-left, 6%);
    width: var(--hero-panel-w, 48%);   /* << scales with hero width */
    max-width: none;
    padding: clamp(10px, 2.6vw, 14px);
    border-radius: 12px;
  }
  .hc-hero__title{ font-size: clamp(16px, 4.2vw, 22px); font-weight:600 !important;}
  .hc-hero__sub{   font-size: clamp(12px, 3.2vw, 16px); margin-bottom: clamp(8px, 2.4vw, 12px); }
  .hero-cta .hc-btn{
    padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 12px);
    font-size: clamp(12px, 3.2vw, 14px);
    border-radius: 10px;
  }
}

/* Phone content padding for middle sections (hero/header/footer stay full-bleed) */
@media (max-width: 640px){
  .hc-section > .hc-container{ padding-inline: clamp(14px, 4vw, 24px); }
}

/* Header always above hero, click-safe */
.hc-header{ position: sticky; top: 0; z-index: 1000; }
.hc-hero, .hc-hero__content, .hc-hero__panel{ z-index: 0; }


/* ——— CRITICAL: on phones, let the overlay layer be full-width of the hero ——— */
@media (max-width: 640px){
  .hc-hero__content{
    /* Kill the .hc-container width cap (min(1280px, 94vw)) */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}


/* Edge-to-edge media inside cards (Home → “Meet Our Family of Caravans”) */
.hc-card .hc-card__thumb{
  /* Let the media block extend to the card’s edge, keep a small gap below */
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 12px;
  border-radius: 16px 16px 0 0;   /* top corners rounded to match the card */
  overflow: hidden;               /* clip the image to the rounded corners */
}

/* Your ratio wrapper already handles cover; this keeps it consistent */
.hc-card .ratio-16x9>img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* Home → Explore India with Halcon: make tile images edge-to-edge */
#journeys .cat-tile{
  padding: 0;                /* no inner padding */
  overflow: hidden;          /* clip to rounded card */
}
#journeys .cat-tile .ratio-16x9{
  margin: 0;                 /* remove UA default figure margins */
  display: block;
  border-radius: 0;          /* image can fill; card already has rounding */
}
#journeys .cat-tile .ratio-16x9 > img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ensure full bleed crop */
}

/* ===================== HERO: Tablet poster mode (iPad and similar) ===================== */
/* Show FULL image (no crop) and scale the dark panel with it on tablets too. */
@media (max-width: 1180px){
  .hc-hero{
    /* Poster behavior */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;

    /* Keep the hero height tied to the image ratio you set in :root / <style> */
    aspect-ratio: var(--hero-ratio, 16/9);
    height: auto;
    min-height: 0;

    position: relative;
    display: block;
    z-index: 0;
  }

  /* Make the overlay layer match the hero width (so % math lines up) */
  .hc-hero__content{
    position: absolute;
    inset: 0;
    padding: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Scale/position panel by percentages, same as phones */
  .hc-hero__panel{
    position: absolute;
    top:  var(--hero-panel-top, 12%);
    left: var(--hero-panel-left, 6%);
    width: var(--hero-panel-w-tablet, var(--hero-panel-w, 48%));
    max-width: none;
    padding: clamp(12px, 2.2vw, 18px);
    border-radius: 12px;
  }

  /* Type that scales comfortably on tablets */
  .hc-hero__title{ font-size: clamp(18px, 2.4vw + 6px, 28px); }
  .hc-hero__sub{   font-size: clamp(13px, 1.4vw + 8px, 18px); margin-bottom: clamp(8px, 1.6vw, 14px); }
  .hero-cta .hc-btn{
    padding: clamp(8px, 1.4vw, 12px) clamp(12px, 2.2vw, 18px);
    font-size: clamp(13px, 1.6vw, 16px);
    border-radius: 12px;
  }
}

/* Keep header always clickable above hero */
.hc-header{ position: sticky; top: 0; z-index: 1000; }
.hc-hero, .hc-hero__content, .hc-hero__panel{ z-index: 0; }

/* ================= WHAT WE OFFER (icon left, no border/pill) ================= */
/* Targets only the Services section on Home (id="services") */
#services .svc-grid{ align-items: start; }

#services .svc-card{
  /* switch from centered stack to media-object layout */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon body";
  column-gap: 14px;
  row-gap: 6px;

  /* make text align naturally for fast scanning */
  justify-items: start;
  text-align: left;
  padding: 18px;
}

/* icon wrapper: remove pill/border; keep crisp, scalable glyph */
#services .svc-badge{
  grid-area: icon;
  width: clamp(28px, 2.6vw + 18px, 36px);
  height: clamp(28px, 2.6vw + 18px, 36px);
  margin: 0;

  display: grid;
  place-items: center;

  background: transparent;     /* kill the blue pill */
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: #1f2937;              /* neutral-800 for the glyph */
}

/* svg icon scales with the badge */
#services .svc-badge .ico{
  width: clamp(18px, 1.6vw + 10px, 22px);
  height: clamp(18px, 1.6vw + 10px, 22px);
}

/* title + body flow to the right of the icon */
#services .svc-card h3{
  grid-area: title;
  margin: 0;
  line-height: 1.25;
  font-weight: 500;
}
#services .svc-card p{
  grid-area: body;
  margin: 6px 0 0;
  color: #475569;
}

/* small-screen polish: keep spacing breathable */
@media (max-width: 640px){
  #services .svc-card{ padding: 16px; column-gap: 12px; }
}

/* large screens still look tight and premium */
@media (min-width: 1280px){
  #services .svc-card{ padding: 20px; column-gap: 16px; }
}


/* ===== HERO: base (large desktop ≥1280px) ===== */
.hc-hero__panel{
  /* keep your existing position if you already set it in % */
  /* example defaults – adjust if yours differ */
  top: 8%;
  left: 8%;
  width: 58%;
  padding: 22px;
  border-radius: 14px;
}
.hc-hero__title{ font-size: 36px; line-height: 1.4; }
.hc-hero__sub{   font-size: 18px; line-height: 1.5; }
.hero-cta .hc-btn{
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 12px;
}

/* ===== Desktop / small laptop (900–1279px) ===== */
@media (max-width: 1279px){
  .hc-hero__panel{
    width: 58%;
    top: 11%;
    left: 7%;
    padding: 18px;
    border-radius: 12px;
  }
  .hc-hero__title{ font-size: 28px; }
  .hc-hero__sub{   font-size: 14px; }
  .hero-cta .hc-btn{
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 10px;
  }
}

/* ===== Tablet (600–899px) ===== */
@media (max-width: 899px){
  .hc-hero__panel{
    width: 58%;
    top: 10%;
    left: 6%;
    padding: 16px;
    border-radius: 12px;
  }
  .hc-hero__title{ font-size: 20px; }
  .hc-hero__sub{   font-size: 14px; }
   .hero-cta .hc-btn{
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 8px;
  }
}

/* ===== Phones (≤599px) ===== */
@media (max-width: 599px){
  .hc-hero__panel{
    width: 68%;
    top: 6%;
    left: 6%;
    padding: 5px;
    border-radius: 10px;
  }
  .hc-hero__title{ font-size: 14px; }
  .hc-hero__sub{   font-size: 10px; }
  /* you asked to remove buttons on small devices */
  .hero-cta{ display: none; }
}

/* (Nice-to-have) slightly tighten title on very narrow phones */
@media (max-width: 380px){
  .hc-hero__title{ font-size: 16px; }
}

/* === CONSISTENT BOTTOM-LEFT ANCHOR FOR HERO PANEL (ALL BREAKPOINTS) === */

/* 1) Variables you can tune per page (optional) */
:root{
  --hero-panel-left: 6%;     /* horizontal offset from the left edge of the image */
  --hero-panel-bottom: 8%;   /* vertical offset from the bottom edge of the image */
}

/* 2) Make the overlay a true, full-width layer of the hero */
.hc-hero{ position: relative; }
.hc-hero__content{
  position: absolute; inset: 0;        /* overlay spans entire hero */
  width: 100% !important; max-width: none !important; margin: 0 !important; /* kill container cap */
  padding: 0;                           /* prevent drift from extra padding */
}

/* 3) Anchor the panel from the bottom-left on ALL screens */
.hc-hero__panel{
  position: absolute;
  left: var(--hero-panel-left);
  bottom: var(--hero-panel-bottom);
  top: auto;                             /* stop any earlier 'top' from applying */
}

/* 4) Keep your per-device sizes (you asked for fixed typography) */
@media (min-width:1280px){
  .hc-hero__panel{ width: 58%; padding: 22px; border-radius: 14px; }
  .hc-hero__title{ font-size: 32px; line-height: 1.2; font-weight:600 !important;line-height: 1.6;}
  .hc-hero__sub{   font-size: 18px; line-height: 1.5; }
}

@media (max-width:1279px){
  .hc-hero__panel{ width: 55%; padding: 18px; }
  .hc-hero__title{ font-size: 24px; font-weight:400 !important; line-height: 1.4;}
  .hc-hero__sub{   font-size: 14px; }
}

@media (max-width:899px){
  .hc-hero__panel{ width: 65%; padding: 16px; }
  .hc-hero__title{ font-size: 22px; font-weight:400 !important; line-height: 1.4;}
  .hc-hero__sub{   font-size: 12px; }
}

@media (max-width:599px){
  .hc-hero__panel{ width: 65%; padding: 12px; }
  .hc-hero__title{ font-size: 14px; font-weight:300 !important; line-height: 1.4;}
  .hc-hero__sub{   font-size: 10px; }
  .hero-cta{ display:none; } /* no CTAs on small phones */
}

@media (max-width:499px){
  .hc-hero__panel{ width: 65%; padding: 12px; }
  .hc-hero__title{ font-size: 11px; font-weight:200 !important; line-height: 1.5;}
  .hc-hero__sub{   font-size: 9px; }
  .hero-cta{ display:none; } /* no CTAs on small phones */
}


/* ==== Icon-left heading row (shared) ==== */
.card-head{
  display:flex; align-items:center; gap:10px;
  margin:0 0 6px; line-height:1.25;
}
.card-head h3{ margin:0; font-weight:700; }

/* Icon size keeps perfect alignment across devices */
.card-head .head-ico,
.card-head .hb-ico{
  width:22px; height:22px; flex:0 0 22px; display:inline-block;
  color:#000 !important;
}
.card-head .head-ico svg,
.card-head .hb-ico svg{ width:100%; height:100%; display:block; }

/* Tighten cards that used big icon boxes before */
.about-card{ text-align:left; justify-items:start; }
.about-card p{ margin-top:2px; }

/* Remove the big framed icon blocks when we convert those cards */
.about-card .about-rect{ display:none !important; }

/* Tablet/phone: keep line-up */
@media (max-width: 640px){
  .card-head{ gap:8px; }
  .card-head .head-ico, .card-head .hb-ico{ width:20px; height:20px; }
}

/* Phones: 1 card per row across all home grids */
@media (max-width: 640px){
  .about-grid,
  .svc-grid,
  .hc-grid--three,
  .fx-circle-grid{
    grid-template-columns: 1fr !important;
  }
}


/* Phones: 1 card per row across About page grids */
@media (max-width: 899px){
  .apart-grid,
  .pillars-grid,
  .who-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ==== Global responsive type scale + unified card headings (site-wide) ==== */
:root{
  /* Adjust once, all pages inherit */
  --fs-h1: clamp(28px, 3.2vw + 6px, 36px);
  --fs-h2: clamp(22px, 2.2vw, 30px);
  --fs-h3: clamp(16px, 1.4vw, 20px);
}

/* Make all headings scale from the same tokens */
h1{ font-size: var(--fs-h1); line-height: 1.18; }
h2{ font-size: var(--fs-h2); line-height: 1.22; }
h3{ font-size: var(--fs-h3); line-height: 1.25; }

/* One consistent style for ALL card titles across sections/pages */
.hc-card h3,
.about-card h3,
.svc-card h3,
.fx-circle h3,
.rvs-card h3,
.hb-card h3 {
  font-size: var(--fs-h3);
  margin: 6px 0 4px;
  font-weight: 500;         /* strong but not shouting */
}




/* ==== Equal-height cards across grids ==== */

/* Generic: make direct grid children stretch to the same height */
.about-grid,
.svc-grid,
.fx-circle-grid,
.hc-grid { align-items: stretch; }

/* Make cards fill the available track height */
.hc-card,
.about-card,
.svc-card,
.fx-circle {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Keep text spacing tidy and allow footers/links to sit at bottom if needed */
.hc-card p:last-child,
.about-card p:last-child,
.svc-card p:last-child,
.fx-circle p:last-child { margin-bottom: 0; }

/* Specific: Founding Explorers Circle on Home */
.fx-circle-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
@media (max-width:1024px){ .fx-circle-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .fx-circle-grid{ grid-template-columns: 1fr; } }

/* Visually consistent padding + shadow (keeps your current look) */
.fx-circle{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  padding:18px;
}


@media (max-width:640px){
  .about-grid{ grid-template-columns: 1fr !important; }
  .svc-grid{ grid-template-columns: 1fr !important; }
  .hc-grid--three{ grid-template-columns: 1fr !important; }
  .fx-circle-grid{ grid-template-columns: 1fr !important; }
}



/* Base desktop (already fine) */
.card h3 {
  font-size: clamp(1.25rem, 1.1vw + 1rem, 1.75rem); /* 20–28px */
  font-weight: 600; /* semi-bold */
  line-height: 1.3;
}

.card p {
  font-size: clamp(0.9rem, 0.8vw + 0.5rem, 1.125rem); /* 14–18px */
  font-weight: 400; /* normal */
  line-height: 1.5;
}

/* Medium screens (≤900px) */
@media (max-width: 900px){
  .card h3 { font-size: 1.2rem; font-weight: 600; }
  .card p  { font-size: 0.95rem; }
}

/* Small screens (≤600px) */
@media (max-width: 600px){
  .card h3 { font-size: 1.05rem; font-weight: 500; }
  .card p  { font-size: 0.85rem; }
}

/* === Header nav: lighter weight + nudge right (desktop only) === */
@media (min-width: 1081px){
  /* make links less “heavy” and a touch smaller */
  .hc-nav__links a{
    font-weight: 500;            /* was 700 */
    font-size: 0.94rem;          /* was ~0.98rem */
  }
  .hc-nav__links{ gap: 8px; }    /* was 10px (slightly tighter) */

  /* move the whole nav a bit to the right edge */
  .hc-nav{ padding-right: clamp(8px, 2.2vw, 24px); }
}



/* Alt section: slightly darker version of #F6F8FB */
:root { --alt: #E5E7E9; }        /* try 7% darker first */
.hc-section--alt { background: var(--alt) !important; }


/* ==== WHAT WE OFFER: perfect icon–heading alignment on all screens ==== */
#services .svc-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "icon title"
    "body body";             /* body spans both columns below */
  column-gap:6px;
  row-gap:6px;
  align-items:center;        /* center icon + title vertically in row 1 */
}

#services .svc-badge{
  grid-area:icon;
  width:clamp(22px, 2vw + 14px, 28px);
  height:clamp(22px, 2vw + 14px, 28px);
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
  color:#1f2937;         /* lock to the heading’s center */
}

#services .svc-badge .ico{
  width:clamp(14px, 1.5vw + 8px, 18px);
  height:clamp(14px, 1.5vw + 8px, 18px);
  display:block;
}

#services .svc-card h3{
  grid-area:title;
  margin:0;
  line-height:1.25;
  font-weight:500;
  align-self: center;
}

#services .svc-card p{
  grid-area:body;
  margin:6px 0 0;
  color:#475569;
  align-self:start;          /* keep body snug to the top of row 2 */
}

/* small-screen breathing room */
@media (max-width: 640px){
  #services .svc-card{ padding:16px; column-gap:12px; }
}