/* ---------- self-hosted brand type (no third-party font requests: faster first paint, no visitor IP sent to Google Fonts) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/oswald-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/oswald-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/oswald-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/oswald-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cinzel-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cinzel-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/cinzel-latin-800-normal.woff2') format('woff2');}

:root{
  --gold:#d29a2d;
  --gold-rich:#c89020;
  --gold-light:#e3a940;
  --gold-premium:#f0c060;
  --gold-deep:#a97818;
  --gold-contrast:#926815; /* WCAG AA-safe deep gold (≥4.5:1 on white) for small text/links/hover states on light backgrounds */
  --navy:#14213d;      /* Nyandeni Navy — primary rebrand dark, sampled from real brand collateral */
  --navy-deep:#0a121f;  /* deepest navy — utility bar / footer */
  --royal:#1e3a70;      /* Royal Blue — secondary accent */
  --darkgrey:#404040;
  --softgrey:#f5f5f5;
  --white:#ffffff;
  --line: rgba(32,32,32,0.10);
  --line-gold: rgba(210,154,45,0.35);
  --line-dark: rgba(255,255,255,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--white); color:var(--darkgrey); font-family:'Inter', sans-serif; font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px;}
/* keep the focus ring ≥3:1 against whatever sits behind it in each context */
.btn-solid:focus-visible, .float-btn.whatsapp:focus-visible{outline-color:var(--navy);}
.quote-form :focus-visible{outline-color:var(--gold-premium);}
.skip-link{position:absolute; left:-999px; top:0; background:var(--gold); color:var(--navy); padding:12px 20px; z-index:200; font-family:'Oswald',sans-serif; font-weight:600;}
.skip-link:focus{left:12px; top:12px;}

.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:'Cinzel', serif; font-weight:700; letter-spacing:0.015em;}
.eyebrow{font-family:'Oswald', sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--darkgrey); font-weight:600;}
.eyebrow.gold{color:var(--gold-contrast);}
.dark-band .eyebrow{color:var(--gold-premium);}

.light-section{background:var(--softgrey);}
.white-section{background:var(--white);}
.dark-band{background:var(--navy); color:var(--softgrey);}
.dark-band h1, .dark-band h2, .dark-band h3{color:var(--white);}
.dark-band p{color:var(--softgrey); opacity:0.88;}

.divider{height:2px; width:100%; background:var(--gold); opacity:0.9;}

/* ---------- utility bar ---------- */
.utility{background:var(--navy-deep); border-bottom:1px solid var(--line-dark); font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.03em;}
.utility .wrap{display:flex; justify-content:space-between; align-items:center; padding:9px 28px; flex-wrap:wrap; gap:10px;}
.utility .emergency{display:flex; gap:20px; flex-wrap:wrap; align-items:center; color:var(--softgrey);}
.utility .emergency a{display:flex; align-items:center; gap:6px;}
.utility .emergency b{color:var(--gold-premium); font-weight:600;}
.utility .badges{color:var(--softgrey); text-transform:uppercase; opacity:0.7; font-size:11px;}

/* ---------- header / nav ---------- */
header.main{position:sticky; top:0; z-index:80; background:rgba(255,255,255,0.97); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
header.main .wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 28px;}
.brand img{height:46px; width:auto;}
nav.primary{display:flex; gap:24px; align-items:center;}
nav.primary a{font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); font-weight:500; padding-bottom:3px; border-bottom:2px solid transparent;}
nav.primary a:hover, nav.primary a:focus-visible{color:var(--gold-contrast);}
nav.primary a.active{color:var(--gold-contrast); border-color:var(--gold-contrast);}
.btn{font-family:'Oswald',sans-serif; letter-spacing:0.1em; text-transform:uppercase; font-size:12px; font-weight:600; padding:12px 22px; border:1px solid var(--gold); display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition:all .18s ease;}
.btn-solid{background:var(--gold); color:var(--navy); border-color:var(--gold);}
.btn-solid:hover{background:var(--gold-contrast); border-color:var(--gold-contrast); color:var(--white);}
.btn-line{background:transparent; color:var(--navy); border-color:var(--darkgrey);}
.btn-line:hover{border-color:var(--gold-contrast); color:var(--gold-contrast);}
.btn-dark{background:var(--navy); color:var(--gold-premium); border-color:var(--navy);}
.btn-dark:hover{background:var(--darkgrey);}
.dark-band .btn-line{color:var(--white); border-color:rgba(255,255,255,0.45);}
.dark-band .btn-line:hover{border-color:var(--gold-premium); color:var(--gold-premium);}
.navcta{display:flex; gap:10px; align-items:center;}
.menu-toggle{display:none; background:none; border:1px solid var(--line); color:var(--navy); padding:9px 13px; font-size:16px; cursor:pointer;}
.mobile-nav{display:none; flex-direction:column; background:var(--white); border-bottom:1px solid var(--line); padding:10px 28px 20px;}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:12px 0; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.09em; font-size:13px; color:var(--navy); border-bottom:1px solid var(--line);}
.mobile-nav a.active{color:var(--gold-contrast);}
.mobile-nav a:last-child{border-bottom:none;}
@media (max-width:1080px){ nav.primary{display:none;} .navcta .btn-line{display:none;} .menu-toggle{display:inline-block;} }

/* ---------- page header (non-home pages) ---------- */
.page-header{position:relative; padding:76px 0 60px; overflow:hidden;}
.page-header-bg{position:absolute; inset:0; z-index:0;}
.page-header-bg picture{width:100%; height:100%;}
.page-header-bg img{width:100%; height:100%; object-fit:cover;}
.page-header-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--navy) 30%, rgba(20,33,61,0.88) 60%, rgba(20,33,61,0.55) 100%);}
.page-header .wrap{position:relative; z-index:1;}
.page-header h1{font-size:clamp(30px,4vw,48px); color:var(--white); margin-top:14px;}
.page-header p{color:var(--softgrey); opacity:0.9; margin-top:14px; max-width:600px; font-size:15.5px;}
.breadcrumb{font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--softgrey); opacity:0.75; margin-bottom:6px;}
.breadcrumb a{color:var(--gold-premium); opacity:1; text-decoration:underline; text-underline-offset:3px;}

