:root{
  /* Core */
  --text:#0b1220;
  --muted:#556070;
  --navy:#0b2a3c;

  /* Brand accents */
  --accent:#06b6d4;       /* ocean cyan */
  --accent2:#0ea5e9;      /* sky */

  /* Surfaces */
  --bg:#f5f7fb;
  --white:#ffffff;
  --line: rgba(15, 23, 42, 0.10);

  /* Shadows (subtle corporate) */
  --shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 18px 44px rgba(15, 23, 42, 0.10);

  /* Shape */
  --radius: 16px;
  --radius2: 22px;

  /* ✅ Full-width body with ~5% side padding */
  --sidepad: clamp(16px, 5vw, 96px);

  /* Keep layout disciplined on huge screens (still "full-width" sections) */
  --content-max: 1400px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--bg) 40%, var(--bg) 100%);
}

a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:100%;
  padding-left: var(--sidepad);
  padding-right: var(--sidepad);
  margin:0;
}

main{padding: 0 0 64px}

/* Typography */
p{margin: 10px 0; color: rgba(11,18,32,0.78); line-height: 1.65}
.small{font-size: 13px; color: rgba(11,18,32,0.62)}
.prose{max-width: 74ch}

/* Sections: full-width bands */
.section{padding: 46px 0;}
.section--tight{padding: 28px 0;}
.section--alt{
  background: rgba(2, 132, 199, 0.04);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section--white{
  background: rgba(255,255,255,0.75);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Emergency strip (already in template) */
.emergency{
  background: rgba(14,165,233,0.08);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 14px;
  color: var(--navy);
}
.emergency a{
  color: var(--accent2);
  font-weight:800;
}

/* Header (keep markup as-is, just make it feel corporate) */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  border-bottom:1px solid var(--line);
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .site-header{
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 14px 0;

  /* discipline width without changing HTML */
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.site-header{ padding-top: 10px; padding-bottom: 10px; }
.site-header .header-inner{ align-items:center; }
.site-header .nav{ align-items:center; }

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--navy);
  font-weight: 900;
  letter-spacing: 0.2px;
}
.brand img{
  width:42px;
  height:42px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: #fff;
}

.nav{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.nav a{
  color: var(--navy);
  font-weight: 700;
  opacity: 0.92;
}
.nav a:hover{opacity: 1; text-decoration:none}

/* Burger toggle (works with your existing JS + markup) */
.nav-toggle{
  display:none;
  border:1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  box-shadow: var(--shadow-sm);
  cursor:pointer;
}
.nav-toggle-bars{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(11,42,60,0.9);
  margin: 0 auto;
  position: relative;
  border-radius: 2px;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(11,42,60,0.9);
  border-radius: 2px;
}
.nav-toggle-bars::before{ top: -6px; }
.nav-toggle-bars::after{ top: 6px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(6,182,212,0.30);
  background: rgba(6,182,212,0.10);
  color: var(--navy);
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(6,182,212,0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(6,182,212,0.12);
  text-decoration:none;
}
.btn:active{transform: translateY(0)}
.btn--primary{
  border-color: rgba(14,165,233,0.30);
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(14,165,233,0.20);
}
.btn--primary:hover{
  box-shadow: 0 16px 30px rgba(14,165,233,0.24);
}
.btn--outline{
  border-color: rgba(11,42,60,0.18);
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn--secondary{
  border-color: rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-sm);
}
.btn--ghost{
  border-color: rgba(15,23,42,0.12);
  background: transparent;
  box-shadow: none;
}

/* Cards: mostly solid white for corporate look */
.card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

/* Glass: subtle, for hero highlights only (not everywhere) */
.glass{
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.82);
  box-shadow: var(--shadow-md);
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .glass{
    background: rgba(255,255,255,0.70);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Hero: full-bleed support hero matching locked design image */
.hero{
  position: relative;
  min-height: 760px;
  padding: 0;
  border-bottom: none;
  overflow: hidden;
  background: #0b2341;
}

.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,35,65,0.62) 0%, rgba(11,35,65,0.36) 34%, rgba(11,35,65,0.08) 68%, rgba(11,35,65,0.04) 100%);
}

.hero-bottom-fade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 165px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11,35,65,0) 0%, rgba(11,35,65,0.78) 100%);
}

.hero .container{
  position: relative;
  z-index: 3;
  min-height: 760px;
  display: flex;
  align-items: center;
}

.hero-grid,
.grid-2,
.grid-3,
.footer-grid{
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.hero-grid--single{
  min-height: 760px;
}

.hero-content--overlay{
  max-width: 620px;
  margin-left: 0;
  padding-top: 40px;
  padding-bottom: 120px;
}

.hero h1{
  margin: 0 0 22px;
  font-size: clamp(52px, 6vw, 74px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-weight: 900;
    color: rgba(255,255,255,0.88);
  text-transform: uppercase;
}

.hero .text-accent{
  color: #7cb8ff;
}

.hero .lead{
  max-width: 640px;
  margin: 0 0 26px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
}

.hero .subtle{
  display: none;
}

.hero-actions{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 0;
}

.hero-btn{
  min-width: 300px;
  min-height: 64px;
  padding: 0 28px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: none;
}

.hero-btn.btn--primary{
  background: linear-gradient(135deg, #2f86ff, #2b74f0);
  border: 1px solid rgba(255,255,255,0.16);
  color: #ffffff;
}

.hero-btn.hero-btn--dark{
  background: rgba(18,31,57,0.72);
  border: 2px solid rgba(255,255,255,0.75);
  color: #ffffff;
  box-shadow: none;
}

.hero-btn:hover{
  transform: translateY(-1px);
  text-decoration: none;
}

.hero-media{
  display: none;
}

@media (max-width: 900px){
  .hero{
    min-height: 620px;
  }

  .hero .container,
  .hero-grid--single{
    min-height: 620px;
  }

  .hero-content--overlay{
    max-width: 100%;
    padding-top: 24px;
    padding-bottom: 96px;
  }

  .hero h1{
    font-size: clamp(40px, 11vw, 58px);
  }

  .hero .lead{
    font-size: 18px;
    line-height: 1.55;
  }

  .hero-actions{
    gap: 12px;
  }

  .hero-btn{
    min-width: 100%;
    width: 100%;
    min-height: 56px;
    font-size: 16px;
  }

.hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(11,35,65,0.82) 0%,
      rgba(11,35,65,0.72) 28%,
      rgba(11,35,65,0.42) 52%,
      rgba(11,35,65,0.18) 72%,
      rgba(11,35,65,0.06) 100%
    );
}

  .hero-bottom-fade{
    height: 120px;
  }
}

/* Image card */
.media-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(15,23,42,0.12);
  overflow:hidden;
  box-shadow: var(--shadow-md);
  background:#fff;
}
.media-card img{width:100%; height:auto; display:block}

/* Callout */
.callout{
  display:flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(6,182,212,0.22);
  background: rgba(6,182,212,0.08);
}
.callout strong{color: var(--navy)}
.callout .actions{display:flex; gap:10px; flex-wrap:wrap}

/* Illustration placeholders (smaller + quieter) */
.illustration-slot{
  border-radius: var(--radius2);
  border: 1px dashed rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.65);
  padding: 14px;
  color: rgba(11,18,32,0.55);
  font-weight: 900;
  min-height: 110px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Grids */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Headings */
h2{
  margin: 0 0 10px;
  color: var(--navy);
  letter-spacing: 0.1px;
}

/* Footer (keep markup as-is, just align width nicely) */
.site-footer{
  background: rgba(255,255,255,0.78);
  border-top: 1px solid var(--line);
  padding: 34px 0;
}
.fineprint{
  margin-top: 16px;
  font-size: 13px;
  color: rgba(11,18,32,0.62);
}

