/* Homepage layout (06/11/2026 redesign). Homepage only; uses the Deep Water tokens so light/dark both work. */

/* ---------- hero: copy left, real plant photo right ---------- */
.h-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; padding:64px 0 56px }
.h-kicker{ font-size:14px; color:var(--dw-mid); margin:0 0 14px }
.h-kicker b{ color:var(--dw-blue-soft); font-weight:600 }
.h-title{ font-size:clamp(32px,4.4vw,50px); line-height:1.1; font-weight:600; letter-spacing:-.02em; color:var(--dw-bright); margin:0; max-width:15ch }
.h-lede{ font-size:17px; line-height:1.6; color:var(--dw-ink); margin:20px 0 28px; max-width:46ch }
.h-hero .dw-search{ max-width:520px }
.h-facts{ display:flex; flex-wrap:wrap; gap:6px 22px; margin:26px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--dw-mid) }
.h-facts li{ display:flex; align-items:center; gap:8px }
.h-facts li::before{ content:""; width:6px; height:6px; background:var(--dw-blue); border-radius:50% }
.h-shot{ margin:0; position:relative }
.h-shot img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:20% 50% }
.h-shot figcaption{ position:absolute; left:-1px; bottom:22px; background:var(--dw-ground); color:var(--dw-bright);
  font-size:13px; padding:9px 14px 9px 12px; border-left:3px solid var(--dw-blue) }

/* ---------- section headings: plain sentence case, no eyebrow labels ---------- */
.h-sec{ padding:56px 0 8px }
.h-h2{ font-size:clamp(22px,2.6vw,28px); font-weight:600; color:var(--dw-bright); margin:0 0 6px; letter-spacing:-.01em }
.h-intro{ color:var(--dw-mid); margin:0 0 26px; max-width:60ch }

/* ---------- jump-to: two feature tiles + a plain link list ---------- */
.h-feature{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.h-tile{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 42%; min-height:220px; text-decoration:none;
  background:var(--dw-panel); border:1px solid var(--dw-line); overflow:hidden; transition:border-color .15s }
.h-tile:hover{ border-color:var(--dw-blue) }
.h-tile-txt{ padding:26px 24px; display:flex; flex-direction:column }
.h-tile-txt b{ font-size:21px; color:var(--dw-bright); font-weight:600; line-height:1.25 }
.h-tile-txt span{ color:var(--dw-mid); font-size:14.5px; margin-top:8px; line-height:1.5 }
.h-tile-txt em{ font-style:normal; margin-top:auto; padding-top:18px; color:var(--dw-blue-soft); font-weight:600; font-size:14px }
.h-tile:hover em{ color:var(--dw-bright) }
.h-tile-img{ position:relative; overflow:hidden }
.h-tile-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.h-tile-img.is-light{ background:#f3f6f9 }
.h-tile-img.is-light img{ object-fit:contain; padding:14px }

.h-links{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:34px }
.h-links li{ border-top:1px solid var(--dw-line) }
.h-links a{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; padding:14px 2px; text-decoration:none }
.h-links a b{ color:var(--dw-bright); font-weight:600; font-size:15.5px; grid-column:1 }
.h-links a span{ color:var(--dw-dim); font-size:13px; grid-column:1 }
.h-links a:hover b{ color:var(--dw-blue-soft) }
.h-links a::after{ content:"→"; color:var(--dw-blue); grid-column:2; grid-row:1 / span 2; font-size:17px }
.h-links a:hover::after{ transform:translateX(3px); transition:transform .15s }

/* ---------- made here: text + one wide photo ---------- */
.h-made{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center }
.h-made p{ color:var(--dw-ink); margin:0 0 14px; max-width:52ch }
.h-made ul{ margin:6px 0 18px; padding-left:18px; color:var(--dw-ink) }
.h-made li{ margin:4px 0 }
.h-made img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; object-position:60% 50% }
.h-made .h-pair{ display:grid; grid-template-columns:1.35fr 1fr; gap:12px }
.h-made .h-pair img:last-child{ aspect-ratio:auto; height:100% }

/* ---------- talk to us ---------- */
.h-talk{ margin:64px 0 72px; padding:34px 0; border-top:1px solid var(--dw-line); border-bottom:1px solid var(--dw-line);
  display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap }
.h-talk p{ margin:0; color:var(--dw-mid); max-width:56ch }
.h-talk p b{ display:block; font-size:22px; color:var(--dw-bright); font-weight:600; margin-bottom:6px }
.h-talk-act{ display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.h-talk-act .dw-phone{ font-size:26px; font-weight:600 }
.h-talk-act a.dw-link{ font-size:14px }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .h-hero{ grid-template-columns:1fr; gap:34px; padding:40px 0 36px }
  .h-shot img{ aspect-ratio:16/10 }
  .h-feature{ grid-template-columns:1fr }
  .h-links{ grid-template-columns:1fr 1fr }
  .h-made{ grid-template-columns:1fr; gap:28px }
}
@media (max-width:560px){
  .h-tile{ grid-template-columns:1fr 38%; min-height:180px }
  .h-tile-txt{ padding:20px 18px }
  .h-tile-txt b{ font-size:18px }
  .h-links{ grid-template-columns:1fr }
  .h-talk-act{ align-items:flex-start }
  .h-hero .dw-search input{ font-size:16px }
}
.h-addr{ display:inline-block; margin-top:8px; font-size:13.5px; color:var(--dw-dim) }