/* ---------- hero (home only) ---------- */
.hero{position:relative; overflow:hidden;}
.hero-inner{position:relative; min-height:640px; display:flex; align-items:center;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg picture{width:100%; height:100%;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:68% 22%;}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--navy) 24%, rgba(20,33,61,0.86) 50%, rgba(20,33,61,0.35) 80%, rgba(20,33,61,0.08) 100%);}
.hero-content{position:relative; z-index:1; padding:60px 0; max-width:660px;}
.hero .eyebrow{margin-bottom:18px;}
.hero h1{font-size:clamp(32px,4.6vw,58px); line-height:1.08; color:var(--white); margin-bottom:18px;}
.hero h1 span{color:var(--gold-premium);}
.hero p.lede{font-size:16.5px; color:var(--softgrey); opacity:0.92; max-width:520px; margin-bottom:30px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px;}
.hero-ctas .btn{padding:15px 26px; font-size:12.5px;}
.trustline{display:flex; gap:22px; flex-wrap:wrap; font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.05em; color:var(--softgrey); text-transform:uppercase;}
.trustline span{display:flex; align-items:center; gap:8px;}
.trustline .dot{width:6px; height:6px; background:var(--gold-premium); border-radius:50%; flex-shrink:0;}

/* ---------- stats ---------- */
.stats{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:38px 0;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stat-num{font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(24px,3vw,38px); color:var(--navy);}
.stat-num span{color:var(--gold-deep);}
.stat p{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--darkgrey); margin-top:6px; font-family:'Oswald',sans-serif;}

section{padding:88px 0;}
.section-head{max-width:680px; margin-bottom:48px;}
.section-head h2{font-size:clamp(26px,3.1vw,38px); color:var(--navy); margin-top:12px;}
.section-head p{color:var(--darkgrey); margin-top:14px; font-size:15.5px;}
.dark-band .section-head h2{color:var(--white);}

/* ---------- Why Nyandeni ---------- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
.why-card{background:var(--white); padding:32px 28px;}
.why-card .ic{width:34px; height:34px; color:var(--gold-deep); margin-bottom:16px;}
.why-card h3{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-size:14.5px; font-weight:600; color:var(--navy); margin:0 0 8px;}
.why-card p{font-size:13.5px; color:var(--darkgrey);}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:70px;}
.about-grid img{border:1px solid var(--line);}
.about-copy p{color:var(--darkgrey); margin-bottom:15px; font-size:15px;}
.about-copy p strong{color:var(--navy);}

.standard-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; margin-bottom:70px;}
.tenets li{display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line);}
.tenets li:first-child{padding-top:0;}
.tenets .mark{font-family:'Cinzel', serif; font-size:18px; color:var(--gold-contrast); flex-shrink:0; width:26px;}
.tenets h3{font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; font-size:13.5px; color:var(--navy); margin:0 0 4px;}
.tenets p{font-size:13.5px; color:var(--darkgrey);}
.beyond-box{border:1px solid var(--line-gold); background:var(--white); padding:30px; margin-bottom:26px;}
.beyond-box h2{font-size:20px; color:var(--navy); margin:0 0 10px; line-height:1.3;}
.beyond-box p{color:var(--darkgrey); font-size:14px;}
.team-photo{border:1px solid var(--line);}
.team-photo figcaption{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--darkgrey); padding-top:10px;}

.leadership-band{border-top:1px solid var(--line); padding-top:56px;}
.leadership-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.leadership-copy p{color:var(--darkgrey); font-size:15px; margin-bottom:14px;}
.leadership-note{margin-top:18px; font-size:12.5px; color:var(--darkgrey); opacity:0.75; font-style:italic; border-left:2px solid var(--gold); padding-left:14px;}

/* ---------- Industries ---------- */
.industry-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);}
.industry-card{background:var(--white); padding:26px 16px; text-align:center;}
.industry-card .ic{width:28px; height:28px; margin:0 auto 12px; color:var(--gold-deep);}
.industry-card p{font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--navy);}
@media (max-width:900px){ .industry-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .industry-grid{grid-template-columns:repeat(2,1fr);} }

/* ---- Credentials & Compliance Centre, Credibility page ---- */
.cred-centre{border:1px solid var(--line); background:var(--white); margin-top:8px;}
.cred-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 26px; border-bottom:1px solid var(--line);}
.cred-row:last-child{border-bottom:none;}
.cred-row-main{display:flex; align-items:center; gap:16px;}
.cred-row .ic{color:var(--gold-deep); flex-shrink:0;}
.cred-row-text h3{font-size:14.5px; color:var(--navy); margin:0 0 4px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em;}
.cred-row-text p{font-size:12.5px; color:var(--darkgrey); margin:0; max-width:520px;}
.cred-row-action{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-contrast); white-space:nowrap; border-bottom:1px solid var(--gold-contrast); padding-bottom:2px; flex-shrink:0;}
.cred-row-action:hover{color:var(--navy); border-color:var(--gold-deep);}
@media (max-width:640px){ .cred-row{flex-direction:column; align-items:flex-start;} .cred-row-action{align-self:flex-start;} }

