/* ============================================
   Ardmore Outdoor Design — Main Stylesheet
   ============================================ */

:root {
  /* Palette */
  --warm-white: #FAF8F4;
  --sand: #E9E1D3;
  --sand-deep: #D9CDB6;
  --sage: #8A9A80;
  --sage-deep: #6B7A62;
  --terracotta: #B85F35;
  --terracotta-deep: #A04F2C;
  --charcoal: #2B2B28;
  --charcoal-soft: #4A4A45;
  --line: rgba(43, 43, 40, 0.12);
  --white: #FFFFFF;

  /* Type */
  /* Matched to the Squarespace draft: IvyPresto Text -> Cormorant Garamond,
     Input Mono -> DM Mono. Both Google Fonts, self-hostable, no subscription. */
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: var(--font-mono);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --max-width: 1240px;
  --radius: 2px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--warm-white);
  line-height: 1.65;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin-bottom: var(--space-sm);
}

h1 { font-size: clamp(2.9rem, 5.6vw, 4.8rem); font-weight: 300; }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
h4 { font-size: 1.2rem; }

p { color: var(--charcoal-soft); font-weight: 400; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sage-deep);
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section { padding: var(--space-xl) 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Outlined to match the nav CTA - same terracotta rule, same fill-on-hover.
   Every .final-cta sits on paper, so there is no dark band to worry about. */
.btn-primary {
  background: transparent;
  color: var(--terracotta-deep);
  border-color: var(--terracotta);
}
.btn-primary:hover {
  background: var(--terracotta-deep);
  color: var(--warm-white);
  border-color: var(--terracotta-deep);
}

.btn-secondary {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn-secondary:hover {
  background: var(--charcoal);
  color: var(--warm-white);
}

.btn-outline-light {
  background: transparent;
  color: var(--warm-white);
  border-color: var(--warm-white);
}
.btn-outline-light:hover {
  background: var(--warm-white);
  color: var(--charcoal);
}

/* ---- Header / Nav ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--warm-white);
}

.nav-wrap {
  /* Matches .hero-media so the mark and the CTA sit on the same verticals as
     the image edges, not outside them. 1100 + 2 x 1.25rem of .hero padding. */
  max-width: calc(1100px + 2.5rem);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* Lupine mark - portrait, so it is sized taller than the old square monogram
   was. Vector redraw (Nov 2026) rendered at 124x152, sharp up to ~76px. */
.logo img { height: 38px; width: auto; display: block; }
.logo span { color: var(--terracotta); }

/* "ARDMORE" beside the mark on every page except home, where the hero already
   carries the full wordmark. Cropped from logo-wordmark.png, so it is the real
   deco lettering in the same sage as the lupine, not type standing in for it.
   Sits slightly above optical centre — deco caps read low against a portrait
   mark when centred exactly. */
.logo img.logo-word {
  height: 15px;
  position: relative;
  top: -1px;
  /* Rolls in left to right, so the letters arrive A-R-D-M-O-R-E. The wordmark
     is a raster crop, not live text, so there are no letters to animate
     individually; instead a soft-edged mask travels across it and each letter
     fades up as the edge passes. The mask layer is 2.5x the element width, so
     mask-position 100% parks the transparent tail over the word (hidden) and
     0% parks the solid head over it (shown). The 40%-55% ramp puts roughly two
     and a half letters mid-fade at any moment - any harder and it reads as a
     wipe rather than letters. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 55%);
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: logoWordRoll 1.1s ease-out 0.25s both;
}

@keyframes logoWordRoll {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo img.logo-word {
    animation: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.nav-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.09em;
  color: var(--charcoal-soft);
  transition: color 0.2s ease;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0%;
  height: 1px;
  background: var(--terracotta);
  transition: width 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-links a:hover { color: var(--charcoal); }
.nav-links a.active { color: var(--charcoal); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  color: var(--terracotta-deep) !important;
  border: 1px solid var(--terracotta);
  padding: 0.6rem 1.3rem !important;
  border-radius: var(--radius);
  font-size: 0.78rem !important;
  line-height: normal;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--terracotta); color: var(--warm-white) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--charcoal);
}

/* ---- Hero ---- */
/* ---- Hero ----
   Image sits contained in the paper field rather than bleeding, with the
   wordmark straddling its lower edge. The airiness comes from the margin
   around the frame, not from the size of the type. Copy sits below on
   paper, so no scrim is needed over the photograph. */
.hero {
  /* Landing page opens on the lockup alone - mark, image, wordmark. Everything
     else starts below the fold. Proportions follow James's page: image at ~58%
     of the viewport, wordmark at ~112% of the image, roughly half its height
     hanging below the image edge. */
  /* Fills the screen whatever its height, so the lockup is all anyone sees
     before scrolling - on a 700px laptop and a 1100px desktop alike. Padding
     could never do this: it is a fixed number and screen height is not. svh is
     the small-viewport unit; on a phone it excludes the browser bars that come
     and go, which vh does not. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 5rem 1.25rem 2rem;
  background: var(--warm-white);
  box-sizing: border-box;
}

.hero-intro {
  background: var(--warm-white);
  padding: 0 1.25rem;
}

.hero-media {
  position: relative;
  /* Two caps. The first is width-driven, the second height-driven: on a short
     laptop screen the whole lockup scales DOWN proportionally rather than the
     image being squashed or the OUTDOOR/DESIGN line falling off the bottom.
     12rem is the vertical furniture - hero padding plus the wordmark overhang.
     Because the wordmark is a percentage of this box, it scales with it. */
  width: min(88%, 1240px, calc((100svh - 12rem) * 16 / 9));
  margin: 0 auto;
  padding-bottom: 3.5rem;
}

.hero-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 42s infinite;
}
.hero-slide.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
.hero-slide:nth-child(4) { animation-delay: 18s; }
.hero-slide:nth-child(5) { animation-delay: 24s; }
.hero-slide:nth-child(6) { animation-delay: 30s; }
.hero-slide:nth-child(7) { animation-delay: 36s; }

@keyframes heroFade {
  0% { opacity: 0; }
  1.7% { opacity: 1; }
  12.6% { opacity: 1; }
  16% { opacity: 0; }
  100% { opacity: 0; }
}

/* Overhangs the photograph on both sides, as James's does. Rendered at 1800px
   from the vector redraw (Nov 2026); source SVGs live in Website 26/logo/. */
.hero-wordmark {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 112%;
  max-width: min(1390px, calc(100vw - 1.5rem));
  height: auto;
  pointer-events: none;
}

.hero-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.hero .eyebrow { color: var(--sage-deep); }

.hero h1 {
  color: var(--charcoal);
  max-width: 18ch;
  margin: 0 auto var(--space-sm);
  text-wrap: balance;
}

.hero p.lead {
  color: var(--charcoal-soft);
  max-width: 62ch;
  margin: 0 auto var(--space-md);
  font-size: 1.05rem;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}


/* ---- Section headers ---- */
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-lg);
}
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Services grid ---- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  display: block;
  background: var(--warm-white);
  padding: var(--space-lg) var(--space-md);
  transition: background 0.3s ease;
  cursor: pointer;
}
.service-card:hover { background: var(--sand); }

