/* ============================================================
   MERLEX HOMES — Main Stylesheet
   merlexhomes.com
   
   HOW THIS FILE IS ORGANIZED:
   1.  CSS Custom Properties (design tokens / variables)
   2.  CSS Reset (normalize browser defaults)
   3.  Typography (shared text classes)
   4.  Navigation (top bar + dropdown + mobile)
   5.  Buttons & Interactive Elements
   6.  Page Hero (inner pages with no photo)
   7.  Home Hero (full-screen photo hero on index)
   8.  Index Page Sections (who, featured, testimonials, cta)
   9.  About Page
   10. Process Page
   11. Contact Page
   12. Footer (4-column layout)
   13. Utility Classes (fade-up animation)
   14. Responsive (tablet 768px, mobile 540px)
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   
   Think of these as named variables for your brand's colors,
   fonts, and spacing. Change a value here once and it updates
   everywhere on the site.
   ============================================================ */
:root {
  /* -- Color Palette -- */
  --black:   #1A1A16;   /* near-black for body text */
  --dark:    #2E2E28;   /* dark gray for strong text */
  --mid:     #5C5C55;   /* medium gray for body paragraphs */
  --muted:   #9A9A90;   /* light gray for labels, captions */
  --rule:    #E8E4DC;   /* very light warm gray for dividers */
  --warm:    #F7F4EE;   /* off-white warm background */
  --warmer:  #F0EBE1;   /* slightly warmer off-white */
  --white:   #FFFFFF;   /* pure white */
  --green:   #0E2318;   /* Merlex brand dark green (primary) */
  --gold:    #A8956A;   /* Merlex brand gold (accent) */

  /* -- Typography -- */
  --display: 'Raleway', sans-serif;                    /* headlines, titles */
  --serif:   'Playfair Display', Georgia, serif;       /* editorial, subheadings */
  --sans:    'Inter', system-ui, sans-serif;           /* body text, UI labels */

  /* -- Spacing -- */
  --pad:    64px;   /* horizontal page padding (sides) */
  --nav-h:  72px;   /* height of the fixed navigation bar */
}


/* ============================================================
   2. CSS RESET
   
   Browsers have different default styles. This reset removes
   them so every browser starts from the same baseline.
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* padding/border included in element width — more predictable */
}

html {
  scroll-behavior: smooth; /* smooth scrolling when clicking anchor links */
}

/* Page entrance animation — fades the page in on load */
body {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  color: var(--green);
  background: var(--white);
  overflow-x: hidden;              /* prevent horizontal scroll on mobile */
  -webkit-font-smoothing: antialiased; /* sharper text rendering on Mac/iOS */
  animation: pageFadeIn 0.6s ease forwards; /* smooth page entrance */
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* All images fill their container by default */
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to fill without distortion */
}

/* Remove underlines from all links by default */
a {
  text-decoration: none;
  color: inherit;
}


/* ============================================================
   3. SHARED TYPOGRAPHY
   
   Reusable text style classes used across all pages.
   ============================================================ */

/* Large display headlines (H1 equivalent) */
.h1 {
  font-family: var(--display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.06;
  color: var(--green);
}

/* Section headings (H2 equivalent) — clamp() scales with viewport */
.h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px); /* min: 28px, preferred: 3% of viewport, max: 42px */
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--green);
}

/* Sub-section headings (H3 equivalent) */
.h3 {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--green);
}

/* Small eyebrow label above headings (e.g., "Who We Are") */
.label {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Text link with an animated underline border */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: gap 0.22s, border-color 0.22s;
}
.link-arrow:hover {
  gap: 14px;                   /* arrow slides right on hover */
  border-color: var(--green);  /* border darkens on hover */
}

/* Gold-rule decorative line before key section headings */
.who-left h2::before,
.featured-hdr h2::before,
.testi-hdr h2::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 20px;
}

/* Horizontal rule divider */
.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* Breadcrumb navigation (e.g., "Home / About") */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.breadcrumb a { color: var(--muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--green); }


/* ============================================================
   4. NAVIGATION
   
   The fixed top navigation bar. It uses CSS Grid with three
   columns: logo | links | social icons
   ============================================================ */

/* The nav bar itself — fixed to top of screen at all times */
#nav {
  position: fixed;
  inset: 0 0 auto 0;   /* stretches full width, sticks to top */
  height: var(--nav-h);
  z-index: 500;         /* stays above all page content */
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.4s;
  display: flex;
  align-items: center;
}

/* Subtle shadow + glass blur when user has scrolled down */
#nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* Safari prefix required */
  box-shadow: 0 1px 0 var(--rule);
}

/* Three-column grid: logo | links | social */
.nav-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad);
  gap: 24px;
}

/* Logo image sizing */
.nav-logo img  { height: 56px; width: auto; }
.footer-logo img,
.footer-logo-link img { height: 56px; width: auto; }

/* Desktop navigation links */
.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}
.nav-links a {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color 0.2s;
  position: relative;
  padding-bottom: 3px;
}

/* Animated gold underline on hover/active */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);        /* hidden by default (zero width) */
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover,
.nav-links a.active           { color: var(--green); }
.nav-links a:hover::after,
.nav-links a.active::after    { transform: scaleX(1); } /* expands on hover */

/* ── OUR WORK DROPDOWN ── */
.nav-dropdown { position: relative; }

/* Animated caret (down arrow) next to "Our Work" */
.nav-caret {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.6;
  display: inline-block;
  transition: transform 0.25s;
}
.nav-dropdown:hover .nav-caret { transform: rotate(180deg); } /* flips upward */

/* Invisible bridge between link and menu prevents gap from closing menu */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px; /* covers the 16px margin gap below link */
}

/* Dropdown panel */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px); /* centered, slightly raised */
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--green); /* green top accent */
  list-style: none;
  min-width: 210px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  margin-top: 16px;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0); /* slides down into view */
}

/* Individual dropdown menu items */
.nav-dropdown-link {
  display: block;
  padding: 11px 24px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-dropdown-link:hover { color: var(--green); background: var(--warm); }

/* Social icons on the right side of nav */
.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: end; /* pushes to far right in grid */
}
.nav-social {
  color: var(--muted);
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.nav-social:hover { color: var(--green); }
.nav-social svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--black);
  transition: all 0.3s;
}

/* Mobile navigation slide-down menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  inset-inline: 0; /* full width */
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  flex-direction: column;
  z-index: 499;
  padding: 20px var(--pad) 28px;
}
.nav-mobile a {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s;
}
.nav-mobile a:hover { color: var(--green); }
.nav-mobile.open  { display: flex; } /* toggled by JS */


/* ============================================================
   5. BUTTONS & INTERACTIVE ELEMENTS
   ============================================================ */

/* Primary filled button (dark green background) */
.btn-fill {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--green);
  padding: 15px 44px;
  border: 1px solid var(--green);
  transition: background 0.22s, color 0.22s;
  cursor: pointer;
}
.btn-fill:hover {
  background: transparent;
  color: var(--green);
}

/* Hero-specific button overrides — both buttons appear white on dark hero photo */
.hero .btn-fill {
  background: var(--white);
  color: var(--green);
  border-color: var(--white);
  padding: 15px 0;
  width: 200px;
  text-align: center;
}
.hero .btn-fill:hover {
  background: transparent;
  color: var(--white);
}
.hero .btn-outline {
  background: var(--white);
  color: var(--green);
  border-color: var(--white);
  padding: 15px 0;
  width: 200px;
  text-align: center;
}
.hero .btn-outline:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

/* Outline/ghost button (transparent, white border) — used beside btn-fill on hero */
.btn-outline {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  padding: 15px 0;
  width: 200px;
  text-align: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.22s, color 0.22s;
}
.btn-outline:hover { border-color: var(--white); }


/* ============================================================
   6. PAGE HERO (inner pages — no photo background)
   
   Used on About, Process, Contact, etc. — a plain white
   section with page title and breadcrumb.
   ============================================================ */
.page-hero {
  padding-top: var(--nav-h); /* pushes content below fixed nav */
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}
.page-hero-inner { padding: 72px var(--pad) 64px; }
.page-hero-inner h1 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--green);
}


/* ============================================================
   7. HOME HERO (full-screen photo, index page only)
   ============================================================ */

/* Full-viewport hero section */
.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* content sits at bottom of hero */
  padding-bottom: 96px;
}

/* Image wrapper — slightly oversized (-10% top/bottom) to allow
   parallax scroll without revealing white edges */
.hero-img-wrap {
  position: absolute;
  inset: -10% 0;
  will-change: transform; /* tells browser to GPU-accelerate this element */
}
.hero-img-wrap img {
  height: 120%;
  object-position: center 30%;
}

/* Dark gradient overlay — makes white text readable over the photo */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(10, 18, 12, 0.65) 0%,
    rgba(10, 18, 12, 0.38) 50%,
    rgba(10, 18, 12, 0.08) 100%
  );
}

/* The text content positioned above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad);
  max-width: 660px;
}

/* Small gold-line + location text above the main headline */
.hero-kicker {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-kicker::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}
.hero-kicker span {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
}

/* Main headline */
.hero-headline {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 28px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Subtitle paragraph */
.hero-sub {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.8;
  margin-bottom: 44px;
}

/* CTA buttons row */
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
}

/* Animated "scroll" indicator in bottom-right corner */
.hero-scroll {
  position: absolute;
  bottom: 44px;
  right: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.hero-scroll-label {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  writing-mode: vertical-lr; /* rotates text 90 degrees */
}
.hero-scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

/* Pulsing animation for the scroll indicator line */
@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Hero text entrance animations — staggered fade-up on load */
.hero-kicker,
.hero-headline,
.hero-sub,
.hero-actions {
  opacity: 0;
  transform: translateY(24px);
}
.hero-kicker   { animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
.hero-headline { animation: heroIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards; }
.hero-sub      { animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards; }
.hero-actions  { animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   8. INDEX PAGE SECTIONS
   ============================================================ */

/* ── "Who We Are" section ── */
.who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 128px var(--pad);
  border-bottom: 1px solid var(--rule);
}
.who-left h2  { font-size: clamp(24px, 2.5vw, 36px); margin-bottom: 28px; line-height: 1.25; font-weight: 400; }
.who-right p  { font-family: var(--serif); font-size: 17px; font-weight: 300; color: var(--mid); line-height: 1.85; margin-bottom: 16px; }
.who-right p:last-of-type { margin-bottom: 32px; }

/* ── Stats bar (4 numbered credentials) ── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.stat  { padding: 52px 40px; border-right: 1px solid var(--rule); text-align: center; }
.stat:last-child { border-right: none; }
.stat-n { font-family: var(--serif); font-size: 50px; font-weight: 400; color: var(--green); line-height: 1; margin-bottom: 8px; }
.stat-l { font-size: 12px; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ── Featured Projects ── */
.featured     { padding: 112px var(--pad) 128px; border-bottom: 1px solid var(--rule); background: var(--warm); }
.featured-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 52px; }
.featured-hdr h2 { font-size: clamp(26px, 2.5vw, 36px); font-weight: 400; }
.proj-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.proj-card    { display: block; }
.proj-img     { aspect-ratio: 1/1; overflow: hidden; background: var(--warmer); margin-bottom: 18px; }
.proj-img img { transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); }
.proj-card:hover .proj-img img { transform: scale(1.04); }
.proj-name    { font-family: var(--display); font-size: 19px; font-weight: 300; letter-spacing: 0.03em; color: var(--green); margin-bottom: 6px; }
.proj-row     { display: flex; align-items: center; justify-content: space-between; }
.proj-type    { font-size: 11px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.proj-link    { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color 0.2s; }
.proj-card:hover .proj-link { border-color: var(--green); }

/* ── Full-bleed photo band ── */
.full-bleed     { height: 54vh; min-height: 340px; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.full-bleed img { height: 100%; filter: brightness(0.92); }

/* ── Testimonials ── */
.testi       { padding: 128px var(--pad); border-bottom: 1px solid var(--rule); background: var(--warm); }
.testi-hdr   { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 56px; }
.testi-hdr h2 { font-size: clamp(24px, 2.2vw, 32px); }
.testi-controls { display: flex; gap: 8px; }
.testi-btn   {
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule);
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--mid);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-family: var(--sans);
}
.testi-btn:hover { border-color: var(--green); background: var(--black); color: var(--white); }
.testi-slide { display: none; }
.testi-slide.active { display: block; }
.testi-quote { font-family: var(--sans); font-size: clamp(16px, 1.6vw, 22px); font-weight: 300; line-height: 1.8; color: var(--green); max-width: 820px; margin-bottom: 36px; }
.testi-attr  { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.testi-attr strong { color: var(--dark); font-weight: 500; }
.testi-dots  { display: flex; gap: 6px; margin-top: 40px; }
.testi-dot   { width: 20px; height: 1px; background: var(--rule); border: none; cursor: pointer; padding: 0; transition: background 0.3s; }
.testi-dot.active { background: var(--black); }

/* ── CTA Strip (call-to-action band) ── */
.cta-strip    { padding: 112px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 48px; border-bottom: 1px solid var(--rule); }
.cta-strip h2 { font-size: clamp(28px, 3vw, 46px); font-weight: 400; max-width: 560px; }


/* ============================================================
   9. ABOUT PAGE
   ============================================================ */

/* Intro: text left / photo right */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
.about-intro-text { padding: 80px var(--pad); }
.about-intro-text .label { margin-bottom: 20px; }
.about-intro-text h2 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 24px; font-weight: 400; }
.about-intro-text p  { font-family: var(--serif); font-size: 17px; font-weight: 300; color: var(--mid); line-height: 1.85; margin-bottom: 16px; }
.about-intro-img { overflow: hidden; position: relative; min-height: 100%; }
.about-intro-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Three values columns */
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.about-value  { padding: 60px 48px; border-right: 1px solid var(--rule); }
.about-value:last-child { border-right: none; }
.about-value-n { font-family: var(--serif); font-size: 16px; color: var(--muted); margin-bottom: 16px; }
.about-value h3 { font-size: 22px; margin-bottom: 14px; }
.about-value p  { font-size: 14px; color: var(--mid); line-height: 1.78; }

/* Team grid */
.team-section { padding: 80px var(--pad); border-bottom: 1px solid var(--rule); background: var(--warm); }
.team-section .label { margin-bottom: 16px; }
.team-section h2 { font-size: clamp(26px, 2.5vw, 36px); margin-bottom: 56px; font-weight: 400; }
.team-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.team-photo  { aspect-ratio: 3/4; overflow: hidden; background: var(--warmer); margin-bottom: 16px; }
.team-photo img { filter: grayscale(10%); transition: transform 0.6s ease, filter 0.4s; }
.team-card:hover .team-photo img { transform: scale(1.03); filter: grayscale(0%); }
.team-name   { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--green); margin-bottom: 4px; }
.team-role   { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* Credential numbers bar */
.creds { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.cred  { padding: 44px 40px; border-right: 1px solid var(--rule); text-align: center; }
.cred:last-child { border-right: none; }
.cred-n { font-family: var(--serif); font-size: 38px; font-weight: 400; color: var(--green); margin-bottom: 8px; }
.cred-l { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }


/* ============================================================
   10. PROCESS PAGE
   ============================================================ */

.process-intro { padding: 64px var(--pad); border-bottom: 1px solid var(--rule); background: var(--warm); }
.process-intro p { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); font-weight: 400; line-height: 1.7; color: var(--mid); max-width: 860px; }

/* Two-column step grid */
.process-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
.process-item { padding: 56px 64px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.process-item:nth-child(even) { border-right: none; }
.process-item:nth-last-child(-n+2) { border-bottom: none; }
.process-n     { font-family: var(--serif); font-size: 64px; font-weight: 300; color: var(--green); line-height: 1; margin-bottom: 16px; }
.process-phase { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.process-item h2 { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 24px); font-weight: 400; text-transform: none; margin-bottom: 18px; color: var(--green); }
.process-item p  { font-size: 15px; font-weight: 300; color: var(--mid); line-height: 1.85; margin-bottom: 14px; }
.process-img-break { height: 40vh; min-height: 260px; overflow: hidden; border-bottom: 1px solid var(--rule); }
.process-img-break img { height: 100%; filter: brightness(0.9); }

/* Timeline duration cards */
.timelines { display: flex; justify-content: center; gap: 48px; padding: 80px var(--pad); border-bottom: 1px solid var(--rule); flex-wrap: wrap; background: var(--white); }
.timeline-cell {
  padding: 52px 56px;
  background: var(--warm);
  text-align: center;
  cursor: default;
  transition: background 1.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 280px;
  flex: 0 0 280px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.timeline-cell:hover { background: var(--green); border-color: var(--green); }
.timeline-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; }
.timeline-cell:hover .timeline-label { color: rgba(255, 255, 255, 0.6); }
.timeline-dur   { font-family: var(--serif); font-size: 34px; font-weight: 400; color: var(--green); margin-bottom: 6px; transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.timeline-cell:hover .timeline-dur   { color: var(--white); }
.timeline-desc  { font-size: 13px; color: var(--muted); transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.timeline-cell:hover .timeline-desc  { color: rgba(255, 255, 255, 0.7); }

/* FAQ accordion (on process page) */
.faq-section { padding: 96px var(--pad); border-bottom: 1px solid var(--rule); background: var(--green); }
.faq-header  { margin-bottom: 56px; }
.faq-header .label { margin-bottom: 12px; color: rgba(255, 255, 255, 0.45); }
.faq-header h2 { max-width: 480px; color: var(--white); }
.faq-list { max-width: 860px; }
.faq-item { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s;
}
.faq-q:hover { color: var(--white); }
.faq-icon { font-size: 20px; font-weight: 200; flex-shrink: 0; transition: transform 0.4s ease; color: rgba(255, 255, 255, 0.5); }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--white); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p { font-family: var(--sans); font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.65); line-height: 1.85; padding-bottom: 28px; }


/* ============================================================
   11. CONTACT PAGE
   ============================================================ */

/* Two-column layout: info left, form right */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }

/* Left column — dark green brand panel */
.contact-left { padding: 72px var(--pad) 72px 64px; border-right: 1px solid var(--rule); background: var(--green); }
.contact-left h2     { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 34px); font-weight: 400; margin-bottom: 20px; color: var(--white); }
.contact-left > p    { font-family: var(--serif); font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.72); line-height: 1.85; margin-bottom: 44px; }
.contact-details     { display: flex; flex-direction: column; gap: 24px; margin-bottom: 44px; }
.cd-label { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 5px; }
.cd-val   { font-size: 16px; font-weight: 300; color: var(--white); line-height: 1.5; }
.cd-val a { color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.25); transition: border-color 0.2s; }
.cd-val a:hover { border-color: var(--white); }
.contact-quote { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 28px; }
.contact-quote blockquote { font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.65); line-height: 1.8; margin-bottom: 12px; }
.contact-quote cite  { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); font-style: normal; }

/* Right column — form */
.contact-right { padding: 72px 64px 72px var(--pad); }

/* ── Form Styles ── */
.contact-form { display: flex; flex-direction: column; }
.form-field   {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--green);
  padding: 18px 0 14px;
  transition: border-color 0.2s;
}
/* Thicker underline when field is focused (active) */
.form-field:focus-within { border-bottom-width: 2px; }
.form-field label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}
/* Required field asterisk — shown in gold */
.form-field label .req {
  color: var(--gold);
  margin-left: 3px;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}
/* Remove browser default styling from inputs */
.form-field input,
.form-field select,
.form-field textarea {
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--green);
  outline: none;
  -webkit-appearance: none; /* removes iOS default styling */
  padding: 0;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(14, 35, 24, 0.3); }
.form-field textarea { resize: none; min-height: 72px; }
.form-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form-submit  { margin-top: 36px; }

/* Success message shown after submission */
.form-success {
  display: none;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.form-success p { font-family: var(--serif); font-size: 18px; color: var(--mid); }

/* Service areas grid (on contact page) */
.areas-section { padding: 64px var(--pad); border-top: 1px solid var(--rule); background: var(--warm); }
.areas-section .label { margin-bottom: 12px; font-size: 14px; letter-spacing: 0.18em; }
.areas-section h2 { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); margin-bottom: 40px; font-weight: 400; }
.areas-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.area-cell    { padding: 32px 28px; background: var(--warm); border: 1px solid var(--rule); border-radius: 4px; transition: background 1.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 1.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: default; }
.area-cell:hover { background: var(--green); border-color: var(--green); }
.area-city    { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--green); margin-bottom: 4px; transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.area-cell:hover .area-city   { color: var(--white); }
.area-county  { font-size: 10px; letter-spacing: 0.1em; color: var(--muted); transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.area-cell:hover .area-county { color: rgba(255, 255, 255, 0.6); }


/* ============================================================
   12. FOOTER (4-column layout)
   ============================================================ */

/* Outer footer wrapper — no default padding, children control their own */
footer { background: var(--white); border-top: 1px solid var(--rule); padding: 0; }
.footer-new { width: 100%; }

/* 4-column grid: logo | links | contact | follow us */
.footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 64px var(--pad) 56px;
  border-bottom: 1px solid var(--rule);
}
.footer-col            { padding-right: 48px; }
.footer-col:last-child { padding-right: 0; }
.footer-col-logo       { display: flex; flex-direction: column; gap: 16px; }
.footer-logo-link      { display: inline-block; }

/* Section label above each footer column */
.footer-col-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

/* Links column */
.footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col-links a { font-size: 13px; font-weight: 300; color: var(--mid); letter-spacing: 0.04em; transition: color 0.2s; }
.footer-col-links a:hover { color: var(--green); }

/* Contact column */
.footer-contact-items { display: flex; flex-direction: column; gap: 16px; }
.footer-contact-row   { display: flex; flex-direction: column; gap: 3px; }
.footer-contact-key   { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.footer-contact-val   { font-size: 13px; font-weight: 300; color: var(--mid); letter-spacing: 0.02em; line-height: 1.5; transition: color 0.2s; }
a.footer-contact-val:hover { color: var(--green); }

/* Social links column */
.footer-socials-col   { display: flex; flex-direction: column; gap: 16px; }
.footer-social-item   { display: flex; align-items: center; gap: 12px; color: var(--mid); transition: color 0.2s; }
.footer-social-item:hover { color: var(--green); }
.footer-social-icon   { display: flex; align-items: center; }
.footer-social-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer-social-name   { font-size: 13px; font-weight: 300; letter-spacing: 0.04em; }

/* Bottom bar: copyright + privacy policy */
.footer-bottom  { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad); gap: 24px; }
.footer-copy    { font-size: 11px; font-weight: 300; letter-spacing: 0.04em; color: var(--muted); }
.footer-privacy { font-size: 11px; font-weight: 300; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.footer-privacy:hover { color: var(--green); border-color: var(--green); }


/* ============================================================
   13. UTILITY CLASSES
   ============================================================ */

/* Fade-up scroll animation
   Elements with this class start invisible. When they scroll
   into view, JavaScript adds the .visible class which triggers
   the CSS transition to fade and slide them in.
   ============================================================ */
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }


/* ============================================================
   14. RESPONSIVE BREAKPOINTS
   
   Mobile-first approach: desktop styles above, then we
   override for smaller screens below.
   ============================================================ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root { --pad: 40px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }

  /* Navigation — collapse to hamburger before items wrap */
  .nav-links     { display: none; }
  .nav-right     { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner     { grid-template-columns: 1fr auto; }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  :root { --pad: 24px; }

  /* Navigation already collapsed at 1024px — no repeat needed */

  /* Hero — headline scaled down so long words never clip on small screens */
  .hero-headline { font-size: 38px; }

  /* Sections: single column on mobile */
  .who, .about-intro { grid-template-columns: 1fr; }
  .about-intro-img   { height: 50vw; }

  /* Stats/creds: 2 columns instead of 4 */
  .stats, .creds { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2), .cred:nth-child(2) { border-right: none; }
  .stat:nth-child(3), .cred:nth-child(3) { border-top: 1px solid var(--rule); }

  .proj-grid { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .about-value  { border-right: none; border-bottom: 1px solid var(--rule); }
  .team-grid  { grid-template-columns: 1fr 1fr; }
  .cta-strip  { flex-direction: column; align-items: flex-start; gap: 28px; }
  .featured-hdr, .testi-hdr { flex-direction: column; gap: 20px; align-items: flex-start; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-left   { border-right: none; border-bottom: 1px solid var(--rule); padding: 56px 24px; }
  .contact-right  { padding: 56px 24px; }
  .areas-grid { grid-template-columns: 1fr 1fr; }
  .form-row   { grid-template-columns: 1fr; gap: 0; }

  /* Process */
  .process-grid { grid-template-columns: 1fr; }  /* collapse 2-col to 1-col */
  .process-item { border-right: none; padding: 48px 24px; }
  .process-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .timelines { gap: 20px; }

  /* Manifesto section — disable nowrap spans on mobile so text wraps naturally */
  .lp-manifesto          { padding: 56px var(--pad) 64px; }
  .lp-manifesto-rule     { margin-bottom: 24px; }
  .lp-manifesto-line     { font-size: 17px; margin-bottom: 18px; line-height: 1.7; }
  .lp-manifesto-line span[style*="white-space"] { white-space: normal !important; }
  .lp-manifesto-line.closing { font-size: 15px; margin-bottom: 28px; }
  .lp-manifesto-vert     { height: 18px; margin: 0 auto 18px; }
  .lp-manifesto-btn      { padding: 14px 32px; font-size: 11px; }

  /* Thank You page */
  .ty-section { padding: 56px var(--pad); }
  .ty-next-links { flex-direction: column; gap: 20px; }
  .ty-hero { height: 50vh; }

  /* Footer: 2-column grid on tablet */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 0; padding: 48px var(--pad) 40px; }
  .footer-col { padding-right: 24px; }
  .footer-col-logo { grid-column: span 2; flex-direction: row; align-items: center; gap: 20px; padding-bottom: 0; }
}

/* ── Small mobile (≤ 540px) ── */
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; padding: 40px var(--pad) 32px; }
  .footer-col-logo { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* ── HERO FIT ON PHONES ──
     Goal: keep the exact same layout/placement as desktop (eyebrow on one
     line, headline in place, both CTA buttons side-by-side) but scale the
     type/padding down so nothing bleeds past the right edge on narrow phones.
     Sizing-only; no elements are moved, stacked, or re-flowed. */

  /* Root cause fix: the hero text container had max-width:660px but no width
     cap, so on a narrow phone it stayed wider than the screen and pushed its
     children (headline, eyebrow, 2nd button) off the right edge. Cap it to
     the full available width so everything inside measures against the phone. */
  .hero-content { width: 100%; max-width: 100%; box-sizing: border-box; }

  /* Eyebrow location line: smaller text + tighter tracking so the full
     "… NORTHERN VIRGINIA" stays on its single line. Shrink the leading
     rule and gap slightly to buy back horizontal space. */
  .hero-kicker        { gap: 10px; margin-bottom: 18px; }
  .hero-kicker::before{ width: 24px; }
  .hero-kicker span   { font-size: 7px; letter-spacing: 0.18em; }

  /* Headline: step down so long words ("THE") can't clip at the edge.
     Tighter letter-spacing buys a little extra width without reflowing. */
  .hero-headline { font-size: 30px; letter-spacing: 0.01em; margin-bottom: 22px; }

  /* Subtitle: nudge down to match the tighter hero. */
  .hero-sub { font-size: 16px; line-height: 1.7; margin-bottom: 32px; }

  /* CTA buttons: stay side-by-side (no wrap/stack). Let the two buttons
     share the available row width equally so both fit within the screen
     padding; center the label in each. */
  .hero-actions { gap: 10px; width: 100%; }
  .hero-actions .btn-fill,
  .hero-actions .btn-outline { flex: 1 1 0; min-width: 0; text-align: center; }
  .hero .btn-fill,
  .hero .btn-outline { padding: 14px 12px; font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; }
}


/* ============================================================
   THANK YOU PAGE
   ============================================================ */

/* Full-height hero with photo */
.ty-hero {
  position: relative;
  height: 62vh;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
}
.ty-hero-img { position: absolute; inset: 0; }
.ty-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.ty-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(10,18,12,0.65) 0%, rgba(10,18,12,0.38) 50%, rgba(10,18,12,0.08) 100%);
}
.ty-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad);
  max-width: 680px;
}
.ty-hero-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.ty-hero-kicker::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
}
.ty-hero-kicker span {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

/* Confirmation text section */
.ty-section {
  padding: 80px var(--pad);
  border-bottom: 1px solid var(--rule);
  max-width: 680px;
}
.ty-rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 36px;
}
.ty-section h1 {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--green);
  line-height: 1.08;
  margin-bottom: 24px;
}
.ty-section p {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 16px;
  max-width: 520px;
}
.ty-next {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}
.ty-next-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  display: block;
}
.ty-next-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

/* ============================================================
   PRIVACY POLICY PAGE
   ============================================================ */
.privacy-body {
  max-width: 760px;
  padding: 64px var(--pad) 120px;
}
.privacy-rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 32px;
}
.privacy-meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 48px;
}
.privacy-body h2 {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green);
  margin: 52px 0 14px;
}
.privacy-body h2:first-of-type { margin-top: 0; }
.privacy-body p {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 16px;
}
.privacy-body ul {
  margin: 0 0 16px 20px;
}
.privacy-body ul li {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 8px;
}
.privacy-body a {
  color: var(--green);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s;
}
.privacy-body a:hover { border-color: var(--green); }


/* ============================================================
   LANDING PAGE — MANIFESTO SECTION (Direction 3)
   Shared across custom-homes, home-additions, luxury-renovations.
   Defined once here so all three pages are always identical.
   ============================================================ */

/* Outer container — centered, max-width, generous vertical padding */
.lp-manifesto {
  padding: 96px var(--pad) 104px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

/* Gold rule at top */
.lp-manifesto-rule {
  width: 28px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 40px;  /* tightened from 52px */
}

/* Each statement line */
.lp-manifesto-line {
  font-family: var(--serif);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--green);
  margin-bottom: 28px;
}

/* Final closing line — smaller, italic, muted */
.lp-manifesto-line.closing {
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--mid);
  font-style: italic;
  margin-bottom: 40px;  /* tightened from 56px */
}

/* Thin vertical divider between lines */
.lp-manifesto-vert {
  width: 1px;
  height: 28px;        /* tightened from 36px */
  background: var(--rule);
  margin: 0 auto 28px; /* tightened from 48px */
}

/* CTA button */
.lp-manifesto-btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--green);
  padding: 15px 44px;
  border: 1px solid var(--green);
  transition: background 0.22s, color 0.22s;
}
.lp-manifesto-btn:hover { background: transparent; color: var(--green); }

/* ── Tablet (≤ 900px): reduce padding, keep nowrap spans working ── */
@media (max-width: 900px) {
  .lp-manifesto       { max-width: 100%; padding: 72px var(--pad) 80px; }
  .lp-manifesto-line  { font-size: clamp(15px, 2vw, 18px); }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .lp-manifesto          { padding: 48px var(--pad) 56px; }
  .lp-manifesto-line     { font-size: 16px; }
}