/* =========================================================
   Soily — Resultate (extends styles.css)
   ========================================================= */

/* ---------- Hero ---------- */
.res-hero{position:relative;background:var(--soily-dark-green);color:var(--soily-beige);padding:72px 0 96px;overflow:hidden}
.res-hero .o-mark{position:absolute;top:-120px;right:-160px;width:520px;height:520px;opacity:.09;pointer-events:none}
.res-hero .o-mark img{width:100%;height:100%;display:block}
.res-hero .inner{position:relative;max-width:760px}
.res-hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,5.2vw,68px);line-height:1.02;letter-spacing:-.026em;color:var(--soily-beige);margin:0 0 22px;text-wrap:balance}
.res-hero h1 .accent{color:var(--soily-red)}
.res-hero p.lead-dark{font-size:19px;line-height:1.6;color:rgba(242,233,211,.8);margin:0;max-width:620px}
.res-hero .meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.res-hero .meta-row .chip{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:rgba(242,233,211,.85);background:rgba(242,233,211,.08);border:1px solid rgba(242,233,211,.18);border-radius:var(--radius-pill);padding:8px 16px}
.res-hero .meta-row .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--soily-green);flex:none}

/* ---------- Section shell ---------- */
.res-sec{padding:88px 0}
.res-sec--soft{background:var(--soily-beige-soft,#f7f1e2)}
.res-sec .head{max-width:720px;margin-bottom:48px}
.res-sec .head h2{margin-bottom:16px}
.res-sec .head p{font-size:17px;line-height:1.65;color:var(--soily-dark-green-70);margin:0}

/* ---------- Key stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat-card{background:#fff9ec;border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 30px;display:flex;flex-direction:column;gap:10px}
.stat-card .val{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,4.6vw,58px);line-height:1;letter-spacing:-.03em;color:var(--soily-dark-green)}
.stat-card .val em{font-style:normal;color:var(--soily-red)}
.stat-card .lbl{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--soily-dark-green)}
.stat-card .sub{font-size:13.5px;line-height:1.55;color:var(--soily-dark-green-50)}
.stat-card--accent{background:var(--soily-dark-green);border-color:transparent}
.stat-card--accent .val{color:var(--soily-beige)}
.stat-card--accent .val em{color:#e8a196}
.stat-card--accent .lbl{color:var(--soily-beige)}
.stat-card--accent .sub{color:rgba(242,233,211,.62)}

/* ---------- Legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:26px;margin-bottom:38px}
.legend .li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--soily-dark-green)}
.legend .sw{width:14px;height:14px;border-radius:50%;flex:none}
.sw--treated{background:var(--soily-dark-green)}
.sw--control{background:#cbbfa4}

/* ---------- Bar charts ---------- */
.chart-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.chart{background:#fff9ec;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 28px 24px}
.chart h3{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--soily-dark-green);margin:0 0 4px}
.chart .unit{font-size:12.5px;color:var(--soily-dark-green-50);margin:0 0 22px}
.bars{display:flex;flex-direction:column;gap:16px}
.bar-row{display:grid;grid-template-columns:1fr;gap:7px}
.bar-row .name{font-size:12.5px;font-weight:700;color:var(--soily-dark-green-70)}
.bar-track{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.bar-fill{min-width:0}
.bar{height:26px;border-radius:var(--radius-pill);min-width:4px;transform-origin:left center}
.bar.anim{animation:barIn .85s var(--ease-soft) both}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.bar.anim{animation:none}}
.bar--treated{background:var(--soily-dark-green)}
.bar--control{background:#cbbfa4}
.bar-val{font-family:var(--font-display);font-weight:900;font-size:16px;letter-spacing:-.01em;color:var(--soily-dark-green);white-space:nowrap}

/* ---------- Data table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff9ec}
table.res{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
table.res th,table.res td{padding:14px 18px;text-align:left;border-bottom:1px solid rgba(74,92,75,.1)}
table.res thead th{font-family:var(--font-body);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--soily-dark-green-50);background:rgba(74,92,75,.04)}
table.res tbody th{font-weight:700;color:var(--soily-dark-green);font-size:14px}
table.res td{color:var(--soily-dark-green-70);font-variant-numeric:tabular-nums}
table.res td.num{text-align:right;font-weight:700;color:var(--soily-dark-green)}
table.res tbody tr:last-child th,table.res tbody tr:last-child td{border-bottom:none}
table.res tr.hl td,table.res tr.hl th{background:rgba(128,155,110,.13)}
table.res tr.hl td.num{color:var(--soily-dark-green)}

/* ---------- Method / notes ---------- */
.method-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.steps li{display:grid;grid-template-columns:38px 1fr;gap:18px;align-items:start}
.steps .n{width:38px;height:38px;border-radius:50%;background:var(--soily-green);color:var(--soily-beige);font-family:var(--font-display);font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none}
.steps .tx strong{display:block;font-family:var(--font-body);font-weight:700;font-size:15.5px;color:var(--soily-dark-green);margin-bottom:5px}
.steps .tx span{font-size:14.5px;line-height:1.6;color:var(--soily-dark-green-70)}

.field-map{background:#fff9ec;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;position:sticky;top:100px}
.field-map .cap{font-family:var(--font-body);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--soily-dark-green-50);margin:0 0 18px}
.strip{border-radius:12px;padding:16px 18px;margin-bottom:8px;color:var(--soily-beige)}
.strip .t{font-family:var(--font-body);font-weight:700;font-size:14px;margin-bottom:3px}
.strip .d{font-size:12.5px;opacity:.75}
.strip--treated{background:var(--soily-dark-green)}
.strip--excluded{background:rgba(74,92,75,.07);color:var(--soily-dark-green);box-shadow:inset 0 0 0 1.5px rgba(74,92,75,.22)}
.strip--excluded .d{opacity:1}
.strip--control{background:#cbbfa4;color:#4a5c4b}
.strip--control .d{opacity:.7}
.field-map .road{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soily-dark-green-50);padding:10px 0;border-top:2px dashed rgba(74,92,75,.25);margin-top:12px;text-align:center}

/* ---------- Caveats ---------- */
.caveats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.caveat{background:rgba(242,233,211,.55);border:1px solid var(--border);border-left:none;border-radius:var(--radius-lg);padding:24px 26px;display:flex;gap:16px;align-items:flex-start}
.caveat .ic{width:30px;height:30px;border-radius:50%;background:rgba(203,79,65,.14);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.caveat h4{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--soily-dark-green);margin:0 0 6px}
.caveat p{font-size:14px;line-height:1.6;color:var(--soily-dark-green-70);margin:0}

/* ---------- Quote ---------- */
.quote{background:var(--soily-green);border-radius:var(--radius-xl,28px);padding:52px 56px;display:grid;grid-template-columns:1fr;gap:22px}
.quote blockquote{font-family:var(--font-display);font-weight:900;font-size:clamp(22px,2.4vw,30px);line-height:1.3;letter-spacing:-.018em;color:var(--soily-beige);margin:0;text-wrap:pretty}
.quote .by{font-size:14px;font-weight:700;color:rgba(242,233,211,.78)}

/* ---------- CTA ---------- */
.res-cta{background:var(--soily-dark-green);color:var(--soily-beige);padding:88px 0;position:relative;overflow:hidden}
.res-cta .o-mark{position:absolute;bottom:-200px;left:-140px;width:460px;height:460px;opacity:.08;pointer-events:none}
.res-cta .o-mark img{width:100%;height:100%;display:block}
.res-cta .inner{position:relative;max-width:660px}
.res-cta h2{color:var(--soily-beige);margin-bottom:16px}
.res-cta p{font-size:17.5px;line-height:1.6;color:rgba(242,233,211,.78);margin:0 0 30px}
.res-cta .actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Empty / more-to-come ---------- */
.coming{border:1.5px dashed rgba(74,92,75,.28);border-radius:var(--radius-lg);padding:44px;text-align:center}
.coming h3{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--soily-dark-green);margin:0 0 10px;letter-spacing:-.02em}
.coming p{font-size:15px;line-height:1.6;color:var(--soily-dark-green-70);margin:0 auto 22px;max-width:460px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .stat-grid{grid-template-columns:1fr}
  .chart-grid{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr;gap:44px}
  .field-map{position:static}
  .caveats{grid-template-columns:1fr}
  .quote{padding:38px 30px}
}
@media (max-width:620px){
  .res-sec{padding:60px 0}
  .res-hero{padding:52px 0 68px}
  .res-hero .o-mark{width:340px;height:340px;right:-120px;top:-70px}
  .stat-card{padding:26px 24px}
  .chart{padding:22px 20px}
  .legend{gap:16px}
}