/* ---- Industries page v2: descriptive cards (reuses .teaser-card's look) ---- */
.industry-grid-v2{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:20px;}
@media (max-width:900px){ .industry-grid-v2{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .industry-grid-v2{grid-template-columns:1fr;} }

/* ---------- Services ---------- */
.service-category{margin-bottom:50px;}
.service-category:last-child{margin-bottom:0;}
.service-category > .eyebrow{display:block; margin:0 0 20px;}
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);}
.service-card{background:var(--white); display:grid; grid-template-columns:170px 1fr;}
.service-card .img-col{position:relative; overflow:hidden;}
.service-card .img-col picture{width:100%; height:100%;}
.service-card .img-col img{width:100%; height:100%; object-fit:cover; min-height:200px;}
.service-card .txt-col{padding:28px 26px;}
.service-card .num{font-family:'Oswald',sans-serif; color:var(--gold-contrast); font-size:11.5px; letter-spacing:0.13em;}
.service-card h3{font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; color:var(--navy); text-transform:uppercase; letter-spacing:0.02em; margin:9px 0 9px;}
.service-card p{font-size:13.5px; color:var(--darkgrey); margin-bottom:8px;}
.service-card ul{margin:10px 0 14px;}
.service-card li{font-size:12.5px; color:var(--darkgrey); padding:3px 0; padding-left:14px; position:relative;}
.service-card li::before{content:"•"; color:var(--gold-contrast); position:absolute; left:0;}
.service-links{display:flex; gap:16px; flex-wrap:wrap;}
.service-links a{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-contrast); border-bottom:1px solid var(--gold-contrast); padding-bottom:2px;}
.service-links a.secondary{color:var(--darkgrey); border-color:var(--darkgrey);}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr;} }
@media (max-width:700px){ .service-card{grid-template-columns:1fr;} .service-card .img-col img{min-height:170px;} }

/* ---------- Training ---------- */
.training-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.training-copy p{color:var(--darkgrey); font-size:15px; margin-bottom:14px;}
.training-list li{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--darkgrey);}
.training-list li::before{content:"—"; color:var(--gold-deep);}

/* ---------- Assessment / Quote ---------- */
.assess-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);}
@media (max-width:700px){ .assess-grid{grid-template-columns:1fr;} }
.assess-card{background:var(--white); padding:36px 32px;}
.assess-card .eyebrow{margin-bottom:10px;}
.assess-card h3{font-size:22px; color:var(--navy); margin-bottom:14px;}
.assess-card ul{margin-bottom:20px;}
.assess-card li{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--darkgrey);}
.assess-card li:first-child{padding-top:0;}
.assess-card li::before{content:"—"; color:var(--gold-deep);}
.assess-note{margin-top:40px; border:1px solid var(--line-gold); padding:22px 26px; font-size:13px; color:var(--darkgrey); background:var(--softgrey);}
.assess-note strong{color:var(--gold-contrast);}

/* ---------- Testimonial ---------- */
.testimonial{text-align:center; padding:76px 0;}
.testimonial blockquote{font-family:'Cinzel', serif; font-size:clamp(18px,2.3vw,26px); line-height:1.55; color:var(--white); max-width:780px; margin:0 auto 22px;}
.testimonial cite{font-family:'Oswald',sans-serif; font-style:normal; letter-spacing:0.1em; text-transform:uppercase; font-size:12px; color:var(--gold-premium);}
.testimonial .more-note{margin-top:22px; font-size:12px; color:var(--softgrey); opacity:0.6; font-style:italic;}
.testimonial-pending-text{font-family:'Inter',sans-serif; font-size:16px; line-height:1.65; color:var(--softgrey); opacity:0.92; max-width:620px; margin:0 auto;}
.testimonial-pending-text a{color:var(--gold-premium); text-decoration:underline;}

/* ---------- Accreditation ---------- */
.accred-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:36px;}
.accred-card{background:var(--white); padding:26px 20px; text-align:center;}
.accred-card .mono{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.12em; color:var(--gold-contrast); text-transform:uppercase; border:1px solid var(--gold-contrast); display:inline-block; padding:8px 13px; margin-bottom:12px;}
.accred-card p{font-size:12px; color:var(--darkgrey);}
.accred-note{margin-top:18px; font-size:12px; color:var(--darkgrey); opacity:0.8; font-style:italic;}
.accred-note strong{color:var(--gold-contrast);}
@media (max-width:900px){ .accred-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .accred-grid{grid-template-columns:1fr;} }

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.contact-info h3{font-size:22px; color:var(--white); margin-bottom:18px;}
.contact-info p{color:var(--softgrey); margin-bottom:24px; font-size:14.5px;}
.contact-list{margin-bottom:24px;}
.contact-list li{padding:13px 0; border-bottom:1px solid var(--line-dark); display:flex; justify-content:space-between; gap:10px; font-size:14px;}
.contact-list li span:first-child{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.07em; font-size:11px; color:var(--softgrey); opacity:0.7;}
.contact-list li span:last-child{color:var(--white);}
.contact-list li a{color:var(--gold-premium);}
.quote-form{border:1px solid var(--line-dark); padding:30px; background:var(--darkgrey);}
.quote-form h3{font-size:18px; color:var(--white); margin-bottom:18px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.quote-form label{display:block; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--softgrey); margin-bottom:6px;}
.quote-form input, .quote-form select, .quote-form textarea{width:100%; background:var(--navy); border:1px solid var(--line-dark); color:var(--white); padding:11px 12px; font-family:'Inter',sans-serif; font-size:14px;}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{border-color:var(--gold-premium);}
.quote-form .full{margin-bottom:14px;}
.quote-form .btn{width:100%; justify-content:center; margin-top:6px;}
@media (max-width:900px){ .about-grid, .leadership-grid, .standard-grid, .training-grid, .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} }

/* ---------- Footer ---------- */
footer{background:var(--navy-deep); padding:52px 0 22px; border-top:2px solid var(--gold);}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px;}
.footer-grid img{height:40px; margin-bottom:14px;}
.footer-grid p{font-size:12.5px; color:var(--softgrey); opacity:0.75; max-width:280px; margin-bottom:6px;}
.footer-col .footer-heading{font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.09em; font-size:11.5px; color:var(--gold-premium); margin:0 0 14px;}
.footer-col a, .footer-col span{display:block; font-size:12.5px; color:var(--softgrey); opacity:0.85; margin-bottom:8px;}
.footer-col a:hover{color:var(--gold-premium); opacity:1;}
.footer-col a .badge-soon{display:inline-block; font-size:9.5px; margin-bottom:0; margin-left:6px;}
.footer-legal{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;}
.footer-legal a{font-size:11.5px; opacity:0.7;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:20px; border-top:1px solid var(--line-dark); font-size:11px; color:var(--softgrey); opacity:0.55; flex-wrap:wrap; gap:8px;}

/* ---------- floating conversion bar ---------- */
.float-actions{position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; gap:10px;}
.float-btn{display:flex; align-items:center; gap:9px; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; padding:13px 18px; box-shadow:0 8px 20px rgba(0,0,0,0.28); border:1px solid transparent;}
.float-btn.call{background:var(--royal); color:var(--white);}
.float-btn.whatsapp{background:var(--gold); color:var(--navy);}
.float-btn svg{width:17px; height:17px; flex-shrink:0;}
@media (max-width:560px){ .float-actions{right:14px; bottom:14px;} .float-btn{padding:12px 14px; font-size:11px;} }

/* ---------- Home services teaser ---------- */
.teaser-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);}
.teaser-card{background:var(--white); padding:30px 26px;}
.teaser-card .ic{width:30px; height:30px; color:var(--gold-deep); margin-bottom:14px;}
.teaser-card h3{font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; font-size:14px; color:var(--navy); margin:0 0 8px;}
.teaser-card p{font-size:13px; color:var(--darkgrey); margin-bottom:14px;}
.teaser-card a{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-contrast); border-bottom:1px solid var(--gold-contrast); padding-bottom:2px;}
@media (max-width:900px){ .teaser-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .teaser-grid{grid-template-columns:1fr;} }

@media (max-width:560px){ section{padding:60px 0;} .footer-grid{grid-template-columns:1fr;} .utility .wrap{flex-direction:column; align-items:flex-start;} }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto; scroll-behavior:auto;} *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} }

/* ---------- utility classes ---------- */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
picture{display:block; line-height:0;}
mark.todo{background:transparent; color:var(--gold-contrast); font-style:normal; font-weight:600; border-bottom:1px dashed var(--gold-contrast); padding:0 1px;}
.dark-band mark.todo, footer mark.todo{color:var(--gold-premium); border-bottom-color:var(--gold-premium);}

/* ---------- form: consent, honeypot, status messaging ---------- */
.form-consent{display:flex; align-items:flex-start; gap:10px; margin-bottom:16px;}
.form-consent input[type="checkbox"]{width:auto; margin-top:3px; accent-color:var(--gold-premium); flex-shrink:0;}
.form-consent label{font-family:'Inter',sans-serif; text-transform:none; letter-spacing:normal; font-size:12.5px; color:var(--softgrey); opacity:0.85; margin-bottom:0;}
.form-consent label a{color:var(--gold-premium); text-decoration:underline;}
.hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0;}
.form-status{margin-top:14px; padding:12px 14px; font-size:13px; display:none; border:1px solid transparent;}
.form-status.show{display:block;}
.form-status.success{background:rgba(240,192,96,0.12); border-color:var(--gold-premium); color:var(--gold-premium);}
.form-status.error{background:rgba(220,80,80,0.12); border-color:#e06a6a; color:#f2a3a3;}
.quote-form button[disabled]{opacity:0.6; cursor:not-allowed;}

/* ---------- legal pages (privacy / terms) ---------- */
.legal-content{max-width:820px;}
.legal-content .updated{font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-contrast); margin-bottom:36px; display:block;}
.legal-content h2{font-size:clamp(20px,2.2vw,26px); color:var(--navy); margin-top:44px; margin-bottom:14px;}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content h3{font-family:'Oswald',sans-serif; font-size:15px; text-transform:uppercase; letter-spacing:0.04em; color:var(--navy); margin-top:24px; margin-bottom:10px;}
.legal-content p{color:var(--darkgrey); font-size:15px; margin-bottom:14px;}
.legal-content ul{margin:0 0 16px 0;}
.legal-content li{color:var(--darkgrey); font-size:15px; padding:6px 0 6px 20px; position:relative;}
.legal-content li::before{content:"—"; color:var(--gold-contrast); position:absolute; left:0;}
.legal-content a{color:var(--gold-contrast); border-bottom:1px solid var(--gold-contrast);}
.legal-content strong{color:var(--navy);}
.legal-note{border:1px solid var(--line-gold); background:var(--softgrey); padding:20px 24px; font-size:13.5px; color:var(--darkgrey); margin:24px 0;}

/* ---------- 404 ---------- */
.error-page{text-align:center; padding:120px 0;}
.error-page .error-code{font-family:'Cinzel',serif; font-weight:800; font-size:clamp(64px,10vw,120px); color:var(--gold-contrast); line-height:1;}
.error-page h1{margin-top:10px;}
.error-page p{color:var(--darkgrey); max-width:480px; margin:16px auto 30px; font-size:15.5px;}
.error-page .error-links{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ================================================================
   PREMIUM ENHANCEMENT LAYER — depth, motion & tactical detailing.
   Purely additive: no rule here removes content, hides anything
   from users without JavaScript, or touches the accessibility,
   SEO or performance work already built into the base system.
   Everything animated here already obeys the prefers-reduced-motion
   rule defined above (it collapses all durations to ~0).
   ================================================================ */

/* ---- refined scrollbar + selection, on-brand ---- */
::selection{background:var(--gold); color:var(--navy-deep);}
html{scrollbar-color:var(--navy) var(--softgrey); scrollbar-width:thin;}
::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-track{background:var(--softgrey);}
::-webkit-scrollbar-thumb{background:var(--navy); border:2px solid var(--softgrey); border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep);}

/* ---- sticky header gains depth + shrinks slightly once scrolled (class toggled by main.js) ---- */
header.main{transition:box-shadow .35s ease;}
header.main .wrap{transition:padding .3s ease;}
.brand img{transition:height .3s ease;}
header.main.is-scrolled{box-shadow:0 10px 30px rgba(20,33,61,0.14);}
header.main.is-scrolled .wrap{padding-top:6px; padding-bottom:6px;}
header.main.is-scrolled .brand img{height:38px;}

/* ---- primary nav: animated gold underline instead of the static border ---- */
nav.primary a{position:relative; border-bottom:none; padding-bottom:5px;}
nav.primary a::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold-contrast); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.4,0,.2,1);}
nav.primary a:hover::after, nav.primary a.active::after{transform:scaleX(1);}

