:root{
  --primary:#0d4673; --secondary:#2ca49b; --ink:#0e1320; --muted:#667; --bg:#fff; --shade:#f6f9fb;
  --radius-xl:24px; --radius-lg:18px; --radius:12px;
  --shadow:0 12px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3,h4{font-family:Manrope,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#0a2540;margin:0 0 .5rem}
h1{font-weight:800;font-size:clamp(1.9rem,3.4vw,2.4rem)}
h2{font-weight:800;font-size:clamp(1.5rem,2.5vw,1.9rem)}
h3{font-weight:700;font-size:1.125rem}
p{margin:.6rem 0}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1200px;margin:0 auto;padding:0 18px}

/* Topbar (no sticky) */
.topbar{background:var(--shade);font-size:.95rem}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
.topbar a{color:var(--primary);font-weight:600}
.topbar-phone{font-weight:800;letter-spacing:.2px}
.topbar-socials .social{margin-left:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--primary);opacity:.9}
.topbar-socials .social:hover{opacity:1}
.social.svg svg{display:block}

/* Header & nav (no sticky) */
.site-header .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:inline-flex;align-items:center;gap:10px}
.logo{height:80px;width:auto;display:block}
.menu{display:flex;gap:24px}
.menu a{color:#17223b;font-weight:600}
.burger{display:none;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#17223b;margin:5px 0;border-radius:2px}
@media (max-width:980px){
  .menu{display:none;position:absolute;top:66px;left:0;right:0;background:#ffffffd9;backdrop-filter:saturate(160%) blur(8px);flex-direction:column;padding:14px 18px;border-top:1px solid #e9eef5}
  .burger{display:block}
  #nav-toggle:checked~.menu{display:flex}
}

/* Page hero (non-home) */
.page-hero{background-size:cover;background-position:center;padding:86px 0;color:#fff}
.page-hero .container{display:flex;align-items:flex-end}
.page-hero h1{color:#fff;text-shadow:0 8px 28px rgba(0,0,0,.35)}


/* Home hero (with optional background image) */
.hero{
  /* Base gradient (acts as the overlay colour palette) */
  --grad:
    radial-gradient(1200px 400px at 10% -20%, rgba(44,164,155,.25), transparent 70%),
    radial-gradient(1000px 600px at 90% -40%, rgba(13,70,115,.25), transparent 60%),
    linear-gradient(135deg, rgba(13,70,115,.90), rgba(44,164,155,.90));

  border-radius: var(--radius-xl);
  margin: 10px 0 26px;
  overflow: hidden;

  /* Fallback: gradient-only when no image is supplied */
  background: var(--grad);
  min-height: clamp(280px, 38vw, 540px);
  display: grid;
  place-items: center;
  color: #eef6fb;
}

/* When a hero image is provided we layer it under the gradient overlay */
.hero.has-img{
  /* --hero should be set inline as: url('/public/assets/images/hero-home.jpg') */
  background-image: linear-gradient(135deg, rgba(13,70,115,.80), rgba(44,164,155,.80)), var(--hero);
  background-size: cover, cover;
  background-position: center 30%, var(--hero-pos, center 35%);
  background-repeat: no-repeat;
}

.hero-inner{
  padding: clamp(40px, 6vw, 64px);
  text-align: center;
}
.hero-inner p{ max-width: 820px; margin: 12px auto 0; }

/* CTAs */
.cta-row{ display:flex; justify-content:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.btn-link{ background:#ebf3f9; color:var(--primary); }


/* CTAs */
.cta-row{display:flex;justify-content:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:12px 18px;border-radius:14px;text-decoration:none;font:700 14px/1 Manrope;border:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-secondary{background:var(--secondary)}
.btn-link{background:#ebf3f9;color:var(--primary)}

/* Cards & grids */
.card{background:#fff;border:1px solid #e8ecf1;border-radius:var(--radius-lg);padding:16px}
.glass{background:linear-gradient(180deg,#ffffffee,#ffffffdd);backdrop-filter:blur(8px)}
.shadow{box-shadow:var(--shadow)}
.grid{display:grid;gap:20px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid.two,.grid.three{grid-template-columns:1fr}}

/* About layout */
.home-about{padding:10px 0}
.about-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
@media (max-width:980px){.about-wrap{grid-template-columns:1fr}}
.about-copy .about-ctas{display:flex;gap:12px;margin-top:8px}
.about-media{border-radius:18px;overflow:hidden;background:#f0f6fa}
.about-media .img{height:100%;min-height:300px;display:grid;place-items:end}

/* Section spacing */
.services-carousel,.why,.recruitment,.contact-slab{padding:18px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:6px}
.section-head .muted{color:#5d6a7a;font-size:.9rem}

/* Services carousel (scroll-snap + autoplay) */
.carousel{display:flex;gap:16px;overflow:auto;padding:10px 2px 14px;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.carousel::-webkit-scrollbar{height:0}
.service-card{scroll-snap-align:start;min-width:260px;max-width:280px;background:#fff;border:1px solid #e8ecf1;border-radius:16px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s ease}
.service-card:hover{transform:translateY(-2px)}
.service-card .img{height:150px;border-radius:16px 16px 0 0;background:#eaf2f6;display:grid;place-items:center}
.service-card .txt{padding:12px;font-weight:700}
.placeholder{position:relative;background:linear-gradient(145deg,#eaf2f6,#f6fbff)}
.placeholder span{position:absolute;bottom:8px;right:10px;font-size:.8rem;color:#5e748e;background:#ffffffd9;border-radius:8px;padding:2px 8px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:8px}
.dot{width:8px;height:8px;border-radius:50%;background:#c6d6e3;transition:all .2s ease}
.dot.active{background:var(--primary);transform:scale(1.3)}

/* Why / feature rows */
.feature{min-height:120px;position:relative}
.feature .ico{width:36px;height:36px;border-radius:10px;background:var(--shade);display:inline-grid;place-items:center;color:var(--primary);margin-bottom:8px}
.feature-row{display:grid;grid-template-columns:260px 1fr;gap:18px;background:#fff;border:1px solid #e8ecf1;border-radius:18px;padding:12px;align-items:center;text-decoration:none;color:inherit}
.feature-row .feat-image{background:linear-gradient(145deg,#eaf2f6,#f6fbff);border-radius:14px;height:200px;display:grid;place-items:end;padding:8px}
.feature-row .feat-image span{background:#ffffffd9;border-radius:8px;padding:2px 8px;font-size:.8rem;color:#5e748e}
.feature-row .chev{margin-left:auto;font-weight:800;color:var(--primary)}
@media (max-width:980px){.feature-row{grid-template-columns:1fr}.feature-row .feat-image{height:180px}}

/* CTA band */
.cta-band{background:linear-gradient(90deg, rgba(13,70,115,1), rgba(44,164,155,1));color:#fff;margin-top:10px}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}
.cta-band .muted{color:#e6f4f8}
.cta-band .btn{box-shadow:none}
@media (max-width:820px){.cta-band .inner{flex-direction:column;align-items:flex-start}}

/* Forms */
.form .field{margin-bottom:12px}
.form input,.form select,.form textarea{width:100%;padding:12px;border:1px solid #d9e1ea;border-radius:12px;background:#fff}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:#b7c7d8;box-shadow:0 0 0 3px rgba(13,70,115,.1)}
.success{color:#1a7f37;font-weight:700}

/* Footer */
.site-footer{background:#081725;color:#cfe0f0;margin-top:44px}
.site-footer a{color:#cfe0f0}
.footer-grid{display:grid;gap:26px;padding:36px 0;grid-template-columns:2fr 1fr 1.2fr 1.2fr}
@media (max-width:960px){.footer-grid{grid-template-columns:1fr}}
/* Footer refinements */
.site-footer h4{
  color:#fff;                /* WHITE */
  text-transform:uppercase;  /* UPPERCASE */
  letter-spacing:.06em;
  font-weight:800;
  margin:0 0 12px;
}

/* Make About a bit narrower; give Services more width */
.footer-grid{
  grid-template-columns:1fr 1fr 1.6fr 1.1fr; /* about | quick | services (wider) | contact */
}

/* White logo in About via filter */
.footer-logo{
  height:60px;
  margin:0 0 10px;
  filter:brightness(0) invert(1); /* makes coloured logo appear white */
  opacity:.95;
  display:block;
}

/* Two-column services list (collapses to one column on mobile) */
.services-list{
  columns:2;
  column-gap:28px;
}
.services-list li{ break-inside:avoid; }
@media (max-width:960px){
  .footer-grid{ grid-template-columns:1fr; }
  .services-list{ columns:1; }
}

/* Ensure copyright socials are horizontal with spacing */
.copyright .container{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.copyright .socials{ display:flex; gap:14px; }

.list{list-style:none;margin:0;padding:0}
.list li{margin:6px 0}
.copyright{border-top:1px solid rgba(255,255,255,.12);padding:12px 0}
.copyright .container{display:flex;justify-content:space-between;align-items:center}
.copyright .socials .social{margin-left:12px;color:#cfe0f0;opacity:.9}
.copyright .socials .social:hover{opacity:1}

/* Cookie banner */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:#061321;color:#fff;padding:12px 0;box-shadow:0 -10px 20px rgba(0,0,0,.15);z-index:80}
.cookie-banner .btn{border-radius:10px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(2,13,23,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}
.modal[hidden]{display:none}
.modal-dialog{background:#fff;max-width:560px;width:100%;border-radius:16px;padding:16px;position:relative;box-shadow:var(--shadow)}
.modal-close{position:absolute;top:10px;right:10px;background:transparent;border:none;font-size:26px;cursor:pointer}
.hp{position:absolute;left:-9999px}

/* ---------------------------
   1) HERO – better readability
   --------------------------- */

/* Slightly stronger overlay when a hero image is present */
.hero.has-img{
  /* Darker overlay for text clarity; keeps brand palette */
  background-image:
    linear-gradient(130deg, rgba(13,70,115,.86), rgba(44,164,155,.84)),
    var(--hero);
  background-size: cover, cover;
  background-position: center 30%, var(--hero-pos, center 35%);
  background-repeat: no-repeat;
}

/* Brighter heading and a soft glow for legibility */
.hero-inner h1{
  color: #ffffff;
  text-shadow:
    0 14px 30px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.25);
  letter-spacing: .2px;
}

/* Improve paragraph contrast on hero */
.hero-inner p{
  color: #eaf7fb;
}

/* ---------------------------
   2) BRAND BARS – mint green
   --------------------------- */

/* Top bar in mint green with accessible white text/icons */
.topbar{
  background: var(--secondary);
  color: #fff;
}
.topbar a,
.topbar-phone a,
.topbar-socials .social{
  color: #fff;
}
.topbar a:hover,
.topbar-socials .social:hover{
  opacity: .92;
}

/* Footer copyright strip in mint green with white text/icons */
.copyright{
  background: var(--secondary);
  color: #fff;
  border-top: none; /* hide the previous light divider */
}
.copyright .socials .social{
  color: #fff;
}

/* ---------------------------
   3) FOOTER – mobile padding & polish
   --------------------------- */

/* Make footer feel like other rounded sections */
.site-footer{
  border-radius: 24px 24px 0 0;
}

/* Ensure consistent side padding on small screens */
.site-footer .container,
.copyright .container{
  padding-left: 18px;
  padding-right: 18px;
}

/* Keep footer socials horizontal with tidy spacing */
.copyright .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.copyright .socials{
  display: flex;
  gap: 14px;
}

/* On very narrow screens, avoid the “stuck to edge” look */
@media (max-width: 480px){
  .site-footer .container,
  .copyright .container{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* (Already implemented earlier but restated for clarity)
   Footer headings: white + uppercase */
.site-footer h4{
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  margin: 0 0 12px;
}

/* --------------------------------------------------
   MOBILE EDGE SAFETY FOR TOPBAR + HEADER
   -------------------------------------------------- */
:root{
  /* comfortable mobile gutter */
  --pad-mobile: clamp(14px, 4vw, 20px);
}

/* Keep content away from the edges at small widths */
@media (max-width: 540px){
  .topbar .container,
  .site-header .container{
    padding-left: var(--pad-mobile);
    padding-right: var(--pad-mobile);
  }

  /* Tighter layout, but with gaps so items don't touch edges */
  .topbar-inner{ padding: 6px 0; gap: 10px; }
  .topbar-socials{ gap: 10px; }
  .brand .logo{ height: 36px; }         /* was ~44px */
  .burger{ padding: 8px; margin-right: -4px; } /* pulls it slightly in from the frame */
}

/* Respect device safe-area (iPhone notch etc.) */
@supports(padding: max(0px)){
  @media (max-width: 540px){
    .topbar .container,
    .site-header .container{
      padding-left: max(var(--pad-mobile), env(safe-area-inset-left));
      padding-right: max(var(--pad-mobile), env(safe-area-inset-right));
    }
  }
}

/* Make the mobile dropdown menu feel less cramped */
@media (max-width: 980px){
  .menu{
    border-radius: 0 0 16px 16px;
    /* add a touch more side room inside the dropdown on tiny phones */
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}
@media (max-width: 420px){
  .topbar-socials{ display: none; }
}

/* About image containment */
.about-media{ border-radius:18px; overflow:hidden; background:#f0f6fa; }

/* Create a 900x600 (3:2) frame that scales responsively */
.about-photo{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#eaf2f6;
  aspect-ratio: 3 / 2;     /* keeps the right shape on all screens */
}

/* Make the photo fill the frame cleanly */
.about-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;        /* fill without squashing */
  object-position: center;  /* adjust focal point if needed */
}

/* If you kept the earlier placeholder styles, disable them for this block */
.about-media .placeholder,
.about-media .placeholder span{ all: unset; }

/* Subtle emphasis for section intros */
.section-head .lead{
  font-weight: 500;
  color: #4a5a6b;        /* a touch darker than .muted for readability */
  max-width: 820px;
}

/* --- Services carousel cards (contained, rounded, with title band) --- */
.carousel { display:flex; gap:16px; overflow:auto; padding:10px 2px 14px; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.carousel::-webkit-scrollbar { height:0; }

.service-card{
  scroll-snap-align:start;
  min-width: 280px;
  max-width: 280px;
  background:#fff;
  border:1px solid #e8ecf1;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.service-card:hover{ transform: translateY(-2px); }

.service-card .img{
  position:relative;
  height: 170px;                 /* consistent crop */
  background:#eaf2f6;
  overflow:hidden;
}
@media (max-width: 600px){
  .service-card{ min-width:240px; max-width:240px; }
  .service-card .img{ height:150px; }
}

.service-card .img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;               /* crops without distortion */
  object-position:center;
}

/* Fallback gradient when no image */
.service-card .img .no-img{
  width:100%; height:100%;
  background: linear-gradient(145deg,#eaf2f6,#f6fbff);
}

/* Pill label over image (brand colour) */
.service-card .label{
  position:absolute;
  left:10px; bottom:10px;
  background: var(--primary);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  line-height:1;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* Small placeholder size tag (only when no image) */
.service-card .ph{
  position:absolute;
  right:10px; bottom:10px;
  font-size:.8rem;
  color:#5e748e;
  background:#ffffffd9;
  border-radius:8px;
  padding:2px 8px;
}

/* Make sure any previous .txt block (if still present) stays out of the way */
.service-card .txt{ display:none !important; }

.feature-row{
  display:grid; grid-template-columns:260px 1fr; gap:18px;
  background:#fff; border:1px solid #e8ecf1; border-radius:18px; padding:12px;
  align-items:center; text-decoration:none; color:inherit;
}

.feature-row .feat-image{
  border-radius:14px; overflow:hidden; background:#eaf2f6;
  aspect-ratio: 41 / 26;       /* ~820:520 keeps the right shape */
  position:relative;
}
.feature-row .feat-image img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
}

/* Nice fallback if you haven’t added images yet */
.feature-row .feat-image .no-img{
  width:100%; height:100%; background:linear-gradient(145deg,#eaf2f6,#f6fbff);
}
.feature-row .feat-image .ph{
  position:absolute; bottom:8px; right:10px; font-size:.8rem; color:#5e748e;
  background:#ffffffd9; border-radius:8px; padding:2px 8px;
}

@media (max-width:980px){
  .feature-row{ grid-template-columns:1fr; }
  .feature-row .feat-image{ height:180px; aspect-ratio:auto; } /* keep height sensible on small screens */
}
/* --- Fix recruitment row image overlapping text --- */
.feature-row{
  /* keep two clear columns; allow the image track to flex between 260–320px */
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 18px;
  align-items: center;         /* or 'stretch' if you prefer both to match height */
  position: relative;
}

.feature-row .feat-image{
  border-radius: 14px;
  overflow: hidden;
  background: #eaf2f6;
  /* contain the image within its track */
  max-width: 320px;
  width: 100%;
  aspect-ratio: 41 / 26;       /* ~820:520 */
  position: relative;
  z-index: 0;                  /* sit underneath the text layer */
}

.feature-row .feat-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.feature-row .feat-body{
  position: relative;
  z-index: 1;                  /* ensure text layer wins if stacking occurs */
  padding-right: 6px;          /* tiny buffer so text never touches card edge */
}

/* Mobile stack: image on top, text below (no overlap possible) */
@media (max-width: 980px){
  .feature-row{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .feature-row .feat-image{
    max-width: none;           /* allow full width on mobile */
    aspect-ratio: 41 / 26;
    height: auto;
  }
}

/* --- CTA Band (image + overlay, rounded, accessible) --- */
.cta-band{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-top: 18px;
  color: #fff;
}

/* Background image + dark/brand overlay for legibility */
.cta-band::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(130deg, rgba(13,70,115,.88), rgba(44,164,155,.84)),
    var(--cta-img);
  background-size: cover, cover;
  background-position: var(--cta-pos, center 35%), var(--cta-pos, center 35%);
  filter: saturate(1.05);
}

/* Keep content above the overlay */
.cta-band .inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 24px;
}

/* Tidy text */
.cta-band .copy h3{
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 14px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  letter-spacing: .2px;
}
.cta-band .copy p{
  margin: 0;
  color: #e9f7ff;
  max-width: 720px;
}

/* Actions */
.cta-band .actions{ display: flex; gap: 12px; flex-wrap: wrap; }

/* Button variants for dark backgrounds */
.btn-white{
  background: #fff;
  color: var(--primary);
}
.btn-white:hover{ transform: translateY(-1px); }

.btn-mint{
  background: var(--secondary);
  color: #fff;
}
.btn-mint:hover{ transform: translateY(-1px); }

/* Responsive stacking */
@media (max-width: 820px){
  .cta-band .inner{
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }
  .cta-band .actions{ width: 100%; }
}

/* ----- Contact slab layout ----- */
.contact-slab{ padding: 22px 0; }
.contact-wrap{
  grid-template-columns: minmax(320px, 420px) 1fr;  /* wider form column */
  align-items: stretch;
  gap: 24px;
}
@media (max-width: 980px){
  .contact-wrap{ grid-template-columns: 1fr; }
}

/* Left card */
.contact-card h2{ margin: 10px 0 6px; }
.contact-card .lead{ margin: 0 0 10px; color:#3b4b5a; }

/* Contained photo (3:2) */
.contact-photo{
  margin: 0 0 12px;
  border-radius: 14px;
  overflow: hidden;
  background: #eaf2f6;
  aspect-ratio: 3 / 2; /* 900x600 */
}
.contact-photo img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Ticks list (no external icons) */
.ticks{ list-style: none; padding: 0; margin: 10px 0 14px; }
.ticks li{
  position: relative;
  padding-left: 28px;
  margin: 8px 0;
}
.ticks li::before{
  content:"";
  position:absolute; left:0; top:.35em;
  width:18px; height:18px; border-radius:50%;
  background: var(--secondary);
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.ticks li::after{
  content:""; position:absolute; left:5px; top:.65em;
  width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform: rotate(-45deg);
}

/* Buttons row under the ticks */
.contact-card .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }

/* Reuse CTA button variants */
.btn-white{ background:#fff; color:var(--primary); }
.btn-mint{ background:var(--secondary); color:#fff; }

/* Right form side: slight interior vertical rhythm tweak */
.contact-slab .card .form .field{ margin-bottom: 12px; }

/* ---- Hero branding typography ---- */
.eyebrow{
  margin: 0 0 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(12px, 1.6vw, 14px);
  color: #eaf7fb;
  opacity: .95;
}

.hero-brand{
  margin: 0 0 8px;
  font-weight: 900;
  text-transform: uppercase;           /* big caps visually; aria-label keeps SR natural */
  letter-spacing: .04em;
  line-height: 1.05;
  font-size: clamp(30px, 6.2vw, 72px); /* mobile → desktop */
  color: #fff;
  text-shadow:
    0 18px 40px rgba(0,0,0,.42),
    0 3px 8px rgba(0,0,0,.28);
}

.hero-sub{
  margin: 0 0 12px;
  font-size: clamp(14px, 2.2vw, 20px);
  color: #e9f7ff;
  max-width: 860px;
}

/* tighten spacing on very small screens */
@media (max-width: 420px){
  .hero-brand{ font-size: clamp(28px, 8vw, 44px); }
}

/* ========= HERO DESKTOP SIZING BOOST ========= */

/* Larger defaults via clamp (works from tablet up to 4K) */
.eyebrow{
  font-size: clamp(14px, 1.4vw, 20px);           /* was ~12–14 */
  letter-spacing: .22em;
}

.hero-brand{
  font-size: clamp(38px, 7vw, 96px);             /* was max 72px -> now up to 96px */
  line-height: 1.03;
  letter-spacing: .035em;
}

.hero-sub{
  font-size: clamp(16px, 2.1vw, 24px);           /* was max 20px -> now up to 24px */
}

/* Give the hero a little more presence on large screens */
.hero{
  min-height: clamp(360px, 48vw, 680px);
}
.hero-inner{
  padding: clamp(36px, 6vw, 72px);
}

/* CTA buttons in the hero: a touch larger + roomier */
.hero-inner .cta-row{ gap: 14px; margin-top: 18px; }
.hero-inner .btn{
  font-size: 1.05rem;                             /* ~16–17px */
  padding: 14px 18px;
  border-radius: 14px;
}

/* Optional: extra bump for very wide desktops */
@media (min-width: 1440px){
  .eyebrow{ font-size: 20px; }
  .hero-brand{ font-size: 100px; }               /* you can push to 108px if you like */
  .hero-sub{ font-size: 26px; }
}

/* Outline button that reads well on image/gradient heroes */
.btn-outline-white{
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.btn-outline-white:hover{
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}
.btn-outline-white:focus-visible{
  outline: 3px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

/* Ensure a nice wrap when we have 4 CTAs */
.hero-inner .cta-row{ flex-wrap: wrap; gap: 12px; }


/* =============== LAYOUT UTILITIES (full-bleed + container) =============== */
:root{
  --site-gutter: clamp(16px, 3vw, 24px);
  --container-max: 1200px;               /* bump to 1320/1440 if you want a wider boxed site */
}
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}
/* Section rhythm */
section{ margin-block: clamp(20px, 4vw, 36px); }

/* Make a section span the viewport width while keeping its children constrained in .container */
.full-bleed{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.full-bleed > .container{
  padding-inline: max(var(--site-gutter), env(safe-area-inset-left));
}
.full-bleed.rounded{ border-radius: 24px; overflow: hidden; }

/* =============================== HERO =============================== */
.hero{ position:relative; border-radius:24px; overflow:hidden; margin-block: clamp(8px, 2vw, 16px); }
.hero.has-img::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(130deg, rgba(13,70,115,.88), rgba(44,164,155,.84)),
    var(--hero);
  background-size: cover, cover;
  background-position: var(--hero-pos, center 35%), var(--hero-pos, center 35%);
  filter: saturate(1.05);
}
.hero-inner{ position:relative; padding: clamp(36px, 6vw, 72px); color:#fff; }
.eyebrow{
  margin:0 0 6px; font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; color:#eaf7fb; font-size: clamp(14px,1.4vw,20px);
}
.hero-brand{
  margin:0 0 8px; font-weight:900; text-transform:uppercase; letter-spacing:.035em;
  line-height:1.03; color:#fff; text-shadow:0 18px 40px rgba(0,0,0,.42), 0 3px 8px rgba(0,0,0,.28);
  font-size: clamp(38px,7vw,96px);
}
.hero-sub{ margin:0 0 12px; max-width: 860px; color:#e9f7ff; font-size: clamp(16px,2.1vw,24px); }
.hero-inner .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.hero-inner .btn{ font-size:1.05rem; padding:14px 18px; border-radius:14px; }

/* Outline button for dark hero */
.btn-outline-white{
  background:transparent; color:#fff; border:2px solid #fff; border-radius:14px; padding:12px 16px;
  font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.btn-outline-white:hover{ background:rgba(255,255,255,.1); transform: translateY(-1px); }
.btn-outline-white:focus-visible{ outline:3px solid rgba(255,255,255,.6); outline-offset:2px; }

/* =============================== ABOUT =============================== */
.about-wrap{ display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; align-items:stretch; }
@media (max-width: 980px){ .about-wrap{ grid-template-columns:1fr; } }
.about-media{ border-radius:18px; overflow:hidden; background:#f0f6fa; }
.about-photo{ margin:0; border-radius:18px; overflow:hidden; background:#eaf2f6; aspect-ratio: 3 / 2; }
.about-photo img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }

/* =============================== SERVICES =============================== */
.services-carousel .section-head .lead{ font-weight:500; color:#4a5a6b; max-width:820px; }

/* carousel body */
.carousel{ display:flex; gap:16px; overflow:auto; padding:10px 2px 14px; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.carousel::-webkit-scrollbar{ height:0; }

/* cards */
.service-card{
  scroll-snap-align:start; min-width:280px; max-width:280px;
  background:#fff; border:1px solid #e8ecf1; border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; box-shadow: var(--shadow, 0 10px 24px rgba(16,24,40,.06));
  transition: transform .15s ease;
}
.service-card:hover{ transform: translateY(-2px); }
.service-card .img{ position:relative; height:170px; background:#eaf2f6; overflow:hidden; }
@media (max-width:600px){ .service-card{ min-width:240px; max-width:240px; } .service-card .img{ height:150px; } }
.service-card .img img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.service-card .img .no-img{ width:100%; height:100%; background:linear-gradient(145deg,#eaf2f6,#f6fbff); }
/* pill label */
.service-card .label{
  position:absolute; left:10px; bottom:10px; background: var(--primary,#0d4673); color:#fff;
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:.95rem; line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.service-card .ph{
  position:absolute; right:10px; bottom:10px; font-size:.8rem; color:#5e748e;
  background:#ffffffd9; border-radius:8px; padding:2px 8px;
}

/* dots (if you’re using them) */
.dots{ display:flex; gap:6px; justify-content:center; margin-top:10px; }
.dots button,.dots span{ width:8px; height:8px; border-radius:50%; background:#d9e2ec; }
.dots .active{ background: var(--primary,#0d4673); }

/* =============================== WHY CHOOSE US =============================== */
.feature .ico{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  background: var(--secondary,#2ca49b); color:#fff; box-shadow: 0 6px 16px rgba(0,0,0,.1); margin-bottom:8px; }

/* =============================== RECRUITMENT ROWS =============================== */
.feature-row{
  display:grid; grid-template-columns: minmax(260px, 320px) 1fr; gap:18px; align-items:center;
  background:#fff; border:1px solid #e8ecf1; border-radius:18px; padding:12px; text-decoration:none; color:inherit;
}
.feature-row:hover{ transform: translateY(-1px); transition: transform .15s ease; }
.feature-row .feat-image{ border-radius:14px; overflow:hidden; background:#eaf2f6; aspect-ratio: 41 / 26; position:relative; max-width:320px; width:100%; }
.feature-row .feat-image img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.feature-row .feat-image .no-img{ width:100%; height:100%; background:linear-gradient(145deg,#eaf2f6,#f6fbff); }
.feature-row .feat-body{ position:relative; z-index:1; padding-right:6px; }
@media (max-width:980px){
  .feature-row{ grid-template-columns:1fr; align-items:stretch; }
  .feature-row .feat-image{ max-width:none; aspect-ratio:41/26; }
}

/* =============================== CTA BAND (full-bleed) =============================== */
.cta-band{ position:relative; border-radius:24px; overflow:hidden; color:#fff; }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(130deg, rgba(13,70,115,.88), rgba(44,164,155,.84)),
    var(--cta-img);
  background-size: cover, cover;
  background-position: var(--cta-pos, center 35%), var(--cta-pos, center 35%);
}
.cta-band .inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 24px; }
.cta-band .copy h3{ margin:0 0 6px; color:#fff; text-shadow:0 14px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); }
.cta-band .copy p{ margin:0; color:#e9f7ff; max-width:720px; }
.cta-band .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-white{ background:#fff; color:var(--primary,#0d4673); }
.btn-white:hover{ transform: translateY(-1px); }
.btn-mint{ background: var(--secondary,#2ca49b); color:#fff; }
.btn-mint:hover{ transform: translateY(-1px); }
/* ticks */
.ticks{ list-style:none; padding:0; margin:10px 0 0; }
.ticks li{ position:relative; padding-left:28px; margin:8px 0; }
.ticks li::before{ content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:50%; background: var(--secondary,#2ca49b); box-shadow:0 3px 8px rgba(0,0,0,.15); }
.ticks li::after{ content:""; position:absolute; left:5px; top:.65em; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(-45deg); }
@media (max-width:820px){
  .cta-band .inner{ flex-direction:column; align-items:flex-start; padding:22px 20px; }
  .cta-band .actions{ width:100%; }
}

/* =============================== CONTACT SLAB =============================== */
.contact-wrap{ grid-template-columns: minmax(320px, 420px) 1fr; align-items:stretch; gap:24px; }
@media (max-width:980px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-photo{ margin:0 0 12px; border-radius:14px; overflow:hidden; background:#eaf2f6; aspect-ratio:3/2; }
.contact-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.contact-card .lead{ margin:0 0 10px; color:#3b4b5a; }
.contact-card .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }

/* =============================== SMALL POLISH =============================== */
.card.shadow{ box-shadow: 0 10px 24px rgba(16,24,40,.06); }
.section-head h2, .why h2 { margin-bottom: 8px; }

/* ==== Slim Page Header (title only) ==== */
.page-header{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin-block: clamp(8px, 2vw, 16px);
}
.page-header::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(130deg, rgba(13,70,115,.86), rgba(44,164,155,.82)),
    var(--hero);
  background-size: cover, cover;
  background-position: var(--hero-pos, center 35%), var(--hero-pos, center 35%);
  filter: saturate(1.04);
}
.page-header .container{
  position: relative;
  padding: clamp(26px, 5vw, 46px) clamp(18px, 3vw, 24px);
}
.page-title{
  margin: 0;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
  text-shadow: 0 14px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  font-size: clamp(24px, 4vw, 44px); /* narrower than homepage hero */
}

/* ==== Care & Support grid ==== */
.care-grid-3{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 980px){ .care-grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .care-grid-3{ grid-template-columns: 1fr; } }

.svc-card{ display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit; }
.svc-fig{
  aspect-ratio: 16/10; background:#eaf2f6; border-radius:14px; overflow:hidden; margin:0;
}
.svc-fig img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.svc-body{ padding:12px 10px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.svc-title{ margin:0; font-size:1.05rem; }
.svc-link{ color: var(--primary); font-weight:700; }

/* ==== Service detail layout + sidebar ==== */
.service-wrap{
  display:grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 20px;
}
@media (max-width: 980px){ .service-wrap{ grid-template-columns: 1fr; } }

.service-sidebar{ padding:14px; }
.side-title{ margin:4px 4px 8px; text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; color:#4a5a6b; }
.side-links{ display:flex; flex-direction:column; gap:8px; }
.side-link{
  display:block; padding:10px 12px; border:1px solid #e6edf3; border-radius:12px;
  text-decoration:none; color:#122033; background:#fff; font-weight:600;
}
.side-link:hover{ border-color:#c5d5e5; transform: translateY(-1px); transition:.15s ease; }
.side-link.active{ background: #ebf6f5; border-color: var(--secondary); color:#0b2f46; }

.service-main{ padding:16px; }
.service-fig{ margin:0 0 12px; border-radius:14px; overflow:hidden; background:#eaf2f6; aspect-ratio: 16/10; }
.service-fig img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.steps{ margin:0; padding-left:18px; }
.steps li{ margin:6px 0; }

.faq { background:#fff; border:1px solid #e6edf3; border-radius:12px; padding:10px 12px; margin:8px 0; }
.faq[open]{ box-shadow:0 8px 20px rgba(16,24,40,.06); }
.faq > summary{ cursor:pointer; list-style:none; }
.faq > summary::-webkit-details-marker{ display:none; }
.faq > p{ margin:8px 0 0; color:#3b4b5a; }

/* equal-height 2-col grid */
.grid.two-eq{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  align-items: stretch;
}
@media (max-width: 980px){ .grid.two-eq{ grid-template-columns: 1fr; } }

.h-full{ height:100%; }

/* hero image card */
.fs-heroimg{
  padding:0;
  overflow:hidden;
  border-radius:14px;
}
.fs-heroimg img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  aspect-ratio: 16/10;
}

/* compact mini steps inside the right column */
.compact-steps{
  gap:12px;
}
.compact-steps .mini-step{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:12px;
}
.compact-steps .mini-step h4{
  margin:0 0 6px;
  font-size:1rem;
}

/* Split card: text left, image right */
.staffing-split{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:20px;
  align-items: stretch;
  padding:18px;
}
.staffing-split .copy{ align-self:center; }
.staffing-split .media{
  overflow:hidden;
  border-radius:14px;
}
.staffing-split .media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  aspect-ratio: 16 / 10;
}
@media (max-width: 980px){
  .staffing-split{ grid-template-columns: 1fr; }
  .staffing-split .media{ order:-1; } /* image above text on mobile */
}

/* equal-height 2-col grid (used under ROW 2) */
.grid.two-eq{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  align-items: stretch;
}
@media (max-width: 980px){ .grid.two-eq{ grid-template-columns: 1fr; } }

/* Who we supply — single column, fill the box */
.who-supply .ticks.big{
  columns: 1;            /* force one column */
  max-width: none;       /* allow full width */
}
.who-supply .ticks.big li{
  margin:12px 0;
  font-size: 1.08rem;
  line-height: 1.55;
}

/* Compact steps look */
.compact-steps{ gap:12px; }
.compact-steps .mini-step{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:12px;
}
.compact-steps .mini-step h4{
  margin:0 0 6px; font-size:1rem;
}

/* Full-bleed FAQs background */
.faqs-band{
  background:
    linear-gradient(180deg, rgba(13,70,115,.85), rgba(44,164,155,.78)),
    var(--faq) no-repeat var(--faq-pos) / cover;
  padding:48px 0;
}
.faqs-band .faqs-title{
  color:#fff;
  margin-bottom:14px;
}
.faqs-band .faq-card{
  background:#ffffff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:16px;
}

/* Existing FAQ styling enhancement (optional) */
.faq { background:#fff; border:1px solid #e6edf3; border-radius:12px; padding:10px 12px; margin:8px 0; }
.faq[open]{ box-shadow:0 8px 20px rgba(16,24,40,.06); }
.faq > summary{ cursor:pointer; list-style:none; }
.faq > summary::-webkit-details-marker{ display:none; }
.faq > p{ margin:8px 0 0; color:#3b4b5a; }

/* ========== FULL-BLEED BANDS (FAQs + What you can book) ========== */
.band{
  /* hero-style background with gradient overlay */
  background:
    linear-gradient(180deg, rgba(13,70,115,.86), rgba(44,164,155,.78)),
    var(--band) no-repeat var(--band-pos) / cover;
  padding: 48px 0;
}
.band .band-title{
  color:#fff;
  margin-bottom:14px;
}
.band .card{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:16px;
}

/* Name them for clarity (both reuse .band) */
.faqs-band{}
.book-band{}

/* ========== WHO WE SUPPLY — make ticks larger & well spaced ========== */
.who-supply .ticks{
  max-width:none;
}
.who-supply .ticks li{
  margin:12px 0;
  font-size:1.08rem;
  line-height:1.6;
}

/* ========== FAQ details styling (keeps cards readable) ========== */
.faq { 
  background:#fff; 
  border:1px solid #e6edf3; 
  border-radius:12px; 
  padding:10px 12px; 
  margin:8px 0; 
}
.faq[open]{ box-shadow:0 8px 20px rgba(16,24,40,.06); }
.faq > summary{ cursor:pointer; list-style:none; }
.faq > summary::-webkit-details-marker{ display:none; }
.faq > p{ margin:8px 0 0; color:#3b4b5a; }

/* ========== Split card (text + image right) remains ========== */
.staffing-split{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:20px;
  align-items: stretch;
  padding:18px;
}
.staffing-split .copy{ align-self:center; }
.staffing-split .media{
  overflow:hidden; border-radius:14px;
}
.staffing-split .media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; aspect-ratio: 4 / 3; /* or 16/10 for wider look */
}
@media (max-width: 980px){
  .staffing-split{ grid-template-columns: 1fr; }
  .staffing-split .media{ order:-1; } /* image above text on mobile */
}

/* ========== Equal-height two-col grid used below the hero ========== */
.grid.two-eq{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items: stretch;
}
@media (max-width: 980px){ .grid.two-eq{ grid-template-columns: 1fr; } }

/* Jobs filter bar */
.jobs-filter { padding:14px; margin-bottom:14px; }
.jf-grid{
  display:grid; grid-template-columns: 1.2fr 1fr 0.8fr auto; gap:12px; align-items:end;
}
.jf-grid label span{ display:block; font-size:.9rem; color:#5b6b7c; margin-bottom:6px; }
.jf-actions{ display:flex; gap:8px; }
@media (max-width: 900px){
  .jf-grid{ grid-template-columns: 1fr; }
}

/* Job cards */
.jobs-grid{ display:grid; gap:16px; }
.job-card .job-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.job-card .job-title{ margin:0; }
.job-card .job-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:.85rem; }
.badge-type{ background:#e1eef7; color:#0d4673; }
.badge-soft{ background:#f2f6f9; color:#2a3a4a; }
.job-meta{ display:flex; gap:14px; color:#5e6c7b; font-size:.92rem; margin:6px 0 8px; }
.job-summary{ margin:8px 0 6px; }

.job-details summary{ cursor:pointer; color:#0d4673; font-weight:600; }
.job-details[open]{ background:#fafcfe; border:1px solid #e6edf3; border-radius:12px; padding:10px; margin-top:8px; }
.job-cta{ margin-top:10px; }

/* Right column */
.pitch{ margin-bottom:16px; }
.apply-card .error{ color:#b00020; }
.apply-card .success{ color:#0b7a43; }

/* Page layout */
.jobs-slab .grid.two{ grid-template-columns: 1.5fr .9fr; gap:20px; }
@media (max-width: 980px){ .jobs-slab .grid.two{ grid-template-columns: 1fr; } }

/* ===========================
   Jobs filter – modern UI
   =========================== */
.jobs-filter {
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  position: relative;
  isolation: isolate;
}

.jobs-filter::after {
  /* subtle top shine for depth */
  content: "";
  position: absolute; inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 12px 35px rgba(13,70,115,.06);
}

.jf-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr .9fr auto;
  gap: 14px;
  align-items: end;
}

@media (max-width: 960px) {
  .jf-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .jf-grid { grid-template-columns: 1fr; }
}

/* Field label + controls */
.jobs-filter .field { position: relative; }
.jobs-filter .field > span {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #3d5a78;
  opacity: .9;
  font-weight: 600;
}

.jobs-filter input,
.jobs-filter select {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid #e6edf5;
  background: #f8fbfd;
  padding: 0 12px;
  font: inherit;
  color: #0b2740;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.jobs-filter input::placeholder { color: #7b90a8; }

.jobs-filter input:focus,
.jobs-filter select:focus {
  outline: none;
  border-color: var(--primary, #0d4673);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13,70,115,.12);
}

/* Icons inside inputs (SVG, colour = var(--primary)) */
.jobs-filter .has-icon input { padding-left: 44px; }

.jobs-filter .has-icon::before {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 13px;  /* aligns with 46px input */
  width: 18px;
  height: 18px;
  opacity: .85;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

.jobs-filter .icon-search::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d4673'><path d='M15.5 14h-.79l-.28-.27A6.5 6.5 0 1016 9.5l.27.28h.79L21.5 15 20 16.5l-4.5-4.5zM9.5 14A4.5 4.5 0 119.5 5a4.5 4.5 0 010 9z'/></svg>");
}

.jobs-filter .icon-location::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d4673'><path d='M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 11.5z'/></svg>");
}

/* Prettier select */
.jobs-filter .select-wrap { position: relative; }
.jobs-filter .select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
}
.jobs-filter .select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 19px; /* vertically center on 46px input */
  width: 10px; height: 10px;
  border-right: 2px solid #0d4673;
  border-bottom: 2px solid #0d4673;
  transform: rotate(45deg);
  pointer-events: none;
  opacity: .8;
}

/* Actions */
.jf-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.jf-actions .btn {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 22px;
  white-space: nowrap;
}

.jf-actions .btn-primary {
  background: var(--primary, #0d4673);
  color: #fff;
}

.jf-actions .btn-primary:hover {
  filter: brightness(1.05);
}

.jf-actions .btn-secondary.ghost {
  background: #eef5f8;
  color: #0d4673;
  border: 1px solid #d7e6ee;
}

.jf-actions .btn-secondary.ghost:hover {
  background: #e7f1f6;
}

/* Nice “found count” spacing beneath filter */
.jobs-slab .found-count {
  margin: 10px 4px 16px;
  color: #56708e;
}

/* --- Admin forms (shared) --- */
.admin-wrap{max-width:980px;margin:40px auto}
.admin-form .f > span{font-weight:600;color:#223}
.admin-form input,.admin-form select,.admin-form textarea{
  width:100%;padding:10px 12px;border:1px solid #d9e1ea;border-radius:10px;font:inherit
}
.admin-form .actions .btn{border-radius:10px}

/* --- Admin / Auth pages --- */
.auth-wrap{
  min-height:60vh;
  display:grid;
  place-items:center;
  padding:64px 16px;
  background:
    linear-gradient(180deg,rgba(13,70,115,.70),rgba(44,164,155,.70)),
    url("/public/assets/images/hero.jpg") center/cover no-repeat;
}
.auth-card{
  width:min(560px,100%);
  background:#fff;
  border:1px solid #e5edf5;
  border-radius:20px;
  box-shadow:0 18px 48px rgba(13,70,115,.15);
  padding:28px 24px;
}
.auth-title{
  margin:0 0 6px;
  text-align:center;
  font-size:2rem;
  color:var(--primary);
  font-weight:800;
}
.auth-sub{
  text-align:center;
  color:#6b7785;
  margin:0 0 16px;
}
.auth-form .field{ margin:14px 0; }
.auth-form label{ display:block; font-weight:600; color:#223; margin-bottom:6px; }
.auth-form input[type="email"],
.auth-form input[type="text"],
.auth-form input[type="password"]{
  width:100%;
  padding:12px 14px;
  border:1px solid #cfd9e3;
  border-radius:12px;
  font-size:1rem;
  outline:0;
  transition:border .15s, box-shadow .15s;
  background:#fff;
}
.auth-form input:focus{
  border-color:var(--secondary);
  box-shadow:0 0 0 4px rgba(44,164,155,.18);
}
.auth-actions{ display:flex; justify-content:center; gap:10px; margin-top:6px; }
.auth-hint{ text-align:center; color:#6b7785; font-size:.92rem; margin-top:12px; }
.auth-error{
  background:#ffe8e6; color:#8a1c1c; border:1px solid #ffb5ae;
  border-radius:10px; padding:10px 12px; margin:8px 0;
}
.auth-success{
  background:#e8f6ef; color:#0f6b3a; border:1px solid #b8e1cc;
  border-radius:10px; padding:10px 12px; margin:8px 0;
}

/* Make the button a little larger here */
.auth-form .btn{ padding:12px 18px; border-radius:12px; }