/* ============================================================
   MOKU SECURITY SERVICES LTD — Modern Security Website
   Dar es Salaam, Tanzania • 26+ Years Excellence
   Palette: Navy #0B1F3A • Gold #C8A44A • Red #E31E24 • Teal #0E9D6B
   Typography: Inter + Space Grotesk / Poppins
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --navy-950:#06122A;
  --navy-900:#0B1F3A;
  --navy-800:#132E56;
  --navy-700:#1A3A68;
  --gold-500:#C8A44A;
  --gold-600:#B8933F;
  --gold-50:#FFF9E6;
  --red-500:#E31E24;
  --red-600:#C41A1F;
  --red-50:#FEF2F2;
  --teal-600:#0E9D6B;
  --teal-500:#14B68B;
  --teal-50:#ECFDF5;
  --slate-900:#0F172A;
  --slate-700:#334155;
  --slate-500:#64748B;
  --slate-400:#94A3B8;
  --line:#E2E8F0;
  --line-light:#F1F5F9;
  --surface:#F8FAFC;
  --bg:#FFFFFF;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:20px;
  --radius-xl:24px;
  --shadow-s:0 4px 20px rgba(11,31,58,.07);
  --shadow-m:0 12px 32px rgba(11,31,58,.10);
  --shadow-l:0 24px 60px rgba(11,31,58,.14);
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-display:"Plus Jakarta Sans", sans-serif;
  --container:1280px;
  --header-h:76px;
  --topbar-h:40px;
}
*{box-sizing:border-box; min-width:0}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0; font-family:var(--font-body); font-size:1rem; line-height:1.66; color:var(--slate-700); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--navy-900); line-height:1.12; margin:0 0 .45em; font-weight:800; letter-spacing:-0.02em}
h1{font-size:clamp(2rem,5vw,3.6rem); line-height:1.02}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:clamp(1.05rem,1.6vw,1.25rem)}
p{margin:0 0 1em} ul{padding:0; margin:0; list-style:none}
a{color:var(--navy-900); text-decoration:none}
a:hover{color:var(--navy-700)}
:focus-visible{outline:3px solid var(--gold-500); outline-offset:2px; border-radius:4px}
::selection{background:var(--navy-900); color:#fff}
.container{width:min(var(--container),100% - 2rem); margin-inline:auto}
@media(min-width:760px){.container{width:min(var(--container),100% - 2.5rem)}}
.section{padding-block:clamp(3.2rem,6vw,5.5rem)}
.section--surface{background:var(--surface)}
.section--navy{background:var(--navy-900); color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold-500); color:#fff; padding:.7rem 1.1rem; font-weight:700}
.skip-link:focus{left:.5rem; top:.5rem}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.92rem 1.5rem; border-radius:999px; font-weight:700; font-size:.92rem; line-height:1.2; border:2px solid transparent; cursor:pointer; transition:all .2s ease; font-family:var(--font-body); letter-spacing:-0.01em; white-space:nowrap}
.btn svg{width:1.1em; height:1.1em; flex:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); box-shadow:0 8px 20px rgba(200,164,74,.28)}
.btn--primary:hover{background:var(--gold-600); border-color:var(--gold-600); color:#fff; transform:translateY(-1px)}
.btn--navy{background:var(--navy-900); color:#fff; border-color:var(--navy-900); box-shadow:0 8px 20px rgba(11,31,58,.20)}
.btn--navy:hover{background:var(--navy-800); border-color:var(--navy-800)}
.btn--red{background:var(--red-500); color:#fff; border-color:var(--red-500)}
.btn--red:hover{background:var(--red-600); border-color:var(--red-600)}
.btn--outline-light{border-color:rgba(255,255,255,.75); color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(6px)}
.btn--outline-light:hover{background:#fff; color:var(--navy-900); border-color:#fff}
.btn--outline-dark{border-color:var(--line); color:var(--navy-900); background:#fff}
.btn--outline-dark:hover{border-color:var(--navy-900); background:var(--navy-900); color:#fff}
.btn--wa{background:#25D366; color:#fff; border-color:#25D366; box-shadow:0 8px 20px rgba(37,211,102,.22)}
.btn--wa:hover{background:#1FB356; border-color:#1FB356; color:#fff}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--slate-700)}
.btn--ghost:hover{border-color:var(--navy-900); color:var(--navy-900)}
.btn--lg{padding:1.05rem 1.9rem; font-size:1rem}
.btn--sm{padding:.62rem 1.1rem; font-size:.85rem}

/* Topbar */
.topbar{background:var(--navy-950); color:#CBD5E1; font-size:.80rem; border-bottom:1px solid rgba(255,255,255,.07)}
@media(max-width:900px){.topbar{display:none !important}}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--topbar-h); flex-wrap:wrap; padding-block:.3rem}
.topbar__left{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap}
.topbar__dot{width:8px; height:8px; border-radius:50%; background:#25D366; box-shadow:0 0 0 4px rgba(37,211,102,.18); flex:none}
.topbar__note{margin:0; color:#E2E8F0; font-size:.80rem}
.topbar__note strong{color:#fff; font-weight:800}
.topbar__badge{font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; background:rgba(200,164,74,.18); color:var(--gold-500); border:1px solid rgba(200,164,74,.25); padding:.18rem .55rem; border-radius:999px}
.topbar__right{display:flex; align-items:center; gap:.6rem; margin-left:auto; flex-wrap:wrap}
.topbar__right a{color:#fff; font-weight:700; font-size:.80rem}
.topbar__right a:hover{color:var(--gold-500)}
.topbar__sep{opacity:.25}
.topbar__hours{color:#94A3B8; font-weight:600}

/* Header */
.header{position:sticky; position:-webkit-sticky; top:0; z-index:1000; background:rgba(255,255,255,.97); backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15); border-bottom:1px solid transparent; transition:box-shadow .25s,border-color .25s}
.header.is-scrolled{box-shadow:0 6px 24px rgba(11,31,58,.08); border-color:var(--line-light); background:rgba(255,255,255,.98)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:var(--header-h); min-width:0; position:relative}
.brand{display:inline-flex; align-items:center; gap:.85rem; min-width:0; flex:none; margin-left:0; margin-right:auto}
.brand__mark{width:62px; height:62px; flex:none; border-radius:50%; overflow:hidden; background:#fff; border:2px solid var(--line); display:grid; place-items:center; box-shadow:var(--shadow-s)}
.brand__mark img{width:100%; height:100%; object-fit:contain; padding:4px}
.site-footer .brand__mark{width:56px; height:56px; border-color:rgba(255,255,255,.15)}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__name{font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--navy-900); letter-spacing:-0.02em; line-height:1}
.brand__name span{color:var(--red-500)}
.brand__tag{font-size:.62rem; text-transform:uppercase; letter-spacing:.10em; color:var(--slate-500); font-weight:700; margin-top:3px}
.brand__tag strong{color:var(--gold-600)}
@media(max-width:520px){.brand__text{display:none} .brand__mark{width:52px; height:52px}}
.main-nav{display:none}
.header__cta{display:none}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--line); border-radius:999px; width:46px; height:46px; cursor:pointer; color:var(--navy-900)}
.nav-toggle__bars{position:relative; width:18px; height:14px; display:inline-block}
.nav-toggle__bars::before,.nav-toggle__bars::after,.nav-toggle__bars span{content:""; position:absolute; left:0; width:100%; height:2.5px; border-radius:99px; background:currentColor; transition:transform .25s,opacity .2s,top .25s}
.nav-toggle__bars::before{top:0} .nav-toggle__bars span{top:6px} .nav-toggle__bars::after{top:12px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:6px; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:6px; transform:rotate(-45deg)}
.mobile-overlay{position:fixed; inset:0; background:rgba(6,18,42,.58); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; z-index:1001}
.mobile-overlay.is-open{opacity:1; visibility:visible}
.mobile-nav{position:fixed; top:0; right:0; width:min(88vw,380px); height:100vh; height:100dvh; background:#fff; box-shadow:-16px 0 48px rgba(6,18,42,.18); transform:translateX(100%); transition:transform .32s cubic-bezier(.32,.72,0,1), visibility .32s; z-index:1002; display:flex; flex-direction:column; overflow:hidden; visibility:hidden}
.mobile-nav.is-open{transform:translateX(0); visibility:visible}
.mobile-nav__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid var(--line); flex:none; background:#fff}
.mobile-nav__close{width:42px; height:42px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--navy-900); display:grid; place-items:center; cursor:pointer; font-size:1.6rem; line-height:1; transition:all .2s}
.mobile-nav__close:hover{background:var(--surface); border-color:var(--navy-900); transform:rotate(90deg)}
.mobile-nav__body{flex:1; overflow-y:auto; padding:0.4rem 1.1rem 0.8rem; display:grid; align-content:start}
.mobile-nav__body a{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.95rem .2rem; font-weight:700; color:var(--slate-700); font-size:.98rem; border-bottom:1px solid var(--line-light); transition:color .2s, padding-left .2s}
.mobile-nav__body a:hover{color:var(--navy-900); padding-left:.3rem}
.mobile-nav__body a.is-active{color:var(--navy-900); font-weight:800}
.mobile-nav__body a::after{content:"›"; color:var(--slate-400); font-size:1.25rem; line-height:1; opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s}
.mobile-nav__body a:hover::after{opacity:1; transform:translateX(0)}
.mobile-nav__cta{display:grid; gap:.7rem; padding:1rem 1.1rem; border-top:1px solid var(--line); background:var(--surface); flex:none}
.mobile-nav__cta .btn{width:100%; justify-content:center}
.mobile-nav__foot{padding:0.9rem 1.1rem 1.2rem; text-align:center; color:var(--slate-500); font-size:.82rem; line-height:1.5; border-top:1px solid var(--line-light); background:#fff; flex:none}
.mobile-nav__foot a{color:var(--navy-900); font-weight:700; display:inline; padding:0; border:none; font-size:.82rem}
.mobile-nav__foot a:hover{color:var(--teal-600)}
@media(min-width:1180px){
  .nav-toggle{display:none} .mobile-nav,.mobile-overlay{display:none !important}
  .main-nav{display:flex; align-items:center; gap:.15rem; flex:1; justify-content:center}
  .main-nav a{padding:.58rem .75rem; font-weight:650; font-size:.86rem; color:var(--slate-500); border-radius:8px; white-space:nowrap}
  .main-nav a:hover{color:var(--navy-900); background:var(--surface)}
  .main-nav a.is-active{color:var(--navy-900); background:var(--gold-50); border:1px solid rgba(200,164,74,.25)}
  .header__cta{display:inline-flex; align-items:center; gap:.6rem}
}

/* Hero */
.hero{position:relative; background:var(--navy-950); color:#fff; overflow:hidden; isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:-1}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%}
.hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(102deg, rgba(6,18,42,.95) 28%, rgba(11,31,58,.88) 48%, rgba(11,31,58,.45) 70%, rgba(6,18,42,.18)), radial-gradient(700px 420px at 10% 100%, rgba(200,164,74,.18), transparent 62%)}
.hero__inner{display:grid; gap:2.2rem; align-items:center; padding-block:clamp(2.6rem,6vw,4.4rem) clamp(2.4rem,5vw,3.4rem); min-height:clamp(560px,84vh,760px)}
.hero__eyebrow{display:inline-flex; align-items:center; gap:.55rem; background:rgba(200,164,74,.14); border:1px solid rgba(200,164,74,.22); padding:.38rem .75rem .38rem .5rem; border-radius:999px; font-size:.70rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-500); margin-bottom:1rem; flex-wrap:wrap}
.hero__eyebrow-dot{width:8px; height:8px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 4px rgba(200,164,74,.20)}
.hero h1{color:#fff; max-width:18ch}
.hero h1 em{font-style:normal; color:var(--gold-500); font-weight:800}
.hero__lead{max-width:58ch; color:#CBD5E1; font-size:clamp(1rem,1.35vw,1.14rem); line-height:1.64; margin-bottom:1.5rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.75rem}
.hero__trust{display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.7rem; padding-top:1.35rem; border-top:1px solid rgba(255,255,255,.10); font-size:.82rem; color:#CBD5E1}
.hero__trust li{display:inline-flex; align-items:center; gap:.4rem; font-weight:650; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:.38rem .72rem; border-radius:999px}
.hero__trust li svg{width:14px; height:14px; color:var(--gold-500); flex:none}
.hero__side{display:none; gap:1rem; flex-direction:column}
.hero__card{background:#fff; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-l); color:var(--slate-700); border:1px solid rgba(255,255,255,.7)}
.hero__card-img{aspect-ratio:16/10; object-fit:cover; width:100%}
.hero__card-body{padding:1rem 1.15rem 1.1rem}
.hero__card-body h3{margin:0 0 .25rem; font-size:1rem; color:var(--navy-900)}
.hero__card-body p{margin:0; color:var(--slate-500); font-size:.88rem}
.hero__card-meta{display:flex; align-items:center; justify-content:space-between; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--line-light); gap:.6rem; flex-wrap:wrap}
.hero__mini-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; background:rgba(255,255,255,.07); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-m); padding:.9rem}
.hero__mini-stats div{text-align:center}
.hero__mini-stats strong{display:block; color:#fff; font-size:1.15rem; line-height:1}
.hero__mini-stats span{font-size:.68rem; color:#94A3B8; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
@media(min-width:980px){.hero__inner{grid-template-columns:1.1fr .9fr; gap:2.8rem} .hero__side{display:flex}}

/* Stats bar */
.stats-bar{background:var(--navy-900); color:#fff; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
.stats-bar__inner{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; padding-block:1.6rem}
.stats-bar__item{text-align:center; border-right:1px solid rgba(255,255,255,.08); padding:.4rem .6rem}
.stats-bar__item:last-child{border-right:none}
.stats-bar__item strong{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2rem); color:var(--gold-500); display:block; line-height:1}
.stats-bar__item span{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#94A3B8}
@media(min-width:760px){.stats-bar__inner{grid-template-columns:repeat(4,1fr)}}

/* Value strip */
.value-strip{background:var(--surface); border-bottom:1px solid var(--line)}
.value-strip__inner{display:grid; gap:1rem; grid-template-columns:1fr; padding-block:1.5rem}
.value-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.15rem 1.2rem; display:flex; gap:.95rem; align-items:flex-start}
.value-card__icon{width:46px; height:46px; border-radius:12px; background:var(--navy-900); color:var(--gold-500); display:grid; place-items:center; flex:none}
.value-card__icon svg{width:22px; height:22px}
.value-card h3{font-size:.98rem; margin:0 0 .2rem}
.value-card p{margin:0; font-size:.88rem; color:var(--slate-500); line-height:1.55}
@media(min-width:640px){.value-strip__inner{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.value-strip__inner{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.value-strip__inner{grid-template-columns:repeat(4,1fr)}}

/* Section heads */
.section-head{max-width:720px; margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.section-head--center{margin-inline:auto; text-align:center}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.70rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-600); margin-bottom:.6rem}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--gold-500); border-radius:99px}
.eyebrow--light{color:var(--gold-500)} .eyebrow--light::before{background:var(--gold-500)}
.eyebrow--navy{color:var(--navy-900)} .eyebrow--navy::before{background:var(--red-500)}
.section-head p{color:var(--slate-500); margin:0; font-size:1rem}
.section-head h2{margin-bottom:.35em}

/* Category / service cards */
.category-grid{display:grid; gap:1.25rem; grid-template-columns:1fr}
.cat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s,box-shadow .22s,border-color .22s}
.cat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:rgba(200,164,74,.30)}
.cat-card__media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface)}
.cat-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .45s}
.cat-card:hover .cat-card__media img{transform:scale(1.04)}
.cat-card__badge{position:absolute; top:12px; left:12px; background:var(--navy-900); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:.32rem .62rem; border-radius:999px}
.cat-card__badge--gold{background:var(--gold-500); color:var(--navy-900)}
.cat-card__body{padding:1.2rem 1.25rem 1.25rem; display:flex; flex-direction:column; flex:1}
.cat-card__body h3{margin:0 0 .35rem; font-size:1.15rem}
.cat-card__body p{margin:0 0 1rem; color:var(--slate-500); font-size:.92rem; line-height:1.62}
.cat-card__list{display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem}
.cat-card__list span{font-size:.76rem; font-weight:600; color:var(--slate-700); background:var(--surface); border:1px solid var(--line-light); padding:.25rem .55rem; border-radius:999px}
.cat-card__actions{display:flex; gap:.55rem; margin-top:auto; flex-wrap:wrap}
.cat-card__actions .btn{flex:1}
@media(min-width:760px){.category-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.category-grid{grid-template-columns:repeat(3,1fr)}}

