/* =================================================================
   KEEP SECURITY — DESIGN TOKENS
   Palette: control-panel duotone. Ink (near-black) for panels,
   Paper (warm neutral) for content, Amber as the single signal
   accent (status-light), Green reserved for "OK/armed" states.
================================================================= */
:root{
  --ink: #12151A;
  --ink-2: #1B2028;
  --ink-line: rgba(255,255,255,0.09);
  --paper: #EEEBE3;
  --paper-2: #E4DFD3;
  --paper-line: rgba(18,21,26,0.12);
  --steel: #51697C;
  --steel-dim: #7C8B96;
  --amber: #C98A2E;
  --amber-bright: #E0A64A;
  --green: #4C7A5E;
  --text-on-ink: #EDEAE2;
  --text-on-ink-dim: #9CA4AC;
  --text-on-paper: #171A1E;
  --text-on-paper-dim: #565F66;

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 3px;
  --wrap: 1180px;
}

/* =================================================================
   RESET
================================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-on-paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

.screen-reader-text{ position:absolute !important; left:-9999px; }
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; z-index:9999;
  background: var(--amber); color: var(--ink); padding:.6rem 1rem;
}

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono{ font-family: var(--font-mono); letter-spacing: 0.02em; }
.small{ font-size: 0.8rem; }
.dim{ opacity: 0.6; }

/* =================================================================
   TYPOGRAPHY
================================================================= */
h1,h2,h3,.hero-title,.section-title,.page-title{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.eyebrow{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
  display:flex; align-items:center; gap:8px;
  margin: 0 0 14px;
}
.section-title{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height:1.2; margin-bottom: 20px; max-width: 640px; }
.page-title{ font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; margin: 0 0 14px; max-width: 760px; }
.page-lede{ font-size: 1.05rem; color: var(--text-on-paper-dim); max-width: 560px; }
.body-text{ color: var(--text-on-paper-dim); margin: 0 0 16px; max-width: 620px; }

/* =================================================================
   STATUS DOT (signature micro-element, reused everywhere)
================================================================= */
.status-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(201,138,46,0.18);
  display:inline-block;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.45; }
}

/* =================================================================
   HEADER
================================================================= */
.site-header{ position: sticky; top:0; z-index: 100; background: var(--ink); }
.header-bar{ padding: 14px 0; }
.header-inner{ display:flex; align-items:center; gap: 28px; min-height: 52px; }
.brand{ display:flex; align-items:center; gap:10px; color: var(--text-on-ink); flex-shrink:0; }

.accreditation-strip{ background: var(--ink); border-top: 1px solid var(--ink-line); }
.accreditation-strip-inner{ display:flex; align-items:center; justify-content:center; gap: 24px; padding: 16px 24px; flex-wrap: wrap; }
.accreditation-strip-label{ font-size: 0.72rem; color: var(--text-on-ink-dim); text-transform:uppercase; letter-spacing:0.08em; margin-right: 6px; }
.accreditation-strip img{ height: 92px; width:auto; max-width: 250px; object-fit:contain; }
.accreditation-badge-item{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.accreditation-badge-item span{ font-size: 0.7rem; letter-spacing: 0.1em; color: var(--text-on-ink-dim); }
.brand-mark svg{ width:28px; height:28px; color: var(--amber); }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; }
.brand-sub{ font-family: var(--font-mono); font-size:0.62rem; letter-spacing:0.12em; color: var(--text-on-ink-dim); text-transform:uppercase; }
.custom-logo{ max-height:44px; width:auto; }
.brand-logo{ height:48px; width:auto; max-width:none; }

.footer-logo{ height:64px; width:auto; max-width:none; margin-bottom:14px; }

.primary-nav{ flex:1; }
.nav-list{ display:flex; gap:28px; }
.nav-list a{
  color: var(--text-on-ink-dim);
  font-size:0.92rem;
  font-weight:500;
  transition: color .15s ease;
}
.nav-list a:hover, .nav-list a:focus-visible{ color: var(--text-on-ink); }

.header-actions{ display:flex; align-items:center; gap: 18px; flex-shrink:0; }
.tel-link{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:0.82rem;
  color: var(--text-on-ink-dim);
  white-space:nowrap;
}
.tel-link:hover{ color: var(--text-on-ink); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:32px; background:none; border:none; padding:0;
}
.nav-toggle span{ display:block; height:2px; width:100%; background: var(--text-on-ink); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =================================================================
   BUTTONS
================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:0.9rem;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-amber{ background: var(--amber); color: var(--ink); }
.btn-amber:hover{ background: var(--amber-bright); }
.btn-ghost{ color: var(--text-on-ink); border-color: var(--ink-line); }
.btn-ghost:hover{ border-color: var(--text-on-ink-dim); }
.btn-outline{ color: var(--text-on-paper); border-color: var(--paper-line); }
.btn-outline:hover{ border-color: var(--steel); }
.btn-lg{ padding: 13px 26px; font-size:0.95rem; }

/* =================================================================
   HERO (signature: scanning line over dot-grid + status panel)
================================================================= */
.hero{ position:relative; background: var(--ink); overflow:hidden; }
.hero-grid{ position:absolute; inset:0; z-index:0; opacity:0.5; }
.scan-grid{ width:100%; height:100%; color: rgba(255,255,255,0.14); }
.scan-line{
  stroke: var(--amber);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 6px rgba(201,138,46,0.7));
  animation: scan 6s linear infinite;
}
@keyframes scan{
  0%{ transform: translateY(0); opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ transform: translateY(500px); opacity:0; }
}

.hero-inner{
  position:relative; z-index:1;
  display:block;
  padding: 88px 24px 96px;
}
.hero-copy{ color: var(--text-on-ink); max-width: 780px; }
.hero-title{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.08; margin: 0 0 20px; max-width: 620px; }
.hero-desc{ color: var(--text-on-ink-dim); font-size:1.05rem; max-width: 500px; margin: 0 0 32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-panel{
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  color: var(--text-on-ink);
  font-size: 0.82rem;
}
.panel-row{ display:flex; justify-content:space-between; padding: 8px 0; color: var(--text-on-ink-dim); }
.panel-row span:first-child{ letter-spacing:0.06em; }
.panel-val{ color: var(--text-on-ink); font-weight:500; }
.panel-row.small{ font-size:0.76rem; padding:6px 0; }
.panel-divider{ height:1px; background: var(--ink-line); margin: 10px 0; }
.tag-ok{ color: var(--green); font-weight:600; }
.panel-inline{
  background: var(--ink); color: var(--text-on-ink);
  border-radius: var(--radius); padding: 20px 22px; font-size:0.85rem;
  align-self:start;
}
.panel-inline .panel-row{ border-bottom: 1px solid var(--ink-line); }
.panel-inline .panel-row:last-child{ border-bottom:none; }

/* =================================================================
   SECTIONS
================================================================= */
.section{ padding: 76px 0; }
.section-dark{ background: var(--ink); color: var(--text-on-ink); }
.section-dark .section-title{ color: var(--text-on-ink); }
.section-dark .body-text{ color: var(--text-on-ink-dim); }
.page-hero{ padding: 64px 0 40px; background: var(--paper-2); border-bottom: 1px dashed var(--paper-line); }
.content-narrow{ max-width: 720px; margin:0 auto; }

.two-col{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items:start; }

/* =================================================================
   CARD GRID + BRACKET CORNERS (signature: camera-viewfinder corners)
================================================================= */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.card-grid.three{ grid-template-columns: repeat(3, 1fr); }
.card{
  position:relative;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.section-dark .card{ background: var(--ink-2); border-color: var(--ink-line); }
.card-bracket::before, .card-bracket::after{
  content:""; position:absolute; width:14px; height:14px;
  border-color: var(--amber); opacity:0.7;
}
.card-bracket::before{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
.card-bracket::after{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }

.icon-box{ display:inline-flex; width:38px; height:38px; color: var(--amber); margin-bottom: 14px; }
.icon-box svg{ width:100%; height:100%; }
.card-title{ font-size:1.05rem; margin: 0 0 8px; }
.card-desc{ color: var(--text-on-paper-dim); font-size:0.9rem; margin:0; }
.section-dark .card-desc{ color: var(--text-on-ink-dim); }
.spec-num-inline{ display:block; color: var(--steel-dim); font-size:0.78rem; margin-bottom:10px; }

.services-more{ margin-top: 32px; }

/* =================================================================
   WHY / STATS
================================================================= */
.why-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items:center; }
.why-desc{ color: var(--text-on-ink-dim); max-width: 520px; }
.why-stats{ display:flex; gap: 36px; }
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat-num{ font-size: 2.4rem; font-weight:600; color: var(--amber); }
.stat-label{ font-size:0.76rem; color: var(--text-on-ink-dim); text-transform:uppercase; letter-spacing:0.06em; }

/* =================================================================
   CLIENT CHIPS
================================================================= */
.client-chip-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 28px; }
.client-chip{
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 0.78rem;
  color: var(--text-on-paper-dim);
}
.section-dark .client-chip{ border-color: var(--ink-line); color: var(--text-on-ink-dim); }

/* =================================================================
   ACCREDITATION STRIP (SAIDSA / PSIRA — swap placeholders for real logos)
================================================================= */
.section-accreditation{ padding: 44px 0; background: var(--paper-2); border-top: 1px dashed var(--paper-line); border-bottom: 1px dashed var(--paper-line); }
.accreditation-inner{ text-align:center; }
.accreditation-caption{ font-size: 0.85rem; color: var(--text-on-paper-dim); margin: 0 0 4px; }
.accreditation-row{ display:flex; justify-content:center; gap: 32px; flex-wrap:wrap; margin-top: 12px; }
.accreditation-badge{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding: 18px 28px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: var(--paper);
  min-width: 160px;
}
.accreditation-badge img{ height: 48px; width:auto; max-width: 160px; }
.badge-placeholder{
  display:flex; align-items:center; justify-content:center;
  height:48px; width:120px;
  border: 1px dashed var(--steel-dim);
  color: var(--steel-dim);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.badge-caption{ font-size: 0.68rem; color: var(--text-on-paper-dim); text-transform:uppercase; letter-spacing:0.06em; }

/* =================================================================
   SPEC LIST (Services page)
================================================================= */
.spec-row{
  display:grid; grid-template-columns: 48px 1fr auto;
  gap: 20px; align-items:center;
  padding: 26px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.spec-row:first-child{ border-top: 1px dashed var(--paper-line); }
.spec-num{ color: var(--steel-dim); font-size:0.85rem; }
.spec-row .icon-box{ margin:0; width:32px; height:32px; }
.spec-title{ font-size:1.1rem; margin:0 0 6px; }
.spec-desc{ color: var(--text-on-paper-dim); font-size:0.9rem; margin:0; max-width:560px; }
.spec-link{ color: var(--amber); font-size:0.82rem; font-weight:600; white-space:nowrap; }
.spec-link:hover{ color: var(--amber-bright); }

/* =================================================================
   CTA BAND
================================================================= */
.cta-band{ background: var(--ink); color: var(--text-on-ink); }
.cta-inner{ display:flex; justify-content:space-between; align-items:center; gap: 32px; flex-wrap:wrap; }
.cta-band .section-title{ color: var(--text-on-ink); margin:0; }

/* =================================================================
   CONTACT PAGE
================================================================= */
.contact-grid{ grid-template-columns: 0.9fr 1.4fr; }
.contact-details{ background: var(--ink); color: var(--text-on-ink); border-radius: var(--radius); padding: 24px; align-self:start; }
.contact-details .panel-row{ border-bottom: 1px solid var(--ink-line); }
.contact-details .panel-row:last-of-type{ border-bottom:none; }
.contact-details a:hover{ color: var(--amber); }

.contact-form{ display:flex; flex-direction:column; gap: 16px; max-width: 560px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-size:0.8rem; font-weight:600; color: var(--text-on-paper-dim); }
.form-row input, .form-row textarea, .form-row select{
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 11px 13px;
  color: var(--text-on-paper);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ border-color: var(--amber); }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ min-height: 1.2em; }
.form-status.ok{ color: var(--green); }
.form-status.err{ color: #A6432E; }

/* =================================================================
   FOOTER
================================================================= */
.site-footer{ background: var(--ink); color: var(--text-on-ink); padding-top: 60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 40px; }
.footer-brand{ padding-right: 20px; }
.footer-lede{ color: var(--text-on-ink-dim); font-size:0.88rem; margin: 14px 0 10px; }
.footer-est{ color: var(--steel-dim); }
.footer-heading{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--steel-dim); margin: 0 0 16px; }
.footer-list{ display:flex; flex-direction:column; gap:10px; }
.footer-list a{ color: var(--text-on-ink-dim); font-size:0.9rem; }
.footer-list a:hover{ color: var(--text-on-ink); }
.footer-social{ display:flex; align-items:center; gap:22px; justify-content:flex-end; }
.facebook-link{ display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:1rem; font-weight:700; text-decoration:none; }
.facebook-link:hover{ color:#fff; }
.facebook-icon{ width:26px; height:26px; fill:#fff; flex:none; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-top: 1px solid var(--ink-line);
  padding: 20px 0 28px;
  color: var(--text-on-ink-dim);
}

/* =================================================================
   RESPONSIVE
================================================================= */
@media (max-width: 900px){
  .hero-inner{ padding-top: 56px; }
  .two-col, .why-grid, .contact-grid{ grid-template-columns: 1fr; }
  .card-grid, .card-grid.three{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 720px){
  .primary-nav{
    position:absolute; top:76px; left:0; right:0;
    background: var(--ink); border-top: 1px solid var(--ink-line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .primary-nav.is-open{ max-height: 400px; }
  .nav-list{ flex-direction:column; gap:0; padding: 8px 24px 16px; }
  .nav-list li{ border-bottom: 1px solid var(--ink-line); }
  .nav-list a{ display:block; padding: 14px 0; }
  .tel-link{ display:none; }
  .nav-toggle{ display:flex; }
  .card-grid, .card-grid.three{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .spec-row{
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 10px;
    align-items: start;
  }
  .spec-row > div{
    grid-column: 2;
    min-width: 0;
  }
  .spec-row .spec-link{
    grid-column: 2;
    justify-self: start;
  }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
}



/* WordPress integration */
.site-main img{height:auto}.custom-logo-link img{max-height:48px;width:auto}.wp-block-image img{height:auto}.page-content{padding:70px 0}.entry-content{max-width:900px}.entry-content h2{margin-top:2rem}.entry-content p{color:var(--text-on-paper-dim)}

/* =================================================================
   2026 CONVERSION + WHATSAPP ENHANCEMENTS
================================================================= */
.whatsapp-mini{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid rgba(255,255,255,.16); color:var(--text-on-ink);
  padding:7px 10px; border-radius:var(--radius); font-size:.78rem; font-weight:600;
  white-space:nowrap;
}
.whatsapp-mini img{ width:32px; height:32px; object-fit:cover; display:block; border-radius:50%; flex:0 0 32px; }
.whatsapp-mini:hover{ border-color:var(--amber); color:var(--amber-bright); }
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:999;
  display:flex; align-items:center; gap:10px; padding:11px 15px;
  background:#151a18; color:#fff; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.28); border-radius:999px;
  font-size:.82rem;
}
.whatsapp-float strong{ display:block; font-size:.82rem; }
.whatsapp-float small{ display:block; opacity:.68; font-family:var(--font-mono); font-size:.68rem; margin-top:1px; }
.wa-symbol{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; overflow:hidden; flex:0 0 32px; }
.wa-symbol img{ width:100%; height:100%; object-fit:cover; display:block; }
.whatsapp-float:hover{ transform:translateY(-2px); border-color:var(--amber); }
.hero-enhanced .hero-inner{ padding-top:96px; padding-bottom:84px; }
.hero-proof{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.hero-proof span{ border:1px solid var(--ink-line); background:rgba(18,21,26,.38); padding:9px 12px; color:var(--text-on-ink-dim); font-size:.75rem; font-family:var(--font-mono); }
.hero-proof b{ color:var(--text-on-ink); font-weight:500; }
.section-intro{ padding-bottom:38px; }
.intro-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:end; }
.text-link{ color:var(--amber); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.text-link:hover{ color:var(--amber-bright); }
.service-grid{ grid-template-columns:repeat(2,1fr); }
.service-card{ min-height:205px; padding:28px 26px 24px; }
.service-num{ display:inline-block; color:var(--amber); font-size:.7rem; margin-bottom:24px; }
.card-link{ display:inline-block; color:var(--steel); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; margin-top:10px; }
.card-link:hover{ color:var(--amber); }
.trust-head{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-line); margin-top:50px; border:1px solid var(--ink-line); }
.trust-item{ padding:25px 22px; background:var(--ink); min-height:190px; }
.trust-icon{ font-family:var(--font-mono); color:var(--amber); font-size:.7rem; }
.trust-item h3{ font-size:1rem; margin:22px 0 8px; }
.trust-item p{ margin:0; color:var(--text-on-ink-dim); font-size:.86rem; }
.sector-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:36px; }
.sector-chip{ display:flex; align-items:center; gap:10px; padding:17px 16px; border:1px solid var(--paper-line); background:rgba(255,255,255,.18); font-weight:500; }
.sector-chip .status-dot{ width:5px; height:5px; box-shadow:none; animation:none; }
.membership-layout{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.membership-badges{ display:flex; align-items:center; justify-content:center; gap:28px; }
.membership-badges div{ background:var(--ink); border:1px solid var(--ink-line); padding:20px; min-width:190px; height:150px; display:grid; place-items:center; }
.membership-badges img{ max-height:110px; width:auto; max-width:180px; object-fit:contain; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width: 980px){
  .header-actions .tel-link{ display:none; }
  .whatsapp-mini{ display:none; }
  .intro-grid,.trust-head,.membership-layout{ grid-template-columns:1fr; gap:30px; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .sector-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px){
  .hero-enhanced .hero-inner{ padding-top:68px; padding-bottom:65px; }
  .hero-proof{ display:grid; grid-template-columns:1fr 1fr; }
  .hero-proof span:last-child{ grid-column:1/-1; }
  .service-grid,.trust-grid,.sector-grid{ grid-template-columns:1fr; }
  .membership-badges{ gap:12px; }
  .membership-badges div{ min-width:0; width:50%; height:125px; padding:12px; }
  .membership-badges img{ max-height:90px; max-width:150px; }
  .whatsapp-float{ right:12px; bottom:12px; }
  .whatsapp-float small{ display:none; }
}


/* =================================================================
   2026 MOBILE + HEADER REFINEMENT
   Keep logo intentionally slightly larger than membership badges.
================================================================= */

/* Brand hierarchy: KEEP logo is the primary identity. */
.brand-logo{
  height:60px;
  width:auto;
  max-width:240px;
  object-fit:contain;
}
.accreditation-strip img{
  height:52px;
  width:auto;
  max-width:110px;
  object-fit:contain;
}
.accreditation-strip-inner{
  gap:20px;
  padding-top:10px;
  padding-bottom:10px;
}
.accreditation-badge-item{ gap:2px; }
.accreditation-badge-item span{ font-size:.62rem; }

/* Keep header elements from forcing horizontal overflow. */
.header-inner{ min-width:0; }
.brand{ min-width:0; }
.brand-logo{ flex-shrink:0; }
.header-actions{ min-width:0; }

/* Better tablet layout. */
@media (max-width: 980px){
  .header-inner{ gap:18px; }
  .primary-nav{ min-width:0; }
  .nav-list{ gap:18px; }
  .brand-logo{ height:56px; }
}

/* Smartphone layout. */
@media (max-width: 720px){
  .wrap{ padding-left:16px; padding-right:16px; }

  .header-bar{ padding:8px 0; }
  .header-inner{
    min-height:52px;
    gap:8px;
    justify-content:space-between;
  }
  .brand-logo{
    height:58px;
    max-width:205px;
  }
  .header-actions{
    margin-left:auto;
    gap:8px;
  }
  .header-actions .btn{
    display:none;
  }
  .nav-toggle{
    display:flex;
    width:42px;
    height:42px;
    padding:8px;
    flex-shrink:0;
  }
  .nav-toggle span{ width:26px; }

  .primary-nav{
    top:68px;
  }
  .nav-list{
    padding:6px 16px 12px;
  }
  .nav-list a{
    font-size:1rem;
    padding:13px 0;
  }

  /* Compact membership strip so it doesn't dominate the phone screen. */
  .accreditation-strip-inner{
    justify-content:center;
    gap:14px;
    padding:8px 16px 10px;
  }
  .accreditation-strip-label{
    width:100%;
    text-align:center;
    margin:0 0 1px;
    font-size:.62rem;
  }
  .accreditation-badge-item{
    flex-direction:row;
    gap:6px;
  }
  .accreditation-strip img{
    height:42px;
    max-width:82px;
  }
  .accreditation-badge-item span{ display:none; }

  /* Prevent oversized hero typography and cramped CTA buttons. */
  .hero-enhanced .hero-inner{
    padding-top:48px;
    padding-bottom:52px;
  }
  .hero-title{
    font-size:clamp(2rem, 9vw, 2.65rem);
    line-height:1.08;
    margin-bottom:16px;
  }
  .hero-desc{
    font-size:.98rem;
    line-height:1.55;
    margin-bottom:24px;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-actions .btn{
    width:100%;
    min-height:48px;
    white-space:normal;
    text-align:center;
  }
  .hero-proof{
    margin-top:28px;
    gap:10px;
  }

  /* Comfortable single-column content on phones. */
  .section{ padding-top:52px; padding-bottom:52px; }
  .section-title{
    font-size:1.7rem;
    line-height:1.18;
  }
  .page-title{ font-size:2rem; }
  .body-text,.page-lede{ font-size:.98rem; }

  .service-card,
  .trust-item{
    padding:20px;
  }

  /* Footer is easier to scan and tap. */
  .footer-grid{
    gap:28px;
  }
  .footer-logo{
    height:56px;
  }
  .footer-list a{
    display:inline-block;
    padding:4px 0;
  }
  .footer-social{ justify-content:flex-start; flex-wrap:wrap; gap:14px 22px; }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  /* Floating WhatsApp stays clear of phone browser edges. */
  .whatsapp-float{
    right:12px;
    bottom:12px;
    max-width:calc(100vw - 24px);
  }
}

/* Extra-small phones. */
@media (max-width: 420px){
  .brand-logo{ height:54px; max-width:190px; }
  .primary-nav{ top:64px; }
  .accreditation-strip img{ height:38px; max-width:74px; }
  .hero-title{ font-size:2rem; }
  .eyebrow{ font-size:.64rem; letter-spacing:.09em; }
  .hero-proof{
    grid-template-columns:1fr;
  }
  .hero-proof span:last-child{ grid-column:auto; }
}


/* Desktop full-site viewing: KEEP brand is slightly larger than accreditation logos.
   Smartphone rules above remain unchanged. */
@media screen and (min-width: 981px) {
  .header-bar .brand-logo {
    height: 70px;
    width: auto;
    max-width: 270px;
  }

  .accreditation-strip .accreditation-strip-inner {
    gap: 22px;
  }

  .accreditation-strip .accreditation-strip img {
    height: 58px;
    width: auto;
    max-width: 150px;
  }
}



/* Final mobile layout hardening:
   keep text blocks wide, prevent grid children from forcing overflow,
   and ensure service descriptions remain readable on narrow screens. */
@media (max-width: 720px){
  html, body{ overflow-x:hidden; }
  .wrap,
  .header-inner,
  .section,
  .page-hero,
  .site-main{ min-width:0; }
  .intro-grid > *,
  .trust-head > *,
  .membership-layout > *,
  .two-col > *,
  .contact-grid > *,
  .card-grid > *,
  .service-grid > *,
  .sector-grid > *,
  .footer-grid > *{ min-width:0; }

  .spec-row .spec-desc{
    max-width:none;
    width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .body-text,
  .page-lede,
  .card-desc,
  .spec-desc,
  .entry-content,
  .contact-details,
  .contact-form{ max-width:100%; }

  .contact-form{
    width:100%;
    max-width:100%;
    min-width:0;
    gap:18px;
  }

  .contact-details{
    width:100%;
    box-sizing:border-box;
    padding:20px 18px;
    min-width:0;
  }

  .contact-details .panel-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:13px 0;
    min-width:0;
  }

  .contact-details .panel-row > span{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .contact-details .panel-row .panel-val{
    width:100%;
    text-align:left;
    font-size:.82rem;
    line-height:1.45;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .contact-details .panel-divider{
    margin:10px 0 14px;
  }

  .contact-form .form-row{
    width:100%;
    min-width:0;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    font-size:16px;
  }

  .contact-form textarea{
    min-height:140px;
    resize:vertical;
  }

  .contact-form .btn{
    width:100%;
    box-sizing:border-box;
    text-align:center;
  }
}


/* Final site-wide fix: remove visible list numbering/bullets on desktop and mobile. */
ol, ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

ol > li::marker,
ul > li::marker {
  content: "" !important;
}

ol > li::before,
ul > li::before {
  content: none !important;
}

/* Final numbering removal: no section/service/spec numbering anywhere. */
.service-num, .trust-icon, .spec-num, .spec-num-inline { display:none !important; }
@media (max-width:720px){
  /* Mobile: keep the KEEP logo left and place the 3-bar menu on the far right. */
  .header-inner{ justify-content:space-between; }
  .header-actions{ display:none; }
  .nav-toggle{ order:2; margin-left:auto; flex:0 0 42px; }
  .primary-nav{ top:68px; }
}