:root {
        color-scheme: dark;
        --bg: #0a0a0a;
        --panel: rgba(255, 255, 255, 0.05);
        --panel-strong: #171717;
        --line: rgba(255, 255, 255, 0.1);
        --text: #ffffff;
        --muted: rgba(255, 255, 255, 0.7);
        --brand: #ef4444;
        --brand-strong: #dc2626;
        --success: #25d366;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        font-family: Inter, Arial, sans-serif;
        background: var(--bg);
        color: var(--text);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .container {
        width: min(1120px, calc(100% - 32px));
        margin: 0 auto;
      }

      .header {
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid var(--line);
        background: rgba(10, 10, 10, 0.92);
        backdrop-filter: blur(14px);
      }

      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 0;
      }

      .brand-lockup {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .brand-banner {
        display: block;
        width: clamp(92px, 11vw, 138px);
        height: auto;
        border-radius: 16px;
        background: white;
        padding: 6px 8px;
        flex-shrink: 0;
      }

      .brand {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--brand);
        font-size: clamp(20px, 3vw, 30px);
      }

      .tagline {
        margin-top: 6px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.28em;
        color: rgba(255, 255, 255, 0.6);
      }

      .nav {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 14px;
      }

      .cta,
      .button-outline,
      .button-dark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        padding: 14px 22px;
        font-weight: 700;
        transition: 0.2s ease;
      }

      .cta {
        background: var(--brand);
        color: white;
      }

      .cta:hover {
        background: var(--brand-strong);
      }

      .button-outline {
        border: 1px solid rgba(255, 255, 255, 0.16);
      }

      .button-outline:hover {
        background: rgba(255, 255, 255, 0.05);
      }

      .button-dark {
        background: #050505;
        color: white;
      }

      .hero {
        position: relative;
        overflow: hidden;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at top right, rgba(239, 68, 68, 0.2), transparent 28%),
          radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.08), transparent 35%);
      }

      .hero-grid {
        position: relative;
        display: grid;
        gap: 40px;
        padding: 72px 0 96px;
        grid-template-columns: 1.05fr 0.95fr;
      }

      .eyebrow {
        display: inline-flex;
        width: fit-content;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(239, 68, 68, 0.35);
        background: rgba(239, 68, 68, 0.1);
        color: #fca5a5;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.18em;
      }

      h1 {
        margin: 18px 0 0;
        font-size: clamp(46px, 9vw, 82px);
        line-height: 0.98;
      }

      .hero-accent {
        display: block;
        color: var(--brand);
      }

      .hero-copy {
        max-width: 620px;
        margin-top: 24px;
        color: var(--muted);
        font-size: 18px;
        line-height: 1.8;
      }

      .hero-actions,
      .contact-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 28px;
      }

      .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 26px;
        color: rgba(255, 255, 255, 0.68);
        font-size: 15px;
      }

      .hero-card,
      .panel,
      .service-card,
      .step-card {
        border: 1px solid var(--line);
        background: var(--panel);
        border-radius: 30px;
      }

      .hero-card {
        padding: 20px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
      }

      .hero-card img,
      .about-image {
        width: 100%;
        object-fit: cover;
        display: block;
        border-radius: 24px;
      }

      .hero-card img {
        height: 560px;
      }

      .highlights {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 16px;
      }

      .highlight {
        border: 1px solid var(--line);
        background: rgba(23, 23, 23, 0.8);
        border-radius: 18px;
        padding: 14px 16px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 14px;
      }

      .strip {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.04);
      }

      .strip-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        padding: 24px 0;
      }

      .strip-item {
        padding: 16px 18px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(23, 23, 23, 0.7);
        font-size: 14px;
      }

      section {
        padding: 84px 0;
        scroll-margin-top: 110px;
      }

      .section-head {
        text-align: center;
        margin-bottom: 42px;
      }

      .section-head h2 {
        margin: 0;
        font-size: clamp(34px, 6vw, 54px);
      }

      .section-head p {
        max-width: 760px;
        margin: 16px auto 0;
        color: var(--muted);
        line-height: 1.8;
      }

      .services-grid,
      .steps-grid,
      .gallery-grid {
        display: grid;
        gap: 22px;
      }

      .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .steps-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .latest-work-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
      }

      .work-card {
        border: 1px solid var(--line);
        background: var(--panel);
        border-radius: 30px;
        overflow: hidden;
      }

      .work-card-media {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
        background: var(--line);
      }

      .work-card-media.three-up {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .work-card-media img {
        display: block;
        width: 100%;
        height: 280px;
        object-fit: cover;
        background: #101010;
      }

      .work-card-body {
        padding: 26px;
      }

      .work-card-body h3 {
        margin: 14px 0 0;
        font-size: 27px;
      }

      .work-card-body p {
        margin: 14px 0 0;
        color: var(--muted);
        line-height: 1.8;
      }

      .areas {
        background: rgba(23, 23, 23, 0.88);
      }

      .area-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        max-width: 980px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
      }

      .area-list li {
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        padding: 11px 16px;
        color: rgba(255, 255, 255, 0.82);
      }

      .service-card,
      .step-card,
      .panel {
        padding: 28px;
      }

      .service-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 18px;
        background: rgba(239, 68, 68, 0.14);
        color: #fca5a5;
        font-size: 22px;
      }

      .service-card h3,
      .step-card h3 {
        margin: 18px 0 0;
        font-size: 28px;
      }

      .service-card p,
      .step-card p,
      .panel p,
      .panel li {
        color: var(--muted);
        line-height: 1.8;
      }

      .service-link {
        display: inline-block;
        margin-top: 18px;
        color: #f87171;
        font-weight: 700;
      }

      .steps {
        background: rgba(23, 23, 23, 0.88);
      }

      .gallery-card {
        border: 1px solid var(--line);
        background: var(--panel);
        border-radius: 30px;
        overflow: hidden;
      }

      .gallery-label {
        display: inline-flex;
        width: fit-content;
        margin-bottom: 16px;
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .gallery-label.before {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.82);
      }

      .gallery-label.after {
        background: rgba(239, 68, 68, 0.14);
        color: #fca5a5;
      }

      .gallery-copy {
        padding: 26px 26px 8px;
      }

      .gallery-copy h3 {
        margin: 0;
        font-size: 28px;
      }

      .gallery-copy p {
        margin: 14px 0 0;
        color: var(--muted);
        line-height: 1.8;
      }

      .gallery-photos {
        display: grid;
        gap: 12px;
        padding: 0 26px 26px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .gallery-photos img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        display: block;
        border-radius: 22px;
        background: #101010;
      }

      .gallery-video-wrap {
        padding: 0 26px 26px;
      }

      .gallery-video {
        width: 100%;
        display: block;
        border-radius: 24px;
        background: #000;
        max-height: 760px;
      }

      .step-number {
        color: var(--brand);
        font-size: 44px;
        font-weight: 800;
      }

      .about-grid,
      .contact-grid {
        display: grid;
        gap: 28px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .about-list {
        margin: 24px 0 0;
        padding: 0;
        list-style: none;
      }

      .about-list li {
        margin-top: 12px;
      }

      .cta-band {
        background: var(--brand);
        text-align: center;
      }

      .cta-band h2 {
        margin: 0;
        font-size: clamp(34px, 6vw, 54px);
      }

      .cta-band p {
        max-width: 760px;
        margin: 18px auto 0;
        color: rgba(255, 255, 255, 0.86);
        line-height: 1.8;
      }

      .contact-grid .panel {
        height: 100%;
      }

      .contact-list div {
        margin-top: 14px;
        color: var(--muted);
      }

      form {
        margin-top: 28px;
      }

      input,
      textarea {
        width: 100%;
        padding: 15px 16px;
        border-radius: 18px;
        border: 1px solid var(--line);
        background: rgba(23, 23, 23, 0.82);
        color: white;
        font: inherit;
        margin-bottom: 14px;
      }

      textarea {
        min-height: 130px;
        resize: vertical;
      }

      .map {
        min-height: 560px;
        overflow: hidden;
      }

      .map iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }

      footer {
        border-top: 1px solid var(--line);
        background: rgba(10, 10, 10, 0.92);
      }

      .footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 30px 0;
        color: rgba(255, 255, 255, 0.64);
        font-size: 14px;
      }

      .footer-seo {
        margin-top: 8px;
        padding-bottom: 24px;
        color: rgba(255, 255, 255, 0.52);
        font-size: 13px;
        line-height: 1.8;
      }

      .footer-nav {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }

      .fab {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 30;
        background: var(--success);
        color: #000;
        border-radius: 999px;
        padding: 14px 20px;
        font-weight: 800;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      }

      @media (max-width: 980px) {
        .hero-grid,
        .about-grid,
        .contact-grid,
        .services-grid,
        .steps-grid,
        .strip-grid,
        .gallery-grid,
        .latest-work-grid {
          grid-template-columns: 1fr;
        }

        .work-card-media img {
          height: 240px;
        }

        .nav {
          display: none;
        }

        .header-inner {
          padding: 14px 0;
        }

        .brand-lockup {
          width: 100%;
        }

        .brand-banner {
          width: 88px;
          padding: 5px 6px;
        }

        .hero-card img {
          height: 360px;
        }

        .gallery-photos {
          grid-template-columns: 1fr;
        }

        .gallery-photos img {
          height: auto;
          max-height: 420px;
        }

        .footer-inner {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      @media (max-width: 640px) {
        section {
          padding: 64px 0;
        }

        .hero-grid {
          padding: 56px 0 72px;
        }

        .highlights {
          grid-template-columns: 1fr;
        }
      }
    /* Shared additions for the service and area pages, October 2026. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #fca5a5;outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:16px;padding:12px 18px;background:#fff;color:#111;z-index:100}.skip-link:focus{top:12px}
.header-inner{position:relative}.brand-lockup{text-decoration:none;min-width:0}.brand-banner{height:auto}.mobile-menu{display:none}
.detail-hero{background:radial-gradient(ellipse at 85% 0,rgba(239,68,68,.14),transparent 65%);padding:30px 0 56px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:#bbb;margin-bottom:32px}.breadcrumbs a{text-decoration:underline;text-underline-offset:4px}
.detail-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.detail-intro:has(>div:only-child){grid-template-columns:1fr}.detail-intro h1{font-size:clamp(38px,5vw,62px);line-height:1.08;max-width:18ch}.detail-intro .hero-copy{max-width:66ch;font-size:18px;line-height:1.7}.detail-intro .eyebrow{font-size:11px;letter-spacing:.1em}.small-copy{font-size:13px;color:#bcbcbc;line-height:1.65;overflow-wrap:anywhere}
.project-proof{margin:0;border-radius:24px;overflow:hidden;background:#171717;border:1px solid #333}.project-proof img{display:block;width:100%;height:310px;object-fit:cover}.project-proof figcaption{padding:20px 24px}.project-proof figcaption p{color:#bcbcbc;font-size:14px;line-height:1.7}.project-proof figcaption a{font-size:14px;color:#fca5a5}
.content-section{padding:48px 0}.content-grid,.town-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.content-grid h2{font-size:25px;line-height:1.2}.content-grid li{margin:10px 0}.content-grid ul{padding-left:22px}.content-grid .panel{border:1px solid #333;border-radius:24px}.town-grid h3{font-size:28px;margin:0}.detail-page .services-grid{margin-top:24px}.detail-page .service-card h3{font-size:24px;margin-top:0}.detail-page .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-page section:not(.detail-hero){padding:48px 0}.detail-page h2{font-size:32px;line-height:1.2}.detail-page .content-grid h2{font-size:25px}.detail-page p{line-height:1.75}.detail-page .panel{border-radius:24px}.narrow{max-width:840px}.faq{padding:20px 0;border-bottom:1px solid #333}.faq summary{cursor:pointer;font-size:19px;font-weight:700;line-height:1.45;min-height:30px}.faq p{color:#c3c3c3;max-width:75ch}.faq-section{background:#111}
.booking-panel{border:1px solid #643335;background:linear-gradient(120deg,#241113,#171717);border-radius:24px;padding:32px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}.booking-panel h2{margin-top:20px}.booking-panel p{color:#d2c5c5}.mobile-contact{display:none}.area-hub-link{text-align:center}.area-list a{color:#fca5a5;text-decoration:underline;text-underline-offset:4px}.detail-page footer{padding-bottom:44px}.detail-page .footer-nav{display:flex;gap:18px;flex-wrap:wrap}.header .brand{font-size:18px;letter-spacing:.12em}.header .brand-banner{width:78px}.header .tagline{font-size:9px;letter-spacing:.15em}.header .nav{gap:20px}.header .brand-lockup{gap:12px}
@media(max-width:980px){.mobile-menu{display:block;flex-shrink:0}.mobile-menu summary{min-height:44px;display:flex;align-items:center;border:1px solid #555;padding:8px 12px;border-radius:12px;cursor:pointer;font-weight:700;font-size:14px}.mobile-menu[open] nav{display:grid;position:absolute;right:0;top:100%;width:min(300px,90vw);background:#171717;border:1px solid #555;border-radius:14px;box-shadow:0 14px 30px #0008;padding:10px;z-index:50}.mobile-menu nav a{padding:12px 14px;display:block}.header .brand-lockup{width:auto}.header .brand{font-size:15px;letter-spacing:.08em;max-width:180px}.header .brand-banner{width:57px}.header .tagline{font-size:8px;letter-spacing:.08em}.header-inner{gap:12px}.detail-intro{grid-template-columns:1fr;gap:28px}.detail-intro h1{max-width:20ch}.detail-intro .project-proof{max-width:620px}.detail-page .services-grid{grid-template-columns:1fr}.content-grid,.town-grid,.booking-panel{grid-template-columns:1fr}.detail-page .hero-actions{gap:10px}.detail-page .hero-actions a{padding:13px 16px}.detail-page .project-proof img{height:280px}.detail-page .mobile-contact{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:40;background:#101010;border-top:1px solid #444;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px}.mobile-contact a{display:flex;min-height:44px;align-items:center;justify-content:center;border-radius:14px;background:#ef4444;font-weight:700;font-size:14px}.mobile-contact a:last-child{background:#25d366;color:#050505}.detail-page{padding-bottom:80px}.detail-page .booking-panel{padding:24px}.detail-page .detail-hero{padding:20px 0 36px}.breadcrumbs{margin-bottom:26px;font-size:12px}.header{z-index:60}}
@media(max-width:640px){.hero-grid{padding:30px 0 48px}.hero h1{font-size:44px;line-height:1.03}.hero .hero-copy{font-size:17px;line-height:1.65}.detail-intro h1{font-size:38px}.detail-page h2{font-size:27px}.detail-page section:not(.detail-hero){padding:36px 0}.detail-page .container{width:min(1160px,calc(100% - 32px))}.content-grid .panel{padding:24px}.detail-page .eyebrow{font-size:10px}.detail-page .project-proof img{height:240px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}