.services-grid{display:grid; gap:1.2rem; grid-template-columns:1fr}
.service-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column; transition:transform .20s,box-shadow .20s,border-color .20s}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:rgba(200,164,74,.28)}
.service-card__media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface)}
.service-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.service-card:hover .service-card__media img{transform:scale(1.04)}
.service-card__tag{position:absolute; top:10px; left:10px; background:rgba(255,255,255,.96); color:var(--navy-900); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .55rem; border-radius:999px; border:1px solid #fff}
.service-card__body{padding:1.1rem 1.15rem 1rem; display:flex; flex-direction:column; flex:1; gap:.4rem}
.service-card__body h3{margin:0; font-size:1.05rem; line-height:1.3}
.service-card__body p{margin:0; color:var(--slate-500); font-size:.88rem; line-height:1.6}
.service-card__bullets{margin:.5rem 0 0; display:grid; gap:.3rem}
.service-card__bullets li{display:flex; gap:.45rem; align-items:flex-start; font-size:.82rem; color:var(--slate-700)}
.service-card__bullets li::before{content:"✓"; color:var(--teal-600); font-weight:800; flex:none; margin-top:1px}
.service-card__actions{display:grid; gap:.55rem; margin-top:1rem}
.service-card__actions-row{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.services-grid{grid-template-columns:repeat(3,1fr)}}

/* Detail page hero */
.page-hero{background:var(--navy-900); color:#fff; position:relative; overflow:hidden; isolation:isolate}
.page-hero__bg{position:absolute; inset:0; opacity:.18}
.page-hero__bg img{width:100%; height:100%; object-fit:cover}
.page-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 400px at 12% 0%, rgba(200,164,74,.18), transparent 60%); pointer-events:none}
.page-hero__inner{padding-block:2.4rem 2rem; position:relative}
.page-hero h1{color:#fff; margin-bottom:.4rem}
.page-hero p{color:#CBD5E1; max-width:68ch; font-size:1.04rem; margin-bottom:1.15rem; line-height:1.6}
.page-hero__actions{display:flex; flex-wrap:wrap; gap:.7rem}
.page-hero__meta{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.15rem}
.page-hero__meta span{display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); padding:.38rem .7rem; border-radius:999px; font-size:.82rem; color:#E2E8F0; font-weight:600}

/* Why choose us */
.why-grid{display:grid; gap:1rem; grid-template-columns:1fr}
.why-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.3rem 1.25rem}
.why-card__icon{width:46px; height:46px; border-radius:12px; background:var(--navy-900); color:var(--gold-500); display:grid; place-items:center; margin-bottom:.9rem}
.why-card__icon svg{width:22px; height:22px}
.why-card h3{font-size:1.02rem; margin-bottom:.32rem}
.why-card p{margin:0; font-size:.90rem; color:var(--slate-500); line-height:1.62}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.why-grid{grid-template-columns:repeat(4,1fr)}}

/* Steps */
.steps{display:grid; gap:1rem; grid-template-columns:1fr; position:relative}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.3rem 1.25rem; position:relative}
.step__num{width:46px; height:46px; border-radius:12px; background:var(--navy-900); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.86rem; letter-spacing:.04em; margin-bottom:.85rem}
.step__num em{font-style:normal; color:var(--gold-500); margin-left:2px}
.step h3{font-size:1rem; margin-bottom:.3rem}
.step p{margin:0; font-size:.90rem; color:var(--slate-500); line-height:1.62}
.step__line{display:none}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)} .step__line{display:block; position:absolute; top:34px; left:56px; right:-1rem; height:2px; background:var(--line)} .step:last-child .step__line{display:none} .step__num{position:relative; z-index:1}}

/* About */
.about-layout{display:grid; gap:2.2rem; grid-template-columns:1fr; align-items:start}
@media(min-width:960px){.about-layout{grid-template-columns:1.05fr .95fr; gap:2.8rem; align-items:start}}
.about-layout > div{display:grid; gap:1.2rem}
.about-check{display:grid; gap:.7rem; margin-top:.5rem}
.about-check li{display:flex; gap:.6rem; align-items:flex-start; font-weight:600; font-size:.92rem}
.about-check li svg{color:var(--teal-600); flex:none; margin-top:2px}
.img-card{border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-s); background:var(--surface)}
.img-card img{width:100%; height:100%; object-fit:cover}
.img-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}

