:root {
      --red: #d40016;
      --red-dark: #a90010;
      --black: #0c0d0f;
      --charcoal: #1a1d21;
      --grey: #68707a;
      --light: #f4f5f6;
      --white: #fff;
      --line: rgba(15, 17, 20, .12);
      --shadow: 0 18px 45px rgba(0,0,0,.14);
      --radius: 18px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Archivo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--black);
      background: var(--white);
      line-height: 1.55;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

    .topbar {
      background: var(--black);
      color: var(--white);
      font-size: .9rem;
    }
    .topbar-inner {
      min-height: 42px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }
    .topbar a { color: #fff; font-weight: 700; }
    .topbar .muted { color: rgba(255,255,255,.7); }

    header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .nav {
      min-height: 86px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand img { width: 156px; height: 72px; object-fit: contain; }
    .nav-links { display: flex; align-items: center; gap: 28px; font-weight: 700; }
    .nav-links a { position: relative; }
    .nav-links a:not(.btn)::after {
      content: "";
      position: absolute;
      left: 0; bottom: -8px;
      width: 0; height: 3px;
      background: var(--red);
      transition: .2s ease;
    }
    .nav-links a:hover::after { width: 100%; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 0;
      border-radius: 999px;
      padding: 14px 22px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn svg { width: 19px; height: 19px; flex: 0 0 auto; fill: currentColor; }
    .btn-review-read { background: #f4b400; color: #111; box-shadow: 0 10px 26px rgba(244,180,0,.24); }
    .btn-review-read:hover { background: #dca200; }
    .btn-review-write { background: #fff; color: #111; border: 2px solid #fff; }
    .btn-review-write:hover { background: #f3f3f3; }
    .btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 26px rgba(212,0,22,.28); }
    .btn-primary:hover { background: var(--red-dark); }
    .btn-dark { background: var(--black); color: #fff; }
    .btn-outline { border: 2px solid rgba(255,255,255,.65); color: #fff; background: transparent; }
    .menu-toggle { display: none; background: none; border: 0; font-size: 1.6rem; }

    .hero {
      min-height: 720px;
      display: grid;
      align-items: center;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      color: #fff;
     background:
  linear-gradient(
    90deg,
    rgba(5,7,9,.72) 0%,
    rgba(5,7,9,.55) 42%,
    rgba(5,7,9,.25) 72%,
    rgba(5,7,9,.12) 100%
  ),
  url("../images/hero-crane-lorry.jpeg") 52% center / cover no-repeat;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 9px;
      background: var(--red);
    }
    .hero-content { padding: 90px 0 110px; max-width: 760px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .79rem;
      font-weight: 900;
      color: var(--red);
    }
    .hero .eyebrow { color: #ff4b5c; }
    .eyebrow::before { content: ""; width: 38px; height: 4px; background: currentColor; }
    h1, h2, h3 { line-height: 1.06; margin: 0; }
    h1 { font-size: clamp(3.1rem, 7vw, 6.3rem); letter-spacing: -.045em; font-weight: 900; margin-top: 18px; }
    h1 span { color: #ff1830; }
    .hero p { max-width: 670px; font-size: clamp(1.05rem, 2vw, 1.28rem); color: rgba(255,255,255,.83); margin: 24px 0 32px; }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
    .hero-badges { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 42px; }
    .hero-badge { display: flex; gap: 12px; align-items: center; font-weight: 700; }
    .hero-badge b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); }

    section { padding: 100px 0; }
    .section-head { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 46px; }
    .section-head h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.035em; margin-top: 12px; }
    .section-head p { max-width: 580px; color: var(--grey); font-size: 1.05rem; margin: 0; }

    .services { background: var(--light); }
    .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(0,0,0,.05);
    }
    .service-card { padding: 32px; position: relative; min-height: 350px; display: flex; flex-direction: column; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
    .service-card:hover { transform: translateY(-7px); box-shadow: 0 20px 44px rgba(0,0,0,.10); border-color: rgba(212,0,22,.22); }
    .service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--red); }
    .service-icon { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; background: #fff0f2; color: var(--red); font-size: 1.65rem; margin-bottom: 25px; }
    .service-card h3 { font-size: 1.45rem; margin-bottom: 12px; }
    .service-card p { color: var(--grey); margin: 0 0 18px; }
    .brand-label { margin-top: auto; margin-bottom: 14px; font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 900; color: #8a9098; }
    .brand-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; min-height: 34px; align-items: center; }
    .brand-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fafafa; color: var(--charcoal); font-size: .75rem; font-weight: 900; letter-spacing: .02em; }
    .brand-badge.ibstock { border-color: #cbd6e0; background: #f4f8fb; }
    .brand-badge.forterra { border-color: #f2c5c5; background: #fff5f5; }
    .brand-badge.wienerberger { border-color: #efcdb8; background: #fff7f1; }
    .brand-badge.toplite { border-color: #c7d8ef; background: #f3f8ff; }
    .brand-badge.celcon { border-color: #c6e0e8; background: #f2fbfd; }
    .brand-badge.durox { border-color: #cfe1c7; background: #f5fbf2; }
    .service-link { display:inline-flex; align-items:center; gap:8px; color:var(--red); font-weight:900; }
    .service-link:hover { text-decoration: underline; }

    .trust-strip { background:#fff; border-bottom:1px solid var(--line); }
    .trust-grid { min-height:92px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:center; }
    .trust-item { display:flex; align-items:center; gap:12px; font-weight:800; }
    .trust-item span { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#fff0f2; color:var(--red); }

    .reviews { background:#fff; }
    .review-card { padding:34px; display:grid; gap:16px; }
    .stars { color:#f4b400; letter-spacing:.08em; font-size:1.35rem; }
    .review-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

    .gallery-item::after { content:"View photo"; position:absolute; inset:auto 14px 14px auto; padding:8px 12px; border-radius:999px; background:rgba(0,0,0,.72); color:#fff; font-weight:800; font-size:.8rem; opacity:0; transform:translateY(6px); transition:.25s ease; }
    .gallery-item:hover::after { opacity:1; transform:none; }
    .gallery-item { cursor:zoom-in; }

    .lightbox { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:24px; background:rgba(0,0,0,.92); }
    .lightbox.open { display:grid; }
    .lightbox img { max-width:min(1200px, 94vw); max-height:86vh; border-radius:14px; box-shadow:var(--shadow); }
    .lightbox button { position:absolute; top:20px; right:22px; width:48px; height:48px; border:0; border-radius:50%; background:#fff; font-size:1.8rem; cursor:pointer; }

    .about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
    .about-image { position: relative; }
    .about-image img { width: 100%; height: 570px; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow); }
    .about-stamp {
      position: absolute; right: -22px; bottom: 34px;
      width: 174px; height: 174px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid; place-items: center;
      text-align: center;
      font-weight: 900;
      border: 10px solid #fff;
      transform: rotate(-7deg);
    }
    .about-copy h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -.04em; margin: 16px 0 24px; }
    .about-copy p { color: var(--grey); font-size: 1.05rem; }
    .ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 30px 0 34px; font-weight: 700; }
    .tick::before { content: "✓"; color: #fff; background: var(--red); border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; margin-right: 9px; font-size: .8rem; }

    .gallery { background: var(--black); color: #fff; }
    .gallery .section-head p { color: rgba(255,255,255,.65); }
    .gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 230px; gap: 14px; }
    .gallery-item { border-radius: 16px; overflow: hidden; position: relative; }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
    .gallery-item:hover img { transform: scale(1.05); }
    .gallery-item:nth-child(1) { grid-column: span 7; grid-row: span 2; }
    .gallery-item:nth-child(2) { grid-column: span 5; }
    .gallery-item:nth-child(3) { grid-column: span 5; }
    .gallery-item:nth-child(4) { grid-column: span 4; }
    .gallery-item:nth-child(5) { grid-column: span 4; }
    .gallery-item:nth-child(6) { grid-column: span 4; }

    .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: steps; }
    .process-step { padding: 28px; border-top: 1px solid var(--line); counter-increment: steps; }
    .process-step::before { content: "0" counter(steps); display: block; font-size: 2.6rem; font-weight: 900; color: var(--red); margin-bottom: 22px; }
    .process-step h3 { font-size: 1.25rem; margin-bottom: 10px; }
    .process-step p { color: var(--grey); margin: 0; }

    .cta {
      padding: 0;
      background: linear-gradient(110deg, var(--red), var(--red-dark));
      color: #fff;
    }
    .cta-inner { padding: 70px 0; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
    .cta h2 { font-size: clamp(2.3rem, 5vw, 4rem); max-width: 760px; letter-spacing: -.04em; }
    .cta p { color: rgba(255,255,255,.82); max-width: 700px; margin: 16px 0 0; }
    .cta .btn { background: #fff; color: var(--black); white-space: nowrap; }

    .contact { background: var(--light); }
    .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; }
    .contact-panel { background: var(--black); color: #fff; border-radius: 22px; padding: 42px; }
    .contact-panel h2 { font-size: 2.5rem; margin: 14px 0 18px; }
    .contact-panel p { color: rgba(255,255,255,.68); }
    .contact-list { display: grid; gap: 20px; margin-top: 32px; }
    .contact-item { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; }
    .contact-item span:first-child { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #ff4859; }
    .contact-item small { display: block; color: rgba(255,255,255,.55); }
    .contact-item b { font-size: 1.03rem; }

    form { background: #fff; border-radius: 22px; padding: 42px; box-shadow: 0 12px 30px rgba(0,0,0,.07); }
    form h3 { font-size: 2rem; margin-bottom: 8px; }
    form > p { color: var(--grey); margin: 0 0 28px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .field { display: grid; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    label { font-weight: 800; font-size: .92rem; }
    input, select, textarea { width: 100%; border: 1px solid #d8dce0; border-radius: 11px; padding: 14px 15px; background: #fbfbfc; outline: none; }
    input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(212,0,22,.08); }
    textarea { min-height: 130px; resize: vertical; }
    .form-note { color: var(--grey); font-size: .84rem; margin-top: 14px; }

    footer { background: #070809; color: #fff; padding: 55px 0 25px; }
    .footer-grid { display: grid; grid-template-columns: 1.35fr .7fr .95fr; gap: 50px; align-items: start; }
    .footer-logo { width: 190px; background: #fff; border-radius: 10px; padding: 8px; }
    footer p { color: rgba(255,255,255,.58); }
    footer h4 { margin: 0 0 16px; font-size: 1.05rem; }
    footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: rgba(255,255,255,.7); }
    .copyright { margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.5); font-size: .88rem; }
    .floating-whatsapp { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; font-size: 1.7rem; box-shadow: 0 14px 34px rgba(0,0,0,.25); }

    @media (max-width: 900px) {
      .topbar-inner { justify-content: center; }
      .topbar .muted { display: none; }
      .menu-toggle { display: block; }
      .nav-links { position: fixed; inset: 129px 20px auto; display: none; flex-direction: column; align-items: stretch; background: #fff; padding: 24px; border-radius: 16px; box-shadow: var(--shadow); }
      .nav-links.open { display: flex; }
      .hero { min-height: 650px; background-position: 48% center; }
      .service-grid { grid-template-columns: 1fr; }
      .trust-grid { grid-template-columns:1fr 1fr; padding:22px 0; }
      .about-grid, .contact-grid { grid-template-columns: 1fr; }
      .about-image img { height: 480px; }
      .about-stamp { right: 14px; }
      .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
      .gallery-item, .gallery-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
      .gallery-item:nth-child(1) { grid-column: 1 / -1; }
      .process-grid { grid-template-columns: 1fr 1fr; }
      .cta-inner { flex-direction: column; align-items: flex-start; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid > :first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 600px) {
      .container { width: min(100% - 28px, 1180px); }
      .brand img { width: 128px; height: 62px; }
      .nav { min-height: 74px; }
      .nav-links { inset: 116px 14px auto; }
      .hero { min-height: 650px; }
      .hero-content { padding: 70px 0 92px; }
      .hero-badges { gap: 16px; }
      section { padding: 76px 0; }
      .section-head { display: block; }
      .section-head p { margin-top: 18px; }
      .ticks, .process-grid, .form-grid, .gallery-grid, .footer-grid, .trust-grid { grid-template-columns: 1fr; }
      .gallery-item, .gallery-item:nth-child(n) { grid-column: 1; }
      .about-image img { height: 390px; }
      .about-stamp { width: 135px; height: 135px; font-size: .84rem; border-width: 7px; }
      .contact-panel, form { padding: 28px; }
      .copyright { flex-direction: column; }
    }
  
    .brand-badge.geo-concrete { background:#174f42; color:#fff; border-color:#174f42; font-weight:800; }
    .brand-badge.tarmac { background:#00549f; color:#fff; border-color:#00549f; font-weight:800; letter-spacing:.02em; }

/* Version 2.0 - Brick Match */
.brick-match-promo { background: #f3f4f5; }
.brick-match-promo-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.brick-match-promo h2 { font-size:clamp(2.4rem,5vw,4.3rem); letter-spacing:-.045em; margin:14px 0 20px; }
.brick-match-promo p { color:var(--grey); font-size:1.08rem; max-width:760px; }
.match-points { display:grid; gap:12px; margin:26px 0 32px; font-weight:800; }
.match-points span::before { content:'✓'; display:inline-grid; place-items:center; width:24px; height:24px; margin-right:10px; border-radius:50%; color:#fff; background:var(--red); font-size:.78rem; }
.brick-match-card { background:var(--black); color:#fff; padding:42px; border-radius:24px; box-shadow:var(--shadow); }
.brick-match-card .brick-icon { width:72px; height:72px; display:grid; place-items:center; border-radius:18px; background:var(--red); font-size:2.1rem; margin-bottom:24px; }
.brick-match-card h3 { font-size:1.8rem; margin:0 0 14px; }
.brick-match-card p { color:rgba(255,255,255,.72); }
.brick-match-card small { display:block; color:rgba(255,255,255,.52); border-top:1px solid rgba(255,255,255,.12); padding-top:18px; margin-top:22px; }
.page-hero { background:linear-gradient(90deg,rgba(8,9,10,.92),rgba(8,9,10,.60)),url('../images/brick-wall-truck.jpeg') center/cover; color:#fff; padding:95px 0; }
.page-hero h1 { font-size:clamp(3rem,7vw,5.7rem); letter-spacing:-.055em; max-width:900px; margin:14px 0 18px; }
.page-hero p { max-width:760px; color:rgba(255,255,255,.78); font-size:1.15rem; }
.match-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:36px; align-items:start; }
.match-guide { background:var(--black); color:#fff; border-radius:22px; padding:36px; position:sticky; top:130px; }
.match-guide h2 { font-size:2rem; margin:12px 0 20px; }
.match-guide ol { padding-left:22px; display:grid; gap:16px; color:rgba(255,255,255,.75); }
.match-guide strong { color:#fff; }
.match-form .upload-box { border:2px dashed #c9cdd2; background:#f7f8f9; border-radius:14px; padding:24px; text-align:center; }
.match-form input[type=file] { background:#fff; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--grey); }
.consent input { width:auto; margin-top:4px; }
.alert { border-radius:14px; padding:18px 20px; margin-bottom:24px; font-weight:700; }
.alert.success { background:#e8f7ed; color:#17662f; }
.alert.error { background:#fff0f1; color:#9a0716; }
@media(max-width:900px){.brick-match-promo-grid,.match-layout{grid-template-columns:1fr}.match-guide{position:static}}