/* BASE STYLES & VARIABLES */
:root {
  --brand-teal: #176B73;
  --brand-teal-dark: #12555c;
  --neutral-light: #F4F7F7;
  --neutral-white: #FFFFFF;
  --text-dark: #222222;
  --text-muted: #555555;
  
  --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--neutral-white);
  color: var(--text-dark);
  font-family: var(--font-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
  color: var(--brand-teal);
}

a {
  text-decoration: none;
  color: var(--brand-teal);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--brand-teal-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* BUTTONS & LINKS */
.btn-primary {
  display: inline-block;
  background-color: var(--brand-teal);
  color: var(--neutral-white) !important;
  padding: 12px 24px;
  border: 1px solid var(--brand-teal);
  border-radius: 0;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--brand-teal-dark);
  color: var(--neutral-white) !important;
  border-color: var(--brand-teal-dark);
}

.btn-secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--brand-teal) !important;
  padding: 12px 24px;
  border: 1px solid var(--brand-teal);
  border-radius: 0;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--neutral-light);
  border-color: var(--brand-teal);
}

.btn-text {
  font-weight: 600;
  color: var(--brand-teal);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-text:hover {
  color: var(--brand-teal-dark);
}

/* FLOATING HEADER */
.site-header {
  position: fixed;
  top: 20px;
  left: 5%;
  right: 5%;
  background-color: var(--neutral-white);
  border: 1px solid var(--brand-teal);
  border-bottom: 2px solid var(--brand-teal);
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  z-index: 1000;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 20px rgba(23, 107, 115, 0.1);
}

.site-header.scrolled {
  top: 10px;
  padding: 10px 30px;
  box-shadow: 0 10px 30px rgba(23, 107, 115, 0.2);
}

.logo-container {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-teal);
  letter-spacing: -0.5px;
}

.brand-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 24px;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
}

.nav-links a:hover {
  color: var(--brand-teal);
}

.header-cta {
  background-color: var(--brand-teal);
  color: var(--neutral-white) !important;
  padding: 8px 18px;
  border-radius: 0;
  font-size: 0.85rem;
  border: 1px solid var(--brand-teal);
}

.header-cta:hover {
  background-color: var(--brand-teal-dark);
  color: var(--neutral-white) !important;
  border-color: var(--brand-teal-dark);
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.mobile-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--brand-teal);
  transition: 0.3s;
}

/* ASYMMETRIC HERO */
.hero-section {
  padding: 160px 5% 80px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  min-height: 90vh;
  background-color: var(--neutral-white);
}

.hero-content {
  max-width: 500px;
}

.hero-label {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-teal);
  margin-bottom: 20px;
  border-bottom: 1px solid var(--brand-teal);
  padding-bottom: 5px;
}

.hero-content h1 {
  font-size: 4rem;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.hero-content p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 40px;
}

.hero-location {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-location::before {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: var(--brand-teal);
}

.hero-image-wrapper {
  position: relative;
  border: 1px solid var(--brand-teal);
  padding: 10px;
  background-color: var(--neutral-white);
}

.hero-image-wrapper::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: -15px;
  bottom: -15px;
  border: 1px solid var(--brand-teal);
  z-index: -1;
}

.hero-image-wrapper img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.hero-info-block {
  position: absolute;
  bottom: -20px;
  left: -40px;
  background-color: var(--neutral-white);
  border: 1px solid var(--brand-teal);
  border-left: 3px solid var(--brand-teal);
  padding: 20px 30px;
  box-shadow: 5px 5px 0 rgba(23, 107, 115, 0.1);
}

.hero-info-block strong {
  display: block;
  color: var(--brand-teal);
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.hero-info-block span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* INTRODUCTION */
.intro-section {
  padding: 100px 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  background-color: var(--neutral-light);
  border-top: 1px solid var(--brand-teal);
  border-bottom: 1px solid var(--brand-teal);
  position: relative;
}

.intro-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--brand-teal);
  border-left: 2px solid var(--brand-teal);
}

.intro-section h2 {
  font-size: 2.8rem;
}

.intro-text p {
  font-size: 1.1rem;
  margin-bottom: 24px;
  color: var(--text-dark);
}

/* EDITORIAL SERVICES LIST */
.services-section {
  padding: 100px 5%;
  background-color: var(--neutral-white);
}

.section-header {
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
}

.editorial-list {
  display: flex;
  flex-direction: column;
}

.editorial-item {
  display: grid;
  grid-template-columns: 100px 1fr 200px;
  align-items: center;
  padding: 40px 15px;
  border-top: 1px solid var(--brand-teal);
  border-left: 2px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.editorial-item:last-child {
  border-bottom: 1px solid var(--brand-teal);
}

.editorial-item:hover {
  background-color: var(--neutral-light);
  border-left: 2px solid var(--brand-teal);
}

.item-number {
  font-size: 2rem;
  color: var(--brand-teal);
  font-weight: 300;
}

.item-content h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.item-content p {
  color: var(--text-muted);
  max-width: 600px;
}

.item-link {
  text-align: right;
}

/* BEFORE & AFTER */
.before-after-section {
  padding: 100px 5%;
  background-color: var(--brand-teal);
  color: var(--neutral-white);
}

.before-after-section h2 {
  color: var(--neutral-white);
  text-align: center;
  margin-bottom: 60px;
  font-size: 2.5rem;
}

.ba-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background-color: var(--brand-teal-dark);
  border: 1px solid var(--brand-teal-dark);
}

.ba-card {
  position: relative;
  background-color: var(--neutral-white);
}

.ba-card img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.ba-label {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: var(--brand-teal);
  color: var(--neutral-white);
  padding: 5px 15px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* HEDGE TYPES (Horizontal Editorial) */
.hedge-types-section {
  padding: 100px 5%;
  background-color: var(--neutral-white);
}

.hedge-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.hedge-type-card {
  border: 1px solid var(--brand-teal);
  padding: 15px;
  background-color: var(--neutral-white);
  border-bottom: 3px solid var(--brand-teal);
  position: relative;
}

.hedge-type-card::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 15px;
  height: 15px;
  border-top: 2px solid var(--brand-teal);
  border-right: 2px solid var(--brand-teal);
}

.hedge-type-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin-bottom: 20px;
}

.hedge-type-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.hedge-type-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* THE PROCESS */
.process-section {
  padding: 100px 5%;
  background-color: var(--neutral-light);
  border-top: 1px solid var(--brand-teal);
}

.process-container {
  max-width: 800px;
  margin: 50px auto 0;
}

.process-step {
  position: relative;
  padding-left: 60px;
  padding-bottom: 50px;
}

.process-step:last-child {
  padding-bottom: 0;
}

.process-step::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: var(--brand-teal);
  color: var(--neutral-white);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: bold;
  z-index: 2;
}

.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19.5px;
  top: 40px;
  bottom: -10px;
  width: 2px;
  background-color: rgba(23, 107, 115, 0.3); /* subtle teal */
  z-index: 1;
}

.process-step h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  padding-top: 5px;
}

/* PROJECTS MASONRY */
.projects-section {
  padding: 100px 5%;
  background-color: var(--neutral-white);
}

.masonry-grid {
  column-count: 3;
  column-gap: 20px;
  margin-top: 50px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 20px;
  position: relative;
  border: 1px solid var(--brand-teal);
  padding: 10px;
  background: var(--neutral-light);
}

.masonry-item img {
  width: 100%;
  height: auto;
}

.masonry-caption {
  padding: 15px 5px 5px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--brand-teal);
}

/* ABOUT SPLIT */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--brand-teal);
  border-bottom: 1px solid var(--brand-teal);
  background-color: var(--neutral-white);
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 500px;
}

.about-content {
  padding: 100px 10%;
  background-color: var(--neutral-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-content h2 {
  font-size: 2.5rem;
  margin: 15px 0 25px;
}

/* LOCATION MINIMAL */
.location-section {
  padding: 80px 5%;
  text-align: center;
  background-color: var(--neutral-light);
}

.location-section h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.location-marker {
  display: inline-block;
  margin-top: 20px;
  font-weight: bold;
  color: var(--brand-teal);
  border: 1px solid var(--brand-teal);
  padding: 10px 20px;
  border-radius: 0;
}

/* CONTACT CTA */
.contact-cta {
  background-color: var(--brand-teal);
  color: var(--neutral-white);
  text-align: center;
  padding: 100px 5%;
}

.contact-cta h2 {
  color: var(--neutral-white);
  font-size: 3rem;
  margin-bottom: 20px;
}

.contact-cta p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: var(--neutral-white);
}

.contact-cta .btn-primary {
  background-color: var(--neutral-white);
  color: var(--brand-teal) !important;
  border-color: var(--neutral-white);
  font-size: 1rem;
  padding: 15px 35px;
}

.contact-cta .btn-primary:hover {
  background-color: transparent;
  color: var(--neutral-white) !important;
  border-color: var(--neutral-white);
}

/* CONTACT PAGE SPECIFIC */
.contact-page-wrapper {
  padding: 180px 5% 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  background-color: var(--neutral-white);
}

.contact-form {
  background-color: var(--neutral-white);
  padding: 40px;
  border: 1px solid var(--brand-teal);
  border-top: 4px solid var(--brand-teal);
  position: relative;
}

.contact-form::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--brand-teal);
  z-index: -1;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--brand-teal);
}

.form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(23, 107, 115, 0.3); /* Soft teal */
  background-color: var(--neutral-white);
  font-family: var(--font-primary);
  color: var(--text-dark);
}

.form-control:focus {
  outline: none;
  border-color: var(--brand-teal);
}

textarea.form-control {
  height: 120px;
  resize: vertical;
}

/* PAGE HERO (Services, Legal, etc) */
.page-hero {
  padding: 180px 5% 80px;
  background-color: var(--neutral-light);
  border-bottom: 1px solid var(--brand-teal);
}

.page-hero h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.page-hero p {
  font-size: 1.2rem;
  max-width: 700px;
  color: var(--text-muted);
}

.service-detail-content {
  padding: 80px 5%;
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--neutral-white);
}

.service-detail-content h2 {
  margin: 40px 0 20px;
  font-size: 2rem;
}

.service-detail-content p {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.service-detail-content ul {
  margin: 20px 0 30px 40px;
  font-size: 1.1rem;
}

.service-detail-content li {
  margin-bottom: 10px;
  color: var(--text-muted);
}

.service-hero-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid var(--brand-teal);
  margin-bottom: 40px;
}

/* SPLIT FOOTER */
.split-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--brand-teal);
  background-color: var(--neutral-white);
}

.footer-left {
  padding: 80px 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-brand {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--brand-teal);
}

.footer-left p {
  color: var(--text-muted);
}

.footer-right {
  padding: 80px 10%;
  border-left: 1px solid var(--brand-teal);
  display: flex;
  justify-content: space-between;
}

.footer-nav ul {
  list-style: none;
}

.footer-nav li {
  margin-bottom: 15px;
}

.footer-nav a {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--brand-teal);
}

.footer-nav a:hover {
  color: var(--brand-teal-dark);
}

.footer-legal a {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.footer-bottom {
  grid-column: 1 / -1;
  background-color: var(--neutral-light);
  border-top: 1px solid rgba(23, 107, 115, 0.2);
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
  font-size: 0.85rem;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
  .hero-section {
    grid-template-columns: 1fr;
    padding-top: 140px;
  }
  .hero-info-block {
    left: 20px;
  }
  .editorial-item {
    grid-template-columns: 80px 1fr;
    gap: 20px;
  }
  .item-link {
    grid-column: 2;
    text-align: left;
    margin-top: 10px;
  }
  .hedge-types-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .masonry-grid {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .site-header {
    padding: 15px 20px;
  }
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background-color: var(--neutral-white);
    flex-direction: column;
    padding: 100px 40px;
    border-left: 1px solid var(--brand-teal);
    transition: 0.3s ease;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  }
  .main-nav.active {
    right: 0;
  }
  .nav-links {
    flex-direction: column;
    width: 100%;
  }
  .mobile-toggle {
    display: flex;
    z-index: 1001;
  }
  .mobile-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  .intro-section, .about-section, .split-footer, .contact-page-wrapper {
    grid-template-columns: 1fr;
  }
  .footer-right {
    border-left: none;
    border-top: 1px solid var(--brand-teal);
  }
  .ba-container {
    grid-template-columns: 1fr;
  }
  .about-content {
    padding: 60px 5%;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2.8rem;
  }
  .hedge-types-grid {
    grid-template-columns: 1fr;
  }
  .masonry-grid {
    column-count: 1;
  }
  .process-step {
    padding-left: 45px;
  }
  .process-step::before {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
  .process-step:not(:last-child)::after {
    left: 14.5px;
  }
  .hero-image-wrapper img {
    height: 400px;
  }
}
/* ENDFILE */

<!-- FILE: overgrown-hedge-reduction.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overgrown Hedge Reduction | gazettetonictrail</title>
    <link rel="stylesheet" href="style.css?v=b3081e97">
</head>
<body>
    <header class="site-header">
        <a href="./" class="logo-container">
            <span class="brand-name">gazettetonictrail</span>
            <span class="brand-label">Hedge Trimming · Dortmund</span>
        </a>
        <button class="mobile-toggle" aria-label="Toggle Menu">
            <span></span><span></span><span></span>
        </button>
        <nav class="main-nav">
            <ul class="nav-links">
                <li><a href="services.html">Services</a></li>
                <li><a href="regular-hedge-trimming.html">Hedge Care</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
            <a href="contact.html" class="header-cta">Request a Quote →</a>
        </nav>
    </header>

    <div class="page-hero">
        <span class="hero-label">SERVICE DETAIL</span>
        <h1>Overgrown Hedge Reduction</h1>
        <p>Heavy reduction pruning for excessively tall or wide hedges.</p>
    </div>

    <div class="service-detail-content">
        <img src="images/large-mature-overgrown-hedge-being-prepared-for-reduction.png" alt="Large mature overgrown hedge being prepared for reduction" class="service-hero-img">
        
        <h2>Service Overview</h2>
        <p>Hedges can easily get out of control if neglected for a few seasons. Our reduction service safely lowers the height and reduces the width of overgrown hedges, bringing them back to a manageable size without killing the plant.</p>

        <h2>Common Situations</h2>
        <ul>
            <li>Hedges blocking out natural light to windows or gardens.</li>
            <li>Hedges encroaching too far onto public pavements.</li>
            <li>Moving into a new property with unmanaged borders.</li>
            <li>Making future maintenance easier and safer.</li>
        </ul>

        <h2>What The Service Involves</h2>
        <p>This is intensive work involving heavy-duty petrol or professional battery cutters and sometimes chainsaws for thick internal branches. We perform "hard pruning", which may temporarily leave the hedge looking bare, but it is necessary for it to regenerate a fresh, dense outer layer of green.</p>

        <h2>Our Trimming Approach</h2>
        <p>We strictly adhere to horticultural best practices. We advise on the best time of year to reduce specific species (such as avoiding bird nesting season and extreme weather) to ensure the survival and rapid recovery of your hedge.</p>
        
        <br>
        <a href="boundary-hedge-maintenance.html" class="btn-text">Next: Boundary Hedge Maintenance →</a>
    </div>

    <section class="contact-cta">
        <h2>Ready for a Cleaner Hedge?</h2>
        <p>Request a quote for hedge reduction.</p>
        <a href="contact.html" class="btn-primary">Request a Quote →</a>
    </section>

    <footer class="split-footer">
        <div class="footer-left">
            <div>
                <div class="footer-brand">gazettetonictrail</div>
                <p>Professional Hedge Trimming</p>
            </div>
            <div>
                <p style="color: var(--text-muted);">Dortmund, Germany</p>
            </div>
        </div>
        <div class="footer-right">
            <div class="footer-nav">
                <ul>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="regular-hedge-trimming.html">Hedge Care</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div class="footer-nav footer-legal">
                <ul>
                    <li><a href="privacy.html">Privacy Policy</a></li>
                    <li><a href="terms.html">Terms & Conditions</a></li>
                    <li><a href="cookies.html">Cookies</a></li>
                    <li><a href="accessibility.html">Accessibility</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            © 2026 gazettetonictrail. All rights reserved.
        </div>
    </footer>
    <script src="script.js?v=3db361b3"></script>
</body>
</html>