/* Gallery */
.filter-bar{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; justify-content:center}
.filter-bar button{padding:.55rem .95rem; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:.84rem; cursor:pointer; color:var(--slate-700)}
.filter-bar button.is-active,.filter-bar button:hover{background:var(--navy-900); color:#fff; border-color:var(--navy-900)}
.gallery-grid{display:grid; gap:.95rem; grid-template-columns:repeat(2,1fr)}
.gallery-item{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-m); background:var(--surface); border:1px solid var(--line); cursor:pointer}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .35s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item__label{position:absolute; bottom:8px; left:8px; background:rgba(11,31,58,.82); color:#fff; padding:.28rem .55rem; border-radius:999px; font-size:.70rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; backdrop-filter:blur(6px)}
@media(min-width:760px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}

/* Contact */
.contact-cards{display:grid; gap:1rem; grid-template-columns:1fr; margin-bottom:2rem}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.3rem; display:flex; gap:1rem; align-items:flex-start}
.contact-card__icon{width:50px; height:50px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--navy-900); color:var(--gold-500)}
.contact-card__icon svg{width:22px; height:22px}
.contact-card h3{font-size:1rem; margin-bottom:.2rem}
.contact-card p{margin:0; font-size:.92rem; color:var(--slate-500)}
.contact-card a{font-weight:700; color:var(--navy-800)}
@media(min-width:760px){.contact-cards{grid-template-columns:repeat(3,1fr)}}
.contact-layout{display:grid; gap:1.6rem}
@media(min-width:1024px){.contact-layout{grid-template-columns:1.05fr .95fr}}
.map-wrap{border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); min-height:380px; background:var(--surface); box-shadow:var(--shadow-s)}
.map-wrap iframe{width:100%; height:100%; min-height:380px; border:0; display:block}
.contact-hours{margin-top:1rem; background:var(--navy-900); color:#CBD5E1; border-radius:var(--radius-m); padding:1.3rem; border:1px solid rgba(255,255,255,.08)}
.contact-hours h4{display:flex; align-items:center; gap:.5rem; color:#fff; margin:0 0 .6rem; font-size:.96rem}
.contact-hours p{margin:0; font-size:.92rem; line-height:1.6}
.pill-live{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--teal-50); color:var(--teal-600); border:1px solid #A7F3D0; padding:.28rem .6rem; border-radius:999px}

/* Forms */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:clamp(1.3rem,3vw,1.9rem); box-shadow:var(--shadow-s)}
.form-fieldset{border:1px solid var(--line-light); border-radius:var(--radius-m); padding:1.1rem 1rem .9rem; margin:0 0 1.1rem; background:var(--surface)}
.form-fieldset legend{font-weight:800; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-900); padding:0 .4rem}
.form-grid{display:grid; gap:.95rem; grid-template-columns:1fr}
@media(min-width:560px){.form-grid{grid-template-columns:repeat(2,1fr)} .field--full{grid-column:1/-1}}
.field label{display:block; font-weight:700; font-size:.84rem; color:var(--navy-900); margin-bottom:.35rem}
.field label span{color:var(--red-500)}
.field input,.field select,.field textarea{width:100%; font:inherit; color:var(--slate-900); padding:.84rem .95rem; border:1.5px solid var(--line); border-radius:var(--radius-s); background:#fff; transition:border-color .2s,box-shadow .2s; font-size:.94rem}
.field textarea{resize:vertical; min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--navy-700); box-shadow:0 0 0 4px rgba(11,31,58,.08)}
.field--error input,.field--error select,.field--error textarea{border-color:var(--red-500)}
.field__error{font-size:.78rem; color:var(--red-500); font-weight:600; margin-top:.3rem; display:none}
.field--error .field__error{display:block}
.services-checks{display:grid; gap:.6rem; grid-template-columns:1fr}
@media(min-width:480px){.services-checks{grid-template-columns:1fr 1fr}}
.check{display:flex; gap:.55rem; align-items:center; background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:.68rem .75rem; cursor:pointer; transition:border-color .2s,background .2s}
.check:hover{border-color:var(--navy-900)}
.check:has(input:checked){border-color:var(--navy-900); background:var(--gold-50)}
.check input{accent-color:var(--navy-900); width:18px; height:18px; flex:none}
.check span{font-size:.88rem; font-weight:600; color:var(--slate-700)}
.form-foot{margin-top:.6rem; color:var(--slate-500); font-size:.82rem; text-align:center}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy-950) 10%, var(--navy-900) 85%); color:#fff; text-align:center; padding-block:clamp(3rem,6vw,4.4rem); position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 360px at 10% 0%, rgba(200,164,74,.20), transparent 60%); pointer-events:none}
.cta-band > .container{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:#CBD5E1; max-width:66ch; margin:.6rem auto 1.3rem; font-size:1.05rem}
.cta-band__actions{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}

/* Testimonials */
.testi-grid{display:grid; gap:1.1rem; grid-template-columns:1fr}
.testi-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.3rem 1.25rem; display:grid; gap:.8rem}
.testi-card__head{display:flex; gap:.85rem; align-items:center}
.testi-card__avatar{width:46px; height:46px; border-radius:50%; background:var(--navy-900); color:var(--gold-500); display:grid; place-items:center; font-weight:800; font-size:.95rem}
.testi-card__meta strong{display:block; font-size:.92rem; color:var(--navy-900); line-height:1.2}
.testi-card__meta span{font-size:.78rem; color:var(--slate-500); font-weight:600}
.testi-card p{margin:0; color:var(--slate-700); font-size:.92rem; line-height:1.6; font-style:italic}
@media(min-width:760px){.testi-grid{grid-template-columns:repeat(3,1fr)}}