.service-num {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--sage-deep);
  margin-bottom: var(--space-sm);
}

.service-card h3 { margin-bottom: 0.7rem; }
.service-card p { font-size: 0.92rem; margin-bottom: 1rem; }

.service-card .link {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  border-bottom: 1px solid transparent;
}
.service-card:hover .link { border-color: var(--terracotta-deep); }

/* ---- Featured projects ---- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.project-card { cursor: pointer; }
.project-card .img-frame { aspect-ratio: 4 / 3; }

.project-card .project-info {
  padding: var(--space-sm) 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.project-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage-deep);
  font-weight: 500;
}

/* ---- Clickable image hover treatment (shared by project-card + portfolio-item) ---- */
.img-frame {
  position: relative;
  overflow: hidden;
  display: block;
  cursor: pointer;
}
.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.img-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(43, 43, 40, 0.5);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.img-frame .view-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(10px);
  color: var(--warm-white);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
.img-frame .view-label .arrow {
  display: inline-block;
  transition: transform 0.35s ease;
}
a:hover .img-frame img { transform: scale(1.06); }
a:hover .img-frame::after { opacity: 1; }
a:hover .img-frame .view-label { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
a:hover .img-frame .view-label .arrow { transform: translateX(4px); }

/* ---- Expand badge: minimal circular affordance for lightbox images ---- */
.img-frame .expand-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.94);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(43, 43, 40, 0.2);
}
a:hover .img-frame .expand-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---- Process steps ---- */
.process-list { display: flex; flex-direction: column; }
.process-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--line);
}
.process-step:last-child { border-bottom: 1px solid var(--line); }

.process-step .num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--sand-deep);
}

.process-step h3 { margin-bottom: 0.5rem; }

.process-meta {
  display: flex;
  gap: var(--space-lg);
  margin-top: 0.8rem;
  font-size: 0.85rem;
}
.process-meta div strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
  margin-bottom: 0.2rem;
}

/* ---- Testimonials ---- */
.testimonial-strip {
  background: var(--charcoal);
  color: var(--warm-white);
}
.testimonial-strip .eyebrow { color: var(--sand); }
.testimonial-strip h2 { color: var(--warm-white); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.testimonial-card {
  border-top: 1px solid rgba(250,248,244,0.2);
  padding-top: var(--space-sm);
}
.testimonial-card p.quote {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--sand);
  margin-bottom: var(--space-sm);
}
.testimonial-card .attr { font-size: 0.82rem; color: var(--sand-deep); }

/* ---- Final CTA ---- */
.final-cta {
  text-align: center;
  padding: var(--space-xl) 0;
}
.final-cta h2 { max-width: 640px; margin: 0 auto var(--space-sm); }
.final-cta h2 + .btn { margin-top: var(--space-sm); }
.final-cta p { max-width: 500px; margin: 0 auto var(--space-md); }

/* ---- Footer ---- */
.site-footer {
  /* Paper footer. Everything inside had to invert with it - text, headings,
     links, rules and the wordmark - or it would be cream on cream. */
  background: #EFEAE1;
  color: var(--charcoal-soft);
  padding: var(--space-lg) 0 var(--space-md);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(43,43,40,0.14);
}
.footer-grid h4 {
  color: var(--sage-deep);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid a { color: var(--charcoal); font-size: 0.9rem; }
.footer-grid a:hover { color: var(--terracotta-deep); }
.footer-social { display: inline-flex; align-items: center; gap: 0.45rem; }
.footer-social svg { flex-shrink: 0; }
.footer-grid p { color: var(--charcoal-soft); }
.footer-logo { margin-bottom: 1rem; }
.footer-logo img { width: 100%; max-width: 260px; height: auto; display: block; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-md);
  font-size: 0.8rem;
  color: var(--charcoal-soft);
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---- Page hero (interior pages) ---- */
.page-hero {
  /* The fixed header has no rule or shadow under it now, so interior pages
     need clear air instead of an edge to stop content sliding under it. */
  padding: 13rem 0 var(--space-lg);
}
.page-hero .eyebrow { color: var(--sage-deep); }
.page-hero p.lead { max-width: 640px; font-size: 1.05rem; }

/* ---- Service detail blocks ---- */
.service-detail {
  padding: var(--space-xl) 0;
}
.service-detail .container {
  align-items: start;
}
.service-detail.reverse .service-media { order: 2; }
.service-media img { width: 100%; border-radius: var(--radius); }
.service-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: var(--space-md) 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service-detail-meta strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
  margin-bottom: 0.3rem;
}
.service-detail-meta ul { padding-left: 1.1rem; color: var(--charcoal-soft); font-size: 0.9rem; }

.disclaimer-box {
  background: var(--sand);
  border-left: 3px solid var(--terracotta);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.88rem;
  color: var(--charcoal-soft);
  margin-top: var(--space-lg);
}

/* ---- Portfolio filters ---- */
.filter-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.filter-btn {
  font-family: var(--font-mono);
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-btn:hover { border-color: var(--terracotta); color: var(--terracotta-deep); }
.filter-btn.active { background: transparent; color: var(--terracotta-deep); border-color: var(--terracotta); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.portfolio-item { display: none; }
.portfolio-item.show { display: block; }
.portfolio-item .img-frame { aspect-ratio: 4 / 3; }
.portfolio-item .project-info { padding-top: 0.8rem; }

/* Placeholder tiles. Deliberately quiet and obviously not a project — they
   hold the grid at six per filter until real work replaces them. Delete the
   tile markup in portfolio.html when a real project takes its place. */
.portfolio-item.is-placeholder { cursor: default; }
.placeholder-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  border: 1px dashed rgba(43, 43, 40, 0.22);
  border-radius: var(--radius);
}
.placeholder-frame span {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  opacity: 0.75;
}
.is-placeholder .project-info strong { color: var(--charcoal-soft); font-weight: 400; }
.is-placeholder .project-tag { opacity: 0.7; }

/* ---- Case study ---- */
.case-study {
  padding: var(--space-xl) 0;
}
.case-study-header { max-width: 720px; margin-bottom: var(--space-lg); }
.case-study-meta {
  display: flex;
  gap: 1.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.case-study-meta div strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
  margin-bottom: 0.2rem;
}
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}
.before-after figure { position: relative; }
.before-after figcaption {
  position: absolute; top: 0.8rem; left: 0.8rem;
  background: var(--charcoal); color: var(--warm-white);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
}
.before-after img { height: 320px; object-fit: cover; width: 100%; }

/* ---- About ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.team-card img { width: 100%; height: 320px; object-fit: cover; margin-bottom: var(--space-sm); }
.team-card .role { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sage-deep); margin-bottom: 0.5rem; }

.founder-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-lg);
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
.founder-card .team-card img { height: 380px; }
.founder-card .role { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sage-deep); margin-bottom: 0.5rem; }

@media (max-width: 640px) {
  .founder-card { grid-template-columns: 1fr; text-align: center; }
  .founder-card .team-card img { height: 320px; }
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.value-card { padding: var(--space-md) 0; border-top: 1px solid var(--line); }

/* ---- Contact form ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-xl);
}
.contact-info h4 { margin-bottom: 0.4rem; margin-top: var(--space-md); }
.contact-info h4:first-child { margin-top: 0; }
.contact-info p { font-size: 0.92rem; margin-bottom: 0.2rem; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--charcoal-soft);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: var(--white);
  color: var(--charcoal);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--sage);
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* Honeypot. Positioned off-screen rather than display:none — a fair number of
   bots skip hidden inputs but will happily fill a positioned one. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-note {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
  margin-top: 0.4rem;
  max-width: 52ch;
}

.form-submit { margin-top: var(--space-md); }

/* ---- Reveal animation ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---- Responsive ---- */

