:root {
  --primary: #0e3240;
  --primary-dark: #082630;
  --secondary: #9e9c9c;
  --light: #f5f7f7;
  --white: #ffffff;
  --text: #26373d;
  --muted: #66777d;
  --border: #e1e7e8;
  --accent: #d9e5e6;
  --shadow: 0 18px 50px rgba(14,50,64,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--text); line-height: 1.65; background: var(--white); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.topbar { background: var(--primary-dark); color: rgba(255,255,255,.82); font-size: 12px; padding: 9px 0; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar-info { display:flex; gap:22px; flex-wrap:wrap; }
.topbar a:hover { color:#fff; }
.site-header { position: sticky; top:0; z-index:50; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-bottom:1px solid rgba(14,50,64,.08); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:28px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--primary); min-width:max-content; }
.brand-mark { width:43px; height:43px; display:grid; place-items:center; border:2px solid var(--primary); border-radius:12px 12px 12px 3px; font-weight:800; font-size:17px; letter-spacing:-1px; }
.brand-name { font-size:17px; font-weight:800; line-height:1.05; letter-spacing:.4px; }
.brand-name small { display:block; color:var(--secondary); font-size:9px; letter-spacing:2.2px; margin-top:6px; font-weight:700; }
.nav-links { display:flex; align-items:center; gap:25px; font-size:13px; font-weight:700; color:#465960; }
.nav-links a { padding:31px 0; position:relative; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--primary); }
.nav-links a.active:after, .nav-links a:hover:after { content:""; position:absolute; bottom:21px; left:0; width:100%; height:2px; background:var(--secondary); }
.nav-cta, .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 20px; background:var(--primary); color:white; border:1px solid var(--primary); border-radius:4px; font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; transition:transform .2s, background .2s; cursor:pointer; }
.nav-cta:hover, .btn:hover { background:var(--primary-dark); transform:translateY(-2px); }
.btn.secondary { background:transparent; color:var(--primary); border-color:rgba(14,50,64,.35); }
.btn.secondary:hover { background:var(--primary); color:#fff; }
.menu-toggle { display:none; background:none; border:0; font-size:25px; color:var(--primary); cursor:pointer; }
.hero { position:relative; min-height:620px; display:flex; align-items:center; color:#fff; background:linear-gradient(90deg, rgba(8,38,48,.94) 0%, rgba(14,50,64,.82) 46%, rgba(14,50,64,.18) 100%), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2000&q=85') center/cover; }
.hero:after { content:""; position:absolute; right:7%; bottom:0; width:1px; height:75%; background:rgba(255,255,255,.24); }
.hero-content { position:relative; z-index:1; max-width:690px; padding:90px 0 105px; }
.eyebrow { display:flex; align-items:center; gap:12px; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:2.3px; color:var(--secondary); margin:0 0 22px; }
.eyebrow:before { content:""; display:block; width:36px; height:2px; background:currentColor; }
.hero h1 { font-size:clamp(42px, 6vw, 76px); line-height:1.04; letter-spacing:-2.5px; margin:0 0 24px; font-weight:800; }
.hero p { max-width:610px; color:rgba(255,255,255,.82); font-size:17px; margin:0 0 32px; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; }
.hero .btn.secondary { border-color:rgba(255,255,255,.5); color:#fff; }
.hero .btn.secondary:hover { background:#fff; color:var(--primary); }
.hero-kicker { position:absolute; z-index:2; bottom:28px; right:6%; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.65); writing-mode:vertical-rl; }
.section { padding:95px 0; }
.section.soft { background:var(--light); }
.section-head { max-width:720px; margin-bottom:42px; }
.section-head.center { text-align:center; margin-left:auto; margin-right:auto; }
.section-head.center .eyebrow { justify-content:center; }
h2 { color:var(--primary); font-size:clamp(30px, 4vw, 45px); line-height:1.15; letter-spacing:-1.3px; margin:0 0 18px; }
h3 { color:var(--primary); margin:0 0 12px; line-height:1.25; }
p { margin-top:0; }
.lead { font-size:17px; color:var(--muted); }
.muted { color:var(--muted); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.image-frame { position:relative; min-height:440px; }
.image-frame img { width:100%; height:440px; object-fit:cover; border-radius:4px; }
.image-frame .image-tag { position:absolute; bottom:-18px; right:-18px; background:var(--primary); color:white; padding:22px 25px; max-width:190px; box-shadow:var(--shadow); }
.image-tag strong { display:block; font-size:28px; line-height:1; }
.image-tag span { display:block; font-size:11px; margin-top:8px; color:rgba(255,255,255,.76); }
.check-list { list-style:none; padding:0; margin:25px 0 30px; display:grid; gap:12px; }
.check-list li { display:flex; gap:12px; align-items:flex-start; }
.check-list i { color:var(--secondary); margin-top:6px; }
.stats { background:var(--primary); color:#fff; padding:35px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat { border-right:1px solid rgba(255,255,255,.18); padding:5px 22px; }
.stat:last-child { border:0; }
.stat strong { font-size:30px; display:block; line-height:1.2; }
.stat span { font-size:11px; color:rgba(255,255,255,.65); letter-spacing:1px; text-transform:uppercase; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.service-card { background:#fff; border:1px solid var(--border); padding:30px; transition:transform .25s, box-shadow .25s, border .25s; }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.icon-box { width:52px; height:52px; display:grid; place-items:center; background:#edf2f3; color:var(--primary); font-size:21px; border-radius:4px; margin-bottom:24px; }
.service-card p { color:var(--muted); font-size:14px; margin-bottom:20px; }
.text-link { color:var(--primary); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; display:inline-flex; gap:9px; align-items:center; }
.text-link:hover { color:#597781; }
.cta-band { background:var(--primary); color:#fff; padding:58px 0; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cta-band h2 { color:#fff; max-width:650px; margin:0; font-size:clamp(28px, 3.4vw, 40px); }
.cta-band p { color:rgba(255,255,255,.68); margin:12px 0 0; }
.cta-band .btn { background:#fff; border-color:#fff; color:var(--primary); flex-shrink:0; }
.page-hero { padding:82px 0 76px; color:#fff; background:linear-gradient(90deg,rgba(8,38,48,.94),rgba(14,50,64,.72)),url('breadcrumb-safeway.jpg') center/cover; }
.page-hero h1 { font-size:clamp(40px,5vw,60px); letter-spacing:-1.8px; line-height:1.05; margin:0 0 15px; }
.page-hero p { max-width:650px; color:rgba(255,255,255,.78); margin:0; }
.breadcrumb { margin-top:22px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.62); }
.breadcrumb a { color:#fff; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; }
.value-card { padding:25px; background:#fff; border:1px solid var(--border); }
.value-card i { color:var(--secondary); font-size:24px; margin-bottom:18px; }
.value-card p { font-size:14px; color:var(--muted); margin:0; }
.policy { padding:28px 30px; background:#fff; border:1px solid var(--border); margin-bottom:18px; }
.policy h3 { display:flex; align-items:center; gap:12px; }
.policy h3 i { color:var(--secondary); }
.policy ul { margin:12px 0 0; padding-left:20px; color:var(--muted); }
.policy li { padding:4px 0; }
.certificate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.certificate-card { border:1px solid var(--border); background:#fff; padding:30px; display:flex; flex-direction:column; }
.certificate-card .cert-icon { width:64px; height:64px; border:1px solid var(--border); display:grid; place-items:center; color:var(--primary); font-size:25px; margin-bottom:24px; }
.certificate-card p { color:var(--muted); font-size:14px; flex:1; }
.cert-label { font-size:10px; letter-spacing:1.5px; color:var(--secondary); text-transform:uppercase; font-weight:800; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-card { border:1px solid var(--border); background:#fff; }
.team-card img { width:100%; height:400px; object-fit:cover; background:#e6ebec; }
.team-info { padding:23px; }
.team-info h3 { margin-bottom:5px; }
.team-info .role { color:var(--secondary); font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:1.1px; }
.team-info p { color:var(--muted); font-size:13px; margin:14px 0 0; }
.team-info a { color:var(--primary); }
.service-detail { display:grid; grid-template-columns:110px 1fr; gap:28px; padding:35px 0; border-bottom:1px solid var(--border); }
.service-detail:last-child { border-bottom:0; }
.service-number { color:#c5cbcd; font-size:40px; font-weight:800; line-height:1; }
.service-detail p { color:var(--muted); margin:0 0 15px; }
.service-detail ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:18px 0 0; }
.service-detail li { background:var(--light); padding:7px 11px; color:#53656b; font-size:12px; }
.contact-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; }
.contact-card { background:var(--primary); color:#fff; padding:36px; }
.contact-card h2 { color:#fff; font-size:32px; }
.contact-item { display:flex; gap:15px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.contact-item:last-child { border:0; }
.contact-item i { color:#c6d0d3; font-size:18px; margin-top:4px; width:22px; }
.contact-item strong { display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.contact-item span, .contact-item a { color:rgba(255,255,255,.72); font-size:14px; }
.contact-form { padding:10px 0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field.full { grid-column:1/-1; }
.field label { color:var(--primary); font-size:12px; font-weight:800; }
.field input, .field textarea, .field select { width:100%; padding:14px 15px; border:1px solid var(--border); background:#fbfcfc; outline:none; color:var(--text); border-radius:3px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--primary); }
.field textarea { min-height:140px; resize:vertical; }
.form-note { color:var(--muted); font-size:12px; margin-top:12px; }
.site-footer { background:#071f27; color:#fff; padding:65px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.4fr .8fr 1fr 1fr; gap:38px; padding-bottom:45px; }
.footer-brand .brand { color:#fff; margin-bottom:22px; }
.footer-brand .brand-mark { border-color:#fff; }
.footer-brand .brand-name small { color:#a9b3b6; }
.site-footer p { color:rgba(255,255,255,.6); font-size:13px; }
.site-footer h4 { font-size:12px; letter-spacing:1.4px; text-transform:uppercase; margin:5px 0 22px; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:11px; color:rgba(255,255,255,.68); font-size:13px; }
.footer-links a:hover { color:#fff; }
.socials { display:flex; gap:10px; margin-top:22px; }
.socials a { width:34px; height:34px; border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; border-radius:50%; font-size:13px; }
.socials a:hover { background:#fff; color:var(--primary); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding:18px 0; display:flex; justify-content:space-between; gap:20px; color:rgba(255,255,255,.48); font-size:11px; }
.footer-bottom a { color:rgba(255,255,255,.7); }
.notice { background:#edf3f4; border-left:3px solid var(--secondary); padding:17px 20px; color:#52636a; font-size:13px; margin-top:28px; }
@media (max-width: 980px) {
  .nav-links { gap:14px; }
  .nav-links a { font-size:12px; }
  .nav-cta { display:none; }
  .grid-2 { gap:35px; }
  .cards, .certificate-grid, .team-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 740px) {
  .container { width:min(100% - 30px, 600px); }
  .topbar-inner { justify-content:center; }
  .topbar-info { justify-content:center; gap:8px 16px; }
  .topbar-info .topbar-hide { display:none; }
  .nav-wrap { min-height:72px; }
  .menu-toggle { display:block; }
  .nav-links { display:none; position:absolute; left:0; right:0; top:72px; padding:10px 22px 20px; background:#fff; border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch; gap:0; box-shadow:0 15px 25px rgba(0,0,0,.08); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:13px 0; border-bottom:1px solid #eef1f2; }
  .nav-links a.active:after, .nav-links a:hover:after { display:none; }
  .hero { min-height:570px; background-position:60% center; }
  .hero-content { padding:75px 0 85px; }
  .hero h1 { letter-spacing:-1.5px; }
  .hero p { font-size:15px; }
  .hero-kicker, .hero:after { display:none; }
  .section { padding:68px 0; }
  .grid-2, .contact-layout { grid-template-columns:1fr; }
  .image-frame { min-height:300px; margin-right:12px; }
  .image-frame img { height:330px; }
  .image-frame .image-tag { right:-12px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); row-gap:25px; }
  .stat:nth-child(2) { border-right:0; }
  .cards, .certificate-grid, .team-grid, .values-grid { grid-template-columns:1fr; }
  .cta-inner { align-items:flex-start; flex-direction:column; }
  .page-hero { padding:65px 0; }
  .service-detail { grid-template-columns:54px 1fr; gap:15px; }
  .service-number { font-size:28px; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:8px; }
  .form-grid { grid-template-columns:1fr; gap:0; }
}


/* Requested updates: image logo, hero slideshow, service imagery and certificate modal */
.brand-logo {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .brand-logo {
        width: 130px;
    }
}
}
.brand { min-width:0; }
.hero { background:none; overflow:hidden; }
.hero-slides, .hero-slide { position:absolute; inset:0; }
.hero-slides { z-index:0; }
.hero-slide { opacity:0; background-position:center; background-size:cover; transform:scale(1.025); transition:opacity 1.15s ease, transform 6s ease; }
.hero-slide.active { opacity:1; transform:scale(1); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,38,48,.94) 0%, rgba(14,50,64,.82) 46%, rgba(14,50,64,.18) 100%); }
.hero-content { z-index:2; }
.hero:after { z-index:1; pointer-events:none; }
.hero-kicker { z-index:2; }
.hero-dots { position:absolute; z-index:3; left:max(20px, calc((100% - 1160px)/2)); bottom:30px; display:flex; gap:9px; }
.hero-dot { width:8px; height:8px; padding:0; border:1px solid rgba(255,255,255,.8); background:transparent; border-radius:50%; cursor:pointer; }
.hero-dot.active { background:#fff; width:24px; border-radius:6px; }
.service-image { width:calc(100% + 60px); max-width:none; height:190px; object-fit:cover; margin:-30px -30px 26px; }
.service-detail-image { width:100%; max-height:300px; object-fit:cover; border-radius:4px; margin:18px 0 22px; }
.certificate-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.certificate-btn { border:1px solid var(--primary); background:var(--primary); color:#fff; border-radius:3px; padding:12px 16px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; cursor:pointer; }
.certificate-btn:hover { background:var(--primary-dark); }
.cert-modal { display:none; position:fixed; z-index:200; inset:0; background:rgba(4,20,25,.82); padding:24px; align-items:center; justify-content:center; }
.cert-modal.open { display:flex; }
.cert-modal-panel { position:relative; width:min(980px, 100%); max-height:92vh; background:#fff; padding:22px; border-radius:5px; overflow:auto; }
.cert-modal-panel img { width:100%; max-height:76vh; object-fit:contain; background:#f4f6f6; }
.cert-modal-title { color:var(--primary); font-size:18px; font-weight:800; margin:0 45px 15px 0; }
.cert-modal-close { position:absolute; top:12px; right:12px; border:0; background:var(--primary); color:#fff; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:18px; }
@media (max-width:740px) {
  .brand-logo { width:125px; }
  .hero-dots { bottom:20px; }
  .service-image { width:calc(100% + 60px); }
}