/* ✅ Responsive (MOBILE MENU RULES INSIDE MEDIA BLOCK) */
@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr; }
  .grid-3{grid-template-columns: 1fr; }
  .grid-2{grid-template-columns: 1fr; }
  .footer-grid{grid-template-columns: 1fr; }

  .nav-toggle{display:inline-flex; align-items:center; justify-content:center;}

  .nav{
    display:none;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.96);
    box-shadow: var(--shadow-sm);
  }
  .nav.is-open{display:flex;}
  .header-inner{flex-wrap: wrap;}
  .nav a{width:100%; padding: 10px 10px; border-radius: 12px;}
  .nav a.btn{width:100%; justify-content:center;}
}

/* === SAPREC: stronger glass + shadows + illustration placeholders (2026-02-22) === */

.illustration-slot{
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid rgba(11, 31, 59, 0.10);
  background: rgba(11, 31, 59, 0.04);
  box-shadow: 0 14px 34px rgba(11, 31, 59, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.illustration-slot img{
  width: min(420px, 100%);
  height: auto;
  display: block;
}

@media (max-width: 720px){
  .illustration-slot{ min-height: 200px; }
}

/* === Stronger glass + shadows (hero emphasis) === */
.glass{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 22px 55px rgba(11, 31, 59, 0.18);
}

.card,
.media-card{
  box-shadow: 0 14px 36px rgba(11, 31, 59, 0.12);
  border: 1px solid rgba(11, 31, 59, 0.08);
}

/* === Header logo sizing (2x first pass) === */
.site-header .brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.site-header .brand img{
  height: 100px;
  width: auto;
  display:block;
}

@media (max-width: 720px){
  .site-header .brand img{ height: 46px; }
}

/* ===== HOMEPAGE POLISH SYSTEM (FINAL PASS) ===== */

/* Stronger section rhythm */
.section{
  padding: 64px 0;
}
.section--alt{
  background: rgba(245,247,251,0.65);
}

/* Section label upgrade */
.section-label{
  display:inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 6px;
}

/* Headline tightening */
h2{
  font-size: clamp(22px, 2.4vw, 30px);
  margin-bottom: 12px;
}

/* Card upgrade (more depth + consistency) */
.card{
  padding: 20px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11,31,59,0.16);
}

/* Image inside cards */
.card img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin-bottom: 10px;
  display:block;
}

/* Section head alignment */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 16px;
  flex-wrap:wrap;
}

/* Link arrow polish */
.link-arrow{
  font-weight: 900;
  color: var(--accent2);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.link-arrow:hover{
  text-decoration:none;
  opacity:0.8;
}

/* Stats card polish */
.stats-card{
  display:grid;
  gap:10px;
}
.stat strong{
  font-size: 22px;
  display:block;
  color: var(--navy);
}
.stat span{
  font-size: 13px;
  color: rgba(11,18,32,0.65);
}

/* Footer polish */
.site-footer{
  background: rgba(11,31,59,0.95);
  color: #ffffff;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 40px 0;
}
.site-footer a{
  color: rgba(255,255,255,0.85);
}
.site-footer a:hover{
  color:#ffffff;
}

/* Emergency strip soften */
.emergency{
  background: rgba(14,165,233,0.08);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.emergency a{
  color: var(--accent2);
}

/* ===== Booking Calendar (public /book) ===== */
.bk-wrap{display:grid; gap:14px}

.bk-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.bk-cal-title{
  font-weight:900;
  color:var(--navy);
  letter-spacing:0.2px;
}
.bk-cal-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.bk-cal-nav a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,0.8);
  box-shadow:var(--shadow-sm);
  color:var(--navy);
  font-weight:700;
}
.bk-cal-nav a:hover{text-decoration:none; background:rgba(255,255,255,0.95)}

.bk-dow{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:10px;
  margin-bottom:8px;
}
.bk-dow div{
  font-size:12px;
  font-weight:800;
  color: rgba(11,18,32,0.60);
  padding: 0 2px;
}

.bk-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:10px;
}
.bk-day{
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow-sm);
  padding:10px;
  min-height:110px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bk-day.is-muted{
  opacity:0.55;
}
.bk-daynum{
  font-weight:900;
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.bk-daytag{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(2,132,199,0.06);
  color: rgba(11,18,32,0.70);
  font-weight:800;
  white-space:nowrap;
}
.bk-slots{
  display:grid;
  gap:6px;
}
.bk-slotbtn{
  appearance:none;
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,0.95);
  cursor:pointer;
  font-weight:800;
  color: var(--navy);
}
.bk-slotbtn small{
  font-weight:900;
  color: rgba(11,18,32,0.62);
}
.bk-slotbtn:hover{background:#fff}
.bk-slotbtn[disabled]{
  cursor:not-allowed;
  background: rgba(245,247,251,0.9);
  color: rgba(11,18,32,0.55);
}
.bk-slotbtn.is-limited{
  border-color: rgba(14,165,233,0.30);
  background: rgba(14,165,233,0.06);
}
.bk-slotbtn.is-full{
  background: rgba(15,23,42,0.05);
}
.bk-slotbtn.is-closed{
  background: rgba(15,23,42,0.05);
}

.bk-select{
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-sm);
  padding:12px;
}
.bk-select strong{color:var(--navy)}
.bk-select .small{margin:6px 0 0}

.bk-formgrid{
  display:grid;
  gap:10px;
  max-width:560px;
  margin-top:12px;
}
.bk-formgrid input,
.bk-formgrid select,
.bk-formgrid textarea{
  width:100%;
}
.bk-hidden{display:none !important}

@media (max-width: 980px){
  .bk-dow, .bk-grid{gap:8px}
  .bk-day{min-height:96px; padding:9px}
  .bk-slotbtn{padding:8px 9px}
}
@media (max-width: 680px){
  .bk-dow div{font-size:11px}
  .bk-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
  .bk-dow{display:none;}
}

/* ===== Booking Calendar layout fix: full-width + no overlap ===== */

/* Calendar card should be full width and not constrained by prose/max-ch */
.bk-cal-card{
  width:100%;
}

/* Panels below calendar: two columns on desktop, stack on mobile */
.bk-panels{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .bk-panels{ grid-template-columns: 1fr; }
}

/* Hard overlap guards */
.bk-daytag{
  max-width: 140px;
  overflow:hidden;
  text-overflow: ellipsis;
}
.bk-slotbtn{
  min-width:0;
}
.bk-slotbtn span,
.bk-slotbtn small{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Make day cells breathe a bit on medium screens */
@media (max-width: 1100px){
  .bk-grid{ gap:8px; }
  .bk-day{ padding:9px; min-height:102px; }
  .bk-slotbtn{ padding:7px 9px; }
}

/* ===== Booking Calendar HARD FIX: keep 7-column calendar; scroll on small screens ===== */

/* Always keep a true calendar grid (7 columns). Older rules may change this; we override at the end. */
.bk-dow{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
}
.bk-grid{
  grid-template-columns: repeat(7, minmax(0,1fr));
}

/* On smaller screens, do NOT squeeze cells (causes overlap).
   Instead, allow horizontal scroll while preserving calendar layout. */
@media (max-width: 980px){
  .bk-cal-card{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bk-dow,
  .bk-grid{
    min-width: 860px;   /* keeps each day cell wide enough */
  }
  .bk-daytag{ max-width: 120px; }
}

/* Extra tight screens: slightly smaller text and buttons (still readable) */
@media (max-width: 520px){
  .bk-dow,
  .bk-grid{
    min-width: 780px;
  }
  .bk-slotbtn{
    padding: 7px 8px;
    font-size: 12px;
  }
  .bk-slotbtn small{
    font-size: 11px;
  }
  .bk-day{ min-height: 100px; }
}

/* Mobile hint for horizontally scrollable calendar */
.bk-scroll-hint{
  display:none;
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(11,18,32,0.62);
}
@media (max-width: 980px){
  .bk-scroll-hint{ display:block; }
}

/* Final polish touches */
.hero-media img{
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(11,31,59,0.18);
}

.grid-3 .card strong{
  display:block;
  margin-top:6px;
  font-size:18px;
  color: var(--navy);
}

.section + .section{
  margin-top: 6px;
}

/* ===== FOOTER + EMERGENCY ALIGNMENT PASS ===== */

.emergency{
  background: #c92b12;
  color: #ffffff;
  border-bottom: none;
  padding: 8px 0;
  font-size: 13px;
}
.emergency__inner{
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.emergency__text{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  font-weight: 700;
}
.emergency__text strong{
  color:#ffffff;
}
.emergency__text span{
  color: rgba(255,255,255,0.96);
}
.emergency__sep{
  opacity: 0.65;
}
.emergency a.emergency__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #c92b12;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.site-footer{
  background: #0b2341;
  color: #ffffff;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 44px 0 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr 1fr;
  gap: 26px;
  align-items:start;
}
.footer-brand__head{
  display:flex;
  align-items:flex-start;
  gap: 14px;
}
.footer-brand__head img{
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.footer-brand h3,
.footer-links h3,
.footer-connect h3{
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 18px;
}
.footer-brand__head p,
.footer-copy,
.footer-links p,
.footer-connect p{
  margin: 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}
.footer-copy{
  margin-top: 16px;
}
.footer-links{
  display:grid;
  gap: 8px;
}
.footer-links a{
  color: rgba(255,255,255,0.88);
  text-decoration:none;
}
.footer-links a:hover{
  color: #ffffff;
}
.footer-socials{
  display:flex;
  gap: 10px;
  margin-top: 18px;
}
.footer-socials img{
  width: 28px;
  height: 28px;
  display:block;
  opacity: 0.9;
}
.footer-connect{
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.footer-connect .btn{
  margin-top: 14px;
  width: 100%;
}
.fineprint--footer{
  max-width: var(--content-max);
  margin: 28px auto 0;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  color: rgba(255,255,255,0.65);
}
.fineprint--footer p{
  margin: 0;
  color: rgba(255,255,255,0.65);
}
.fineprint__links{
  display:flex;
  gap: 16px;
  flex-wrap:wrap;
}
.fineprint__links a{
  color: rgba(255,255,255,0.72);
  text-decoration:none;
}
.fineprint__links a:hover{
  color:#ffffff;
}

@media (max-width: 1100px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 900px){
  .emergency__inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .fineprint--footer{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===============================
   FUND REAL CARE – VISUAL UPGRADE
   =============================== */

/* Section subtext */
.section-sub{
  margin-top: 8px;
  font-size: 15px;
  color: rgba(11,18,32,0.65);
  max-width: 560px;
}

/* Improve cards */
.grid-3 .card{
  position: relative;
  padding: 20px;
  border-radius: var(--radius2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.grid-3 .card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Card images */
.card img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* Highlight card (Most Needed) */
.card--highlight{
  border: 2px solid var(--accent2);
  box-shadow: 0 18px 40px rgba(14,165,233,0.18);
}

.tag{
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(15,23,42,0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  backdrop-filter: blur(2px);
}

/* Primary tag */
.tag--primary{
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #fff;
}

/* Accent tag */
.tag--accent{
  background: rgba(14,165,233,0.92);
  color: #fff;
}

/* Price + impact layout */
.card-meta{
  margin: 10px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-meta strong{
  font-size: 18px;
  color: var(--navy);
}

.impact{
  font-size: 13px;
  color: rgba(11,18,32,0.55);
}

/* Buttons inside cards */
.card .btn{
  width: 100%;
  justify-content: center;
}

/* ===============================
   VISIT SECTION UPGRADE
   =============================== */

.visit-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.visit-content{
  max-width: 560px;
}

.visit-content p{
  margin: 12px 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(11,18,32,0.75);
}

.visit-actions{
  margin-top: 10px;
}

.visit-media{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(11,31,59,0.18);
}

.visit-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* subtle lift */
.visit-media::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* mobile */
@media (max-width: 900px){
  .visit-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .visit-content{
    max-width: 100%;
  }

  .visit-media{
    order: -1;
  }
}


/* ===============================
   COMMUNITY SECTION UPGRADE
   =============================== */

.community-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}

.community-media{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(11,31,59,0.18);
}

.community-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.community-content{
  max-width: 560px;
}

.community-content p{
  margin: 12px 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(11,18,32,0.75);
}

.community-actions{
  margin-top: 10px;
}

/* mobile */
@media (max-width: 900px){
  .community-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .community-media{
    order: -1;
  }

  .community-content{
    max-width: 100%;
  }
}

/* =========================
   DONATE HERO (PREMIUM)
========================= */

/* ===== DONATE HERO (ISOLATED — NO GLOBAL COLLISION) ===== */

.hero-premium {
  position: relative;
  background: url('/assets/img/site/R200-Penguin.png') center top / cover no-repeat;
  min-height: auto;
  display: flex;
  align-items: stretch;
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 18px 40px rgba(11,31,59,0.14);
}

/* SCOPED OVERLAY */
.hero-premium .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg,
      rgba(11,35,65,0.84) 0%,
      rgba(11,35,65,0.74) 24%,
      rgba(11,35,65,0.48) 44%,
      rgba(11,35,65,0.18) 66%,
      rgba(11,35,65,0.06) 100%
    );
}

/* SCOPED CONTENT */
.hero-premium .hero-content {
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding: 48px 48px 52px;
  color: #fff;
  margin-left: auto;
  text-align: right;
}

.hero-premium .hero-content p {
  color: rgba(255,255,255,0.92);
}

/* SCOPED ACTIONS */
.hero-premium .hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero-actions .btn {
  min-width: 280px;
  min-height: 60px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  justify-content: center;
}

.hero-actions .btn--secondary {
  background: rgba(18,31,57,0.46);
  border: 2px solid rgba(255,255,255,0.82);
  color: #fff;
  box-shadow: none;
}

@media (max-width: 900px) {
  .hero-premium {
    min-height: 440px;
    background-position: 52% center;
    border-radius: 22px;
    margin-bottom: 40px;
  }

  .hero-content {
    max-width: 100%;
    padding: 34px 24px 42px;
      text-align: right;
  margin-left: auto;
  }

  .hero-content h1 {
    font-size: clamp(34px, 11vw, 52px);
  }

  .hero-content p {
    font-size: 18px;
    max-width: 100%;
  }

  .hero-actions {
    gap: 12px;
  }

  .hero-actions .btn {
    min-width: 100%;
    width: 100%;
    min-height: 54px;
    font-size: 15px;
  }
}
/* =========================
   DONATE CAMPAIGN LAYOUT (CLEAN)
========================= */

/* Section spacing */
.donate-section {
  margin: 20px 0;
}

/* Section header */
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.section-header .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #4da3ff;
  margin-bottom: 10px;
}

.section-header h2 {
  font-size: 40px;
  margin-bottom: 10px;
}

.section-header p {
  color: #5f6b7a;
  font-size: 17px;
}

/* Campaign grid */
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.campaign-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}

.campaign-card:hover {
  transform: translateY(-6px);
}

.card-image {
  height: 160px;
  background-size: cover;
  background-position: center;
}

.card-body {
  padding: 20px;

  /* NEW: force vertical layout */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* NEW: make cards equal height */
.campaign-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ===== ALIGN DONATE CARDS WITH HOME CARDS ===== */

.campaign-card.card {
  padding: 18px;
}

.campaign-card.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

.campaign-card .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.campaign-card.card {
  position: relative;
}

.campaign-card .card-meta {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.campaign-card .card-meta strong {
  font-size: 20px;
  font-weight: 800;
  color: #0f2a44;
}

.campaign-card .impact {
  font-size: 13px;
  color: #6b7785;
}

/* NEW: push button to bottom */
.card-body .btn-add {
  margin-top: auto;
}

.card-body h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.card-body p {
  font-size: 14px;
  color: #6b7785;
  margin-bottom: 14px;
}

.price {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #2d6cdf;
}

/* Monthly feature */
.donate-monthly-feature .monthly-feature-card {
  display: grid;
  grid-template-columns: 300px 1fr 260px;
  gap: 30px;
  background: #fff;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  align-items: center;
}

.monthly-image {
  height: 200px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
}

.monthly-content h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.monthly-price {
  font-size: 22px;
  font-weight: 800;
  margin: 12px 0;
  color: #2d6cdf;
}

.monthly-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.monthly-options .monthly-card {
  width: 100%;
  text-align: center;
}

.monthly-benefits {
  background: #f4f7fb;
  padding: 18px;
  border-radius: 14px;
}

.monthly-benefits h4 {
  margin-bottom: 10px;
}

.monthly-benefits ul {
  padding-left: 18px;
  margin: 0;
}

.monthly-benefits li {
  margin-bottom: 6px;
}

.donate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}

.donate-main {
  min-width: 0;
}

.donate-sidebar {
  min-width: 0;
  padding-top: 180px;
  align-self: stretch;
  display: flex;
}

.donate-summary-card {
  position: sticky;
  top: 120px;
  background: #0f2a44;
  color: #fff;
  padding: 28px;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);

  width: 100%;
  min-height: calc(100% - 238px);
  display: flex;
  flex-direction: column;
}

.donate-summary-card__section {
  min-width: 0;
}

.donate-summary-card h3 {
  color: #fff;
  margin-bottom: 12px;
}

.donate-summary-card p,
.donate-summary-card strong,
.donate-summary-card .summary-total,
.donate-summary-card .empty {
  color: rgba(255,255,255,0.88);
}

.donate-summary-card .summary-total {
  font-size: 20px;
  font-weight: 800;
  margin: 16px 0;
}

.donate-summary-card .btn[disabled] {
  opacity: 0.65;
}

.donate-summary-card .donate-eft p,
.donate-summary-card .donate-trust p {
  margin-bottom: 8px;
}

.sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,0.14);
  margin: 20px 0;
}

/* =========================
   PAYFAST TRUST STRIP
========================= */

.donate-trust-strip,
.donate-trust-strip.donate-section {
  position: relative;
  z-index: 3;
  margin: -42px 0 18px 0;
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.04);
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.trust-text {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.trust-text strong {
  font-size: 15px;
  color: #0f2a44;
}

.trust-text span {
  color: #6b7785;
  font-size: 13px;
}

.trust-logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.trust-logos img {
  height: 32px;
  width: auto;
  object-fit: contain;
  max-width: 140px;
}

.trust-logos img[alt="PayFast"] {
  height: 38px;
}

.trust-logos img[alt="Instant EFT"],
.trust-logos img[alt="Capitec Pay"] {
  height: 28px;
}

/* Mobile */
@media (max-width: 768px) {
  .trust-strip-inner {
    flex-direction: column;
    align-items: flex-start;
      .donate-trust-strip,
  .donate-trust-strip.donate-section {
    margin: 16px 0 20px 0;
  }
  }

  .trust-logos {
    margin-top: 10px;
  }
}

/* Responsive */
@media (max-width: 1100px) {
  .campaign-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .donate-monthly-feature .monthly-feature-card {
    grid-template-columns: 1fr;
  }

  .donate-layout {
    grid-template-columns: 1fr;
  }

  .donate-sidebar {
    padding-top: 0;
    display: block;
    align-self: auto;
  }

  .donate-summary-card {
    position: static;
    min-height: 0;
    display: block;
  }
}

.summary-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.summary-item__name {
  font-size: 14px;
}

.summary-item__amount {
  font-weight: 700;
  font-size: 14px;
}

.summary-item__remove {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  opacity: 0.85;
}

.summary-item__remove:hover {
  opacity: 1;
  transform: scale(1.1);
}

.summary-item {
  transition: opacity 180ms ease, transform 180ms ease;
}

.summary-item.is-removing {
  opacity: 0;
  transform: translateX(10px);
}

.summary-item--simple {
  grid-template-columns: 1fr auto;
}

.summary-item--simple .summary-item__remove {
  display: none;
}

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

.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:1rem;
}

.admin-nav{
  display:flex;
  gap:.5rem;
  margin-top:.75rem;
}

.admin-nav a{
  padding:.45rem .75rem;
  border-radius:.6rem;
  text-decoration:none;
  font-weight:600;
  border:1px solid #d1d5db;
  background:#f3f4f6;
  color:#111;
}

.admin-nav a.active{
  background:#0b5cab;
  color:#fff;
  border:none;
}

.admin-filters{
  display:flex;
  gap:.5rem;
  margin-top:.75rem;
  flex-wrap:wrap;
}

.admin-filters a{
  padding:.4rem .7rem;
  border-radius:.5rem;
  text-decoration:none;
  border:1px solid #d1d5db;
  background:#f3f4f6;
  color:#111;
  font-size:.9rem;
}

.admin-filters a.active{
  background:#0b5cab;
  color:#fff;
  border:none;
}



/* ===============================
   SAPREC Ticket Pricing
   =============================== */
.ticket-pricing-card{margin-top:18px;padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,0.28);background:rgba(255,255,255,0.12);box-shadow:0 18px 42px rgba(11,31,59,0.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.ticket-pricing-card--booking{border-color:rgba(11,31,59,0.08);background:rgba(255,255,255,0.76);box-shadow:0 14px 32px rgba(11,31,59,0.10);}
.ticket-pricing-card__label{display:inline-flex;margin-bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(47,134,255,0.16);color:#fff;font-size:12px;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;}
.ticket-pricing-card--booking .ticket-pricing-card__label{color:var(--navy);background:rgba(6,182,212,0.12);}
.ticket-pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.ticket-pricing-grid div{padding:12px;border-radius:16px;background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.18);}
.ticket-pricing-card--booking .ticket-pricing-grid div{background:rgba(248,251,255,0.92);border-color:rgba(11,31,59,0.08);}
.ticket-pricing-grid strong{display:block;color:#fff;font-size:24px;line-height:1.05;font-weight:950;}
.ticket-pricing-card--booking .ticket-pricing-grid strong{color:var(--navy);}
.ticket-pricing-grid span{display:block;margin-top:4px;color:rgba(255,255,255,0.84);font-size:12px;line-height:1.25;font-weight:700;}
.ticket-pricing-card--booking .ticket-pricing-grid span{color:rgba(11,18,32,0.66);}
.ticket-pricing-card__link{display:inline-flex;margin-top:12px;color:#fff;font-weight:900;text-decoration:none;}
.ticket-pricing-card__note{margin:10px 0 0;color:rgba(11,18,32,0.64);font-size:13px;line-height:1.45;}
.footer-pricing{margin-top:8px !important;color:rgba(255,255,255,0.9) !important;}
@media (max-width:700px){.ticket-pricing-grid{grid-template-columns:1fr;}}

/* SAPREC P14.2 home hero right-side pricing panel */
.hero--support .hero-grid--home-support{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 360px);
  gap:clamp(28px, 5vw, 76px);
  align-items:center;
}

.hero--support .hero-pricing-rail{
  position:relative;
  z-index:2;
  justify-self:end;
  width:min(340px, 100%);
  margin-top:clamp(24px, 7vh, 92px);
}

.hero--support .hero-pricing-rail .ticket-pricing-card--hero{
  width:100%;
  margin-top:0;
  padding:18px;
  border-radius:24px;
  background:rgba(11,31,59,0.34);
  border:1px solid rgba(255,255,255,0.34);
  box-shadow:0 22px 54px rgba(0,0,0,0.24);
}

.hero--support .hero-pricing-rail .ticket-pricing-grid{
  grid-template-columns:1fr;
  gap:11px;
}

.hero--support .hero-pricing-rail .ticket-pricing-grid div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
}

.hero--support .hero-pricing-rail .ticket-pricing-grid strong{
  font-size:26px;
}

.hero--support .hero-pricing-rail .ticket-pricing-grid span{
  margin-top:0;
  text-align:right;
}

.hero--support .hero-pricing-rail .ticket-pricing-card__link{
  margin-top:16px;
  width:100%;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.92);
  color:var(--navy);
  box-shadow:0 12px 26px rgba(0,0,0,0.12);
}

@media (max-width: 980px){
  .hero--support .hero-grid--home-support{
    grid-template-columns:1fr;
  }

  .hero--support .hero-pricing-rail{
    justify-self:start;
    width:min(520px, 100%);
    margin-top:22px;
  }

  .hero--support .hero-pricing-rail .ticket-pricing-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .hero--support .hero-pricing-rail .ticket-pricing-grid div{
    display:block;
  }

  .hero--support .hero-pricing-rail .ticket-pricing-grid span{
    text-align:left;
    margin-top:4px;
  }
}

@media (max-width: 700px){
  .hero--support .hero-pricing-rail{
    width:100%;
  }

  .hero--support .hero-pricing-rail .ticket-pricing-grid{
    grid-template-columns:1fr;
  }

  .hero--support .hero-pricing-rail .ticket-pricing-grid div{
    display:flex;
  }

  .hero--support .hero-pricing-rail .ticket-pricing-grid span{
    text-align:right;
    margin-top:0;
  }
}

/* SAPREC P14.3 hero pricing card action buttons */
.hero--support .hero-pricing-rail .ticket-pricing-card__actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:16px;
}

.hero--support .hero-pricing-rail .ticket-pricing-card__actions .ticket-pricing-card__link{
  margin-top:0;
}

.hero--support .hero-pricing-rail .ticket-pricing-card__link--secondary{
  background:rgba(11,31,59,0.64);
  color:#fff;
  border:1px solid rgba(255,255,255,0.32);
  box-shadow:0 12px 26px rgba(0,0,0,0.16);
}

.hero--support .hero-pricing-rail .ticket-pricing-card__link--secondary:hover{
  background:rgba(11,31,59,0.82);
}

/* SAPREC P14.4 contact page penguin + map layout */
.contact-page .contact-layout{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(360px, 1.05fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:stretch;
}

.contact-page .contact-left{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}

.contact-page .contact-card,
.contact-page .contact-map-card{
  border-radius:22px;
  box-shadow:0 24px 60px rgba(11,31,59,0.10);
}

.contact-page .contact-details-card{
  margin-top:12px;
  border-radius:18px;
  background:rgba(255,255,255,0.82);
}

.contact-page .contact-penguin{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  border-radius:22px;
  background:linear-gradient(145deg, rgba(255,255,255,0.92), rgba(239,246,255,0.76));
  border:1px solid rgba(11,31,59,0.08);
  box-shadow:0 20px 48px rgba(11,31,59,0.08);
}

.contact-page .contact-penguin img{
  width:min(260px, 72%);
  height:auto;
  object-fit:contain;
}

.contact-page .contact-map-card{
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(11,31,59,0.10);
  min-height:520px;
  display:flex;
  flex-direction:column;
}

.contact-page .contact-map-card iframe{
  width:100%;
  min-height:420px;
  flex:1 1 auto;
  border:0;
  display:block;
}

.contact-page .contact-map-footer{
  display:grid;
  gap:5px;
  padding:16px 18px;
  background:#fff;
  border-top:1px solid rgba(11,31,59,0.10);
  color:var(--navy);
}

.contact-page .contact-map-footer strong{
  font-size:16px;
}

.contact-page .contact-map-footer span{
  color:rgba(11,18,32,0.72);
}

.contact-page .contact-map-footer a{
  color:#0284c7;
  font-weight:800;
  text-decoration:none;
}

@media (max-width: 980px){
  .contact-page .contact-layout{
    grid-template-columns:1fr;
  }

  .contact-page .contact-map-card{
    min-height:460px;
  }

  .contact-page .contact-map-card iframe{
    min-height:360px;
  }
}

@media (max-width: 640px){
  .contact-page .contact-penguin{
    min-height:180px;
  }

  .contact-page .contact-penguin img{
    width:min(220px, 76%);
  }

  .contact-page .contact-map-card{
    min-height:420px;
  }

  .contact-page .contact-map-card iframe{
    min-height:320px;
  }
}

/* SAPREC P14.4C contact page alignment correction */
.contact-page .contact-left,
.contact-page .contact-card,
.contact-page .contact-penguin,
.contact-page .contact-map-card{
  box-sizing:border-box;
}

.contact-page .contact-card,
.contact-page .contact-penguin{
  width:100%;
  max-width:none;
}

@media (min-width: 981px){
  .contact-page .contact-layout{
    align-items:stretch;
  }

  .contact-page .contact-left{
    align-self:stretch;
    height:100%;
    grid-template-rows:auto minmax(180px, 1fr);
  }

  .contact-page .contact-card{
    align-self:start;
  }

  .contact-page .contact-penguin{
    align-self:stretch;
    min-height:0;
  }

  .contact-page .contact-map-card{
    align-self:stretch;
    height:100%;
  }
}


/* SAPREC P15.3C donation quantity controls */
.product-card.is-selected{
  border-color:rgba(2,132,199,0.34);
  box-shadow:0 22px 54px rgba(2,132,199,0.14);
}

.donate-qty-control,
.summary-qty-control{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.donate-qty-control{
  width:100%;
  margin-top:12px;
  padding:8px;
  border-radius:999px;
  background:rgba(11,31,59,0.06);
  border:1px solid rgba(11,31,59,0.10);
}

.donate-qty-control[hidden]{
  display:none !important;
}

.donate-qty-btn,
.summary-qty-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(11,31,59,0.14);
  background:#fff;
  color:var(--navy);
  font-size:20px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}

.donate-qty-btn:hover,
.summary-qty-btn:hover{
  background:var(--sky);
  color:#fff;
}

.donate-qty-value,
.summary-qty-value{
  min-width:28px;
  text-align:center;
  font-weight:900;
  color:var(--navy);
}

.summary-item--with-qty{
  grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:10px;
}

.summary-item__details{
  min-width:0;
}

.summary-item__meta{
  margin-top:3px;
  font-size:12px;
  line-height:1.25;
  color:rgba(11,18,32,0.58);
  font-weight:700;
}

.summary-item--with-qty .summary-item__amount{
  white-space:nowrap;
}

.summary-qty-control{
  padding:4px;
  border-radius:999px;
  background:rgba(11,31,59,0.05);
}

.summary-qty-btn{
  width:28px;
  height:28px;
  font-size:17px;
}

@media (max-width: 640px){
  .summary-item--with-qty{
    grid-template-columns:1fr auto;
  }

  .summary-item--with-qty .summary-qty-control{
    grid-column:1 / -1;
    justify-content:flex-start;
  }

  .summary-item--with-qty .summary-item__remove{
    grid-column:2;
    grid-row:1;
  }
}

/* SAPREC P15.3D donation summary multiplier light blue */
.donate-summary-card .summary-item__meta{
  color:#38bdf8;
  font-weight:800;
}

/* SAPREC_FOOTER_F2_FIXED_SYNERGETIX_STRIP */
:root{
  --saprec-fixed-footer-height: 42px;
}

body{
  padding-bottom: var(--saprec-fixed-footer-height);
}

.site-footer{
  padding-bottom: calc(34px + var(--saprec-fixed-footer-height));
}

.fineprint--footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  max-width: none;
  width: 100%;
  min-height: var(--saprec-fixed-footer-height);
  margin: 0;
  padding: 6px clamp(16px, 5vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  background: #0b2a4a;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 -10px 24px rgba(2,8,23,0.18);
}

.fineprint--footer p{
  margin: 0;
}

.fineprint__copyright{
  justify-self: start;
  white-space: nowrap;
}

.fineprint__powered{
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.fineprint__powered:hover{
  color: #ffffff;
  text-decoration: none;
}

.fineprint__powered img{
  display: block;
  height: 27px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.fineprint__links{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  white-space: nowrap;
}

.fineprint__links a{
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
}

.fineprint__links a:hover{
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 900px){
  :root{
    --saprec-fixed-footer-height: 58px;
  }

  .fineprint--footer{
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px 14px;
    text-align: center;
  }

  .fineprint__copyright,
  .fineprint__powered,
  .fineprint__links{
    justify-self: center;
  }

  .fineprint__powered{
    font-size: 11px;
    white-space: normal;
  }

  .fineprint__powered img{
    height: 22px;
    max-width: 144px;
  }

  .fineprint__links{
    gap: 12px;
  }
}

/* SAPREC_PRIVACY_P2_POPIA_POLICY_PAGE */
.legal-page{
  padding: 42px 0 72px;
  background:
    radial-gradient(circle at 12% 0%, rgba(47,134,255,0.10), transparent 34%),
    linear-gradient(180deg, rgba(248,251,255,0.96), rgba(255,255,255,0.98));
}

.legal-hero{
  margin-bottom: 22px;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(11,42,74,0.96), rgba(23,92,150,0.92));
  color: #ffffff;
  box-shadow: 0 20px 60px rgba(11,31,59,0.18);
  overflow: hidden;
  position: relative;
}

.legal-hero::after{
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  top: -80px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
}

.legal-kicker{
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-hero h1{
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.legal-lead{
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0;
  color: rgba(255,255,255,0.90);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.65;
}

.legal-updated{
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  color: rgba(255,255,255,0.72);
  font-weight: 800;
}

.legal-layout{
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.legal-nav-card{
  position: sticky;
  top: 96px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(11,31,59,0.08);
  box-shadow: 0 14px 38px rgba(11,31,59,0.08);
}

.legal-nav-card h2{
  margin: 0 0 12px;
  font-size: 16px;
  color: #0b2a4a;
}

.legal-nav-card a{
  display: block;
  padding: 8px 0;
  color: #255f99;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(11,31,59,0.07);
}

.legal-nav-card a:hover{
  color: #0b2a4a;
  text-decoration: underline;
}

.legal-content{
  display: grid;
  gap: 16px;
}

.legal-panel{
  padding: clamp(20px, 3vw, 30px);
  border-radius: 24px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,31,59,0.08);
  box-shadow: 0 14px 38px rgba(11,31,59,0.07);
}

.legal-panel h2{
  margin: 0 0 12px;
  color: #0b2a4a;
  font-size: clamp(22px, 3vw, 30px);
}

.legal-panel h3{
  margin: 0 0 8px;
  color: #123f68;
  font-size: 17px;
}

.legal-panel p,
.legal-panel li{
  color: rgba(11,18,32,0.76);
  line-height: 1.7;
}

.legal-panel p{
  margin: 0 0 12px;
}

.legal-list{
  margin: 0;
  padding-left: 20px;
}

.legal-list li{
  margin: 7px 0;
}

.legal-card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.legal-card-grid article{
  padding: 16px;
  border-radius: 18px;
  background: rgba(239,246,255,0.75);
  border: 1px solid rgba(37,99,235,0.10);
}

.legal-card-grid ul{
  margin: 0;
  padding-left: 18px;
}

.legal-highlight{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(47,134,255,0.10);
  border: 1px solid rgba(47,134,255,0.18);
  color: #0b2a4a;
  line-height: 1.65;
}

.legal-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.legal-contact-grid div,
.legal-contact-card{
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(11,42,74,0.06);
  border: 1px solid rgba(11,42,74,0.09);
}

.legal-contact-grid strong{
  display: block;
  color: #0b2a4a;
  margin-bottom: 4px;
}

.legal-contact-grid span{
  color: rgba(11,18,32,0.74);
}

.legal-panel--contact{
  background: linear-gradient(135deg, rgba(239,246,255,0.96), rgba(255,255,255,0.96));
}

.legal-contact-card{
  color: rgba(11,18,32,0.76);
  line-height: 1.8;
}

.legal-page a{
  color: #1769b8;
}

@media (max-width: 980px){
  .legal-layout{
    grid-template-columns: 1fr;
  }

  .legal-nav-card{
    position: static;
  }

  .legal-card-grid,
  .legal-contact-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .legal-page{
    padding-top: 24px;
  }

  .legal-hero,
  .legal-panel{
    border-radius: 20px;
  }

  .legal-nav-card{
    display: none;
  }
}

/* SAPREC_FOOTER_F4_SPONSOR_TEXT_NORMAL_WEIGHT */
.fineprint--footer .fineprint__powered,
.fineprint--footer .fineprint__powered span{
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* SAPREC_GO_LIVE_DONATE_ONLINE_PAUSED */
.donate-summary-card .donate-submit--offline,
.donate-summary-card .donate-submit--offline[disabled] {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.72 !important;
  filter: grayscale(1);
  pointer-events: none;
}

.donate-summary-card .donate-online-paused-note {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  font-size: 0.86rem;
  line-height: 1.4;
}

.donate-summary-card .donate-eft--priority {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.donate-summary-card .donate-eft--priority h3 {
  margin-bottom: 10px;
}

.donate-summary-card .donate-eft--priority p {
  margin: 0 0 8px;
}







/* SAPREC_MOBILE_HEADER_LOGO_R9_ORIGINAL_ASPECT + SAPREC_MOBILE_LOGO_SCALE_ONLY_R10 + SAPREC_MOBILE_LOGO_NO_BORDER_SHADOW_R11
   Mobile-only logo fix.
   Uses original logo source, preserves aspect ratio, no crop, no content replacement asset.
   Does not change header width/height, hero, menu, footer, desktop or tablet. */
@media (max-width: 767px) {
  .site-header .brand {
    margin-left: 22px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .brand img {
    width: auto !important;
    height: 66px !important;
    max-width: none !important;
    max-height: 66px !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(1.70) !important;
    transform-origin: left center !important;
    display: block !important;
    border-radius: 16px !important;
    border: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
}


/* SAPREC_STICKY_HEADER_R5_STACKING_ONLY
   Fix: keep the accepted sticky header behavior but prevent lower page sections from painting over it.
   Scope: stacking only. No fixed positioning, no hero spacing, no emergency bar changes, no locked mobile logo changes. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  isolation: isolate !important;
}

.site-header .header-inner {
  position: relative !important;
  z-index: 10001 !important;
}


/* SAPREC_STICKY_HEADER_R6_BODY_HEIGHT_BOUNDARY_FIX
   Fix: prevent html/body fixed height from ending the sticky header boundary too early.
   Scope: sticky boundary only. No fixed header, no hero spacing, no emergency bar changes, no locked mobile logo changes. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
}

body {
  min-height: 100vh !important;
}


/* SAPREC_MOBILE_MENU_R1_PHONE_ONLY_REDESIGN
   Scope: opened phone menu only.
   Does not touch desktop menu, tablet menu, sticky header, emergency strip, logo, hero, or footer. */
@media (max-width: 767px) {
  .site-header .nav {
    display: none !important;
    width: calc(100% - 16px) !important;
    margin: 10px 8px 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border: 1px solid rgba(11, 31, 59, 0.10) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,252,0.96)) !important;
    box-shadow: 0 18px 42px rgba(11, 31, 59, 0.16) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .site-header .nav.is-open {
    display: flex !important;
  }

  .site-header .nav a {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(11, 31, 59, 0.08) !important;
    background: rgba(255,255,255,0.68) !important;
    color: var(--navy) !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .site-header .nav a::after {
    content: "›" !important;
    color: rgba(11, 31, 59, 0.42) !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .site-header .nav a:hover,
  .site-header .nav a:focus-visible {
    background: rgba(47, 134, 255, 0.10) !important;
    border-color: rgba(47, 134, 255, 0.28) !important;
    color: #08213f !important;
  }

  .site-header .nav a.btn {
    min-height: 46px !important;
    justify-content: center !important;
    margin-top: 2px !important;
    border-radius: 17px !important;
    font-weight: 950 !important;
    letter-spacing: 0.02em !important;
  }

  .site-header .nav a.btn::after {
    content: none !important;
  }

  .site-header .nav a.btn--outline {
    background: rgba(255,255,255,0.92) !important;
    color: var(--navy) !important;
    border: 1px solid rgba(11, 31, 59, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72) !important;
  }

  .site-header .nav a.btn--primary {
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    color: #ffffff !important;
    border: 1px solid rgba(14, 165, 233, 0.38) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24) !important;
  }
}


/* SAPREC_MOBILE_HEADER_CTAS_R1B_PHONE_ONLY_STYLE
   Scope: phone header quick-action buttons only.
   Desktop and tablet remain hidden. Does not alter locked desktop nav, tablet nav, sticky header, logo, menu panel, hero, map, or footer. */
.site-header .mobile-header-ctas {
  display: none !important;
}

@media (max-width: 767px) {
  .site-header .mobile-header-ctas {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .site-header .mobile-header-cta {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(11, 31, 59, 0.10) !important;
  }

  .site-header .mobile-header-cta--outline {
    background: rgba(255,255,255,0.94) !important;
    color: var(--navy) !important;
    border: 1px solid rgba(11, 31, 59, 0.18) !important;
  }

  .site-header .mobile-header-cta--primary {
    background: linear-gradient(135deg, #0ea5e9, #22c1dc) !important;
    color: #06223f !important;
    border: 1px solid rgba(14, 165, 233, 0.42) !important;
    box-shadow: 0 12px 26px rgba(14, 165, 233, 0.24) !important;
  }

  .site-header .mobile-header-cta:hover,
  .site-header .mobile-header-cta:focus-visible {
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 370px) {
  .site-header .mobile-header-ctas {
    gap: 4px !important;
  }

  .site-header .mobile-header-cta {
    min-height: 31px !important;
    padding: 0 7px !important;
    font-size: 0.64rem !important;
  }
}


/* SAPREC_EMERGENCY_BAR_R1_PHONE_THIN_INLINE
   Scope: phone emergency strip only.
   Makes the red rescue bar thinner, text smaller, and CALL NOW inline on the right.
   Does not touch desktop/tablet emergency styling, sticky header, logo, mobile header CTA buttons, menu, hero, map, or footer. */
@media (max-width: 767px) {
  .emergency {
    padding: 5px 0 !important;
    font-size: 9.5px !important;
    line-height: 1.12 !important;
  }

  .emergency .container {
    padding-left: 16px !important;
    padding-right: 8px !important;
  }

  .emergency__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 34px !important;
  }

  .emergency__text {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px 5px !important;
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
  }

  .emergency__text strong,
  .emergency__text span {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
  }

  .emergency__sep {
    display: none !important;
  }

  .emergency a.emergency__btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 370px) {
  .emergency {
    padding: 4px 0 !important;
  }

  .emergency .container {
    padding-left: 12px !important;
    padding-right: 6px !important;
  }

  .emergency__inner {
    gap: 5px !important;
    min-height: 32px !important;
  }

  .emergency__text,
  .emergency__text strong,
  .emergency__text span {
    font-size: 8.7px !important;
  }

  .emergency a.emergency__btn {
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 8.8px !important;
  }
}


/* SAPREC_HOME_HERO_BG_R1_MOBILE_IMG_SHIFT_RIGHT_360PX
   Scope: HOME page hero image only, phone breakpoint only.
   Moves the actual <img> inside .hero.hero--support .hero-bg visually 360px to the right.
   Does not touch Donate page, desktop, tablet, header, sticky behavior, logo, menu, emergency bar, footer, content, or buttons. */
@media (max-width: 767px) {
  .hero.hero--support .hero-bg img {
    object-position: calc(50% - 360px) center !important;
  }
}



/* SAPREC_ADMIN_LOGIN_UI_S4A
   Scope: admin login page only.
   Purpose: replace default browser form controls with SAPREC-styled secure login controls.
   Does not change authentication, CSRF, sessions, DB, routes, footer, header, or public booking forms.
*/
.saprec-admin-login{
  padding-top:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,5rem);
}

.saprec-admin-login .saprec-auth-card{
  max-width:720px;
  margin:0 auto;
  padding:clamp(1.35rem,3vw,2.1rem);
  border:1px solid rgba(15,35,65,.10);
  border-radius:1.15rem;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 22px 60px rgba(11,35,65,.16);
}

.saprec-auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.65rem;
  padding:.35rem .7rem;
  border:1px solid rgba(34,184,224,.22);
  border-radius:999px;
  background:#eaf8fd;
  color:#0b5f78;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.saprec-auth-title{
  margin:.15rem 0 1.25rem;
  color:#071427;
  font-size:clamp(1.75rem,3vw,2.35rem);
  line-height:1.1;
}

.saprec-auth-alert{
  margin:0 0 1rem;
  padding:.9rem 1rem;
  border-radius:.85rem;
  font-weight:700;
}

.saprec-auth-alert--success{
  border:1px solid #bbf7d0;
  background:#e7f7ee;
  color:#14532d;
}

.saprec-auth-alert--error{
  border:1px solid #fecaca;
  background:#fde8e8;
  color:#7f1d1d;
}

.saprec-auth-form{
  display:grid;
  gap:1rem;
}

.saprec-auth-field{
  display:grid;
  gap:.4rem;
  margin:0;
  color:#10243a;
  font-weight:900;
}

.saprec-auth-field span{
  font-size:.95rem;
}

.saprec-auth-input{
  width:100%;
  box-sizing:border-box;
  min-height:3.15rem;
  padding:.85rem 1rem;
  border:1px solid #cbd5e1;
  border-radius:.85rem;
  background:#ffffff;
  color:#071427;
  font:inherit;
  font-weight:700;
  outline:none;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.saprec-auth-input:focus{
  border-color:#22b8e0;
  background:#fbfdff;
  box-shadow:0 0 0 4px rgba(34,184,224,.18);
}

.saprec-auth-submit{
  width:100%;
  min-height:3.2rem;
  margin-top:.25rem;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#22b8e0,#13a9d4);
  color:#ffffff;
  font:inherit;
  font-weight:950;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(34,184,224,.28);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.saprec-auth-submit:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 18px 36px rgba(34,184,224,.34);
}

.saprec-auth-submit:active{
  transform:translateY(0);
  box-shadow:0 10px 22px rgba(34,184,224,.24);
}

.saprec-auth-link{
  margin:1.1rem 0 0;
  font-weight:800;
}

.saprec-auth-link a{
  color:#0284c7;
  text-decoration:none;
}

.saprec-auth-link a:hover{
  text-decoration:underline;
}

@media (max-width:640px){
  .saprec-admin-login{
    padding-top:1.35rem;
    padding-bottom:2rem;
  }

  .saprec-admin-login .saprec-auth-card{
    border-radius:1rem;
  }

  .saprec-auth-input,
  .saprec-auth-submit{
    min-height:3rem;
  }
}


/* SAPREC_HEADER_MENU_S4B_R1_CONSERVATION_ACCENT
   Scope: desktop public header menu only.
   Purpose: Conservation Accent Menu with wing marker hover/active state and clearer menu spacing.
   Does not change mobile menu panel, mobile logo, emergency strip, CTA button identity, routes, auth, DB, or .htaccess.
*/
@media (min-width: 901px) {
  .site-header .nav.nav--conservation-accent {
    gap: clamp(1.05rem, 1.55vw, 1.75rem);
    flex-wrap: nowrap;
  }

  .site-header .nav.nav--conservation-accent .nav-main-link {
    position: relative;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 19px 2px 10px;
    color: var(--navy);
    font-size: 0.98rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.01em;
    opacity: 1;
    text-decoration: none;
    white-space: nowrap;
    outline: none;
    transition:
      color 160ms ease,
      transform 160ms ease,
      text-shadow 160ms ease;
  }

  .site-header .nav.nav--conservation-accent .nav-main-link::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 38px;
    height: 15px;
    background: #9be7fb;
    opacity: 0;
    transform: translateX(-50%) translateY(5px) scale(0.86);
    transition:
      opacity 160ms ease,
      transform 160ms ease,
      background-color 160ms ease,
      filter 160ms ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 24'%3E%3Cpath fill='black' d='M41.9 18.6C29.3 7.6 14.7 3.3 2.1 4.2c9.1 8.1 21.3 13.7 38.3 14.5h3.2c17-.8 29.2-6.4 38.3-14.5-12.6-.9-27.2 3.4-39.8 14.4h-.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 24'%3E%3Cpath fill='black' d='M41.9 18.6C29.3 7.6 14.7 3.3 2.1 4.2c9.1 8.1 21.3 13.7 38.3 14.5h3.2c17-.8 29.2-6.4 38.3-14.5-12.6-.9-27.2 3.4-39.8 14.4h-.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }

  .site-header .nav.nav--conservation-accent .nav-main-link:hover,
  .site-header .nav.nav--conservation-accent .nav-main-link:focus-visible {
    color: #0479bd;
    transform: translateY(-1px);
    text-shadow: 0 8px 22px rgba(14, 165, 233, 0.18);
  }

  .site-header .nav.nav--conservation-accent .nav-main-link:hover::before,
  .site-header .nav.nav--conservation-accent .nav-main-link:focus-visible::before {
    opacity: 1;
    background: #8be3fb;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: drop-shadow(0 5px 9px rgba(14, 165, 233, 0.18));
  }

  .site-header .nav.nav--conservation-accent .nav-main-link.is-active {
    color: #0577b8;
    transform: translateY(-1px);
    text-shadow: 0 8px 22px rgba(14, 165, 233, 0.20);
  }

  .site-header .nav.nav--conservation-accent .nav-main-link.is-active::before {
    opacity: 1;
    background: #0577b8;
    transform: translateX(-50%) translateY(0) scale(1.04);
    filter: drop-shadow(0 7px 12px rgba(5, 119, 184, 0.26));
  }

  .site-header .nav.nav--conservation-accent .nav-main-link.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(14,165,233,0.25), rgba(5,119,184,0.95), rgba(14,165,233,0.25));
    transform: translateX(-50%);
    box-shadow: 0 6px 14px rgba(5, 119, 184, 0.18);
  }

  .site-header .nav.nav--conservation-accent .nav-main-link + .nav-cta {
    margin-left: clamp(0.75rem, 1.25vw, 1.4rem);
  }

  .site-header .nav.nav--conservation-accent .nav-cta {
    align-self: center;
  }
}








/* SAPREC_HEADER_MENU_S4D_PNG_PENGUIN_MARKER
   Scope: desktop public header menu marker only.
   Purpose: replace failed embedded SVG marker attempts with the approved PNG icon.
   Keeps accepted S4-B spacing, colours, underline, hover/active behaviour, CTAs, and layout.
   Does not change header markup, mobile menu, mobile logo, emergency strip, auth, DB, routes, or .htaccess.
*/
@media (min-width: 901px) {
  .site-header .nav.nav--conservation-accent .nav-main-link::before {
    width: 30px !important;
    height: 22px !important;
    top: -3px !important;
    background: transparent url("/assets/img/site/icon-small.png") center center / contain no-repeat !important;
    background-color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 0 !important;
    transform: translateX(-50%) translateY(4px) scale(0.96) !important;
    pointer-events: none !important;
  }

  .site-header .nav.nav--conservation-accent .nav-main-link:hover::before,
  .site-header .nav.nav--conservation-accent .nav-main-link:focus-visible::before {
    width: 30px !important;
    height: 22px !important;
    top: -3px !important;
    background: transparent url("/assets/img/site/icon-small.png") center center / contain no-repeat !important;
    background-color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    filter: drop-shadow(0 4px 8px rgba(14, 165, 233, 0.14)) !important;
  }

  .site-header .nav.nav--conservation-accent .nav-main-link.is-active::before {
    width: 30px !important;
    height: 22px !important;
    top: -3px !important;
    background: transparent url("/assets/img/site/icon-small.png") center center / contain no-repeat !important;
    background-color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    filter: drop-shadow(0 4px 8px rgba(11, 31, 79, 0.10)) !important;
  }
}


/* SAPREC_HEADER_MENU_S4E_HOVER_PENGUIN_50_OPACITY
   Scope: desktop public header menu PNG marker only.
   Purpose: make the penguin marker 50% opacity on hover/focus while keeping active marker full strength.
   Keeps accepted S4-D PNG icon, menu spacing, colours, underline, CTAs, layout, and active state.
   Does not change header markup, mobile menu, mobile logo, emergency strip, auth, DB, routes, or .htaccess.
*/
@media (min-width: 901px) {
  .site-header .nav.nav--conservation-accent .nav-main-link:hover::before,
  .site-header .nav.nav--conservation-accent .nav-main-link:focus-visible::before {
    opacity: 0.5 !important;
  }

  .site-header .nav.nav--conservation-accent .nav-main-link.is-active::before {
    opacity: 1 !important;
  }
}


/* SAPREC_HEADER_MENU_S4F_HOVER_PENGUIN_25_OPACITY
   Scope: desktop public header menu PNG marker only.
   Purpose: reduce hover/focus penguin marker opacity from 50% to 25% while keeping active marker full strength.
   Keeps accepted S4-D PNG icon, menu spacing, colours, underline, CTAs, layout, and active state.
   Does not change header markup, mobile menu, mobile logo, emergency strip, auth, DB, routes, or .htaccess.
*/
@media (min-width: 901px) {
  .site-header .nav.nav--conservation-accent .nav-main-link:hover::before,
  .site-header .nav.nav--conservation-accent .nav-main-link:focus-visible::before {
    opacity: 0.25 !important;
  }

  .site-header .nav.nav--conservation-accent .nav-main-link.is-active::before {
    opacity: 1 !important;
  }
}


/* SAPREC_HEADER_MENU_S4G_ACTIVE_UNDERLINE_DOUBLE_WIDTH
   Scope: desktop public header active menu underline only.
   Purpose: double active underline width from the original 18px to 36px.
   Keeps accepted PNG penguin marker, hover opacity, spacing, colours, CTAs, layout, and active state.
   Does not change header markup, mobile menu, mobile logo, emergency strip, auth, DB, routes, or .htaccess.
*/
@media (min-width: 901px) {
  .site-header .nav.nav--conservation-accent .nav-main-link.is-active::after {
    width: 36px !important;
  }
}