:root{--ink:#19242a;--gold:#b88a42;--bg:#f8f7f4;--muted:#5b6970}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--ink)}a{text-decoration:none;color:inherit}img{max-width:100%}.wrap{max-width:1240px;margin:auto;padding:0 28px}.sitehead{background:#10181c;color:#fff;position:relative;z-index:3}.nav{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:118px}.brand{width:480px;max-width:45%;display:block}.brand img{display:block;width:100%;mix-blend-mode:screen}.links{display:flex;align-items:center;gap:19px;flex-wrap:wrap}.links a{font-size:12px;font-weight:700;letter-spacing:.045em}.links a:hover,.links a.active{color:#e4b766}.btn{background:var(--gold);color:white!important;display:inline-block;padding:15px 20px;font-weight:700;font-size:12px;letter-spacing:.05em;border:0;cursor:pointer}.btn.dark{background:var(--ink)}.btn.line{background:transparent;border:1px solid #fff}.hero{min-height:510px;display:flex;align-items:center;position:relative;color:#fff;background:#172126 url('images/warehouse-hero.jpg') center/cover}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,19,23,.95),rgba(12,19,23,.72) 40%,rgba(12,19,23,.07))}.hero .wrap{position:relative;width:100%}.kicker{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:#a77a34;font-weight:700}.hero .kicker{color:#e5b662}h1{font-size:clamp(42px,5vw,72px);line-height:1.04;letter-spacing:-.045em;margin:16px 0}h1 em{font-style:normal;color:#e3b566}.hero p{max-width:550px;font-size:18px;line-height:1.65}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.strip{background:#fff;border-bottom:1px solid #e4e2dc}.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:23px;padding-bottom:23px}.strip b{display:block;font-size:13px;text-transform:uppercase}.strip small{color:#647179;display:block;margin-top:6px}.section{padding:74px 0}.section h2,.pagehead h1{font-size:clamp(31px,3.5vw,48px);letter-spacing:-.04em;margin:12px 0 18px}.lead{max-width:790px;line-height:1.75;color:var(--muted);font-size:17px}.pagehead{background:#eae9e3;padding:65px 0}.pagehead h1{color:var(--ink)}.pagehead p{max-width:760px;color:#55626a;line-height:1.7}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:32px}.card{background:white;border:1px solid #e7e5de;overflow:hidden}.card>img{width:100%;height:300px;object-fit:cover;display:block}.card .body{padding:28px}.card h3{font-size:25px;margin:9px 0}.card p,.prose p{line-height:1.75;color:#56646c}.card .btn{margin-top:12px}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.service{padding:28px;background:#fff;border:1px solid #e9e7df}.service h3{margin:0 0 10px}.service p{color:#5c6870;line-height:1.7;font-size:14px}.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;margin:35px 0 60px}.feature>img{width:100%;height:380px;object-fit:cover}.feature p{line-height:1.7;color:#5d6970}.feature h3{font-size:32px;margin:12px 0}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.gallery figure{margin:0;background:#fff;overflow:hidden;border:1px solid #e6e4de}.gallery img{width:100%;height:240px;object-fit:cover;display:block;cursor:zoom-in}.gallery figcaption{padding:12px 14px;color:#4f5e66;font-size:13px;line-height:1.4}.filters{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0}.filter{border:1px solid #c9c7bf;background:#fff;color:#233038;padding:11px 16px;cursor:pointer;font-weight:bold}.filter[aria-pressed=true]{background:#19242a;color:white;border-color:#19242a}.contactband{background:#18242a;color:#fff;padding:62px 0}.contactband p{line-height:1.75;color:#d1d7d9}.contactband h2{font-size:38px;margin:12px 0}.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.contactgrid p{line-height:1.8}.field{display:block;margin:0 0 17px;font-size:13px;font-weight:bold}.field input,.field textarea{width:100%;display:block;padding:14px;margin-top:7px;border:1px solid #d0d0ca;font:inherit;background:#fff}.field textarea{min-height:145px;resize:vertical}.note{font-size:13px;color:#66727a;line-height:1.6}.foot{background:#10181c;color:#bdc5c8;padding:25px 0;font-size:12px}.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:10;display:none;align-items:center;justify-content:center;padding:60px 20px 35px}.lightbox.open{display:flex}.lightbox img{max-height:88vh;max-width:94vw;object-fit:contain}.close{position:absolute;right:22px;top:15px;background:none;border:0;color:white;font-size:40px;cursor:pointer}.breadcrumbs{font-size:13px;color:#6a7478;padding-top:30px}.prose{max-width:850px}.split{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:start}.projecthero{width:100%;max-height:580px;object-fit:cover;display:block;margin-top:26px}@media(max-width:980px){.nav{flex-wrap:wrap;padding:16px 0}.brand{max-width:100%;width:400px}.links{padding-bottom:12px}.services,.gallery{grid-template-columns:repeat(2,1fr)}.feature{grid-template-columns:1fr}.feature>img{height:330px}}@media(max-width:600px){.wrap{padding:0 20px}.brand{width:330px}.links{gap:12px}.links a{font-size:11px}.hero{min-height:570px}.hero p{font-size:16px}.strip .wrap,.cards,.services,.gallery,.contactgrid,.split{grid-template-columns:1fr}.card>img{height:250px}.gallery img{height:235px}.section{padding:50px 0}.pagehead{padding:48px 0}.feature>img{height:245px}}

/* Supply Nation certification */
.certification{background:#f1efe9}.cert-layout{display:grid;grid-template-columns:145px 1fr;gap:42px;align-items:center;max-width:960px}.cert-badge{width:125px;max-width:100%;height:auto;object-fit:contain;justify-self:center}.certification p{max-width:760px;line-height:1.7}@media(max-width:650px){.cert-layout{grid-template-columns:1fr;gap:20px}.cert-badge{justify-self:start;width:100px}}

/* Official Supply Nation artwork */
.supply-logos{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.supply-logos .cert-badge{width:110px}
.supply-logos .secondary-badge{width:86px}
.logo-explainer{font-size:.82rem;color:#555;line-height:1.5}

/* Clear, readable Supply Nation sections */
.certification .cert-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:center;max-width:1080px}
.certification .cert-layout>div:first-child{max-width:730px}
.certification .cert-layout h2{max-width:100%;line-height:1.18}
.certification .cert-layout p{max-width:680px;line-height:1.75}
.certification .supply-logos{display:flex;gap:16px;align-items:center;flex-wrap:nowrap}
.certification .supply-logos .cert-badge{width:116px;height:auto}
.certification .supply-logos .secondary-badge{width:94px}
.certification .cert-layout>.cert-badge{width:135px}
@media(max-width:700px){.certification .cert-layout{grid-template-columns:1fr;gap:24px}.certification .supply-logos{justify-content:flex-start}.certification .cert-layout>.cert-badge{width:115px}}

.upload-preview{border:1px dashed #a9adb1;border-radius:10px;padding:20px;margin:14px 0;background:#f7f8f8}.upload-preview p{margin:8px 0}.upload-preview input{display:block;margin:12px 0;max-width:100%}select{width:100%;padding:12px;border:1px solid #cbd0d4;background:#fff;border-radius:4px}

/* Live quote form */
.form-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.field textarea{width:100%;display:block;padding:14px;margin-top:7px;border:1px solid #d0d0ca;font:inherit;background:#fff;min-height:145px;resize:vertical;box-sizing:border-box}
.upload-preview input[type=file]{width:100%;box-sizing:border-box}
/* Penfab mobile menu - desktop */
.mobile-menu-toggle {
  display: none;
}

/* Penfab mobile menu - phones */
@media (max-width: 600px) {
  .sitehead .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .sitehead .brand {
    width: calc(100% - 110px);
    max-width: 260px;
  }

  .mobile-menu-toggle {
    display: block;
    background: transparent;
    color: #ffffff;
    border: 1px solid #b88a42;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
  }

  .sitehead .links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 10px 0;
  }

  .sitehead .links a {
    display: block;
    padding: 14px 12px;
    font-size: 13px;
    border-bottom: 1px solid #344047;
  }

  .sitehead .mobile-menu-toggle[aria-expanded="true"] + .links {
    display: flex;
  }
}

/* Penfab Services page — desktop photographs */
.service-desktop-photo {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 20px;
}

/* Keep the approved mobile Services layout unchanged */
@media (max-width: 700px) {
  .service-desktop-photo {
    display: none;
  }
}

/* Penfab quote form — full-width drawing package link */
input[type="url"] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font: inherit;
}

/* Penfab website refinements */

/* Three featured projects on desktop */
@media (min-width: 981px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Services photographs: desktop only */
.service-desktop-photo {
  display: none;
}

@media (min-width: 981px) {
  .service-desktop-photo {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 20px;
  }
}

/* Mobile navigation */
.mobile-menu-toggle {
  display: none;
}

@media (max-width: 980px) {
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.45);
    background: transparent;
    color: white;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
  }

  .nav .links {
    display: none;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 12px;
  }

  .nav .mobile-menu-toggle[aria-expanded="true"] + .links {
    display: flex;
  }

  .nav .links a {
    display: block;
    padding: 12px 4px;
  }

  .nav .links a.btn {
    padding: 15px 20px;
    text-align: center;
    margin-top: 8px;
  }
}

@media (max-width: 600px) {
  .brand {
    max-width: calc(100% - 105px);
  }
}

/* Stage 1: commercial capability and enquiry presentation */
.commercial-home .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.commercial-home .hero p{max-width:650px}
.service-link{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.capability-intro{margin-bottom:56px}
.delivery-stages{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}
.delivery-stages li{background:#fff;border:1px solid #e6e4de;border-top:3px solid var(--gold);padding:24px}
.delivery-stages strong{display:block;font-size:18px;margin-bottom:12px}
.delivery-stages span{color:var(--muted);font-size:15px;line-height:1.7}
.credentials{margin:22px 0}
.credentials dt{font-size:12px;font-weight:700;color:var(--muted);margin-top:16px}
.credentials dd{margin:5px 0 0;line-height:1.5}
.actions .btn{line-height:1.5;text-align:center}
#enquiry{scroll-margin-top:24px}
@media(max-width:700px){.delivery-stages{grid-template-columns:1fr}.capability-intro{margin-bottom:40px}}
@media(max-width:600px){.commercial-home .cards{grid-template-columns:1fr}.actions{align-items:stretch}.actions .btn{width:100%}}

/* Issue #8: progressive navigation and keyboard photo enlargement. */
@media(max-width:980px){
  .sitehead .mobile-menu-toggle{display:none}
  .sitehead .nav .links{display:flex}
  .sitehead .mobile-menu-toggle.menu-enhanced{display:inline-flex}
  .sitehead .nav .links.menu-enhanced{display:none}
  .sitehead .mobile-menu-toggle.menu-enhanced[aria-expanded="true"] + .links.menu-enhanced{display:flex}
}
.gallery img{cursor:default}
.gallery .gallery-enlarge{display:block;width:100%;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:zoom-in}
.gallery .gallery-enlarge img{cursor:zoom-in}
.gallery-enlarge:focus-visible{outline:3px solid #19242a;outline-offset:-3px}
.gallery-enlarge:focus-visible img{outline:3px solid #e4b766;outline-offset:-6px}
.filter:focus-visible,.mobile-menu-toggle:focus-visible,.links a:focus-visible,.lightbox .close:focus-visible{outline:3px solid #e4b766;outline-offset:4px}
dialog.lightbox{margin:0;border:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;color:#fff}
dialog.lightbox::backdrop{background:transparent}
dialog.lightbox img{max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px)}
html.photo-modal-open{overflow:hidden}