/* iPad landscape / small laptops */
@media (max-width: 1024px) {
  :root { --space-xl: 5rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

/* iPad portrait and large phones */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .service-detail .container { grid-template-columns: 1fr !important; }
  .service-detail.reverse .service-media { order: 0; }
  .service-media { height: 320px !important; }
  .service-media:has(.sheet-viewer), .service-media:has(.sheet-caption) { height: auto !important; }
  .service-detail-meta { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .before-after { grid-template-columns: 1fr; }
  .founder-card { grid-template-columns: 260px 1fr; }
  .bush-gallery { grid-template-columns: 1fr 1fr !important; grid-template-rows: 260px 260px !important; }
  .bush-gallery a { grid-column: auto !important; grid-row: auto !important; }
}

/* iPhone and small devices */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  :root { --space-lg: 2.75rem; --space-xl: 3.5rem; }
  .container { padding: 0 1.25rem; }
  .nav-links { position: fixed; top: 66px; left: 0; right: 0; bottom: 0; background: var(--warm-white); flex-direction: column; padding: var(--space-lg) var(--space-md); align-items: flex-start; gap: var(--space-md); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; }
  .nav-links.open { transform: translateX(0); }
  .nav-toggle { display: flex; }
  /* No height override here - the 16/9 aspect-ratio has to survive, or the
     image stretches to most of the screen on a phone. */
  .hero { padding: 4rem 0.75rem 1.5rem; }
  .hero-frame { border-radius: calc(var(--radius) * 0.6); }
  .page-hero { padding-top: 8rem; }
  .hero-media { width: min(90%, calc((100svh - 9rem) * 16 / 9)); padding-bottom: 2rem; }
  .hero-wordmark { width: 108%; }
  .hero-content { padding-bottom: 0; }
  .hero-ctas { flex-direction: column; align-items: center; gap: 1rem; }
  .hero-ctas .btn { justify-content: center; }
  .form-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .process-step { grid-template-columns: 1fr; }
  .process-meta { flex-direction: column; gap: 0.6rem; }
  .case-study-meta { flex-direction: column; gap: 0.6rem; }
  .service-detail-meta { grid-template-columns: 1fr; }
  .bush-gallery { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .bush-gallery a { grid-column: auto !important; grid-row: auto !important; }
  .bush-gallery .img-frame { height: 260px !important; }
}

/* ---- Lightbox ---- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 17, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
  padding: var(--space-md);
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-caption {
  position: absolute;
  bottom: var(--space-md);
  left: 0;
  right: 0;
  text-align: center;
  color: var(--warm-white);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  opacity: 0.9;
  padding: 0 var(--space-lg);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: transparent;
  border: none;
  color: var(--warm-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { opacity: 0.6; }
.lightbox-close {
  top: var(--space-md);
  right: var(--space-md);
  font-size: 2.2rem;
  line-height: 1;
  width: 44px;
  height: 44px;
}
.lightbox-prev, .lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  width: 52px;
  height: 52px;
}
.lightbox-prev { left: var(--space-sm); }
.lightbox-next { right: var(--space-sm); }

@media (max-width: 640px) {
  .lightbox-close { top: 0.75rem; right: 0.75rem; }
  .lightbox-prev, .lightbox-next { width: 42px; height: 42px; font-size: 1.3rem; }
  .lightbox-caption { font-size: 0.92rem; bottom: 0.75rem; }
}


/* Shown when a filter matches nothing, so an empty category reads as
   "not yet" rather than as a broken page. */
.filter-empty {
  display: none;
  grid-column: 1 / -1;
  padding: var(--space-lg) 0;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  opacity: 0.7;
}
.filter-empty.show { display: block; }


/* ---- Documentation case study ----
   Three stages of one project, side by side. Stages 02 and 03 are pending
   frames until the CAD sheet and the built photograph exist; when they do,
   swap the .is-pending div for an <img> and drop the class. */
.doc-study {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--line);
  background: var(--warm-white);
  scroll-margin-top: 6rem;
}
.doc-study-head { max-width: 680px; margin-bottom: var(--space-lg); }
.doc-study-head h2 { margin-bottom: var(--space-sm); }
.doc-study-head p.lead { font-size: 1.05rem; color: var(--charcoal-soft); }

.doc-stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.doc-stage { display: flex; flex-direction: column; }

.doc-step {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--sand-deep);
  margin-bottom: 0.8rem;
}

.doc-frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
  margin-bottom: var(--space-sm);
}
.doc-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.doc-frame.is-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm);
  border: 1px dashed rgba(43, 43, 40, 0.22);
}
.doc-frame.is-pending span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  opacity: 0.75;
}

.doc-stage h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.doc-stage p { font-size: 0.92rem; color: var(--charcoal-soft); }

.doc-meta {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.9;
}
.doc-meta strong {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sage-deep);
  margin-right: 0.5rem;
}

.doc-note {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--charcoal-soft);
  opacity: 0.85;
}

/* Above the stacking breakpoint, run each stage on a shared row track so the
   number, frame, heading, body and meta all sit on the same baselines across
   the three columns. Without this the meta blocks bottom-align instead, and a
   stage whose meta wraps to an extra line drags its rule out of alignment. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .doc-stages { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .doc-stage {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
    }
    .doc-frame { align-self: start; }
    .doc-meta { margin-top: var(--space-sm); }
  }
}

@media (max-width: 900px) {
  .doc-stages { grid-template-columns: 1fr; gap: var(--space-lg); }
  .doc-meta { margin-top: var(--space-sm); }
}


/* ---- Reduced motion ----
   The system setting is a medical accommodation, not a taste preference: for a
   vestibular disorder a moving background can cause real nausea. Everything
   that travels is stopped here. Colour and opacity transitions stay — they
   change appearance without moving anything, and removing them would make the
   site feel broken rather than calm. The hero video is already gated in
   js/main.js; this covers the CSS the JS cannot reach. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* One still frame instead of seven cycling. .hero-slide defaults to
     opacity 0 and is revealed BY the animation, so stopping the animation
     without naming a survivor leaves an empty sand rectangle. Child 1 is the
     video element, whose src js/main.js deliberately never attaches under this
     setting, so the still is child 2. */
  .hero-slide { animation: none; }
  .hero-slide:nth-child(2) { opacity: 1; }

  /* Reveals resolve on arrival rather than sliding up into place, and no
     longer depend on the observer firing at all. */
  .reveal,
  .reveal.visible { opacity: 1; transform: none; transition: none; }

  /* Nothing scales, lifts or slides under the cursor. The opacity fades that
     bring the hover labels up are kept. */
  .img-frame img,
  a:hover .img-frame img { transform: none; transition: none; }
  .view-label,
  a:hover .img-frame .view-label { transform: translate(-50%, -50%); }
  a:hover .img-frame .view-label .arrow { transform: none; }
  .expand-badge,
  a:hover .img-frame .expand-badge { transform: translate(-50%, -50%); }
}

/* Sheet viewer — scrollable drawing set (Services: Landscape Design) */
.sheet-viewer { position: relative; }
.sheet-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--space-sm);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.sheet-track::-webkit-scrollbar { display: none; }
.sheet-track:focus-visible { outline: 1px solid var(--terracotta); outline-offset: 4px; }
.sheet-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.sheet-slide img { width: 100%; height: auto; display: block; }
.sheet-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-sm);
  font-family: 'DM Mono', monospace; font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--charcoal-soft);
}
.sheet-controls button {
  width: 2.5rem; height: 2.5rem; border: 1px solid var(--sand-deep);
  background: transparent; color: var(--charcoal); border-radius: var(--radius);
  cursor: pointer; font-size: 1rem; transition: border-color .2s, color .2s;
}
.sheet-controls button:hover:not(:disabled) { border-color: var(--terracotta); color: var(--terracotta-deep); }
.sheet-controls button:disabled { opacity: .35; cursor: default; }
.sheet-caption { font-size: 0.85rem; margin-top: var(--space-xs); }
@media (prefers-reduced-motion: reduce) { .sheet-track { scroll-behavior: auto; } }

a.doc-frame { display: block; cursor: zoom-in; }

/* Landscape Design: GIS base + concept plans row */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.concept-item { margin: 0; }
.concept-item .img-frame {
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: var(--radius);
}
.concept-item img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .concept-grid { grid-template-columns: 1fr; } }
.service-detail p + p { margin-top: 0.9rem; }