/* ---- buttons: soft sheen sweep + lift on hover ---- */
.btn{position:relative; overflow:hidden;}
.btn::before{content:""; position:absolute; top:0; left:-75%; width:45%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.32), transparent); transform:skewX(-18deg); transition:left .6s ease;}
.btn:hover::before{left:130%;}
.btn:hover{transform:translateY(-2px);}
.btn-solid:hover{box-shadow:0 10px 24px rgba(210,154,45,0.35);}
.btn-dark:hover{box-shadow:0 10px 24px rgba(20,33,61,0.35);}
.float-btn{transition:transform .25s ease, box-shadow .25s ease;}
.float-btn:hover{transform:translateY(-3px) scale(1.03);}

/* ---- "systems operational" live pulse indicator, utility bar ---- */
.pulse-dot{position:relative; display:inline-block; width:7px; height:7px; border-radius:50%; background:#5fd489; margin-right:8px; flex-shrink:0;}
.pulse-dot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid #5fd489; animation:pulseRing 2.2s ease-out infinite;}
@keyframes pulseRing{0%{transform:scale(.4); opacity:.9;} 100%{transform:scale(1.9); opacity:0;}}
.utility .badges{display:flex; align-items:center;}

/* ---- gradient divider (was a flat gold bar) ---- */
.divider{background:linear-gradient(90deg, var(--navy) 0%, var(--gold) 50%, var(--navy) 100%); opacity:1;}

/* ---- tactical HUD corner brackets — reinforces the "tactical corporate luxury" mark on the hero and every page header (both already position:relative) ---- */
.hero-inner::before, .hero-inner::after,
.page-header::before, .page-header::after{
  content:""; position:absolute; width:26px; height:26px; z-index:2; opacity:0.55; pointer-events:none; border-color:var(--gold-premium);
}
.hero-inner::before{top:22px; left:28px; border-top:1.5px solid; border-left:1.5px solid;}
.hero-inner::after{bottom:22px; right:28px; border-bottom:1.5px solid; border-right:1.5px solid;}
.page-header::before{top:16px; left:28px; border-top:1.5px solid; border-left:1.5px solid;}
.page-header::after{bottom:16px; right:28px; border-bottom:1.5px solid; border-right:1.5px solid;}
@media (max-width:700px){ .hero-inner::before, .hero-inner::after, .page-header::before, .page-header::after{display:none;} }

/* ---- icon roundels — turns the bare line-icons into a badge, on-brand gold ring ---- */
.why-card .ic, .teaser-card .ic, .industry-card .ic{
  box-sizing:content-box; padding:11px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(210,154,45,0.16), rgba(20,33,61,0.04));
  border:1px solid var(--line-gold); transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.why-card:hover .ic, .teaser-card:hover .ic, .industry-card:hover .ic{transform:rotate(-6deg) scale(1.06); border-color:var(--gold-deep);}

/* ---- card lift on hover across every grid component ---- */
.why-card, .teaser-card, .service-card, .industry-card, .accred-card, .assess-card{
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease; position:relative;
}
.why-card:hover, .teaser-card:hover, .industry-card:hover, .accred-card:hover{
  transform:translateY(-6px); box-shadow:0 20px 44px rgba(20,33,61,0.12); z-index:3;
}
.service-card:hover, .assess-card:hover{box-shadow:0 20px 44px rgba(20,33,61,0.12); z-index:3;}

/* ---- image zoom within service cards, and a gold-ring glow on portrait/team photography ---- */
.service-card .img-col img{transition:transform .6s cubic-bezier(.4,0,.2,1);}
.service-card:hover .img-col img{transform:scale(1.08);}
.about-grid picture:hover img, .team-photo:hover img{box-shadow:0 0 0 3px var(--line-gold);}
.about-grid img, .team-photo img{transition:box-shadow .35s ease;}

/* ---- subtle grain texture on the flat testimonial band only (never on photographic sections, so it can't wash out an image or reduce text contrast) ---- */
.testimonial{position:relative; overflow:hidden;}
.testimonial::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.testimonial .wrap{position:relative; z-index:1;}

/* ---- scroll-reveal — classes are added by main.js only to elements already below the first viewport, so nothing here can delay first paint or hurt LCP; content is always present in the DOM/HTML for users without JS and for search engines ---- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);}
.reveal.in-view{opacity:1; transform:none;}

/* ---- tabular numerals so the animated stat counters don't jitter in width as digits change ---- */
.stat-num{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  .hero-inner::before, .hero-inner::after, .page-header::before, .page-header::after{opacity:0.35;}
}

/* ---- services page: giant faint division numeral behind each category, editorial subhead line, credential chips, flagship image frame ---- */
/* no explicit counter-reset needed: services.html is the only page using .service-category, so the counter implicitly starts at 0 on the document root */
.service-category{counter-increment:division; position:relative;}
.service-category::before{
  content:counter(division, decimal-leading-zero); position:absolute; top:-18px; right:0; z-index:0;
  font-family:'Cinzel', serif; font-weight:800; font-size:clamp(70px,11vw,150px); line-height:1; color:var(--navy);
  opacity:0.045; pointer-events:none; user-select:none;
}
.service-category > .eyebrow{position:relative; z-index:1;}
.category-lede{position:relative; z-index:1; font-family:'Cinzel',serif; font-size:clamp(19px,2.1vw,25px); color:var(--navy); margin:10px 0 24px; max-width:640px; line-height:1.35;}
.services-grid{position:relative; z-index:1;}

.img-col.flagship{border:2px solid var(--gold-premium); box-shadow:0 10px 26px rgba(20,33,61,0.16);}

.spec-chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px;}
.spec-chips span{font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-contrast); border:1px solid var(--line-gold); background:rgba(210,154,45,0.06); padding:5px 10px; border-radius:20px;}

.tech-note{position:relative; z-index:1; margin-top:38px; border:1px solid var(--line-gold); background:var(--softgrey); padding:18px 22px; font-size:13px; color:var(--darkgrey); font-style:italic;}
.tech-note strong{color:var(--gold-contrast); font-style:normal;}

/* ---- compliance strip: verified regulatory/credential badges, homepage + credibility page ---- */
.compliance-strip{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0;}
.compliance-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px 30px;}
.compliance-item{display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--navy); font-weight:600; flex-shrink:0;}
.compliance-item .ic{width:22px; height:22px; color:var(--gold-deep); flex-shrink:0;}
@media (max-width:900px){ .compliance-grid{justify-content:center; text-align:center;} }

/* ---- Vision & Mission highlight cards, About page ---- */
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin:36px 0 54px;}
.vm-card{background:var(--white); padding:30px 28px; border-top:3px solid var(--gold);}
.vm-card .ic{width:30px; height:30px; color:var(--gold-deep); margin-bottom:14px;}
.vm-card h2{font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; font-size:14px; color:var(--navy); margin:0 0 10px;}
.vm-card p{font-size:14px; color:var(--darkgrey); margin:0;}
@media (max-width:700px){ .vm-grid{grid-template-columns:1fr;} }

/* ---- "tell us about your site" needs configurator, Contact page (no pricing output — feeds the existing enquiry form) ---- */
.needs-tool{border:1px solid var(--line); background:var(--white); padding:34px 32px; margin-top:40px;}
.needs-tool h3{font-size:19px; color:var(--navy); margin-bottom:6px;}
.needs-tool > p{font-size:13.5px; color:var(--darkgrey); margin-bottom:26px; max-width:640px;}
.needs-step-label{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--gold-contrast); font-weight:600; margin-bottom:12px;}
.sector-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:30px;}
.sector-option{border:1px solid var(--line); background:var(--softgrey); padding:16px 10px; text-align:center; cursor:pointer; transition:border-color .2s ease, background .2s ease;}
.sector-option .ic{width:24px; height:24px; color:var(--darkgrey); margin:0 auto 8px; transition:color .2s ease;}
.sector-option span{display:block; font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--navy);}
.sector-option:hover{border-color:var(--gold-contrast);}
.sector-option.active{background:rgba(210,154,45,0.09); border-color:var(--gold-deep);}
.sector-option.active .ic{color:var(--gold-deep);}
@media (max-width:700px){ .sector-grid{grid-template-columns:1fr 1fr;} }

.needs-checklist{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-bottom:28px;}
.needs-checklist .form-consent{margin-bottom:0;}
.needs-checklist label{color:var(--darkgrey); font-size:13.5px;}
@media (max-width:700px){ .needs-checklist{grid-template-columns:1fr;} }

.needs-summary{border:1px solid var(--line-gold); background:var(--softgrey); padding:20px 24px; margin-bottom:22px;}
.needs-summary .needs-step-label{margin-bottom:8px;}
.needs-summary p{font-size:14px; color:var(--navy); margin:0; line-height:1.6;}

/* ---- Multi-step "Request A Security Assessment" wizard, Contact page ----
   Progressive enhancement: every fieldset below is a plain visible block by
   default (a single long form that works with zero JS); main.js adds the
   js-wizard class to #quoteForm, which is what switches on step-hiding and
   reveals the Back/Continue controls (.js-only), which do nothing useful
   without JS so they stay hidden until it's confirmed to be running. */
fieldset.wizard-step{border:none; padding:0; margin:0 0 32px;}
fieldset.wizard-step:last-of-type{margin-bottom:0;}
.needs-tool .form-row{margin-bottom:0;}
.needs-tool .full{margin-bottom:14px;}
.needs-tool .form-row label, .needs-tool .full label{display:block; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--darkgrey); margin-bottom:6px;}
.needs-tool .form-row input, .needs-tool .full input, .needs-tool .form-row select, .needs-tool .full select{width:100%; background:var(--softgrey); border:1px solid var(--line); color:var(--navy); padding:11px 12px; font-family:'Inter',sans-serif; font-size:14px;}
.needs-tool .form-row input:focus, .needs-tool .full input:focus, .needs-tool .form-row select:focus, .needs-tool .full select:focus{border-color:var(--gold-contrast); outline:2px solid transparent;}

.js-only{display:none;}
#quoteForm.js-wizard .wizard-progress.js-only{display:block;}
#quoteForm.js-wizard .btn.js-only{display:inline-flex;}

.wizard-progress{margin-bottom:24px;}
.wizard-progress-label{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-contrast); font-weight:600; margin-bottom:9px;}
.wizard-bar{height:4px; background:var(--line); overflow:hidden;}
.wizard-bar-fill{height:100%; background:var(--gold-deep); transition:width .25s ease;}

.wizard-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px;}
.wizard-nav .btn{width:auto;}
@media (max-width:480px){ .wizard-nav{flex-direction:column-reverse;} .wizard-nav .btn{width:100%; justify-content:center;} }

.sector-option{position:relative;}
.sr-radio{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.sector-option:focus-within{outline:2px solid var(--gold-premium); outline-offset:2px;}

/* ---------- WhatsApp Security Concierge ---------- */
.wa-panel{position:fixed; right:20px; bottom:145px; z-index:95; width:340px; max-width:calc(100vw - 32px); background:var(--white); border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,0.25); display:flex; flex-direction:column; max-height:min(520px, calc(100vh - 180px));}
.wa-panel[hidden]{display:none;}
.wa-panel-head{background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:space-between; padding:16px 18px; gap:12px; flex-shrink:0;}
.wa-panel-brand{display:flex; align-items:center; gap:12px;}
.wa-avatar{width:34px; height:34px; flex-shrink:0; color:var(--gold-premium); background:rgba(255,255,255,0.08); border-radius:50%; padding:7px; box-sizing:border-box;}
.wa-panel-name{font-family:'Oswald',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:0.02em; margin:0;}
.wa-panel-sub{font-size:11.5px; color:var(--softgrey); opacity:0.75; margin:2px 0 0;}
.wa-panel-close{background:none; border:none; color:var(--softgrey); font-size:22px; line-height:1; cursor:pointer; padding:4px 6px;}
.wa-panel-close:hover{color:var(--gold-premium);}
.wa-panel-body{padding:18px; overflow-y:auto;}
.wa-step[hidden]{display:none;}
.wa-bubble{background:var(--softgrey); border:1px solid var(--line); padding:12px 14px; font-size:13px; line-height:1.5; color:var(--darkgrey); margin:0 0 14px;}
.wa-bubble-urgent{background:#fdf1ea; border-color:#e8c7a8; color:#7a3b12; font-weight:600;}
.wa-options{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.wa-option{display:block; text-align:left; width:100%; background:var(--white); border:1px solid var(--line); color:var(--navy); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; padding:11px 14px; cursor:pointer; transition:border-color .2s ease, background .2s ease;}
.wa-option:hover{border-color:var(--gold-deep); background:rgba(210,154,45,0.06);}
.wa-option-urgent{border-color:#c0392b; color:#c0392b;}
.wa-option-urgent:hover{background:rgba(192,57,43,0.06); border-color:#c0392b;}
.wa-option-call{background:var(--navy); color:var(--white); text-align:center; border-color:var(--navy);}
.wa-option-call:hover{background:var(--royal);}
.wa-back{background:none; border:none; color:var(--gold-deep); font-family:'Oswald',sans-serif; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; cursor:pointer; padding:0; margin-bottom:12px;}
.wa-chat-direct{display:block; text-align:center; font-family:'Oswald',sans-serif; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; color:var(--gold-deep); padding-top:10px; border-top:1px dashed var(--line);}
.wa-chat-direct:hover{color:var(--gold-premium);}
@media (max-width:560px){ .wa-panel{right:14px; left:14px; width:auto; bottom:128px; max-height:min(480px, calc(100vh - 160px));} }

/* ---------- Staff Portal (document upload + leave application) ---------- */
.staff-intro{border:1px solid var(--line-gold); background:var(--white); padding:22px 26px; margin-bottom:36px; font-size:14px; color:var(--darkgrey); line-height:1.65;}
.doc-sensitive-notice{border:1px solid var(--gold-deep); background:#fbf3e3; padding:18px 22px; margin-bottom:22px; font-size:13.5px; color:var(--darkgrey); line-height:1.6;}
.doc-sensitive-notice a{color:var(--gold-contrast); text-decoration:underline;}
.staff-intro strong{color:var(--navy);}
.staff-form{border:1px solid var(--line); background:var(--white); padding:32px 30px; margin-bottom:44px;}
.staff-form h2{font-size:19px; color:var(--navy); margin-bottom:6px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em;}
.staff-form .form-intro{font-size:13.5px; color:var(--darkgrey); margin-bottom:24px; max-width:640px;}
.staff-form label{display:block; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--darkgrey); margin-bottom:6px;}
.staff-form input, .staff-form select, .staff-form textarea{width:100%; background:var(--softgrey); border:1px solid var(--line); color:var(--navy); padding:11px 12px; font-family:'Inter',sans-serif; font-size:14px;}
.staff-form input:focus, .staff-form select:focus, .staff-form textarea:focus{border-color:var(--gold-contrast); outline:2px solid transparent;}
.staff-form input[type="file"]{background:var(--white); padding:9px 12px; font-size:13px;}
.staff-form .full{margin-bottom:14px;}
.staff-form .field-hint{display:block; font-size:11.5px; color:var(--darkgrey); opacity:0.75; margin-top:5px;}
.staff-form .btn{width:100%; justify-content:center; margin-top:6px;}
.staff-form button[disabled]{opacity:0.6; cursor:not-allowed;}
.staff-form .form-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:14px;}
@media (max-width:700px){ .staff-form .form-row-3{grid-template-columns:1fr;} }

.doc-checklist{border:1px solid var(--line-gold); background:var(--softgrey); padding:20px 24px; margin-bottom:24px;}
.doc-checklist .needs-step-label{margin-bottom:10px;}
.doc-checklist ul{margin:0; list-style:none;}
.doc-checklist li{font-size:13.5px; color:var(--navy); padding:5px 0 5px 18px; position:relative;}
.doc-checklist li::before{content:"—"; color:var(--gold-contrast); position:absolute; left:0;}
.doc-checklist .doc-note{font-size:12px; color:var(--darkgrey); opacity:0.8; margin-top:12px; font-style:italic;}

[hidden].staff-content{display:none;}

/* ---------- Staff Portal real authentication (sign in / change passphrase) ---------- */
.portal-alert{padding:14px 18px; margin-bottom:24px; font-size:13.5px; border:1px solid transparent; line-height:1.55;}
.portal-alert-ok{background:rgba(169,120,24,0.08); border-color:var(--gold-deep); color:var(--navy);}
.portal-alert-err{background:rgba(192,57,43,0.08); border-color:#c0392b; color:#8d2a20;}
.portal-auth{max-width:420px; margin:0 auto; text-align:center; padding:40px 0;}
.portal-auth .ic{color:var(--gold-deep); margin:0 auto 14px;}
.portal-auth h2{font-size:19px; color:var(--navy); margin-bottom:10px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em;}
.portal-auth p{font-size:13.5px; color:var(--darkgrey); margin-bottom:22px; line-height:1.6;}
.portal-auth-form{text-align:left;}
.portal-auth-form label{display:block; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--darkgrey); margin:14px 0 6px;}
.portal-auth-form input[type="text"], .portal-auth-form input[type="password"]{width:100%; background:var(--softgrey); border:1px solid var(--line); color:var(--navy); padding:11px 12px; font-family:'Inter',sans-serif; font-size:14px;}
.portal-auth-form input:focus{border-color:var(--gold-contrast); outline:2px solid transparent;}
.portal-auth-form .btn{width:100%; justify-content:center; margin-top:18px;}
.portal-auth-note{font-size:11.5px; color:var(--darkgrey); opacity:0.75; margin-top:18px; line-height:1.55; text-align:left;}
.pass-wrap{position:relative;}
.pass-wrap input{padding-right:64px !important;}
.pass-toggle{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-contrast); cursor:pointer; padding:6px 8px;}
.pass-rules{text-align:left; list-style:none; margin:0 0 22px; padding:16px 18px; background:var(--softgrey); border:1px solid var(--line);}
.pass-rules li{font-size:12.5px; color:var(--darkgrey); padding:4px 0; line-height:1.5;}
.portal-userbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border:1px solid var(--line); background:var(--softgrey); padding:16px 22px; margin-bottom:30px; font-size:13.5px; color:var(--darkgrey);}
.portal-userbar-label{display:block; font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--gold-contrast); margin-bottom:2px;}
.portal-userbar-actions{display:flex; align-items:center; gap:16px;}
.portal-userbar-actions a{font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-contrast); border-bottom:1px solid var(--gold-contrast); padding-bottom:2px;}
.portal-userbar-actions form{display:inline;}
.portal-userbar-actions .btn{padding:8px 16px; font-size:11px;}

/* ---------- HR Admin panel ---------- */
body.hr-admin header.main{position:static;}
.admin-badge{font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; background:var(--navy); color:var(--gold-premium); padding:6px 12px; margin-right:14px;}
.admin-welcome{font-size:13.5px; color:var(--darkgrey); margin-bottom:24px;}
.admin-tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:28px;}
.admin-tabs a{font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--darkgrey); padding:10px 16px; border-bottom:2px solid transparent;}
.admin-tabs a[aria-current="page"]{color:var(--gold-contrast); border-color:var(--gold-contrast);}
.admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);}
@media (max-width:800px){ .admin-grid{grid-template-columns:1fr;} }
.issued-box{border:2px solid var(--gold-deep); background:#fbf3e3; padding:22px 26px; margin-bottom:30px;}
.issued-box h3{font-size:15px; color:var(--navy); margin-bottom:8px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em;}
.issued-box p{font-size:13px; color:var(--darkgrey); margin-bottom:14px; line-height:1.55;}
.issued-box .small{margin-top:10px;}
.table-scroll{overflow-x:auto;}
.admin-table{width:100%; border-collapse:collapse; font-size:13px;}
.admin-table th{text-align:left; font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--darkgrey); padding:10px 12px; border-bottom:1px solid var(--line);}
.admin-table td{padding:10px 12px; border-bottom:1px solid var(--line); color:var(--darkgrey); vertical-align:middle;}
.admin-table code{background:var(--softgrey); padding:2px 6px; font-size:12.5px; color:var(--navy);}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}
.mini-btn{font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; background:var(--white); border:1px solid var(--line); color:var(--navy); padding:6px 10px; cursor:pointer;}
.mini-btn:hover{border-color:var(--gold-contrast); color:var(--gold-contrast);}
.mini-btn.danger{color:#c0392b; border-color:#e0a79e;}
.mini-btn.danger:hover{background:#c0392b; color:var(--white); border-color:#c0392b;}
.status{font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; padding:3px 9px; display:inline-block;}
.status-active{background:rgba(169,120,24,0.12); color:var(--gold-contrast);}
.status-awaiting{background:var(--softgrey); color:var(--darkgrey);}
.status-locked, .status-disabled{background:rgba(192,57,43,0.1); color:#c0392b;}
.totp-key{font-size:18px; letter-spacing:0.1em; background:var(--softgrey); border:1px solid var(--line); padding:14px 18px; display:inline-block; color:var(--navy);}
.small{font-size:12px; color:var(--darkgrey); opacity:0.8;}

/* ---------- "Coming Soon" badge (Client Portal, etc.) ---------- */
.badge-soon{display:inline-block; background:var(--gold-premium); color:var(--navy); font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; margin-left:8px; vertical-align:middle; font-weight:600;}
.coming-card{border:1px solid var(--line); background:var(--white); padding:40px 36px; text-align:center; max-width:640px; margin:0 auto;}
.coming-card .ic{width:40px; height:40px; color:var(--gold-deep); margin:0 auto 18px;}
.coming-card h2{font-size:22px; color:var(--navy); margin-bottom:14px;}
.coming-card p{font-size:15px; color:var(--darkgrey); margin-bottom:20px; line-height:1.65;}
.coming-card ul{text-align:left; display:inline-block; margin:0 0 26px;}
.coming-card li{font-size:14px; color:var(--darkgrey); padding:6px 0 6px 20px; position:relative;}
.coming-card li::before{content:"—"; color:var(--gold-contrast); position:absolute; left:0;}

/* ---------- utility classes (CSP hardening: replace former style="" attributes
   so style-src can drop 'unsafe-inline' — see README-LAUNCH-CHECKLIST.md) ---------- */
.u-pt-0{padding-top:0;}
.u-mt-6{margin-top:6px;}
.u-mt-10{margin-top:10px;}
.u-mt-30{margin-top:30px;}
.u-center{text-align:center;}
.u-dim{opacity:.6;}
.eyebrow-block{display:block; margin-bottom:20px;}
.heading-navy-tight{font-size:clamp(22px,2.6vw,30px); color:var(--navy); margin-top:12px;}
.mb-18{margin-bottom:18px;}
.mb-20{margin-bottom:20px;}
.mb-26{margin-bottom:26px;}
.lede-centered{color:var(--darkgrey); max-width:560px; margin:0 auto 30px;}
.step-helper{font-size:13.5px; color:var(--darkgrey); margin-bottom:16px;}
.contact-logo-card{max-width:260px; margin-top:6px; border:1px solid var(--line-dark);}
.wrap-narrow{max-width:900px;}
.wrap-1100{max-width:1100px;}
.gold-link{color:var(--gold-contrast);}
.obj-pos-6025{object-position:60% 25%;}
.u-pt-40{padding-top:40px;}
.u-mt-24{margin-top:24px;}

/* ---------- print ---------- */
@media print{
  .utility, header.main, .mobile-nav, .float-actions, .hero-bg, .page-header-bg, form, .float-btn, .needs-tool, .wa-panel, .staff-form{display:none !important;}
  body{color:#000; background:#fff;}
  a{color:#000; text-decoration:underline;}
  .dark-band, .light-section, .white-section{background:#fff !important; color:#000 !important;}
  .dark-band h1, .dark-band h2, .dark-band h3, .dark-band p{color:#000 !important;}
  section{padding:20px 0;}
  .reveal{opacity:1 !important; transform:none !important;}
  .hero-inner::before, .hero-inner::after, .page-header::before, .page-header::after, .testimonial::before{display:none !important;}
}