/* ==========================================================================
   Willow & Stone Landscapes — Design System
   A field-notebook: editorial layout, architectural restraint, warm materials.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,340;0,9..144,440;0,9..144,560;1,9..144,400&family=Inter:wght@400;500;600&display=swap');

:root{
  /* ---- palette -------------------------------------------------------- */
  --ivory:      #F2ECDD;   /* primary ground */
  --paper:      #FAF7EF;   /* raised / card ground */
  --ink:        #2E2418;   /* primary text, deep espresso */
  --ink-soft:   #5C5142;   /* secondary text */
  --ink-faint:  #6E6353;   /* tertiary / captions — meets 4.5:1 on ivory & paper */
  --sage:       #8A9A7E;   /* secondary accent */
  --sage-deep:  #5B6B50;   /* text-safe sage */
  --clay:       #955637;   /* accent, warm terracotta — meets 4.5:1 with paper text */
  --clay-deep:  #874B31;   /* clay for text/hover */
  --stone:      #E1D9C7;   /* borders / fills, light */
  --stone-line: #C9BEA6;   /* hairline rule */
  --night:      #241B12;   /* deep ground for the one dark section */
  --night-line: #4A3D2C;

  /* ---- type ------------------------------------------------------------ */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display: clamp(2.6rem, 2vw + 2.2rem, 5.4rem);
  --fs-h1:      clamp(2.2rem, 1.6vw + 1.7rem, 3.6rem);
  --fs-h2:      clamp(1.7rem, 1.1vw + 1.35rem, 2.6rem);
  --fs-h3:      clamp(1.3rem, 0.5vw + 1.1rem, 1.55rem);
  --fs-lead:    clamp(1.05rem, 0.3vw + 0.98rem, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   0.9rem;
  --fs-micro:   0.78rem;

  --container: 1360px;
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --radius: 2px;
}

/* ---- reset --------------------------------------------------------------*/
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--clay); outline-offset: 3px; }

h1,h2,h3{
  font-family: var(--serif);
  font-weight: 440;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ink);
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- eyebrow / kicker ---------------------------------------------------*/
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--sage-deep);
  font-weight: 500;
  margin-bottom: 1.1em;
}
.eyebrow::before{
  content: "";
  width: 28px;
  height: 1px;
  background: var(--clay);
  display: inline-block;
}

/* ---- buttons / links ------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.95em 1.9em;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ background: var(--ink); color: var(--ivory); }
.btn-clay{ border-color: var(--clay); background: var(--clay); color: var(--paper); }
.btn-clay:hover{ background: var(--clay-deep); border-color: var(--clay-deep); color: var(--paper); }
.btn-ghost-light{ border-color: rgba(250,247,239,.55); color: var(--paper); }
.btn-ghost-light:hover{ background: var(--paper); color: var(--night); border-color: var(--paper); }

.link-underline{
  position: relative;
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 500;
  padding-bottom: 0.2em;
}
.link-underline::after{
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
}
.link-underline span.reveal{ display:inline-block; }
.link-underline:hover::after{ animation: underline-sweep .5s ease; }
@keyframes underline-sweep{
  0%{ transform: scaleX(1); transform-origin: right; }
  50%{ transform: scaleX(0); transform-origin: right; }
  50.001%{ transform-origin: left; }
  100%{ transform: scaleX(1); transform-origin: left; }
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242,236,221,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.site-header.is-scrolled{ border-bottom-color: var(--stone-line); }
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.15rem;
}
.logo{
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 440;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.logo em{ font-style: italic; color: var(--clay-deep); }

.main-nav{ display: none; }
.main-nav ul{ display: flex; align-items: center; gap: 2.4rem; }
.main-nav a{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.3rem;
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a.is-active{ color: var(--ink); }
.main-nav a.is-active::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--clay);
}
.header-cta{ display: none; }

.menu-toggle{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.4rem;
}
.menu-toggle span{ width: 24px; height: 1px; background: var(--ink); transition: transform .3s ease, opacity .3s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position: fixed; inset: 0;
  background: var(--ivory);
  z-index: 99;
  padding: 6rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav ul{ display: flex; flex-direction: column; gap: 0.4rem; }
.mobile-nav a{
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--ink);
  display: inline-block;
  padding-block: 0.35rem;
}
.mobile-nav .mobile-nav-foot{
  border-top: 1px solid var(--stone-line);
  padding-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (min-width: 900px){
  .main-nav{ display: block; }
  .header-cta{ display: inline-flex; }
  .menu-toggle{ display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  display: grid;
  grid-template-columns: 1fr;
}
.hero-media{
  order: -1;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.hero-media img{
  width: 100%; height: 100%; object-fit: cover;
  animation: hero-reveal 1.4s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes hero-reveal{
  from{ transform: scale(1.06); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
.hero-copy{
  padding: 3rem var(--gutter) 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  animation: copy-rise 1s cubic-bezier(.25,.8,.25,1) both .2s;
}
@keyframes copy-rise{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
.hero-copy .eyebrow{ margin-bottom: 0; }
.hero-copy h1{ font-size: var(--fs-display); max-width: 14ch; }
.hero-copy .lede{
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 42ch;
}
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }

@media (min-width: 900px){
  .hero{ grid-template-columns: 0.86fr 1fr; min-height: 88vh; }
  .hero-media{ order: 1; aspect-ratio: auto; height: 100%; }
  .hero-copy{ padding: 4rem clamp(2rem,5vw,5rem); }
}

/* ==========================================================================
   Sections / rhythm
   ========================================================================== */
section{ position: relative; }
.section{ padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-tight{ padding-block: clamp(3rem, 6vw, 5rem); }
.hr{ height: 1px; background: var(--stone-line); border: 0; margin: 0; }

/* ---- Introduction (asymmetric editorial) -------------------------------*/
.intro-grid{
  display: grid;
  gap: 2.5rem;
}
.intro-head{ max-width: 20ch; }
.intro-head h2{ font-size: var(--fs-h1); }
.intro-body{
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 52ch;
}
.intro-body p + p{ margin-top: 1.1em; }
@media (min-width: 900px){
  .intro-grid{ grid-template-columns: 5fr 7fr; align-items: start; gap: 3rem; }
  .intro-grid.offset .intro-body{ padding-top: 0.4rem; margin-left: auto; }
}

/* ---- Featured project (editorial case study) ---------------------------*/
.project-feature{ display: grid; gap: 2rem; }
.project-feature figure{ overflow: hidden; }
.project-feature img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.project-feature .fig-a{ aspect-ratio: 4/3; }
.project-feature:hover .fig-a img{ transform: scale(1.035); }
.project-feature-body{ display: flex; flex-direction: column; gap: 1.3rem; }
.project-feature h3{ font-size: var(--fs-h1); max-width: 12ch; }
.project-meta{
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--stone-line);
}
.project-meta dt{ font-size: var(--fs-micro); color: var(--ink-faint); margin-bottom: 0.3em; }
.project-meta dd{ font-size: var(--fs-small); margin: 0; color: var(--ink); }
.project-desc{ font-size: var(--fs-body); color: var(--ink-soft); max-width: 46ch; }

@media (min-width: 900px){
  .project-feature{ grid-template-columns: 7fr 5fr; align-items: end; }
  .project-feature.reverse{ grid-template-columns: 5fr 7fr; }
  .project-feature.reverse .project-feature-body{ order: -1; }
  .project-feature-body{ padding-inline: clamp(0rem,2vw,2.5rem); }
}

.project-feature-dual{ display: grid; gap: 1.25rem; }
.project-feature-dual .fig-b{ aspect-ratio: 5/4; }
@media (min-width: 700px){
  .project-feature-dual{ grid-template-columns: 1.5fr 1fr; align-items: end; }
}

/* ---- Services (editorial index list) ------------------------------------*/
.services-layout{ display: grid; gap: 3rem; }
.services-list{ display: flex; flex-direction: column; }
.service-row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 1.75rem;
  padding-block: 1.9rem;
  border-top: 1px solid var(--stone-line);
  align-items: baseline;
}
.services-list .service-row:last-child{ border-bottom: 1px solid var(--stone-line); }
.service-index{ font-family: var(--serif); font-size: clamp(1.4rem,2vw,2rem); color: var(--stone-line); font-weight: 340; }
.service-row h3{ font-size: var(--fs-h3); margin-bottom: 0.45rem; }
.service-row p{ color: var(--ink-soft); max-width: 52ch; font-size: var(--fs-small); }
.service-figure{ position: sticky; top: 6.5rem; aspect-ratio: 4/5; overflow: hidden; align-self: start; }
.service-figure img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px){
  .services-layout{ grid-template-columns: 1.5fr 1fr; }
}

/* ---- Approach (real sequence — numbered) --------------------------------*/
.approach-grid{ display: grid; gap: 0; border-top: 1px solid var(--stone-line); }
.stage{
  padding-block: 2.4rem;
  border-bottom: 1px solid var(--stone-line);
  display: grid;
  gap: 0.9rem;
}
.stage-num{ font-family: var(--serif); font-size: clamp(2rem,3vw,2.75rem); color: var(--clay); font-weight: 340; }
.stage h3{ font-size: var(--fs-h3); }
.stage p{ color: var(--ink-soft); font-size: var(--fs-small); max-width: 34ch; }
@media (min-width: 900px){
  .approach-grid{ grid-template-columns: repeat(4,1fr); border-top: none; border-left: 1px solid var(--stone-line); }
  .stage{ border-bottom: none; border-right: 1px solid var(--stone-line); padding-inline: 1.75rem; }
}

/* ---- Image-led statement banner ------------------------------------------*/
.statement-banner{
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.statement-banner img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.statement-banner .tint{ position: absolute; inset: 0; background: rgba(36,27,18,.32); }
.statement-banner blockquote{
  position: relative;
  z-index: 1;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  max-width: 16ch;
  padding: clamp(1.75rem,4vw,3.5rem);
  margin: 0;
}
@media (min-width: 900px){ .statement-banner{ aspect-ratio: 21/9; } }

/* ---- About ----------------------------------------------------------------*/
.about-grid{ display: grid; gap: 2.5rem; }
.about-figure{ aspect-ratio: 4/5; overflow: hidden; }
.about-figure img{ width: 100%; height: 100%; object-fit: cover; }
.about-copy .eyebrow{ margin-top: 0; }
.about-copy h2{ font-size: var(--fs-h1); max-width: 16ch; margin-bottom: 1.1rem; }
.about-copy p{ color: var(--ink-soft); font-size: var(--fs-lead); max-width: 48ch; }
.about-copy p + p{ margin-top: 1em; }
.about-facts{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--stone-line); max-width: 30rem; }
.about-facts dt{ font-size: var(--fs-micro); color: var(--ink-faint); margin-bottom: 0.35em; }
.about-facts dd{ font-family: var(--serif); font-size: 1.15rem; margin: 0; }
@media (min-width: 900px){ .about-grid{ grid-template-columns: 5fr 7fr; align-items: center; } }
@media (min-width: 900px){ .about-grid.rev{ grid-template-columns: 7fr 5fr; } .about-grid.rev .about-figure{ order: 2; } }

/* ---- Testimonials -----------------------------------------------------*/
.testimonial-list{ display: grid; gap: 0; border-top: 1px solid var(--stone-line); }
.testimonial{
  padding-block: 2.75rem;
  border-bottom: 1px solid var(--stone-line);
  display: grid;
  gap: 1rem;
}
.testimonial .mark{ font-family: var(--serif); font-size: 2.75rem; color: var(--clay); line-height: 1; font-weight: 400; }
.testimonial p.quote{ font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; max-width: 46ch; line-height: 1.35; }
.testimonial .attr{ font-size: var(--fs-small); color: var(--ink-soft); }
.testimonial .attr strong{ color: var(--ink); font-weight: 500; }
@media (min-width: 900px){
  .testimonial{ grid-template-columns: 2rem 1fr; }
}

/* ---- Service area / map -------------------------------------------------*/
.area-layout{ display: grid; gap: 3rem; align-items: center; }
.area-list{ display: grid; grid-template-columns: repeat(2,1fr); gap: 0.9rem 2rem; margin-top: 2rem; }
.area-list li{ font-family: var(--serif); font-size: 1.15rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--stone-line); }
.coords{ font-size: var(--fs-micro); color: var(--ink-faint); letter-spacing: 0.03em; margin-top: 1.75rem; }
.area-map{ width: 100%; height: auto; }
@media (min-width: 900px){ .area-layout{ grid-template-columns: 1fr 1fr; } }

/* ---- FAQ / accordion ----------------------------------------------------*/
.faq-list{ border-top: 1px solid var(--stone-line); max-width: 54rem; }
.faq-item{ border-bottom: 1px solid var(--stone-line); }
.faq-q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  text-align: left;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 400;
}
.faq-icon{ position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after{ content:""; position:absolute; background: var(--ink); }
.faq-icon::before{ left:0; top:8px; width:18px; height:1px; }
.faq-icon::after{ left:8px; top:0; width:1px; height:18px; transition: transform .3s ease; }
.faq-item[data-open="true"] .faq-icon::after{ transform: rotate(90deg) translateX(0); opacity: 0; }
.faq-a{
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.faq-a p{ padding-bottom: 1.6rem; color: var(--ink-soft); max-width: 58ch; font-size: var(--fs-body); }

/* ---- Final CTA (the one dark, bold moment) -------------------------------*/
.final-cta{
  background: var(--night);
  color: var(--paper);
  padding-block: clamp(4.5rem,9vw,7rem);
}
.final-cta h2{ color: var(--paper); font-size: var(--fs-h1); max-width: 18ch; }
.final-cta .lede{ color: rgba(250,247,239,.72); font-size: var(--fs-lead); max-width: 44ch; margin-top: 1.1rem; }
.final-cta-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin-top: 2.25rem; }
.final-cta-contact{ display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--fs-small); color: rgba(250,247,239,.8); }
.final-cta-contact a:hover{ color: var(--paper); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--night);
  color: rgba(250,247,239,.75);
  padding-top: clamp(3rem,6vw,4.5rem);
  border-top: 1px solid var(--night-line);
}
.site-footer .footer-top{
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-brand .logo{ color: var(--paper); }
.footer-brand p{ margin-top: 0.85rem; font-size: var(--fs-small); max-width: 30ch; color: rgba(250,247,239,.6); }
.footer-col h4{ font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: 0.04em; color: rgba(250,247,239,.5); margin-bottom: 1rem; font-weight: 500; }
.footer-col ul{ display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a:hover{ color: var(--paper); }
.footer-bottom{
  border-top: 1px solid var(--night-line);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-micro);
  color: rgba(250,247,239,.5);
}
@media (min-width: 900px){
  .site-footer .footer-top{ grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr; }
}

/* ==========================================================================
   Page header (subpages)
   ========================================================================== */
.page-header{
  padding-block: clamp(6rem,12vw,9rem) clamp(2.5rem,5vw,4rem);
}
.page-header .eyebrow{ margin-bottom: 1rem; }
.page-header h1{ font-size: var(--fs-display); max-width: 18ch; }
.page-header .lede{ font-size: var(--fs-lead); color: var(--ink-soft); max-width: 46ch; margin-top: 1.1rem; }

.page-header-media{ aspect-ratio: 21/9; overflow: hidden; }
.page-header-media img{ width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Projects grid (masonry-ish editorial)
   ========================================================================== */
.project-grid{
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.project-card{ display: block; }
.project-card figure{ overflow: hidden; }
.project-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.project-card:hover img{ transform: scale(1.045); }
.project-card .card-body{ padding-top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.project-card h3{ font-size: 1.35rem; }
.project-card .card-meta{ font-size: var(--fs-micro); color: var(--ink-faint); text-align: right; white-space: nowrap; }
.project-card .card-desc{ margin-top: 0.5rem; font-size: var(--fs-small); color: var(--ink-soft); max-width: 46ch; }
.project-filters{ display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-block: 1.75rem 3rem; }
.project-filters span{ font-size: var(--fs-small); color: var(--ink-faint); }

@media (min-width: 700px){
  .project-grid{ grid-template-columns: repeat(6, 1fr); }
  .project-grid .span-6{ grid-column: span 6; }
  .project-grid .span-4{ grid-column: span 4; }
  .project-grid .span-3{ grid-column: span 3; }
  .project-grid .span-2{ grid-column: span 2; }
  .project-grid .tall .fig{ aspect-ratio: 3/4; }
  .project-grid .wide .fig{ aspect-ratio: 4/3; }
  .project-grid .square .fig{ aspect-ratio: 1/1; }
  .project-grid .panorama .fig{ aspect-ratio: 21/9; }
}
.project-grid .fig{ aspect-ratio: 4/3; }

/* ==========================================================================
   Project detail page
   ========================================================================== */
.detail-hero{ aspect-ratio: 16/9; overflow: hidden; }
.detail-hero img{ width: 100%; height: 100%; object-fit: cover; }
.detail-intro{ display: grid; gap: 2rem; padding-block: clamp(3rem,6vw,4.5rem); }
.detail-meta-col{ display: grid; gap: 1.4rem; align-content: start; }
.detail-meta-col dt{ font-size: var(--fs-micro); color: var(--ink-faint); margin-bottom: 0.3em; }
.detail-meta-col dd{ font-family: var(--serif); font-size: 1.1rem; margin: 0; }
.detail-copy h1{ font-size: var(--fs-h1); max-width: 16ch; margin-bottom: 1.1rem; }
.detail-copy .lede{ font-size: var(--fs-lead); color: var(--ink-soft); max-width: 48ch; }
@media (min-width: 900px){ .detail-intro{ grid-template-columns: 1fr 2fr; } }

.detail-body{ display: grid; gap: 1.4rem; max-width: 62ch; color: var(--ink-soft); font-size: var(--fs-body); padding-bottom: clamp(2.5rem,5vw,3.5rem); }
.detail-gallery{ display: grid; gap: 1.25rem; padding-bottom: clamp(3rem,6vw,5rem); }
.detail-gallery .fig-tall{ aspect-ratio: 3/4; overflow: hidden; }
.detail-gallery .fig-wide{ aspect-ratio: 16/10; overflow: hidden; }
.detail-gallery img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px){ .detail-gallery{ grid-template-columns: 1.3fr 1fr; align-items: end; } }

.next-project{
  border-top: 1px solid var(--stone-line);
  padding-block: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.next-project .label{ font-size: var(--fs-micro); color: var(--ink-faint); }
.next-project h3{ font-size: var(--fs-h2); margin-top: 0.35rem; }

/* ==========================================================================
   Forms (contact page)
   ========================================================================== */
.form-grid{ display: grid; gap: 2.5rem; }
.field{ display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.6rem; }
.field label{ font-size: var(--fs-micro); color: var(--ink-faint); letter-spacing: 0.02em; }
.field input, .field select, .field textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--stone-line);
  padding-block: 0.6rem;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--clay); outline: none; }
.field textarea{ resize: vertical; min-height: 7rem; }
.field-row{ display: grid; gap: 0 2rem; }
@media (min-width: 700px){ .field-row-2{ grid-template-columns: 1fr 1fr; } .field-row-2 .field{ margin-bottom: 1.6rem; } }
.contact-info{ display: grid; gap: 2rem; align-content: start; }
.contact-info-block dt{ font-size: var(--fs-micro); color: var(--ink-faint); margin-bottom: 0.35em; }
.contact-info-block dd{ font-family: var(--serif); font-size: 1.2rem; margin: 0; }
@media (min-width: 900px){ .form-grid{ grid-template-columns: 1.5fr 1fr; } }
.form-note{ font-size: var(--fs-small); color: var(--ink-faint); margin-top: 0.5rem; }
.form-success{
  display: none;
  border: 1px solid var(--sage-deep);
  background: rgba(138,154,126,.12);
  padding: 1.75rem;
  font-size: var(--fs-body);
}
.form-success.is-visible{ display: block; }

/* ---- detail list (services page inclusions) ------------------------------*/
.detail-list{ margin-top: 1.4rem; display: grid; gap: 0.65rem; }
.detail-list li{
  padding-left: 1.3em;
  position: relative;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.detail-list li::before{
  content: "\2013";
  position: absolute; left: 0; color: var(--clay);
}

/* ==========================================================================
   Reviews page extras
   ========================================================================== */
.reviews-stat-row{ display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; margin-top: 2.5rem; max-width: 34rem; }
@media (min-width: 700px){ .reviews-stat-row{ grid-template-columns: repeat(4,1fr); } }
.reviews-stat dd{ font-family: var(--serif); font-size: clamp(2rem,3vw,2.6rem); margin: 0 0 0.2rem; }
.reviews-stat dt{ font-size: var(--fs-micro); color: var(--ink-faint); }

/* ==========================================================================
   Utility
   ========================================================================== */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0 !important; }
.flow > * + *{ margin-top: 1em; }
.bg-paper{ background: var(--paper); }
.bg-stone{ background: var(--stone); }