/* ===== Reset (trimmed) ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
button{font:inherit}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}

/* ===== Theme ===== */
:root{
  --bg: #0b1410;
  --text: #ffffff;
  --muted: rgba(255,255,255,.84);

  /* premium green */
  --accent: #2e7d32;
  --accent-600: #256f2a;

  --header-bg: rgba(8,15,12,.42);
  --header-bg-scrolled: rgba(8,15,12,.78);
  --container: 1200px;

  --font-hero: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

body{font-family:var(--font-body); color:var(--text); background:var(--bg)}
.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}

.sr-only{position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); white-space:nowrap; overflow:hidden}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:1rem; top:1rem; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.35rem; z-index:1000}

/* ===== Header ===== */
.site-header{
  position:fixed; inset-inline:0; inset-block-start:0; z-index:50;
  background:var(--header-bg); backdrop-filter:saturate(120%) blur(8px);
  transition:background .3s ease;
}
.site-header.is-scrolled{ background:var(--header-bg-scrolled) }
.header__inner{display:flex; align-items:center; justify-content:space-between; min-height:76px}

.brand{display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:.2px}
.brand__mark{width:32px; height:32px; color:var(--accent)}
.brand__text{font-size:1.2rem}

.primary-nav{display:flex; align-items:center; gap:2rem}
.primary-nav__list{display:flex; gap:1.25rem}
.primary-nav__list a{opacity:.92; font-weight:600}
.primary-nav__list a:hover{opacity:1}

.header__tools{display:flex; align-items:center; gap:.75rem}
.icon-btn{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); cursor:pointer;
}
.icon-btn svg{width:22px; height:22px}

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.15rem; border-radius:999px;
  border:1px solid transparent; font-weight:800; letter-spacing:.3px; white-space:nowrap;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px) }
.btn svg{width:22px; height:22px}
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(46,125,50,.35) }
.btn--accent:hover{ background:var(--accent-600); box-shadow:0 8px 22px rgba(46,125,50,.45) }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45) }
.btn--ghost:hover{ border-color:#fff }

/* Hamburger (mobile) */
.hamburger{ display:none; width:44px; height:44px; border:1px solid rgba(255,255,255,.25); border-radius:10px; background:rgba(255,255,255,.06); cursor:pointer}
.hamburger__bar,.hamburger__bar::before,.hamburger__bar::after{
  display:block; position:relative; width:22px; height:2px; margin-inline:auto; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease;
}
.hamburger__bar::before{content:""; position:absolute; top:-6px; left:0}
.hamburger__bar::after{content:""; position:absolute; top:6px; left:0}
.hamburger[aria-expanded="true"] .hamburger__bar{background:transparent}
.hamburger[aria-expanded="true"] .hamburger__bar::before{transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] .hamburger__bar::after{transform:translateY(-6px) rotate(-45deg)}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; align-items:center;
  isolation:isolate; color:var(--text); overflow:clip;
}

/* Stronger left green overlay + blend */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(
      110deg,
      rgba(16, 94, 54, .94) 0%,
      rgba(16, 94, 54, .82) 30%,
      rgba(16, 94, 54, .60) 48%,
      rgba(16, 94, 54, .28) 65%,
      rgba(16, 94, 54, 0) 76%
    ),
    linear-gradient(to bottom, rgba(5, 25, 17, .35) 0%, rgba(5, 25, 17, 0) 35%),
    url("assets/hero.png");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply, multiply, normal;
  filter: saturate(110%) contrast(104%);
  z-index: -2;
}

/* Vignette + subtle green glow */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(90vw 70vh at 50% 100%, rgba(0,0,0,.55), transparent 60%),
    radial-gradient(70vh 60vh at 10% 80%, rgba(40,150,85,.35), transparent 60%);
  pointer-events:none;
  z-index: -1;
}

.hero__inner{ padding-block: 22vh 10vh; max-width: 720px }

.hero__kicker{
  margin:0 0 .5rem 0;
  font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
}
.hero__title{
  position:relative;
  display:flex; align-items:baseline; gap:.6rem;
  margin:0 0 .25rem 0;
  font-family: var(--font-hero);
  text-transform: uppercase;
  line-height: .9;
  font-weight: 900;
  letter-spacing:.02em;
  font-size: clamp(2.4rem, 8vw, 6.25rem);
  text-wrap: balance;
}
.accent-bar{
  display:inline-block; width:.35rem; height:1.05em; background: linear-gradient(180deg, #54c06f, #1f5b2d);
  border-radius: 3px;
}

.hero__subtitle{
  margin: .2rem 0 .75rem 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
}

/* === Premium feature line (replaces chips) === */
.hero__features{
  --sep: rgba(255,255,255,.35);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem 1.25rem;
  margin:.5rem 0 1.25rem;
  padding-top:.85rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  font-size:.82rem;
  color:rgba(255,255,255,.9);
  position:relative;
}
.hero__features::before{
  content:"";
  position:absolute; top:0; left:0;
  width:64px; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.hero__features li{
  position:relative; padding-left:0;
}
.hero__features li + li{
  padding-left:1.25rem;
}
.hero__features li + li::before{
  content:""; position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:14px; background:var(--sep);
}

/* Stack cleanly on narrow screens (remove separators) */
@media (max-width:560px){
  .hero__features{flex-direction:column; align-items:flex-start; gap:.35rem; padding-top:.7rem}
  .hero__features li{padding-left:0}
  .hero__features li::before{content:none}
  .hero__features li + li{padding-left:0}
}

.hero__actions{display:flex; flex-wrap:wrap; gap:.75rem}

/* Scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); color:#fff; display:grid; place-items:center; cursor:pointer;
  animation: float 3s ease-in-out infinite;
}
.scroll-cue svg{width:22px; height:22px}
@keyframes float{
  0%,100%{ transform: translate(-50%,0) }
  50%{ transform: translate(-50%,-6px) }
}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .primary-nav{
    position: fixed; inset: 76px 0 auto 0;
    display: grid; grid-template-columns:1fr; gap:1rem; padding:1rem;
    background: rgba(8,15,12,.95);
    backdrop-filter: saturate(120%) blur(8px);
    transform: translateY(-120%); transition: transform .3s ease;
  }
  .primary-nav.is-open{ transform: translateY(0) }
  .primary-nav__list{flex-direction:column}
  .header__tools{justify-self:end}
  .hamburger{display:block}
}

@media (prefers-reduced-motion: reduce){
  .site-header, .primary-nav, .btn, .scroll-cue, .hamburger__bar{ transition:none !important; animation:none !important; }
}
/* ===== Services Section ===== */
.services { padding-block: 4rem 2rem }
.services__head { margin-bottom: 1rem }
.eyebrow{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
  opacity: .85;
  font-size: .9rem;
}
.services__title{
  margin: .25rem 0 0 0;
  font-family: var(--font-hero);
  text-transform: uppercase;
  line-height: .95;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #fff;
}

/* Viewport frame: nearly full height */
.services__viewport{
  position: relative;
  height: 92vh; /* tall cards that fill the viewport feel */
  overflow: hidden;
}

/* Horizontal scroll with snap */
.services__track{
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 1.25rem;
  padding: 1rem clamp(1rem, 6vw, 8rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Card */
.service-card{
  position: relative;
  height: 100%;
  aspect-ratio: 4 / 5;       /* 4:5 portrait */
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transform: translateZ(0);
  will-change: transform;
}
.service-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.02); /* slight overscan for clean edges */
}

/* Bottom gradient + glass sheet for readability */
.service-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* Title & description block */
.service-card__meta{
  position:absolute; left:20px; right:20px; bottom:18px;
  display:flex; flex-direction:column; gap:.25rem;
  color:#fff;
  backdrop-filter: blur(2px);
}
.service-card__title{
  margin:0;
  font-family: var(--font-hero);
  text-transform: uppercase;
  letter-spacing:.02em;
  line-height:.95;
  font-weight:900;
  font-size: clamp(1.25rem, 3vw, 2.1rem);
}
.service-card__desc{
  margin:0;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
}

/* Make the whole card clickable (optional) */
.service-card__link{ position:absolute; inset:0 }

/* Hover/touch feedback */
@media (hover:hover){
  .service-card:hover img{ transform: scale(1.06) }
  .service-card:hover{ box-shadow: 0 24px 70px rgba(0,0,0,.45) }
}

/* Prev/Next buttons */
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:999px;
  display:grid; place-items:center; color:#fff;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px) saturate(120%);
  z-index:2; cursor:pointer;
}
.carousel-btn svg{ width:26px; height:26px }
.carousel-btn--prev{ left: clamp(.5rem, 2vw, 1rem) }
.carousel-btn--next{ right: clamp(.5rem, 2vw, 1rem) }
@media (max-width: 680px){
  .carousel-btn{ display:none } /* thumbs swipe on mobile */
}

/* Reduce height a bit on short screens */
@media (max-height: 640px){
  .services__viewport{ height: 84vh }
}
/* ===== Services (3-up grid, no arrows) ===== */
.services { padding-block: 4rem 4.5rem }

.services__head { margin-bottom: 1rem }
.eyebrow{
  text-transform: uppercase; letter-spacing: .18em; font-weight: 800;
  opacity: .85; font-size: .9rem;
}
.services__title{
  margin: .25rem 0 0; color:#fff;
  font-family: var(--font-hero); text-transform: uppercase;
  line-height:.95; font-weight:900; letter-spacing:.02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}

/* 3 equal columns on large screens, responsive below */
.services__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Card */
.service-card{
  position: relative;
  aspect-ratio: 4 / 5;                  /* keep portrait 4:5 */
  border-radius: 22px;
  overflow: hidden;
  background: #0a0a0a;                  /* fallback while image loads */
  box-shadow: 0 18px 54px rgba(0,0,0,.35);
  transform: translateZ(0);
}

/* Make the whole card clickable and layer content cleanly */
.service-card__link{
  position:absolute; inset:0; display:block; isolation:isolate;
}
.service-card__link img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

/* Bottom gradient for readability */
.service-card__link::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,0) 62%);
}

/* Meta at the bottom */
.service-card__meta{
  position:absolute; z-index:2; left:18px; right:18px; bottom:18px;
  display:flex; flex-direction:column; gap:.25rem; color:#fff;
  backdrop-filter: blur(1.5px);
}
.service-card__title{
  margin:0; color:#fff;
  font-family: var(--font-hero); text-transform: uppercase;
  letter-spacing:.02em; line-height:.95; font-weight:900;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
}
.service-card__desc{
  margin:0; color: rgba(255,255,255,.92);
  font-weight: 600; font-size: clamp(.95rem, 1.4vw, 1.05rem);
}

/* Hover & focus (subtle, premium) */
@media (hover:hover){
  .service-card:hover img{ transform: scale(1.06) }
  .service-card:hover{ box-shadow: 0 22px 64px rgba(0,0,0,.45) }
}
.service-card__link:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 22px;
}

/* Responsive: 2 columns on tablets, 1 column on phones */
@media (max-width: 1000px){
  .services__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px){
  .services__grid{ grid-template-columns: 1fr }
}

/* Reduce effects for users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .service-card__link img{ transition: none !important }
}
/* ===== Services — greener backdrop + under‑card explanations ===== */

/* Richer green backdrop for the section */
.services--green{
  position: relative;
  padding-block: 4rem 4.5rem;
  background:
    linear-gradient(150deg, #0f2a1f 0%, #0a1f16 42%, #08160f 100%);
}
.services--green::before{
  /* soft green glows for depth */
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60vw 40vh at 8% 12%, rgba(46,125,50,.20), transparent 60%),
    radial-gradient(70vw 50vh at 100% 88%, rgba(27,94,32,.16), transparent 62%);
}

/* Head */
.services__head{ margin-bottom: 1.2rem; position:relative; z-index:1 }
.eyebrow{
  text-transform: uppercase; letter-spacing:.18em; font-weight:800;
  opacity:.92; font-size:.9rem; color:#e8ffe9;
}
.services__title{
  margin:.25rem 0 0; color:#fff;
  font-family: var(--font-hero); text-transform: uppercase;
  line-height:.95; font-weight:900; letter-spacing:.02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}

/* 3 columns; each column holds a card and a separate description */
.services__grid{
  position:relative; z-index:1;
  display:grid; gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Column wrapper */
.service-item{
  display:grid; grid-template-rows: auto auto;
  gap:.9rem;
}

/* Card (unchanged core styling from your current setup) */
.service-card{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background:#0a0a0a;
  box-shadow: 0 18px 54px rgba(0,0,0,.35);
  transform: translateZ(0);
}
.service-card__link{
  position:absolute; inset:0; display:block; isolation:isolate;
}
.service-card__link img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.service-card__link::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,0) 62%);
}
.service-card__meta{
  position:absolute; z-index:2; left:18px; right:18px; bottom:18px;
  display:flex; flex-direction:column; gap:.25rem; color:#fff;
  backdrop-filter: blur(1.5px);
}
.service-card__title{
  margin:0; color:#fff;
  font-family: var(--font-hero); text-transform: uppercase;
  letter-spacing:.02em; line-height:.95; font-weight:900;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
}
.service-card__desc{
  margin:0; color: rgba(255,255,255,.92);
  font-weight: 600; font-size: clamp(.95rem, 1.4vw, 1.05rem);
}
@media (hover:hover){
  .service-card:hover img{ transform: scale(1.06) }
  .service-card:hover{ box-shadow: 0 22px 64px rgba(0,0,0,.45) }
}
.service-card__link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px; border-radius:22px;
}

/* Under‑card explanation blocks */
.service-info{
  border-radius: 16px;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(46,125,50,.14), rgba(21,61,41,.10));
  border: 1px solid rgba(84,192,111,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.service-info__eyebrow{
  margin:0 0 .15rem 0;
  text-transform:uppercase; letter-spacing:.16em; font-weight:800;
  color:#c9f2cf; font-size:.8rem; opacity:.95;
}
.service-info__tagline{
  margin:.05rem 0 .35rem 0;
  font-weight:800; letter-spacing:.2px;
  color:#eaffea; font-size: clamp(1rem, 2.2vw, 1.15rem);
}
.service-info__body{
  margin:0 0 .5rem 0; color:rgba(255,255,255,.9);
}
.service-info__list{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem;
  margin:0; padding:0; list-style:none;
}
.service-info__list li{
  position:relative; padding-left:1rem; color:#e6ffe6; font-weight:700; font-size:.95rem;
}
.service-info__list li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:7px; height:7px; border-radius:50%;
  background: linear-gradient(180deg, #54c06f, #1f5b2d);
  box-shadow: 0 0 0 3px rgba(84,192,111,.18);
}

/* Responsive columns */
@media (max-width: 1000px){
  .services__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px){
  .services__grid{ grid-template-columns: 1fr }
}

/* Motion comfort */
@media (prefers-reduced-motion: reduce){
  .service-card__link img{ transition: none !important }
}
/* ===== Projects (inspired by your reference: square image + offset white card) ===== */

.projects{
  background: #f2f5f2; /* light, premium neutral so the white cards pop */
  padding-block: 4rem 4.5rem;
}
.projects__head{ margin-bottom: 1.25rem }
.projects__title{
  margin:.25rem 0 0; color:#0b1410;
  font-family: var(--font-hero);
  text-transform: uppercase; line-height:.95; font-weight:900; letter-spacing:.02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.projects__list{
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

/* Row layout */
.project{
  display: grid;
  grid-template-columns: 1.15fr 1fr; /* image slightly larger like the reference */
  align-items: center;
  gap: clamp(20px, 3.5vw, 44px);
  position: relative;
}

/* Alternate layout on even rows (image right, card left) */
.project:nth-child(even){
  grid-template-columns: 1fr 1.15fr;
}
.project:nth-child(even) .project__media{ order:2 }
.project:nth-child(even) .project__card{ order:1 }

/* Square image frame with soft radius + subtle shadow */
.project__media{
  aspect-ratio: 1 / 1;       /* your 1:1 photos */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  background:#dfe6df;
}
.project__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; transform: scale(1.02);
}

/* Content card (offset so it overlaps the image slightly) */
.project__card{
  background:#ffffff;
  color:#222;
  border-radius: 14px;
  padding: clamp(20px, 2.4vw, 36px);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  position: relative;
  z-index: 1;
}
.project:nth-child(odd)  .project__card{ margin-left: -4% }  /* subtle overlap */
.project:nth-child(even) .project__card{ margin-right: -4% }

.project__title{
  margin:0 0 .5rem;
  font-family: var(--font-hero);
  text-transform: uppercase;
  letter-spacing:.02em;
  line-height:.95;
  font-weight:900;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color:#1a1f1b;
}
.project__desc p{ margin:0 0 1rem 0; color:#333; }
.project__desc p:last-child{ margin-bottom: 1.25rem }

/* CTA (uses your existing .btn styles) */
.project__btn{
  display:inline-flex; align-items:center; gap:.5rem;
}

/* Responsive stack */
@media (max-width: 980px){
  .project{
    grid-template-columns: 1fr;
  }
  .project__card{
    margin: 0; /* remove overlap on mobile */
  }
}

/* Match section head eyebrow to previous style but dark text */
.projects .eyebrow{
  color:#365a36; opacity:.9;
}
/* =======================
   OUR PROCESS (Realscapes)
   ======================= */

.process{
  background: linear-gradient(180deg, #0e1713, #0b1410);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  color: #fff;
}

.process__layout{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* text + 2×2 tiles */
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* Left column */
.process__intro .eyebrow{
  color: #c9f2cf; opacity: .9;
}
.process__title{
  margin: .3rem 0 .6rem;
  font-family: var(--font-hero);
  text-transform: uppercase;
  line-height: .95;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(1.8rem, 4.6vw, 2.8rem);
}
.process__lede{ color: rgba(255,255,255,.92); font-weight: 700; margin: 0 0 .6rem }
.process__body{ color: rgba(255,255,255,.86); margin: 0 0 1.1rem }
.process__cta{ margin-top: .25rem }

/* Right column: 2×2 tiles */
.process__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.2vw, 22px);
}

/* Base tile */
.process-tile{
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 24px);
  min-height: 190px;
  display: grid;
  align-content: start;
  gap: .4rem;
  position: relative;
  isolation: isolate;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

/* Corner variations (echo the reference’s rounded corner detail) */
.tile--curve-tr{ border-top-right-radius: 48px }
.tile--curve-tl{ border-top-left-radius: 48px }
.tile--curve-br{ border-bottom-right-radius: 48px }
.tile--curve-bl{ border-bottom-left-radius: 48px }

/* Filled + outline states (brand greens) */
.tile--filled{
  background: linear-gradient(150deg, #2e7d32 0%, #1f5b2d 100%);
  border: 1px solid rgba(255,255,255,.08);
}
.tile--outline{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.18);
}

/* Icon + text */
.process-tile__icon{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: #baf2c5; /* soft mint on dark */
  margin-bottom: .2rem;
}
.tile--filled .process-tile__icon{ color: #ffffff }

.process-tile__icon svg{ width: 28px; height: 28px }

.process-tile__eyebrow{
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  font-size: .78rem;
  color: rgba(255,255,255,.78);
  margin: 0;
}

.process-tile__title{
  margin: 0;
  font-family: var(--font-hero);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  font-weight: 900;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
}

.process-tile__desc{
  margin: 0;
  color: rgba(255,255,255,.9);
  font-weight: 600;
}

/* Hover polish (kept subtle/premium) */
@media (hover:hover){
  .tile--filled:hover{ box-shadow: 0 16px 44px rgba(46,125,50,.42) }
  .tile--outline:hover{ border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04) }
}

/* Responsive: stack tiles under text on tablets/phones */
@media (max-width: 1000px){
  .process__layout{ grid-template-columns: 1fr }
  .process__grid{ order: 2; margin-top: .5rem }
  .process__intro{ order: 1 }
}
/* ===== Guides (search + filters + editorial cards) ===== */

.guides{
  background: #eef3ef;               /* light neutral so content breathes */
  padding-block: 4rem 4.5rem;
}
.guides__head{ margin-bottom: 1.25rem }
.guides__title{
  margin:.25rem 0 .25rem; color:#0b1410;
  font-family: var(--font-hero); text-transform: uppercase;
  line-height:.95; font-weight:900; letter-spacing:.02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.guides__lede{ color:#304334; max-width: 70ch; margin: 0 0 1rem }

.guides__controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem;
  margin-bottom: 1rem;
}
.search-input{
  position:relative; width:min(100%, 460px);
}
.search-input input{
  width:100%; height:46px; border-radius:999px; padding:.65rem 1rem .65rem 2.6rem;
  border:1px solid rgba(31,91,45,.25); background:#fff; color:#0b1410; outline:none;
}
.search-input input::placeholder{ color:rgba(27,51,35,.65) }
.search-input svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#1f5b2d;
}
.filter-chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.filter-chip{
  padding:.5rem .75rem; border-radius:999px; border:1px solid rgba(31,91,45,.28);
  background: rgba(255,255,255,.6); color:#0b1410; font-weight:800; letter-spacing:.02em;
}
.filter-chip.is-active,
.filter-chip[aria-pressed="true"]{
  background: var(--accent); color:#fff; border-color: transparent;
}
.guides__count{ margin-left:auto; color:#304334; font-weight:700 }

.guides__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

/* Card */
.guide-card{
  display:grid; grid-template-rows: auto 1fr;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.guide-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}

/* Media banner (image optional; gradient by topic) */
.guide-card__media{
  position:relative;
  aspect-ratio: 16 / 10;
  display:grid; place-items:center;
  color:#fff;
}
.guide-card__media svg{ width:44px; height:44px; opacity:.95 }

/* Topic tints */
.media--planting .guide-card__media{
  background: linear-gradient(135deg, #2e7d32 0%, #1f5b2d 100%);
}
.media--hardscape .guide-card__media{
  background: linear-gradient(135deg, #7f8a7f 0%, #525a52 100%);
}
.media--water .guide-card__media{
  background: linear-gradient(135deg, #4eb6c3 0%, #298798 100%);
}
.media--care .guide-card__media{
  background: linear-gradient(135deg, #345d43 0%, #1b3b2a 100%);
}
.media--design .guide-card__media{
  background: linear-gradient(135deg, #8fb54a 0%, #5b7a2a 100%);
}

/* Body */
.guide-card__body{ padding: 16px 18px }
.guide-card__tags{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem;
}
.guide-card__tags span{
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  background: rgba(31,91,45,.08); color:#1a2a20; font-weight:800; font-size:.75rem;
}
.guide-card__title{
  margin:.1rem 0 .25rem 0; color:#0b1410;
  font-family: var(--font-hero); text-transform: uppercase;
  letter-spacing:.02em; line-height:1; font-weight:900;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
}
.guide-card__summary{ margin:0 0 .75rem 0; color:#2a3a2f }
.guide-card__meta{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.guide-card__meta .meta{
  display:inline-flex; align-items:center; gap:.35rem; color:#425846; font-weight:700;
}
.guide-card__meta .meta svg{ width:18px; height:18px }
.guide-card__link{
  font-weight:800; color: var(--accent);
  display:inline-flex; align-items:center; gap:.35rem;
}
.guide-card__link:hover{ text-decoration: underline }

/* Hidden state when filtered */
.guide-card.is-hidden{ display:none }

.guides__empty{
  margin-top: 1.25rem; color:#304334; font-weight:700; text-align:center;
  background: rgba(31,91,45,.08); border:1px solid rgba(31,91,45,.2);
  padding: .9rem 1rem; border-radius: 12px;
}

/* Responsive */
@media (max-width: 1000px){
  .guides__grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
@media (max-width: 640px){
  .guides__grid{ grid-template-columns: 1fr }
  .guides__count{ width:100%; order:3 }
}
/* ===== Guides: 1:1 images + card polish ===== */
.guides{
  background: #eef3ef;
  padding-block: 4rem 4.5rem;
}
.guides__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 1000px){ .guides__grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 640px){ .guides__grid{ grid-template-columns: 1fr } }

.guide-card{
  display:grid; grid-template-rows: auto 1fr;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.guide-card:hover{ transform: translateY(-3px); box-shadow:0 22px 60px rgba(0,0,0,.12) }

.guide-card__media{
  position:relative; aspect-ratio: 1 / 1; overflow:hidden; background:#dfe6df;
}
.guide-card__media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }

.guide-card__body{ padding:16px 18px }
.guide-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem }
.guide-card__tags span{
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  background: rgba(31,91,45,.08); color:#1a2a20; font-weight:800; font-size:.75rem;
}
.guide-card__title{
  margin:.1rem 0 .25rem 0; color:#0b1410;
  font-family: var(--font-hero); text-transform: uppercase; letter-spacing:.02em; line-height:1; font-weight:900;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
}
.guide-card__summary{ margin:0 0 .75rem 0; color:#2a3a2f }
.guide-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.guide-card__meta .meta{ display:inline-flex; align-items:center; gap:.35rem; color:#425846; font-weight:700 }
.guide-card__meta .meta svg{ width:18px; height:18px }

.guide-card__link{
  appearance:none; border:0; background:transparent;
  font-weight:800; color: var(--accent); cursor:pointer;
  display:inline-flex; align-items:center; gap:.35rem;
}
.guide-card__link:hover{ text-decoration: underline }
.guide-card.is-hidden{ display:none }

/* ─────────────────────────────
   Modal (v3) – square photo, sticky header, scrollable panel
   ───────────────────────────── */

.modal{
  position: fixed; inset: 0; z-index: 100; display: none;
  /* allow page scroll if dialog taller than viewport */
  overflow: auto;
}
.modal.is-open{
  display: grid; place-items: center;
  padding: clamp(12px, 3vw, 28px);
  padding-left:  calc(clamp(12px, 3vw, 28px) + env(safe-area-inset-left, 0px));
  padding-right: calc(clamp(12px, 3vw, 28px) + env(safe-area-inset-right, 0px));
}

/* Frosted backdrop with brand tint */
.modal__backdrop{
  position: fixed; inset: 0;
  background:
    radial-gradient(120vw 90vh at 20% 10%, rgba(31,91,45,.18), transparent 60%),
    rgba(0,0,0,.55);
  backdrop-filter: blur(6px) saturate(120%);
}

/* Dialog shell */
.modal__dialog{
  position: relative;
  width: min(980px, 100% - 2rem);
  max-height: 92vh;                 /* constrain; panel will scroll */
  background: #fff; color: #0b1410;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.50);

  /* Mobile-first: stacked (image on top, panel below) */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}

/* Close button */
.modal__close{
  position: absolute; right: 12px; top: 12px;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(4px);
  cursor: pointer; z-index: 3;
}
.modal__close svg{ width: 22px; height: 22px }

/* Square photo, always 1:1 */
.modal__cover{
  grid-column: 1; grid-row: 1;
  aspect-ratio: 1 / 1; width: 100%; margin: 0;
  background: #e7eee7; position: relative;
}
.modal__cover::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.28), transparent 60%);
  pointer-events:none;
}
.modal__cover img{
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}

/* Right panel: this is the scroller (header sticks inside it) */
.modal__panel{
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: auto;                     /* single scroll area */
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  position: relative;
}

/* Fancy edge fades to indicate scroll */
.modal__panel::before,
.modal__panel::after{
  content:""; position: sticky; left: 0; right: 0; z-index: 2; pointer-events: none; height: 12px;
}
.modal__panel::before{ top: 0; background: linear-gradient(#fff, transparent) }
.modal__panel::after{ bottom: 0; background: linear-gradient(transparent, #fff) }

/* Sticky header inside the panel */
.modal__header{
  position: sticky; top: 0; z-index: 3;
  background: #fff;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  min-width: 0;
}
.modal__title{
  margin:.1rem 0; font-family: var(--font-hero); text-transform: uppercase;
  letter-spacing:.02em; line-height:1; font-weight:900;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  overflow-wrap:anywhere;
}
.modal__meta{ margin:0; color:#425846; font-weight:700 }

/* Scrollable article */
.modal__content{
  padding: 14px 22px 22px;
  min-height: 0;                      /* critical for scroll in flex column */
}

/* Guide content blocks */
.g-block{ margin:.85rem 0 }
.g-block h4{ margin:.2rem 0 .25rem; font-weight:800; color:#1f5b2d }
.g-block p{ margin:0 0 .45rem }
.g-block ul, .g-block ol{ margin:.25rem 0 .6rem 1rem }
.g-block li{ margin:.22rem 0 }

/* ── Desktop: two-column layout ───────────────────────────── */
@media (min-width: 980px){
  .modal__dialog{
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    max-height: 88vh;
    align-items: start;
  }
  .modal__cover{ grid-column: 1; grid-row: 1; align-self: start }
  .modal__panel{ grid-column: 2; grid-row: 1; max-height: 88vh }
}
/* Header layout accommodates the close button nicely */
.modal__header{
  display: grid;
  grid-template-columns: 1fr auto; /* title/meta on left, close on right */
  align-items: start;
  gap: .5rem .75rem;
}
.modal__title{ grid-column: 1; }
.modal__meta { grid-column: 1; }

/* The new inline Close button */
.modal__close-inline{
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;

  appearance: none;
  border: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: .4rem;

  padding: .5rem .85rem;
  border-radius: 999px;

  background: var(--accent);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
}
.modal__close-inline:hover{ background: var(--accent-600) }
.modal__close-inline svg{ width: 18px; height: 18px }

/* If you want to hide the floating round X and use only the inline button, uncomment: */
/* .modal__close{ display:none !important; } */

/* ── Close button: top-right floating X ───────────────────── */
.modal__close{
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.55);
  color:#fff;
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.modal__close:hover{ background: rgba(0,0,0,.7) }

/* Hide the inline header Close pill if you kept it */
.modal__close-inline{ display: none !important; }

/* ── Bottom whitespace fix (desktop): let row height hug content ── */
@media (min-width: 980px){
  .modal__dialog{
    /* Two columns that can shrink; one row that sizes to content */
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    grid-template-rows: auto;          /* ⟵ was 1fr; caused tall empty bottom */
    max-height: 88vh;                   /* cap the dialog */
    align-items: start;
  }

  /* Left square image stays top-left and doesn’t stretch */
  .modal__cover{
    grid-column: 1; grid-row: 1;
    aspect-ratio: 1 / 1;
    width: 100%; height: auto;
    align-self: start;
  }
  .modal__cover img{
    width:100%; height:100%; object-fit:cover; object-position:center;
  }

  /* Right panel scrolls inside available height */
  .modal__panel{
    grid-column: 2; grid-row: 1;
    max-height: 88vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;      /* prevent right-edge clipping */
  }

  /* Keep header/content shrinkable so text never gets cut off */
  .modal__header,
  .modal__content{ min-width: 0 }
}
/* ── Fix 1: remove panel fades that can add extra height ── */
.modal__panel::before,
.modal__panel::after{
  display: none !important;
}

/* ── Fix 2: 1:1 ratio box for the cover (no rounding gap) ── */
.modal__cover{
  /* we’ll use the classic padding-ratio box instead of aspect-ratio
     because it behaves more consistently across browsers/zoom levels */
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #e7eee7;
}
.modal__cover::before{
  content: "";
  display: block;
  padding-bottom: 100%;   /* ← perfect square */
}

/* layer the gradient on top */
.modal__cover::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.28), transparent 60%);
  pointer-events: none;
}

/* the actual image fills the square absolutely */
.modal__cover img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: translateZ(0);  /* helps avoid sub-pixel seams on some GPUs */
}

/* ── Fix 3: “1‑px seam guard” for Safari / odd zoom levels ── */
@supports (-webkit-hyphens:none) {
  .modal__cover img{
    /* bleed the image down by 1px inside the clipped box */
    height: calc(100% + 1px);
    bottom: -1px;
  }
}

/* keep the desktop two-column layout shrinkable to avoid right-edge clipping */
@media (min-width: 980px){
  .modal__dialog{
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    grid-template-rows: auto;
    max-height: 88vh;
    align-items: start;
  }
  .modal__cover{ grid-column: 1; grid-row: 1; }
  .modal__panel{
    grid-column: 2; grid-row: 1;
    overflow: auto; -webkit-overflow-scrolling: touch;
    max-height: 88vh; min-width: 0;
  }
  .modal__header, .modal__content{ min-width: 0 }
}
/* ========== ABOUT (angled banners) ========== */
.about{
  background: #f2f5f2;            /* light neutral so green banners pop */
  padding-block: 4rem 4.5rem;
}
.about__head{ margin-bottom: 1.1rem }
.about__title{
  margin:.25rem 0 .25rem; color:#0b1410;
  font-family: var(--font-hero); text-transform:uppercase;
  line-height:.95; font-weight:900; letter-spacing:.02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.about__lede{ color:#304334; max-width:70ch; margin:0 }

/* Stack of banners */
.about__stack{ display:grid; gap: clamp(14px, 2vw, 20px); margin-top: 1.25rem }

/* Banner base */
.banner{
  --bg: var(--accent);
  --ink: #fff;
  --cut: 160px;                /* width of the angled bite */
  position: relative;
  border-radius: 16px;
  overflow: clip;              /* clip inner shape to rounded corners */
  min-height: clamp(180px, 22vw, 260px);
}
.banner__shape{
  position:absolute; inset:0;
  background: var(--bg);
  border-radius: inherit;
  z-index:0;
  /* right-cut by default */
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, 0 100%);
}
.banner--left .banner__shape{
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%, 0 50%);
}

/* Optional image tint */
.banner--image .banner__shape{
  background-image:
    linear-gradient(120deg, rgba(31,91,45,.92), rgba(31,91,45,.86)),
    var(--img);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

/* Inner layout */
.banner__inner{
  position: relative; z-index:1; color: var(--ink);
  display:grid; grid-template-columns: auto 1fr; gap: clamp(14px, 2vw, 22px);
  align-items: center;
  padding: clamp(16px, 3.6vw, 36px) clamp(18px, 4.2vw, 44px);
}
.banner__icon{
  width: clamp(42px, 5vw, 64px); height: clamp(42px, 5vw, 64px);
  display:grid; place-items:center; color:#e8ffe9;
}
.banner__icon svg{ width: 70%; height: 70% }

.banner__title{
  margin:0 0 .25rem 0;
  font-family: var(--font-hero); text-transform:uppercase;
  letter-spacing:.02em; line-height:.95; font-weight:900;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
}
.banner__text{ margin:0 0 .5rem 0; color: rgba(255,255,255,.95); font-weight:600 }

.banner__cta{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:800; color:#fff;
  opacity:.95; text-decoration:none;
  border-bottom: 2px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
}
.banner__cta:hover{ opacity:1; border-bottom-color:#fff }

/* Responsive tweaks */
@media (max-width: 900px){
  .banner{ --cut: 96px }
  .banner__inner{ grid-template-columns: 1fr; }
  .banner__icon{ display:none } /* keep it clean on small screens */
}
/* ===== ABOUT v2 — clean full‑bleed ribbons ===== */
.about2{
  background:#f2f5f2;
  padding-block: 4rem 4.5rem;
}
.about2__head{ margin-bottom: 1.1rem }
.about2__title{
  margin:.25rem 0 .25rem; color:#0b1410;
  font-family: var(--font-hero); text-transform:uppercase;
  line-height:.95; font-weight:900; letter-spacing:.02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.about2__lede{ color:#304334; max-width:70ch; margin:0 }

/* Ribbon shell – full width (bleeds beyond container) */
.about-ribbon{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  margin-block: clamp(12px, 2.4vw, 18px);
  border-radius: 18px;
  overflow: clip;
  box-shadow: 0 16px 50px rgba(0,0,0,.16);
}

/* Background layer: solid or image‑tinted */
.about-ribbon__bg{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(135deg, #2e7d32 0%, #1f5b2d 100%);
}
.about-ribbon--tone2 .about-ribbon__bg{
  background: linear-gradient(135deg, #2a6f2d 0%, #1a4a25 100%);
}
.about-ribbon.about-ribbon--image .about-ribbon__bg{
  background-image:
    linear-gradient(0deg, rgba(14,40,26,.86), rgba(14,40,26,.86)),
    var(--image);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

/* Subtle texture for depth (very light) */
.about-ribbon__bg::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(80vw 60vh at 15% 15%, rgba(255,255,255,.06), transparent 55%);
  mix-blend-mode: soft-light;
}

/* Content alignment stays on your site grid */
.about-ribbon__inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items:center;
  padding: clamp(16px, 3.6vw, 38px) 0; /* vertical only; horizontal comes from .container */
  color:#fff;
}

/* Icon */
.about-ribbon__icon{
  width: clamp(44px, 5vw, 64px);
  height: clamp(44px, 5vw, 64px);
  border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
}
.about-ribbon__icon svg{ width: 62%; height: 62%; color:#e8ffe9 }

/* Copy */
.about-ribbon__title{
  margin:0 0 .25rem 0;
  font-family: var(--font-hero);
  text-transform:uppercase;
  letter-spacing:.02em; line-height:.95; font-weight:900;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
}
.about-ribbon__text{ margin:0 0 .45rem 0; color: rgba(255,255,255,.95); font-weight:600 }

/* CTA */
.about-ribbon__link{
  display:inline-block;
  font-weight:800; color:#fff;
  border-bottom: 2px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
}
.about-ribbon__link:hover{ border-bottom-color:#fff }

/* Responsive: stack icon over text on narrow screens */
@media (max-width: 900px){
  .about-ribbon__inner{ grid-template-columns: 1fr }
  .about-ribbon__icon{ width: 44px; height: 44px }
}

/* Reduce outside shadow on very small screens */
@media (max-width: 560px){
  .about-ribbon{ box-shadow: 0 10px 30px rgba(0,0,0,.14) }
}
/* ——— ABOUT ribbons: contained width (not full screen) ——— */
.about-ribbon{
  /* center the ribbon and cap its width */
  left: auto !important;
  transform: none !important;

  /* Wide‑contained: a bit wider than your page container for that banner feel */
  width: min(100% - 2rem, calc(var(--container) + 160px)) !important;

  /* center on the page */
  margin-inline: auto !important;
}

/* Optional: make the ribbon exactly container width (uncomment to use) */
/*
.about-ribbon{
  width: min(100% - 2rem, var(--container)) !important;
}
*/
/* ——— ABOUT ribbons: ~3/4" gutter on left & right ——— */
.about-ribbon{
  /* center the ribbon and shrink total width by 1.5in (0.75in each side) */
  left: auto !important;
  transform: none !important;
  width: calc(100% - 1.5in) !important;
  margin-inline: auto !important;
}

/* Safety on small screens: fall back to a normal 1rem gutter per side */
@media (max-width: 680px){
  .about-ribbon{
    width: calc(100% - 2rem) !important;
  }
}
/* ===== FOOTER ===== */
.site-footer{
  background: linear-gradient(180deg, #0e1713, #0b1410);
  color:#fff;
  margin-top: 3rem;
}

/* Pre‑footer CTA */
.footer__cta{
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(80vw 50vh at 10% 10%, rgba(84,192,111,.10), transparent 55%),
    rgba(255,255,255,.02);
}
.footer__cta-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; padding-block: clamp(22px, 5vw, 40px);
}
.footer__cta-title{
  margin:0;
  font-family: var(--font-hero);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  font-weight: 900;
  font-size: clamp(1.4rem, 3.8vw, 2.2rem);
}
.footer__cta-actions{ display:flex; gap:.6rem; flex-wrap:wrap }

/* Body grid */
.footer__grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr 1.15fr;
  gap: clamp(20px, 3vw, 36px);
  padding-block: clamp(28px, 6vw, 54px);
}
.footer__brand-link{ color:#fff }
.footer__tagline{ color:rgba(255,255,255,.86); margin:.35rem 0 1rem }

.footer__social{ display:flex; gap:.5rem; margin-top:.25rem }
.social{
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center; color:#eaffea;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
}
.social:hover{ background: rgba(255,255,255,.12) }
.social svg{ width:22px; height:22px }

.footer__heading{
  margin: .25rem 0 .35rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-family: var(--font-hero);
  font-size: 1.05rem;
}
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem }
.footer__list a{ color:rgba(255,255,255,.88) }
.footer__list a:hover{ color:#fff; text-decoration: underline }

.footer__contact a{ color:#fff }
.footer__form{ margin-top:.8rem }
.footer__form-row{
  display:flex; gap:.5rem; align-items:center;
}
.footer__form-row input{
  flex:1; min-width: 0;
  height:44px; border-radius:999px; padding:.6rem .9rem;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); color:#fff;
  outline: none;
}
.footer__form-row input::placeholder{ color:rgba(255,255,255,.7) }
.footer__form-note{ display:block; color:rgba(255,255,255,.65); margin-top:.35rem }

/* Legal bar */
.footer__legal{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.footer__legal-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block: 14px;
}
.footer__legal p{ margin:0; color:rgba(255,255,255,.78) }
.footer__legal-links{ display:flex; gap:.75rem; list-style:none; margin:0; padding:0 }
.footer__legal-links a{ color:rgba(255,255,255,.8) }
.footer__legal-links a:hover{ color:#fff; text-decoration: underline }

/* Back to top */
.backtop{
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(31,91,45,.85); color:#fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.backtop.is-visible{ opacity:1; pointer-events:auto; transform: translateY(0) }
.backtop:hover{ background: var(--accent) }
.backtop svg{ width:22px; height:22px }

/* Responsive */
@media (max-width: 1000px){
  .footer__grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  .footer__cta-inner{ flex-direction:column; align-items:flex-start }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__legal-inner{ flex-direction:column; align-items:flex-start }
  .footer__form-row{ flex-direction: column; align-items: stretch }
  .footer__form-row .btn{ width:100% }
}
/* ===== CONTACT (above footer) ===== */
.contact{
  background: linear-gradient(180deg, #0e1713, #0b1410);
  padding-block: clamp(36px, 7vw, 72px);
  color:#fff;
  position: relative;
}
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(80vw 60vh at 10% 15%, rgba(84,192,111,.12), transparent 60%);
}
.contact__layout{
  display:grid; gap: clamp(18px, 3vw, 36px);
  grid-template-columns: 1.05fr 1fr;
  align-items:start;
}
@media (max-width: 980px){
  .contact__layout{ grid-template-columns: 1fr }
}

.contact__title{
  margin:.2rem 0 .3rem; font-family: var(--font-hero); text-transform:uppercase;
  letter-spacing:.02em; line-height:.95; font-weight:900;
  font-size: clamp(1.5rem, 3.8vw, 2.2rem);
}
.contact__lede{ margin:0 0 .8rem; color: rgba(255,255,255,.9) }

.contact__details{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem }
.contact__details li{ display:flex; align-items:center; gap:.5rem; color:#eaffea; font-weight:700 }
.contact__details svg{ width:22px; height:22px; color:#c9f2cf }
.contact__details a{ color:#fff; text-decoration:none }
.contact__details a:hover{ text-decoration:underline }

/* Card/form */
.contact__card{
  background:#fff; color:#0b1410;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: clamp(16px, 3vw, 24px);
  display:block;
}
.contact__row{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.9rem;
}
@media (max-width: 640px){ .contact__row{ grid-template-columns: 1fr } }

.field{ display:flex; flex-direction:column; gap:.35rem }
.field label{ font-weight:800 }
.req{ color:#2e7d32 }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea{
  height: 48px;
  padding: .6rem .8rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  background:#fff; color:#0b1410;
  outline:none;
}
.field textarea{ height:auto; resize:vertical; min-height: 140px }
.field select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, #0b1410 50%), linear-gradient(135deg, #0b1410 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size:6px 6px; background-repeat:no-repeat }

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,125,50,.18);
}

.help{ color:#425846; font-weight:700 }

.field--checkbox{ flex-direction:row; align-items:center; gap:.5rem; margin-top:.1rem }
.field--checkbox input{ width:18px; height:18px }

.field--file input[type="file"]{ display:none }
.file{
  display:inline-flex; align-items:center; gap:.45rem; width:fit-content;
  border: 1px dashed rgba(0,0,0,.25);
  border-radius: 12px; padding:.55rem .75rem; cursor:pointer;
  color:#0b1410; font-weight:800;
  background: #f7faf7;
}
.file svg{ width:18px; height:18px; color:#1f5b2d }

.contact__actions{ display:flex; align-items:center; gap:.6rem; margin-top:.75rem }
.contact__hint{ color:#425846; font-weight:700 }

/* Status */
.form-status{
  display:block; margin-bottom:.75rem; padding:.6rem .75rem;
  border-radius: 10px; border:1px solid rgba(46,125,50,.28);
  background: rgba(84,192,111,.12);
  color:#1f5b2d; font-weight:800;
}

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
/* Offset anchor targets by the fixed header height (set in JS) */
:root { --scroll-offset: 90px; }
[id] { scroll-margin-top: var(--scroll-offset); }

/* Smooth scrolling everywhere */
html { scroll-behavior: smooth; }

/* Active nav link styling */
.primary-nav a[aria-current="page"]{
  opacity: 1;
  position: relative;
}
.primary-nav a[aria-current="page"]::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:2px;
  background: var(--accent);
}
/* ----- Projects: FIX mobile stack for ALL rows (no desktop changes) ----- */
@media (max-width: 980px){
  /* 1) Turn off the grid on mobile so nth-child(even) rules can’t leak through */
  .projects .project{
    display: block !important;
  }

  /* 2) Image first, full-width square */
  .projects .project .project__media{
    width: 100% !important;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 12px 0; /* space before the text card */
  }
  .projects .project .project__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* 3) Card below; remove any desktop overlap offsets */
  .projects .project .project__card{
    margin: 0 !important;   /* kills the -4% margins from desktop */
  }
}