/* Breadcrumbs */
.breadcrumbs{font-size:.82rem; color:var(--slate-500); display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem}
.breadcrumbs a{color:var(--slate-500); font-weight:600} .breadcrumbs a:hover{color:var(--navy-900)}
.breadcrumbs span{opacity:.35}

/* Footer */
.site-footer{background:var(--navy-950); color:#94A3B8; font-size:.90rem}
.footer-main{display:grid; gap:2.4rem; padding-block:clamp(2.8rem,6vw,3.8rem) 1.8rem; grid-template-columns:1fr}
@media(min-width:640px){.footer-main{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.footer-main{grid-template-columns:1.5fr .9fr 1fr 1.3fr}}
.site-footer h3{color:#fff; font-size:.80rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:.95rem; font-weight:800}
.site-footer .brand{margin-bottom:.9rem}
.footer-about{margin:0 0 1.1rem; max-width:38ch; color:#94A3B8; line-height:1.65}
.footer-links{display:grid; gap:.52rem}
.footer-links a{color:#CBD5E1; display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.88rem}
.footer-links a::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-500); flex:none}
.footer-links a:hover{color:#fff}
.footer-contact{display:grid; gap:.85rem}
.footer-contact li{display:flex; gap:.75rem; align-items:flex-start}
.footer-contact svg{width:18px; height:18px; color:var(--gold-500); flex:none; margin-top:.2rem}
.footer-contact a{color:#E2E8F0; font-weight:700}
.footer-contact a:hover{color:#fff}
.footer-contact address{font-style:normal; color:#94A3B8; line-height:1.6}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding-block:1.15rem; display:flex; flex-wrap:wrap; gap:.7rem 1.2rem; align-items:center; justify-content:space-between; font-size:.80rem}
.footer-bottom p{margin:0; color:#64748B}
.footer-bottom a{color:#94A3B8; font-weight:600}
.footer-bottom a:hover{color:#fff}
.credit{font-size:.78rem; color:#475569; text-align:center; padding-bottom:.9rem}
.credit a{color:var(--gold-500); font-weight:700} .credit a:hover{color:#fff}

/* Floating */
.wa-float{position:fixed; right:1rem; bottom:1rem; z-index:90; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 28px rgba(37,211,102,.35); transition:transform .2s,box-shadow .2s; border:2px solid #fff}
.wa-float:hover{transform:scale(1.07); box-shadow:0 14px 32px rgba(37,211,102,.45); color:#fff}
.wa-float svg{width:28px; height:28px}
.call-float{position:fixed; right:1rem; bottom:4.9rem; z-index:90; width:58px; height:58px; border-radius:50%; background:var(--navy-900); color:#fff; display:none; place-items:center; box-shadow:var(--shadow-m); border:2px solid #fff}
.call-float svg{width:22px; height:22px}
@media(max-width:760px){.call-float{display:grid}}
.mobile-book-bar{display:none !important}

/* Reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Alert */
.alert{display:none; background:var(--teal-50); border:1px solid #A7F3D0; color:#065F46; border-radius:var(--radius-s); padding:.9rem 1rem; font-size:.90rem; font-weight:600; margin-bottom:1rem}
.alert.is-visible{display:block}
.alert--error{background:var(--red-50); border-color:#FECACA; color:#991B1B}

/* Utilities */
.divider{height:1px; background:var(--line); margin:1.5rem 0; border:none}
.badge{display:inline-flex; align-items:center; gap:.35rem; font-size:.70rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.30rem .6rem; border-radius:999px; background:var(--gold-50); color:var(--navy-900); border:1px solid rgba(200,164,74,.25)}
.badge--navy{background:var(--navy-900); color:#fff; border-color:var(--navy-900)}
.placeholder-note{background:#FFFbeb; border:1px dashed var(--gold-500); color:#92400E; padding:.7rem .9rem; border-radius:var(--radius-s); font-size:.82rem; font-weight:600; margin:1rem 0; line-height:1.5}

@media(max-width:520px){
  .hero__actions{flex-direction:column; align-items:stretch} .hero__actions .btn{width:100%; justify-content:center}
  .cat-card__actions{flex-direction:column} .cat-card__actions .btn{width:100%}
  .cta-band__actions{flex-direction:column; align-items:stretch} .cta-band__actions .btn{width:100%}
  .service-card__actions-row{grid-template-columns:1fr}
}
html, body{max-width:100%; overflow-x:clip}
section, .container, .header__inner, .hero__inner{max-width:100%; min-width:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none !important; transition:none !important} .reveal{opacity:1; transform:none}}
@media print{.header,.site-footer,.wa-float,.call-float,.mobile-book-bar{display:none !important}}