/* ==========================================================================
   BSMD Care — design system
   Fonts: Fraunces (display), Public Sans (body), IBM Plex Mono (labels)
   ========================================================================== */

:root{
  /* brand */
  --navy-950:#0B1B33;
  --navy-900:#0E2140;
  --navy-700:#16305A;
  --navy-500:#2C4E82;
  --orange-600:#C4631C;
  --orange-500:#E07B2E;
  --orange-100:#FBE4CB;

  /* neutrals */
  --paper:#FFFFFF;
  --paper-warm:#FAF7F2;
  --surface-alt:#F4F6F9;
  --ink:#182236;
  --ink-soft:#57617A;
  --ink-faint:#8791A5;
  --line:#E3E7EE;
  --line-strong:#CBD2DF;

  /* semantic */
  --good:#2E7D52;
  --good-bg:#E7F4EC;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(14,33,64,0.06), 0 1px 1px rgba(14,33,64,0.04);
  --shadow-md:0 8px 24px -8px rgba(14,33,64,0.22);
  --shadow-lg:0 24px 60px -20px rgba(14,33,64,0.35);

  --container:1200px;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0; color:var(--navy-900); text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--orange-500); outline-offset:2px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 1.5rem; }
.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--orange-600); font-weight:500; display:inline-flex; align-items:center; gap:0.5rem;
}
.eyebrow::before{ content:""; width:1.4rem; height:2px; background:var(--orange-500); display:inline-block; }

.section{ padding:5rem 0; }
.section-tight{ padding:3.25rem 0; }
.section-alt{ background:var(--surface-alt); }
.section-navy{ background:var(--navy-900); color:#EAF0FC; }
.section-navy h1, .section-navy h2, .section-navy h3{ color:#fff; }
.section-navy .ink-soft{ color:#AEC0DE; }

.section-head{ max-width:640px; margin-bottom:2.75rem; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.35rem); margin-top:0.6rem; }
.section-head p{ color:var(--ink-soft); margin-top:0.9rem; font-size:1.05rem; }

.ink-soft{ color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem; justify-content:center;
  font-weight:600; font-size:0.92rem; padding:0.85rem 1.5rem; border-radius:99px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--orange-500); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--orange-600); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,0.55); color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,0.12); }
.btn-navy{ background:var(--navy-700); color:#fff; }
.btn-navy:hover{ background:var(--navy-900); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--navy-900); }
.btn-ghost:hover{ border-color:var(--navy-700); background:var(--surface-alt); }
.btn-block{ width:100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  /* No backdrop-filter here: it creates a new containing block for any
     position:fixed descendant (the mobile drawer + its scrim), which
     traps them inside the header's own box instead of the viewport. */
  position:sticky; top:0; z-index:100; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar{
  background:var(--navy-950); color:#CBD9F2; font-family:var(--font-mono); font-size:0.76rem;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:0.45rem; padding-bottom:0.45rem; gap:1rem; flex-wrap:wrap; }
.topbar a{ color:#fff; text-decoration:none; }
.topbar .topbar-links{ display:flex; gap:1.4rem; }
.topbar .topbar-links a:hover{ color:var(--orange-500); }

.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-top:0.85rem; padding-bottom:0.85rem; gap:1rem; }
.brand{ display:flex; align-items:center; gap:0.65rem; text-decoration:none; }
.brand svg{ height:44px; width:auto; flex-shrink:0; }
.brand-word{ font-family:var(--font-display); font-weight:700; font-size:1.28rem; color:var(--navy-900); line-height:1.05; }
.brand-word span{ color:var(--orange-500); }
.brand-sub{ display:block; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.08em; color:var(--ink-faint); text-transform:uppercase; margin-top:0.1rem; }

/* Real logo file: a wide lockup (icon + BSMD CARE + "SERVICES LTD" +
   tagline + slogan stacked). The header only has room for the top
   portion (icon + BSMD CARE), so it's cropped in with a fixed-height,
   overflow:hidden window rather than shrinking the whole image down
   to illegibility. The PNG's background is solid white (no alpha),
   which is why this only gets used against the white header — not
   the dark footer. */
.brand-logo-crop{ height:48px; width:113px; overflow:hidden; position:relative; flex-shrink:0; }
.brand-logo-img{ position:absolute; top:0; left:0; width:113px; height:auto; display:block; }
@media (max-width:480px){
  .brand-logo-crop{ height:38px; width:89px; }
  .brand-logo-img{ width:89px; }
}

.main-nav{ display:flex; align-items:center; gap:1.9rem; }
.main-nav a{
  text-decoration:none; color:var(--ink); font-weight:600; font-size:0.93rem; position:relative; padding:0.3rem 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange-500);
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.main-nav a[aria-current="page"]{ color:var(--navy-900); }

.nav-cta{ display:flex; align-items:center; gap:0.9rem; }
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:var(--paper); border:1.5px solid var(--line-strong); border-radius:10px; padding:0; cursor:pointer;
  flex-shrink:0; transition:border-color .15s, background .15s;
}
.nav-toggle:hover{ border-color:var(--navy-700); background:var(--surface-alt); }
.nav-toggle span{
  position:relative; display:block; width:20px; height:2px; background:var(--navy-900); border-radius:2px;
  transition:background .2s ease .1s;
}
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--navy-900); border-radius:2px;
  transition:transform .22s ease, top .22s ease;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Scrim behind the mobile drawer. Visibility is controlled purely via
   opacity/pointer-events (not display) so the opacity transition can
   actually run. */
