/* ============ HERO ============ */
.hero{
  position: relative; height: 100vh; min-height: 620px; max-height: 980px;
  overflow: hidden; background: var(--ink); color: var(--paper);
}
.hero-media{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1.6s ease;
}
.hero-slide.active{ opacity:1; }
.hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,17,16,.55) 0%, rgba(18,17,16,.35) 40%, rgba(18,17,16,.86) 100%);
}
.hero-overlay{ position:absolute; inset:0; width:100%; height:100%; opacity:.35; }
.hero-overlay line, .hero-overlay circle{ stroke: var(--orange); stroke-width:1; fill:none; }
.hero-overlay circle{ fill: var(--orange); }

.hero-content{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom: 9vh;
}
.hero-h1{
  font-family: var(--serif); font-weight:400; letter-spacing:-0.01em;
  font-size: clamp(42px, 7.4vw, 108px); line-height: 0.98; margin-top:18px;
}
.hero-ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

.hero-coords{
  position:absolute; bottom:26px; left:0; right:0; z-index:2;
  display:flex; justify-content:space-between; padding: 0 var(--gutter);
  font-family: var(--mono); font-size:11px; letter-spacing:0.08em; color: rgba(245,242,234,.55);
}
.scroll-cue{ position:relative; padding-right:22px; }
.scroll-cue::after{
  content:''; position:absolute; right:0; top:50%; width:14px; height:14px;
  border-right:1px solid rgba(245,242,234,.6); border-bottom:1px solid rgba(245,242,234,.6);
  transform: translateY(-70%) rotate(45deg);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ transform: translateY(-70%) rotate(45deg);} 50%{ transform: translateY(-40%) rotate(45deg);} }

/* ============ 02 ENGINEER INTRO ============ */
.ei-grid{ display:grid; grid-template-columns: 220px 1fr; gap: 40px; }
.quote-lg{
  font-family: var(--serif); font-weight:400; font-size: clamp(26px,3.6vw,44px); line-height:1.18; letter-spacing:-0.01em; max-width: 17ch;
}
.ei-body{ margin-top:24px; font-size:16.5px; color: var(--ink-soft); max-width: 58ch; line-height:1.7; }
.ei-body + .text-link{ margin-top:22px; }

.ei-stats{
  margin-top: 64px; padding-top: 40px; border-top: var(--edge);
  display:grid; grid-template-columns: repeat(4,1fr); gap:24px;
}
.stat{ display:flex; flex-direction:column; gap:8px; }
.stat-num{ font-size: clamp(32px,4vw,52px); font-weight:600; }
.stat-label{ font-size:13px; color:var(--grey); max-width:16ch; }

@media (max-width:760px){
  .ei-grid{ grid-template-columns:1fr; gap:16px; }
  .ei-stats{ grid-template-columns: repeat(2,1fr); row-gap:32px; }
}

/* ============ SECTION HEAD (shared) ============ */
.section-head{ max-width: 780px; margin-bottom: 48px; }
.section-title{
  font-family: var(--serif); font-weight:400; font-size: clamp(30px,4.4vw,54px); line-height:1.08; margin-top:14px; letter-spacing:-0.01em;
}
.section-title.on-dark{ color: var(--paper); }
.section-intro{ margin-top:16px; font-size:16px; color: var(--grey); max-width: 56ch; line-height:1.6; }

/* ============ 03 PROJECT ARCHIVE ============ */
.project-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--grey-line); border: var(--edge); }
.pcard{
  position:relative; background: var(--paper); min-height: 340px; padding: 22px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
}
.pcard-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:0; transform: scale(1.06); transition: opacity .45s ease, transform .45s ease;
}
.pcard::after{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(18,17,16,.15), rgba(18,17,16,.86)); opacity:0; transition:opacity .45s ease; }
.pcard:hover .pcard-bg, .pcard:hover::after{ opacity:1; }
.pcard:hover .pcard-bg{ transform: scale(1); }
.pcard-num{ font-family: var(--mono); font-size:13px; color:var(--grey); position:relative; z-index:2; transition: color .3s ease; }
.pcard:hover .pcard-num{ color: rgba(245,242,234,.7); }
.pcard-body{ position:relative; z-index:2; }
.pcard-type{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--grey); transition: color .3s ease; }
.pcard:hover .pcard-type{ color: rgba(245,242,234,.7); }
.pcard h3{ font-family: var(--serif); font-size: 27px; font-weight:400; margin-top:8px; transition: color .3s ease; }
.pcard:hover h3{ color: var(--paper); }
.pcard-meta{ display:flex; gap:14px; margin-top:12px; font-family:var(--mono); font-size:12px; color: var(--grey); transition: color .3s ease; }
.pcard:hover .pcard-meta{ color: rgba(245,242,234,.65); }
.pcard-metric{ color: var(--orange-dim); font-weight:600; }
.pcard:hover .pcard-metric{ color: var(--orange); }
.pcard-cta{
  position:relative; z-index:2; font-size:13px; font-weight:600; opacity:0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease; color: var(--paper);
}
.pcard:hover .pcard-cta{ opacity:1; transform:none; }

@media (max-width:900px){ .project-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .project-grid{ grid-template-columns: 1fr; } .pcard{ min-height:240px; } }

/* ============ 04 FEATURED PROJECT ============ */
.feat-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; padding-bottom:28px; border-bottom:var(--edge); }
.feat-num{ font-family:var(--mono); font-size:12px; color:var(--orange-dim); letter-spacing:0.06em; }
.feat-title{ font-family:var(--serif); font-size: clamp(36px,5.4vw,68px); font-weight:400; margin-top:8px; }
.feat-sub{ font-family:var(--mono); font-size:13px; color:var(--grey); margin-top:8px; }
.feat-problem{ padding: 40px 0; max-width: 720px; }
.feat-media img{ width:100%; height: clamp(260px,42vw,520px); object-fit:cover; }
.feat-design{ display:grid; grid-template-columns: 220px 1fr; gap:40px; margin-top:44px; }
.feat-design-list{ display:flex; flex-direction:column; }
.feat-design-list li{
  display:flex; gap:18px; align-items:baseline; padding: 16px 0; border-bottom: var(--edge); font-size:17px;
}
.feat-design-list li span{ font-family:var(--mono); font-size:12px; color: var(--orange-dim); }
@media (max-width:760px){ .feat-design{ grid-template-columns:1fr; gap:16px; } }

/* ============ 05 SYSTEM DIAGRAM ============ */
.sys-diagram{
  display:flex; align-items:center; gap:0; overflow-x:auto; padding: 40px 4px 20px;
  border-top: var(--edge); border-bottom: var(--edge);
}
.sd-node{
  flex: 0 0 auto; min-width:150px; padding: 22px 16px; text-align:center; border: 1.5px solid var(--ink);
  background: var(--paper); cursor:pointer; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sd-node-label{ font-family:var(--mono); font-size:12px; letter-spacing:0.03em; }
.sd-node:hover, .sd-node:focus-visible, .sd-node.active{ background: var(--ink); color: var(--paper); transform: translateY(-3px); }
.sd-node.active{ border-color: var(--orange); background: var(--orange); color:var(--white); }
.sd-line{ flex:0 0 auto; width: 34px; height:1.5px; background: var(--grey-line); position:relative; }
.sd-line::after{ content:'→'; position:absolute; right:-3px; top:50%; transform: translateY(-56%); color:var(--grey); font-size:13px; }

.sd-detail{ margin-top: 28px; border: var(--edge); padding: 28px clamp(20px,3vw,36px); background: var(--paper-dim); }
.sd-detail-inner h4{ font-family:var(--serif); font-weight:400; font-size: clamp(20px,2.6vw,28px); margin-top:8px; }
.sd-detail-inner p{ margin-top:12px; color: var(--ink-soft); max-width:62ch; line-height:1.6; }
.sd-detail-specs{ display:flex; gap: 28px; margin-top:20px; flex-wrap:wrap; }
.sd-detail-specs .sd-spec{ font-family:var(--mono); font-size:13px; }
.sd-detail-specs .sd-spec b{ display:block; font-size:11px; color:var(--grey); font-weight:500; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }

/* ============ 06 BEFORE / AFTER ============ */
.ba-slider{
  position:relative; width:100%; aspect-ratio: 16/9; overflow:hidden; user-select:none; border: var(--edge);
  touch-action: none;
}
.ba-after, .ba-before{ position:absolute; inset:0; }
.ba-after img, .ba-before img{ width:100%; height:100%; object-fit:cover; }
.ba-before{ clip-path: inset(0 50% 0 0); }
.ba-tag{
  position:absolute; bottom:16px; left:16px; background: rgba(18,17,16,.78); color:var(--paper);
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em; padding:8px 12px;
}
.ba-before .ba-tag{ left:16px; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:0; cursor: ew-resize;
}
.ba-handle::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:2px; background: var(--paper); transform: translateX(-1px); }
.ba-handle-grip{
  position:absolute; top:50%; left:0; transform: translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background: var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.ba-metrics{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--grey-line); border: var(--edge); margin-top:1px; }
.ba-metric{ background: var(--paper); padding: 24px 22px; }
.ba-metric-row{ display:flex; justify-content:space-between; padding: 12px 0; border-bottom: var(--edge); font-size:15px; }
.ba-metric-row span{ color: var(--grey); }
.ba-metric-row.o{ border-bottom:none; }
.ba-metric-row.o strong{ color: var(--orange-dim); }
@media (max-width:760px){ .ba-metrics{ grid-template-columns:1fr; } }

/* ============ 07 IRRIGATION / FARM MAP ============ */
.irr-media img{ width:100%; height: clamp(220px,38vw,440px); object-fit:cover; }
.irr-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 32px; margin-top:32px; }
.irr-block p{ margin-top:12px; font-size:15.5px; color: var(--ink-soft); line-height:1.65; }
@media (max-width:700px){ .irr-grid{ grid-template-columns:1fr; } }

.farm-map{ display:grid; grid-template-columns: 1.3fr 1fr; gap:1px; background: var(--grey-line); border: var(--edge); margin-top:40px; }
.fm-visual{ background: var(--paper); padding: 20px; display:flex; align-items:center; }
.fm-svg{ width:100%; height:auto; }
.fm-ground{ fill: var(--paper-dim); }
.fm-main{ stroke: var(--orange); stroke-width:3; }
.fm-zones rect, .fm-zones-full rect{ fill: var(--concrete); stroke: var(--paper); stroke-width:3; cursor:pointer; transition: fill .2s ease; }
.fm-zones rect:hover, .fm-zones-full rect:hover{ fill: #c7c2b5; }
.fm-zones rect.fm-active, .fm-zones-full rect.fm-active{ fill: var(--orange); }
.fm-detail{ background: var(--paper-dim); padding: 28px clamp(18px,2.6vw,32px); display:flex; flex-direction:column; justify-content:center; }
.fm-hint{ margin-top:16px; font-size:13px; color:var(--grey); }
@media (max-width:760px){ .farm-map{ grid-template-columns:1fr; } }

/* ============ 08 THINKING / PRINCIPLES ============ */
.on-dark{ color: var(--paper); }
.section-pad.on-dark{ background: var(--ink); }
.principles{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: rgba(245,242,234,.14); border: var(--edge-on-dark); }
.principle{ background: var(--ink); padding: 32px 24px; }
.principle-num{ font-family:var(--mono); font-size:12px; color: var(--orange); }
.principle h3{ font-family:var(--serif); font-weight:400; font-size:24px; margin-top:14px; }
.principle p{ margin-top:12px; color: rgba(245,242,234,.68); font-size:14.5px; line-height:1.55; }
@media (max-width:760px){ .principles{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .principles{ grid-template-columns: 1fr; } }

/* ============ 09 EXPERTISE MATRIX ============ */
.matrix{ display:grid; grid-template-columns: repeat(5,1fr); gap:0; border-top:var(--edge); border-left:var(--edge); margin-bottom:24px; }
.matrix-col{ border-right:var(--edge); border-bottom:var(--edge); padding: 22px 18px; }
.matrix-col h4{ font-size:14px; font-weight:700; margin-bottom:14px; min-height:34px; }
.matrix-col li{ font-size:13.5px; color: var(--ink-soft); padding: 7px 0; border-top: 1px dashed var(--grey-line); }
.matrix-col li:first-child{ border-top:none; }
@media (max-width:900px){ .matrix{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .matrix{ grid-template-columns: 1fr; } }

/* ============ 10 FIELD NOTES ============ */
.notes-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--grey-line); border: var(--edge); }
.note-card{ background: var(--paper); padding: 26px 22px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; transition: background .2s ease; width:100%; border:none; text-align:left; cursor:pointer; font-family:inherit; }
.note-card p{ font-family: var(--serif); font-size:19px; line-height:1.4; margin-top:16px; }
.note-card:hover{ background: var(--paper-dim); }
.note-card:hover p{ color: var(--orange-dim); }
@media (max-width:760px){ .notes-grid{ grid-template-columns:1fr; } }

/* ============ 14 WHO I WORK WITH ============ */
.ww-grid{ display:grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.ww-list{ margin-top:20px; display:flex; flex-direction:column; }
.ww-list li{ padding: 13px 0; border-bottom: var(--edge); font-size:15.5px; }
.ww-statement{ display:flex; align-items:center; }
@media (max-width:760px){ .ww-grid{ grid-template-columns:1fr; gap:24px; } }

/* ============ 15 CTA BAND ============ */
.cta-band{ background: var(--orange); color: var(--white); padding: 64px 0; }
.cta-band-inner{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta-band-inner h2{ font-family:var(--serif); font-weight:400; font-size: clamp(26px,3.6vw,42px); max-width:16ch; }
.cta-band .btn{ background: var(--ink); border-color: var(--ink); }
.cta-band .btn:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }