/* === Page 2: Design patterns === */

/* Shared section head tweaks */
.d2-01 .section-head,
.d2-02 .section-head,
.d2-03 .section-head{
  display: grid; gap: 10px; margin-bottom: 22px;
}
.section-title{ font-family: "Merriweather", serif; color: var(--hedge); }

/* SECTION 01 — Leeward Forms */
.leeward-forms{
  border-top: 1px solid #e2efe8;
  background:
    linear-gradient(180deg, rgba(223,238,231,.5), rgba(223,238,231,0)) 0 0 / 100% 54px no-repeat;
}
.profiles-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
@media (max-width: 1100px){
  .profiles-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 860px){
  .profiles-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .profiles-grid{ grid-template-columns: 1fr; }
}

/* SECTION 02 — Joinery Ledger (split + checklist) */
.joinery-ledger{ border-top: 1px solid #e2efe8; }
.split-ledger{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.ledger-check{
  background: #ffffff; border: 1px dashed #d2e5dd; border-radius: var(--radius-lg);
  padding: 14px 16px; box-shadow: var(--shadow); color:#2a4439;
}
.ledger-check h3{ margin: 0 0 8px; font-family:"Merriweather", serif; color: var(--hedge); }
.ledger-check ul{ margin: 0; padding-left: 18px; display: grid; gap: 6px; }
@media (max-width: 1100px){
  .split-ledger{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 860px){
  .split-ledger{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .split-ledger{ grid-template-columns: 1fr; }
}

/* SECTION 03 — Light Study (image compare slider) */
.light-study{ border-top: 1px solid #e2efe8; }
.compare{
  display: grid; gap: 10px;
  max-width: 720px;
}
.compare-stage{
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #ecf3ef;
}
.compare-stage img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none; /* allow stage to define size */
}
.compare-stage .base{ position: relative; z-index: 1; }
.compare-stage .mask{
  position: absolute; inset: 0 auto 0 0; z-index: 2;
  width: 50%; /* default 50/50 */
  pointer-events: none;
}
.compare-range{
  width: 100%;
  appearance: none;
  height: 6px; border-radius: 999px;
  background: #eaf3ef; border: 1px solid #dcebe4;
}
.compare-range::-webkit-slider-thumb{
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 1px solid #d7e7df; box-shadow: var(--shadow);
}
.compare-range::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 1px solid #d7e7df; box-shadow: var(--shadow);
}
.compare-legend{
  display: flex; justify-content: space-between;
  font-size: .9rem; color: #2a4439;
}

/* General section text width */
.d2-01 .section-text,
.d2-02 .section-text,
.d2-03 .section-text{
  margin-top: 16px; display: grid; gap: 12px; max-width: 76ch; color:#2a4439;
}
/* ===== SECTION 04 — Vent Mechanics ===== */
.d2-04{ border-top: 1px solid #e2efe8; }
.mechanics-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.spec-list{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 280px));
  align-items: start;
}
.spec h3{ margin: 0 0 6px; color: var(--hedge); }
.spec .bar{
  height: 8px; border-radius: 999px; overflow: hidden;
  background: #eaf3ef; border: 1px solid #dcebe4;
}
.spec .bar .fill{
  display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .8s ease;
}
.reveal.is-visible .spec .bar .fill.to-70{ width: 70%; }
.reveal.is-visible .spec .bar .fill.to-60{ width: 60%; }
.reveal.is-visible .spec .bar .fill.to-20{ width: 20%; }

@media (max-width: 1100px){
  .mechanics-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .spec-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .mechanics-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .mechanics-grid{ grid-template-columns: 1fr; }
  .spec-list{ grid-template-columns: 1fr; }
}

/* ===== SECTION 05 — Drainage Atlas ===== */
.d2-05{ border-top: 1px solid #e2efe8; }
.atlas-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.atlas-callouts{
  margin: 14px 0 0; padding-left: 0; list-style: none;
  display: grid; gap: 8px; color:#2a4439;
}
.atlas-callouts .pin{
  display:inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 8px; vertical-align: -1px;
  background: radial-gradient(circle at 35% 35%, #6b9f86, #3f715a);
  box-shadow: 0 0 0 2px #dfeee7;
}
@media (max-width: 1100px){
  .atlas-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 860px){
  .atlas-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .atlas-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 06 — Hedgeworks ===== */
.d2-06{ border-top: 1px solid #e2efe8; }
.hedgeworks-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.hedge-faq{
  margin-top: 14px;
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hedge-faq details{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 10px 12px; box-shadow: var(--shadow); color:#2a4439;
}
.hedge-faq summary{
  cursor: pointer; font-weight: 700; color: var(--hedge);
  list-style: none;
}
.hedge-faq summary::-webkit-details-marker{ display:none; }

@media (max-width: 1100px){
  .hedgeworks-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .hedge-faq{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .hedgeworks-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hedge-faq{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .hedgeworks-grid{ grid-template-columns: 1fr; }
  .hedge-faq{ grid-template-columns: 1fr; }
}
/* ===== SECTION 07 — Modularity Kit ===== */
.d2-07{ border-top: 1px solid #e2efe8; }
.kit-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.kit-matrix{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.matrix-card{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; box-shadow: var(--shadow); color:#2a4439;
}
.chips{
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.chip{
  padding: 6px 10px; border-radius: 999px;
  background: #dfeee7; color: #2f5b46; border: 1px solid #cfe2d9;
  font-weight: 700; font-size: .9rem;
}
.bullets{ margin: 0; padding-left: 18px; display: grid; gap: 6px; }

@media (max-width: 1100px){
  .kit-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .kit-matrix{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .kit-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-matrix{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .kit-grid{ grid-template-columns: 1fr; }
  .kit-matrix{ grid-template-columns: 1fr; }
}

/* ===== SECTION 08 — Thermal Edges ===== */
.d2-08{
  border-top: 1px solid #e2efe8;
  background:
    radial-gradient(900px 80px at 50% 0, rgba(223,238,231,.35), transparent 60%) no-repeat;
}
.edges-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.heat-bars{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 280px));
}
.heat h3{ margin: 0 0 6px; color: var(--hedge); }
.heat .bar{
  height: 8px; border-radius: 999px; overflow: hidden;
  background: #eaf3ef; border: 1px solid #dcebe4;
}
.heat .bar .fill{
  display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .9s ease;
}
.reveal.is-visible .heat .bar .fill.to-65{ width: 65%; }
.reveal.is-visible .heat .bar .fill.to-80{ width: 80%; }
.reveal.is-visible .heat .bar .fill.to-40{ width: 40%; }

@media (max-width: 1100px){
  .edges-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .heat-bars{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .edges-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heat-bars{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .edges-grid{ grid-template-columns: 1fr; }
  .heat-bars{ grid-template-columns: 1fr; }
}

/* ===== SECTION 09 — Access Doors ===== */
.d2-09{ border-top: 1px solid #e2efe8; }
.access-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.door-checks{
  margin: 14px 0 0; padding-left: 0; list-style: none;
  display: grid; gap: 8px; color:#2a4439;
}
.door-checks .check{
  display:inline-block; width: 16px; height: 16px; border-radius: 4px;
  margin-right: 8px; vertical-align: -3px; position: relative;
  background: #dfeee7; border: 1px solid #cfe2d9; box-shadow: var(--shadow);
}
.door-checks .check::after{
  content:""; position:absolute; inset: 2px; border-radius: 2px; width: 0;
  background: linear-gradient(180deg, #8bb4a0, #6b9f86);
  transition: width .5s ease;
}
.reveal.is-visible .door-checks li:nth-child(1) .check::after{ width: calc(100% - 4px); transition-delay: .05s; }
.reveal.is-visible .door-checks li:nth-child(2) .check::after{ width: calc(100% - 4px); transition-delay: .2s; }
.reveal.is-visible .door-checks li:nth-child(3) .check::after{ width: calc(100% - 4px); transition-delay: .35s; }

@media (max-width: 1100px){
  .access-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 860px){
  .access-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .access-grid{ grid-template-columns: 1fr; }
}
/* ===== SECTION 10 — Bench Ergonomics ===== */
.d2-10{ border-top: 1px solid #e2efe8; }
.ergo-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.ergo-metrics{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 280px));
}
.ergo-metrics .m h3{ margin: 0 0 6px; color: var(--hedge); }
.ergo-metrics .bar{
  height: 8px; border-radius: 999px; overflow: hidden;
  background: #eaf3ef; border: 1px solid #dcebe4;
}
.ergo-metrics .bar .fill{
  display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .9s ease;
}
.reveal.is-visible .ergo-metrics .bar .fill.to-90{ width: 90%; }
.reveal.is-visible .ergo-metrics .bar .fill.to-75{ width: 75%; }
.reveal.is-visible .ergo-metrics .bar .fill.to-60{ width: 60%; }

@media (max-width: 1100px){
  .ergo-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .ergo-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .ergo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ergo-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .ergo-grid{ grid-template-columns: 1fr; }
  .ergo-metrics{ grid-template-columns: 1fr; }
}

/* ===== SECTION 11 — Acoustic Hush ===== */
.d2-11{ border-top: 1px solid #e2efe8; }
.acoustic-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.hush-facts{
  margin: 14px 0 0; padding-left: 0; list-style: none;
  display: grid; gap: 8px; color:#2a4439;
}
.hush-facts .tick{
  display:inline-block; width: 16px; height: 16px; border-radius: 4px;
  margin-right: 8px; vertical-align: -3px; position: relative;
  background: #dfeee7; border: 1px solid #cfe2d9; box-shadow: var(--shadow);
}
.hush-facts .tick::after{
  content:""; position:absolute; inset: 3px; border-radius: 2px; width: 0;
  background: linear-gradient(180deg, #8bb4a0, #6b9f86);
  transition: width .5s ease;
}
.reveal.is-visible .hush-facts li:nth-child(1) .tick::after{ width: calc(100% - 6px); transition-delay: .05s; }
.reveal.is-visible .hush-facts li:nth-child(2) .tick::after{ width: calc(100% - 6px); transition-delay: .2s; }
.reveal.is-visible .hush-facts li:nth-child(3) .tick::after{ width: calc(100% - 6px); transition-delay: .35s; }

@media (max-width: 1100px){
  .acoustic-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 860px){
  .acoustic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .acoustic-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 12 — Maintenance Playbook ===== */
.d2-12{ border-top: 1px solid #e2efe8; }
.playbook-columns{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.play.card{
  padding: 14px 16px;
}
.play h3{ margin: 10px 0 8px; color: var(--hedge); }
.play .list{
  margin: 0; padding-left: 18px; display: grid; gap: 6px; color:#2a4439;
}
.play figure{ margin: 0 0 8px; }

@media (max-width: 1100px){
  .playbook-columns{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 860px){
  .playbook-columns{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .playbook-columns{ grid-template-columns: 1fr; }
}
/* ===== SECTION 13 — Labels System ===== */
.d2-13{ border-top: 1px solid #e2efe8; }
.labels-grid{
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 350px) 1fr;
  align-items: start;
}
.label-cards{
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lcard{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.lcard h3{ margin: 0 0 8px; color: var(--hedge); }
.lcard .note{ margin: 8px 0 0; font-size: .95rem; color:#28483b; }
@media (max-width: 1100px){
  .labels-grid{ grid-template-columns: 1fr; }
  .label-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .label-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .label-cards{ grid-template-columns: 1fr; }
}

/* ===== SECTION 14 — Safety & Compliance ===== */
.d2-14{ border-top: 1px solid #e2efe8; }
.safety-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 260px));
  align-items: start;
}
.rule h3{ margin: 0 0 6px; color: var(--hedge); display:flex; align-items:center; gap:8px; }
.ico::before{
  content:""; display:inline-block; width: 18px; height: 18px; border-radius: 4px;
  background: linear-gradient(180deg, #8bb4a0, #6b9f86);
  box-shadow: var(--shadow);
}
.ico-clear::before{ mask: radial-gradient(circle at 60% 50%, #000 7px, transparent 8px) }
.ico-guard::before{ mask: linear-gradient(#000 0 0) }
.ico-pinch::before{ mask: conic-gradient(from 45deg, #000 0 25%, transparent 0 100%) }
.ico-label::before{ mask: linear-gradient(90deg, #000 0 60%, transparent 60%) }

@media (max-width: 1200px){
  .safety-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .safety-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 15 — Energy Routine ===== */
.d2-15{ border-top: 1px solid #e2efe8; }
.energy-rows{
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.energy-rows .row h3{ margin: 0 0 6px; color: var(--hedge); }
.energy-rows .bar{
  height: 8px; border-radius: 999px; overflow: hidden;
  background: #eaf3ef; border: 1px solid #dcebe4;
}
.energy-rows .bar .fill{
  display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .9s ease;
}
.reveal.is-visible .energy-rows .bar .fill.to-40{ width: 40%; }
.reveal.is-visible .energy-rows .bar .fill.to-70{ width: 70%; }
.reveal.is-visible .energy-rows .bar .fill.to-55{ width: 55%; }

@media (max-width: 980px){
  .energy-rows{ grid-template-columns: 1fr; }
}

/* ===== SECTION 16 — Handover Kit ===== */
.d2-16{ border-top: 1px solid #e2efe8; }
.handover-columns{
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 350px) 1fr;
  align-items: start;
}
.handover-columns .lists{
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hcard{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.hcard h3{ margin: 0 0 8px; color: var(--hedge); }

@media (max-width: 1100px){
  .handover-columns{ grid-template-columns: 1fr; }
  .handover-columns .lists{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .handover-columns .lists{ grid-template-columns: 1fr; }
}