.nav-scrim{
  position:fixed; inset:0; background:rgba(8,16,31,0.55); z-index:150;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.nav-scrim.open{ opacity:1; pointer-events:auto; }

.nav-close{
  display:none; align-items:center; justify-content:center; gap:0.5rem;
  width:36px; height:36px; margin:0 0 1.5rem auto; background:var(--surface-alt); border:1px solid var(--line);
  border-radius:9px; color:var(--navy-900); font-size:1.1rem; line-height:1; cursor:pointer;
}
.nav-close:hover{ background:var(--line); }

/* Drawer-only CTA — hidden by default so it doesn't also render inline
   in the desktop nav row (it lives inside .main-nav, which is a normal
   horizontal flex row above 920px, not the fixed drawer). */
.nav-cta-mobile{ display:none; }

@media (max-width:920px){
  .topbar{ display:none; }

  .main-nav{
    position:fixed; top:0; right:0; bottom:0; left:auto; z-index:160;
    width:min(86vw, 360px); max-width:100vw;
    background:var(--paper); box-shadow:-16px 0 40px -12px rgba(8,16,31,0.35);
    flex-direction:column; align-items:stretch;
    padding:1.25rem 1.5rem 2rem; gap:0; overflow-y:auto;
    transform:translateX(100%); transition:transform .28s ease;
  }
  .main-nav.open{ transform:translateX(0); }
  .nav-close{ display:flex; }
  .main-nav a{
    padding:1.05rem 0.3rem; border-bottom:1px solid var(--line); font-size:1.08rem; color:var(--navy-900);
  }
  .main-nav a::after{ display:none; }
  .main-nav a[aria-current="page"]{ color:var(--orange-600); }
  .main-nav .nav-cta-mobile{
    display:flex; align-items:center; justify-content:center;
    margin-top:1.75rem; padding:0.95rem 1.5rem; border-bottom:none; font-size:0.98rem;
    background:var(--orange-500); color:#fff;
  }
  .main-nav .nav-cta-mobile:hover{ background:var(--orange-600); }
  .nav-toggle{ display:inline-flex; }
  .nav-cta{ display:none; } /* not just the button — the empty wrapper div was still
    a flex item in .nav-row, so justify-content:space-between reserved room for
    it and pushed the toggle button away from the true right edge */
}

@media (max-width:480px){
  .container{ padding:0 1.25rem; }
  .brand-sub{ display:none; }
  .brand svg{ height:38px; }
  .brand-word{ font-size:1.12rem; }
  .nav-row{ padding-top:0.7rem; padding-bottom:0.7rem; gap:0.75rem; }
}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero-slider{
  position:relative; overflow:hidden; color:#fff; min-height:min(86vh, 720px);
  display:flex; align-items:flex-end;
}
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
  background-size:cover; background-position:center;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,27,51,0.35) 0%, rgba(11,27,51,0.35) 40%, rgba(9,19,36,0.88) 100%);
}
.hero-content{
  position:relative; z-index:2; padding-top:3.5rem; padding-bottom:4.5rem; width:100%;
}
.hero-content .eyebrow{ color:var(--orange-100); }
.hero-content .eyebrow::before{ background:var(--orange-100); }
.hero-content h1{
  color:#fff; font-size:clamp(2.1rem, 4.4vw, 3.4rem); max-width:20ch; margin-top:0.7rem;
}
.hero-content p{ color:#DCE6F7; max-width:52ch; font-size:1.12rem; margin-top:1.1rem; }
.hero-actions{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:1.9rem; }

.hero-trust{
  display:flex; flex-wrap:wrap; gap:0.6rem 1.6rem; margin-top:2.6rem; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,0.2);
}
.hero-trust span{ font-size:0.86rem; color:#EAF0FC; display:flex; align-items:center; gap:0.5rem; }
.hero-trust svg{ width:16px; height:16px; color:var(--orange-500); flex-shrink:0; }

.slider-controls{
  position:absolute; z-index:3; right:1.5rem; bottom:1.6rem; display:flex; gap:0.6rem; align-items:center;
}
.slider-dots{ display:flex; gap:0.5rem; margin-right:0.4rem; }
.slider-dots button{
  width:9px; height:9px; border-radius:99px; background:rgba(255,255,255,0.4); border:none; padding:0; cursor:pointer; transition:background .2s, transform .2s;
}
.slider-dots button.is-active{ background:var(--orange-500); transform:scale(1.25); }
.slider-arrow{
  width:38px; height:38px; border-radius:99px; border:1px solid rgba(255,255,255,0.45); background:rgba(11,27,51,0.35);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s;
}
.slider-arrow:hover{ background:rgba(11,27,51,0.65); }
@media (max-width:640px){
  .hero-slider{ min-height:min(76vh, 620px); }
  .hero-content{ padding-top:2.25rem; padding-bottom:3rem; }
  .hero-content h1{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .hero-trust{ margin-top:1.75rem; padding-top:1.25rem; gap:0.5rem 1.1rem; }
  .slider-controls{ left:1.25rem; right:1.25rem; justify-content:space-between; bottom:1.1rem; }
  .section{ padding:3.25rem 0; }
}

/* ==========================================================================
   Cards & grids
   ========================================================================== */
.grid{ display:grid; gap:1.4rem; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:920px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.6rem; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--line-strong); }
.card .icon{
  width:46px; height:46px; border-radius:12px; background:var(--orange-100); color:var(--orange-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
}
.card .icon svg{ width:22px; height:22px; }
.card h3{ font-family:var(--font-body); font-weight:700; font-size:1.02rem; color:var(--navy-900); }
.card p{ color:var(--ink-soft); font-size:0.92rem; margin-top:0.5rem; }
.card a.card-link{ display:inline-flex; align-items:center; gap:0.35rem; margin-top:0.9rem; font-weight:600; font-size:0.86rem; color:var(--navy-700); text-decoration:none; }
.card a.card-link:hover{ color:var(--orange-600); }

.value-card{ text-align:left; border-radius:var(--radius-md); padding:1.5rem 1.4rem; background:var(--paper-warm); border:1px solid var(--line); }
.value-card b{ display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--navy-900); margin-bottom:0.35rem; }
.value-card span{ color:var(--ink-soft); font-size:0.9rem; }

/* photo + text split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.split-media{ position:relative; }
.split-media .accent-frame{
  position:absolute; top:-18px; left:-18px; width:70%; height:70%; border:2px solid var(--orange-500); border-radius:var(--radius-lg); z-index:-1;
}
@media (max-width:860px){
  .split{ grid-template-columns:1fr; gap:2rem; }
  .split.reverse .split-media{ order:0; }
}

/* leadership */
.leader-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:1.7rem; background:var(--paper); }
.leader-avatar{
  width:64px; height:64px; border-radius:99px; background:var(--navy-700); color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:1.3rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.leader-card h3{ font-family:var(--font-body); font-weight:700; font-size:1.08rem; color:var(--navy-900); }
.leader-role{ color:var(--orange-600); font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; display:block; margin:0.2rem 0 0.8rem; }
.leader-card p{ color:var(--ink-soft); font-size:0.92rem; margin-bottom:0.7rem; }
.leader-card p:last-child{ margin-bottom:0; }

/* stat row */
.stat-row{ display:flex; flex-wrap:wrap; gap:2.6rem; }
.stat b{ display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--navy-900); }
.stat span{ color:var(--ink-soft); font-size:0.88rem; }
.section-navy .stat b{ color:#fff; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color:#fff; border-radius:var(--radius-lg); padding:3rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size:1.7rem; max-width:26ch; }
.cta-band p{ color:#C9D6EE; margin-top:0.5rem; }
@media (max-width:700px){ .cta-band{ text-align:center; justify-content:center; padding:2.4rem 1.6rem; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.2rem; box-shadow:var(--shadow-sm); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

.field label{ display:block; font-size:0.85rem; font-weight:600; color:var(--navy-900); margin-bottom:0.4rem; }
.field .req{ color:var(--orange-600); }
.field input, .field textarea, .field select{
  width:100%; padding:0.75rem 0.9rem; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:0.95rem; color:var(--ink); background:var(--paper); transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(22,48,90,0.14); outline:none;
}
.field textarea{ resize:vertical; min-height:120px; }
.field-file{
  border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm); padding:1.1rem; text-align:center; font-size:0.85rem; color:var(--ink-soft); position:relative;
}
.field-file input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.field-hint{ font-size:0.78rem; color:var(--ink-faint); margin-top:0.35rem; }
.consent{ display:flex; align-items:flex-start; gap:0.6rem; font-size:0.85rem; color:var(--ink-soft); }
.consent input{ margin-top:0.25rem; }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; color:var(--ink-faint); margin-top:1rem; }
.form-note svg{ width:14px; height:14px; color:var(--good); }

/* ==========================================================================
   Misc: banners, timeline, contact table, footer
   ========================================================================== */
.page-banner{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  color:#fff; padding:5.5rem 0 3.5rem;
}
.page-banner::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,16,31,0.88), rgba(8,16,31,0.8));
}
.page-banner .container{ position:relative; z-index:1; }
.page-banner h1{ color:#fff; font-size:clamp(2rem, 4vw, 2.8rem); max-width:22ch; text-shadow:0 2px 12px rgba(0,0,0,0.35); }
.page-banner p{ color:#E8EEFA; max-width:60ch; margin-top:0.8rem; font-size:1.05rem; }
.breadcrumb{ font-family:var(--font-mono); font-size:0.76rem; color:#AEC0DE; margin-bottom:0.9rem; letter-spacing:0.04em; }
.breadcrumb a{ color:#AEC0DE; text-decoration:none; }
.breadcrumb a:hover{ color:#fff; }

.info-table{ width:100%; border-collapse:collapse; }
.info-table td{ padding:0.9rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.info-table td:first-child{ width:140px; font-weight:700; color:var(--navy-900); font-size:0.92rem; }
.info-table a{ color:var(--navy-700); text-decoration:none; font-weight:600; }
.info-table a:hover{ text-decoration:underline; }

.timeline{ list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:1.4rem; }
.timeline li{ counter-increment:step; display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; }
.timeline li::before{
  content:counter(step); font-family:var(--font-display); font-weight:700; color:#fff; background:var(--orange-500);
  width:2.6rem; height:2.6rem; border-radius:99px; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.timeline h4{ font-family:var(--font-body); font-weight:700; font-size:1rem; color:var(--navy-900); }
.timeline p{ color:var(--ink-soft); font-size:0.92rem; margin-top:0.3rem; }

.map-frame{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.map-frame iframe{ width:100%; height:380px; border:0; display:block; }

.callout{ background:var(--surface-alt); border-left:3px solid var(--navy-700); border-radius:8px; padding:1.1rem 1.3rem; font-size:0.9rem; color:var(--ink-soft); }
.callout b{ color:var(--ink); }
.callout.warn{ border-left-color:var(--orange-500); background:var(--orange-100); color:#6b4315; }
.callout.warn b{ color:#4a2d0d; }

footer.site-footer{ background:var(--navy-950); color:#B9C7E3; padding:4rem 0 1.6rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.8rem; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand{ display:flex; align-items:center; gap:0.6rem; margin-bottom:1.2rem; }
.footer-brand .brand-word{ color:#fff; }

/* Same reasoning as the header crop: the real logo has no transparent
   background, so on the dark footer it needs an intentional white
   card behind it rather than showing a raw, unstyled white box. Shows
   a bit more of the lockup than the header (through "SERVICES LTD")
   since there's more vertical room here. */
.footer-logo-badge{
  display:inline-flex; background:#fff; border-radius:14px; padding:0.9rem 1.15rem;
  box-shadow:0 12px 28px -10px rgba(0,0,0,0.45);
}
.footer-logo-crop{ height:64px; width:130px; overflow:hidden; position:relative; }
.footer-logo-img{ position:absolute; top:0; left:0; width:130px; height:auto; display:block; }
footer.site-footer p{ font-size:0.88rem; line-height:1.7; }
.footer-col h4{ color:#fff; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:1rem; font-weight:500; }
.footer-col ul{ display:flex; flex-direction:column; gap:0.65rem; }
.footer-col a{ color:#B9C7E3; text-decoration:none; font-size:0.9rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.6rem; font-size:0.78rem; color:#7C8BAA; flex-wrap:wrap; gap:0.6rem; }
.footer-badges{ display:flex; gap:0.7rem; flex-wrap:wrap; }
.footer-badges span{ border:1px solid rgba(255,255,255,0.18); border-radius:99px; padding:0.3rem 0.8rem; font-size:0.74rem; display:flex; align-items:center; gap:0.4rem; }
.footer-badges svg{ width:13px; height:13px; color:var(--orange-500); }

.social-links{ display:flex; gap:0.6rem; margin-top:1.2rem; }
.social-links a{
  width:36px; height:36px; border-radius:99px; border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; color:#B9C7E3;
  transition:background .15s, color .15s, border-color .15s;
}
.social-links a:hover{ background:var(--orange-500); border-color:var(--orange-500); color:#fff; }
.social-links svg{ width:16px; height:16px; }
@media (max-width:920px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy-900); color:#fff; padding:0.8rem 1.2rem; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }