/* ============================================
   CLUMBER CONSTRUCTION — style.css
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

   :root {
     --navy:        #27336f;
     --navy-dark:   #1d2655;
     --navy-light:  #3a4a90;
     --white:       #ffffff;
     --dark:        #333333;
     --light:       #f4f5f8;
     --mid:         #e8eaf0;
     --rule:        #d0d3de;
     --text:        #444;
     --text-muted:  #666;
     --gap:         clamp(2rem, 5vw, 5rem);
   }
   
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html { scroll-behavior: smooth; }
   
   body {
     font-family: 'Barlow', sans-serif;
     font-weight: 400;
     color: var(--text);
     background: var(--white);
     line-height: 1.65;
     -webkit-font-smoothing: antialiased;
   }
   
   img { display: block; max-width: 100%; }
   a { color: inherit; text-decoration: none; }
   ul { list-style: none; }
   
   /* ── TYPOGRAPHY ── */
   h1, h2, h3, h4 {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 800;
     line-height: 1.1;
     text-transform: uppercase;
     letter-spacing: 0.02em;
   }
   h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
   h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
   h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
   
   p { max-width: 68ch; }
   
   /* ── LAYOUT UTILITIES ── */
   .container {
     width: min(1200px, 94%);
     margin-inline: auto;
   }
   .section {
     padding-block: var(--gap);
   }
   .section--dark {
     background: var(--navy);
     color: var(--white);
   }
   .section--light {
     background: var(--light);
   }
   
   /* ── NAV ── */
   .site-nav {
     position: fixed;
     inset: 0 0 auto;
     z-index: 100;
     background: var(--navy);
     box-shadow: 0 2px 20px rgba(0,0,0,.3);
     transition: background .3s;
   }
   .site-nav .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 72px;
   }
   .nav-logo img {
     height: 44px;
     width: auto;
     /* logo is navy fill — invert to white on dark bg */
     filter: brightness(0) invert(1);
   }
   .nav-links {
     display: flex;
     gap: 2.5rem;
     align-items: center;
   }
   .nav-links a {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: 1.05rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: rgba(255,255,255,.8);
     transition: color .2s;
   }
   .nav-links a:hover,
   .nav-links a.active { color: var(--white); }
   .nav-links a.nav-cta {
     background: var(--white);
     color: var(--navy);
     padding: .45rem 1.2rem;
     border-radius: 2px;
     transition: background .2s, color .2s;
   }
   .nav-links a.nav-cta:hover {
     background: var(--mid);
   }
   
   /* Hamburger */
   .nav-toggle {
     display: none;
     background: none;
     border: none;
     cursor: pointer;
     padding: .25rem;
     flex-direction: column;
     gap: 5px;
   }
   .nav-toggle span {
     display: block;
     width: 26px;
     height: 2px;
     background: var(--white);
     transition: transform .3s, opacity .3s;
   }
   
   /* ── HERO ── */
   .hero {
     position: relative;
     min-height: 100svh;
     display: flex;
     align-items: flex-end;
     padding-bottom: clamp(3rem, 8vw, 6rem);
     overflow: hidden;
   }
   .hero-bg {
     position: absolute;
     inset: 0;
     background-image: url('images/packington-final-effluent-rising-main-field-trench-excavation.webp');
     background-size: cover;
     background-position: center 40%;
     transform: scale(1.04);
     animation: heroZoom 12s ease-out forwards;
   }
   @keyframes heroZoom {
     from { transform: scale(1.08); }
     to   { transform: scale(1.00); }
   }
   .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(
       to top,
       rgba(20,28,65,.92) 0%,
       rgba(20,28,65,.6) 45%,
       rgba(20,28,65,.1) 100%
     );
   }
   .hero-content {
     position: relative;
     z-index: 1;
     color: var(--white);
   }
   .hero-eyebrow {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .85rem;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: rgba(255,255,255,.7);
     margin-bottom: 1rem;
     display: flex;
     align-items: center;
     gap: .75rem;
   }
   .hero-eyebrow::before {
     content: '';
     display: block;
     width: 36px;
     height: 2px;
     background: rgba(255,255,255,.5);
   }
   .hero h1 { margin-bottom: 1.25rem; }
   .hero h1 span {
     display: block;
     color: rgba(255,255,255,.55);
     font-size: .55em;
     font-weight: 600;
     letter-spacing: .05em;
     margin-top: .25rem;
   }
   .hero p {
     font-size: clamp(1rem, 1.5vw, 1.2rem);
     color: rgba(255,255,255,.85);
     max-width: 52ch;
     margin-bottom: 2.5rem;
   }
   
   /* ── BUTTONS ── */
   .btn {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: .85rem 2rem;
     border-radius: 2px;
     transition: background .2s, color .2s, transform .15s, border-color .2s;
     cursor: pointer;
     border: none;
   }
   .btn:hover { transform: translateY(-1px); }
   .btn--primary {
     background: var(--white);
     color: var(--navy);
   }
   .btn--primary:hover { background: var(--mid); }
   .btn--navy {
     background: var(--navy);
     color: var(--white);
   }
   .btn--navy:hover { background: var(--navy-dark); }
   .btn--outline {
     background: transparent;
     color: var(--white);
     border: 2px solid rgba(255,255,255,.5);
   }
   .btn--outline:hover {
     border-color: var(--white);
     background: rgba(255,255,255,.08);
   }
   .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
   
   /* ── INTRO STRIP ── */
   .intro-strip {
     background: var(--navy);
     color: var(--white);
     padding-block: 1.75rem;
     border-bottom: 3px solid var(--navy-light);
   }
   .intro-strip .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 1.5rem;
     text-align: center;
   }
   .stat-num {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 2.4rem;
     font-weight: 800;
     line-height: 1;
     display: block;
   }
   .stat-label {
     font-size: .8rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: rgba(255,255,255,.65);
     margin-top: .35rem;
     display: block;
   }
   
   /* ── SECTION HEADER ── */
   .section-header {
     margin-bottom: clamp(2rem, 4vw, 3.5rem);
   }
   .section-header--center { text-align: center; }
   .section-header--center p { margin-inline: auto; }
   .section-tag {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--navy);
     display: flex;
     align-items: center;
     gap: .6rem;
     margin-bottom: .6rem;
   }
   .section--dark .section-tag { color: rgba(255,255,255,.6); }
   .section-tag::before {
     content: '';
     display: block;
     width: 28px;
     height: 2px;
     background: currentColor;
   }
   .section-header--center .section-tag { justify-content: center; }
   .section-header--center .section-tag::after {
     /* centred variant: rule on the right too, so the tag is bracketed */
     content: '';
     display: block;
     width: 28px;
     height: 2px;
     background: currentColor;
   }
   .section-header h2 { margin-bottom: .75rem; }
   
   /* ── ABOUT (HOME) ── */
   /* Tighten spacing inside the Who We Are section-header only */
   .about-text .section-header {
     margin-bottom: 0;
   }
   .about-text .section-header h2 {
     margin-bottom: 1.1rem;
   }
   .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(2rem, 5vw, 5rem);
     align-items: center;
   }
   .about-text p { margin-bottom: 1.2rem; color: #555; }
   .specialism-list {
     margin-top: 1.5rem;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .6rem .5rem;
   }
   .spec-item {
     display: flex;
     align-items: center;
     gap: .5rem;
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: .04em;
     color: var(--navy);
   }
   .spec-item::before {
     content: '';
     width: 8px;
     height: 8px;
     background: var(--navy);
     flex-shrink: 0;
   }
   .about-image-block {
     position: relative;
   }
   .about-image-block img {
     width: 100%;
     height: 420px;
     object-fit: cover;
     display: block;
   }
   /* Editable badge — replace hardcoded ::after with a real element */
   .about-badge {
     position: absolute;
     bottom: -1.5rem;
     right: -1.5rem;
     background: var(--navy);
     color: var(--white);
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 800;
     font-size: 1.1rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: 1rem 1.5rem;
   }
   
   /* ── SERVICES CARDS ── */
   .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.5rem;
   }
   .service-card {
     background: var(--white);
     border: 1px solid var(--mid);
     padding: 2rem 1.75rem;
     transition: transform .2s, box-shadow .2s;
     position: relative;
     overflow: hidden;
   }
   .service-card::before {
     content: '';
     position: absolute;
     top: 0; left: 0;
     width: 4px; height: 100%;
     background: var(--navy);
     transform: scaleY(0);
     transform-origin: bottom;
     transition: transform .3s;
   }
   .service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.1); }
   .service-card:hover::before { transform: scaleY(1); }
   .card-icon {
     width: 48px;
     height: 48px;
     margin-bottom: 1.2rem;
     color: var(--navy);
   }
   .service-card h3 { margin-bottom: .6rem; font-size: 1.2rem; }
   .service-card p { font-size: .92rem; color: var(--text-muted); max-width: 100%; }
   
   /* ── ACCREDITATIONS ── */
   .accreditations {
     background: var(--white);
     padding-block: var(--gap);
     border-top: 1px solid var(--mid);
   }
   .accreditation-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap: 1rem;
     max-width: 1000px;
     margin-inline: auto;
   }
   .accreditation-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: .9rem;
     padding: 2rem 1rem;
     background: var(--white);
     border: 1px solid var(--mid);
     transition: border-color .2s, transform .2s;
   }
   .accreditation-item:hover {
     border-color: var(--navy);
     transform: translateY(-2px);
   }
   .accreditation-logo {
     /* Placeholder block — swap for an <img> when real badges arrive */
     width: 100%;
     max-width: 150px;
     aspect-ratio: 16 / 9;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--light);
     border: 1px dashed var(--rule);
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .85rem;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--navy);
   }
   .accreditation-item img.accreditation-logo {
     /* When real <img> is used, drop the dashed-box look */
     background: transparent;
     border: none;
     object-fit: contain;
     height: auto;
     padding: .25rem;
   }
   .accreditation-item img.accreditation-logo--lg {
     max-width: 175px;
   }
   .accreditation-name {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .82rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--text-muted);
     text-align: center;
   }
   
   /* ── PROJECT GALLERY STRIP ── */
   .project-gallery {
     display: flex;
     gap: 2px;
     background: var(--dark);
     flex-shrink: 0;
   }
   .project-gallery img {
     flex: 1 1 0;
     min-width: 0;
     height: 78px;
     object-fit: cover;
     display: block;
     transition: opacity .2s;
   }
   .project-gallery img:hover {
     opacity: .72;
     cursor: zoom-in;
   }

   /* ── PROJECTS GRID ── */
   .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
     gap: 1.5rem;
   }
   
   .project-card {
     display: flex;
     flex-direction: column;
     background: var(--white);
     border: 1px solid var(--mid);
     overflow: hidden;
     transition: transform .2s, box-shadow .2s, border-color .2s;
     position: relative;
   }
   .project-card::before {
     content: '';
     position: absolute;
     top: 0; left: 0;
     width: 4px; height: 100%;
     background: var(--navy);
     transform: scaleY(0);
     transform-origin: bottom;
     transition: transform .3s;
     z-index: 1;
   }
   .project-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(0,0,0,.08);
     border-color: var(--rule);
   }
   .project-card:hover::before { transform: scaleY(1); }
   
   .project-card-image {
     aspect-ratio: 16 / 10;
     overflow: hidden;
     background: var(--light);
   }
   .project-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease;
   }
   .project-card:hover .project-card-image img { transform: scale(1.04); }
   
   .project-card-content {
     padding: 1.5rem 1.5rem 1.75rem;
     display: flex;
     flex-direction: column;
     gap: .75rem;
     flex: 1;
   }
   
   .project-tags {
     display: flex;
     gap: .4rem;
     flex-wrap: wrap;
   }

   .project-tag {
     display: inline-block;
     align-self: flex-start;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .15em;
     text-transform: uppercase;
     background: var(--navy);
     color: var(--white);
     padding: .25rem .65rem;
     border-radius: 2px;
   }
   
   .project-card h3 {
     font-size: 1.25rem;
     margin: 0;
     color: var(--dark);
   }
   
   .project-meta {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .75rem .5rem;
     margin-top: .25rem;
     padding-top: .9rem;
     border-top: 1px solid var(--mid);
   }
   .project-meta div { min-width: 0; }
   .project-meta dt {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .68rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: .15rem;
   }
   .project-meta dd {
     font-size: .9rem;
     color: var(--dark);
     font-weight: 500;
     line-height: 1.35;
     word-wrap: break-word;
   }
   
   .project-scope {
     font-size: .9rem;
     color: var(--text);
     line-height: 1.6;
     max-width: 100%;
     margin: 0;
   }
   
   /* Placeholder variant — softer styling so it's clear these aren't real */
   .project-card--placeholder {
     border-style: dashed;
     border-color: var(--rule);
   }
   .project-card--placeholder .project-tag {
     background: var(--mid);
     color: var(--text-muted);
   }
   .project-card--placeholder h3 { color: var(--text-muted); }
   .project-card--placeholder .project-meta dd { color: var(--text-muted); }
   .image-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--light);
   }
   .image-placeholder svg {
     width: 40px;
     height: 40px;
     color: #c4c8d3;
   }
   
   /* Filter bar */
   .filter-bar {
     display: flex;
     gap: .5rem;
     flex-wrap: wrap;
     margin-bottom: 2.5rem;
   }
   .filter-btn {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .85rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: .55rem 1.2rem;
     border: 2px solid var(--mid);
     background: var(--white);
     color: var(--dark);
     cursor: pointer;
     transition: background .2s, color .2s, border-color .2s;
     border-radius: 2px;
   }
   .filter-btn:hover {
     border-color: var(--navy);
     color: var(--navy);
   }
   .filter-btn.active {
     background: var(--navy);
     border-color: var(--navy);
     color: var(--white);
   }
   
   /* Empty state */
   .projects-empty {
     text-align: center;
     padding: 3rem 1rem;
     color: var(--text-muted);
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     font-size: .95rem;
   }
   
   /* ── CTA BAND ── */
   .cta-band {
     background: var(--navy);
     padding-block: clamp(2.5rem, 5vw, 4rem);
     text-align: center;
     color: var(--white);
   }
   .cta-band h2 { margin-bottom: .75rem; }
   .cta-band p { color: rgba(255,255,255,.75); margin-inline: auto; margin-bottom: 2rem; }
   
   /* ── CONTACT ── */
   /* Primary: phone + email cards, side by side */
   .contact-primary {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.25rem;
     max-width: 880px;
     margin-inline: auto;
     margin-bottom: 3rem;
   }
   .contact-card {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: .5rem;
     padding: 2rem 1.75rem;
     background: var(--white);
     border: 1px solid var(--mid);
     color: var(--dark);
     transition: border-color .2s, transform .2s, box-shadow .2s;
     position: relative;
   }
   .contact-card::before {
     content: '';
     position: absolute;
     top: 0; left: 0;
     width: 4px; height: 100%;
     background: var(--navy);
     transform: scaleY(0);
     transform-origin: bottom;
     transition: transform .3s;
   }
   .contact-card:hover {
     border-color: var(--navy);
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(0,0,0,.08);
   }
   .contact-card:hover::before { transform: scaleY(1); }
   .contact-card svg {
     width: 28px;
     height: 28px;
     color: var(--navy);
     margin-bottom: .25rem;
   }
   .contact-card-label {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .8rem;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--text-muted);
   }
   .contact-card-value {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: 1.6rem;
     letter-spacing: .02em;
     color: var(--navy);
     /* Stop long emails overflowing on narrow screens */
     word-break: break-word;
   }
   
   /* Secondary: location, hours, coverage */
   .contact-meta {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 2rem;
     max-width: 880px;
     margin-inline: auto;
     padding-top: 2rem;
     border-top: 1px solid var(--mid);
   }
   .contact-meta-item {
     display: flex;
     align-items: flex-start;
     gap: .9rem;
   }
   .contact-meta-item svg {
     width: 22px;
     height: 22px;
     color: var(--navy);
     flex-shrink: 0;
     margin-top: 2px;
   }
   .contact-meta-item strong {
     display: block;
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .8rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--navy);
     margin-bottom: .25rem;
   }
   .contact-meta-item span {
     font-size: .92rem;
     color: var(--text-muted);
   }
   
   /* Registered company details */
   .registered-details {
     background: var(--white);
     padding-block: clamp(2.5rem, 5vw, 4rem);
     border-top: 1px solid var(--mid);
   }
   .registered-heading {
     font-size: 1rem;
     letter-spacing: .18em;
     color: var(--text-muted);
     text-align: center;
     margin-bottom: 2rem;
     font-weight: 700;
   }
   .registered-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 2rem;
     max-width: 1000px;
     margin-inline: auto;
   }
   .registered-grid dt {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .75rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: .35rem;
   }
   .registered-grid dd {
     font-size: .95rem;
     color: var(--dark);
     line-height: 1.55;
   }
   
   /* ── FORM ── */
   .contact-form {
     background: var(--light);
     padding: clamp(1.5rem, 3vw, 2.5rem);
   }
   .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
   .form-group { margin-bottom: 1.2rem; }
   .form-group label {
     display: block;
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .85rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--navy);
     margin-bottom: .4rem;
   }
   .form-group input,
   .form-group select,
   .form-group textarea {
     width: 100%;
     padding: .75rem 1rem;
     border: 1px solid var(--rule);
     border-radius: 2px;
     background: var(--white);
     font-family: 'Barlow', sans-serif;
     font-size: .95rem;
     color: var(--dark);
     transition: border-color .2s;
     outline: none;
     appearance: none;
   }
   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus {
     border-color: var(--navy);
   }
   .form-group textarea { resize: vertical; min-height: 130px; }
   
   /* ── FOOTER ── */
   .site-footer {
     background: #111828;
     color: rgba(255,255,255,.6);
     padding-block: 3rem 2rem;
     font-size: .88rem;
   }
   .footer-grid {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 2.5rem;
     margin-bottom: 2.5rem;
   }
   .footer-brand img {
     height: 40px;
     filter: brightness(0) invert(1);
     margin-bottom: 1rem;
     opacity: .8;
   }
   .footer-brand p { max-width: 36ch; line-height: 1.7; }
   .footer-col h4 {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: .85rem;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--white);
     margin-bottom: 1rem;
   }
   .footer-col ul { display: flex; flex-direction: column; gap: .5rem; }
   .footer-col a { color: rgba(255,255,255,.6); transition: color .2s; }
   .footer-col a:hover { color: var(--white); }
   .footer-bottom {
     border-top: 1px solid rgba(255,255,255,.08);
     padding-top: 1.5rem;
     font-size: .8rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: .75rem;
   }
   .footer-bottom a {
     color: rgba(255,255,255,.5);
     transition: color .2s;
   }
   .footer-bottom a:hover { color: rgba(255,255,255,.9); }
   
   /* ── PAGE HERO (inner pages) ── */
   .page-hero {
     background: var(--navy);
     color: var(--white);
     padding: 9rem 0 4rem;
     position: relative;
     overflow: hidden;
   }
   .page-hero::after {
     content: '';
     position: absolute;
     inset: 0;
     background: repeating-linear-gradient(
       -45deg,
       transparent,
       transparent 40px,
       rgba(255,255,255,.015) 40px,
       rgba(255,255,255,.015) 80px
     );
   }
   .page-hero .container { position: relative; z-index: 1; }
   .page-hero h1 { margin-bottom: .5rem; }
   .page-hero p { color: rgba(255,255,255,.7); font-size: 1.1rem; }
   .breadcrumb {
     font-size: .82rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: rgba(255,255,255,.45);
     margin-bottom: .75rem;
   }
   .breadcrumb a { color: rgba(255,255,255,.55); }
   .breadcrumb a:hover { color: rgba(255,255,255,.9); }
   
   /* ── SUCCESS STATE ── */
   .form-success {
     display: none;
     background: #e8f5e9;
     border: 1px solid #a5d6a7;
     padding: 1.5rem;
     text-align: center;
     color: #2e7d32;
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     font-size: 1.1rem;
     letter-spacing: .05em;
     text-transform: uppercase;
   }
   
   /* ── YOUTUBE FACADE ── */
   .yt-facade {
     position: relative;
     width: 100%;
     height: 100%;
     cursor: pointer;
     background: #000;
     overflow: hidden;
   }
   .yt-facade img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: opacity .3s;
   }
   .yt-facade:hover img { opacity: .8; }
   .yt-play {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 68px;
     height: 68px;
     background: rgba(220,0,0,.92);
     border: none;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .2s, transform .2s;
     pointer-events: none;
   }
   .yt-facade:hover .yt-play {
     background: #cc0000;
     transform: translate(-50%, -50%) scale(1.1);
   }
   .yt-play svg {
     width: 28px;
     height: 28px;
     fill: #fff;
   }
   .yt-facade iframe {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: none;
   }

   /* ── LIGHTBOX ── */
   #lightbox {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,.92);
     z-index: 2000;
     align-items: center;
     justify-content: center;
     padding: 1rem;
     cursor: zoom-out;
   }
   #lightbox.open { display: flex; }
   #lightbox img {
     max-width: 100%;
     max-height: 90vh;
     object-fit: contain;
     box-shadow: 0 8px 60px rgba(0,0,0,.6);
     cursor: default;
   }
   #lightbox-close {
     position: absolute;
     top: 1rem;
     right: 1.25rem;
     background: none;
     border: none;
     color: #fff;
     font-size: 2.25rem;
     line-height: 1;
     cursor: pointer;
     padding: .25rem .5rem;
     opacity: .65;
     transition: opacity .2s;
   }
   #lightbox-close:hover { opacity: 1; }

   /* Lightbox carousel — prev / next */
   #lightbox-prev,
   #lightbox-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255,255,255,.1);
     border: 2px solid rgba(255,255,255,.18);
     color: #fff;
     font-size: 2.2rem;
     line-height: 1;
     cursor: pointer;
     padding: .5rem 1rem;
     transition: background .2s, border-color .2s;
     z-index: 1;
     border-radius: 2px;
   }
   #lightbox-prev { left: 1rem; }
   #lightbox-next { right: 1rem; }
   #lightbox-prev:hover,
   #lightbox-next:hover {
     background: rgba(255,255,255,.22);
     border-color: rgba(255,255,255,.45);
   }
   #lightbox-counter {
     position: absolute;
     bottom: 1.25rem;
     left: 50%;
     transform: translateX(-50%);
     color: rgba(255,255,255,.5);
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .8rem;
     letter-spacing: .18em;
     text-transform: uppercase;
     pointer-events: none;
     white-space: nowrap;
   }

   /* ── RESPONSIVE ── */
   @media (max-width: 900px) {
     .about-grid { grid-template-columns: 1fr; }
     .about-image-block { order: -1; }
     .about-badge { display: none; }
     .footer-brand { grid-column: 1 / -1; }
     .form-row { grid-template-columns: 1fr; }
     .footer-bottom {
       justify-content: flex-start;
       flex-direction: column;
       align-items: flex-start;
     }
   }
   @media (max-width: 680px) {
     .nav-links { display: none; flex-direction: column; gap: 0; }
     .nav-links.open {
       display: flex;
       position: fixed;
       inset: 72px 0 0;
       background: var(--navy);
       padding: 2rem;
       gap: 1.5rem;
     }
     .nav-toggle { display: flex; }
     .footer-grid { grid-template-columns: 1fr; }
     .specialism-list { grid-template-columns: 1fr; }
     .accreditation-grid { grid-template-columns: repeat(2, 1fr); }
     /* Project cards: tighter images on narrow screens */
     .project-card-image { aspect-ratio: 2 / 1; }
     .project-gallery img { height: 60px; }
   }

   /* ── COOKIE CONSENT BANNER ── */
   .cookie-banner {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 9999;
     background: var(--navy-dark);
     color: var(--white);
     padding: 1.25rem 1.5rem;
     display: flex;
     align-items: center;
     gap: 1.5rem;
     flex-wrap: wrap;
     box-shadow: 0 -2px 16px rgba(0,0,0,.25);
     transform: translateY(100%);
     transition: transform .35s ease;
   }
   .cookie-banner.visible {
     transform: translateY(0);
   }
   .cookie-banner p {
     flex: 1 1 260px;
     font-size: .9rem;
     line-height: 1.5;
     margin: 0;
     max-width: none;
     color: rgba(255,255,255,.88);
   }
   .cookie-banner a {
     color: #fff;
     text-decoration: underline;
     text-underline-offset: 2px;
   }
   .cookie-btns {
     display: flex;
     gap: .75rem;
     flex-shrink: 0;
     flex-wrap: wrap;
   }
   .cookie-btns .btn--primary {
     padding: .55rem 1.4rem;
     font-size: .875rem;
   }
   .cookie-decline {
     background: transparent;
     border: 1px solid rgba(255,255,255,.4);
     color: rgba(255,255,255,.8);
     padding: .55rem 1.4rem;
     font-size: .875rem;
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .06em;
     cursor: pointer;
     border-radius: 3px;
     transition: border-color .2s, color .2s;
   }
   .cookie-decline:hover {
     border-color: rgba(255,255,255,.75);
     color: var(--white);
   }