/* ============================================================
   RESOURCES — 1:1 with VnWaS. Fluid / rem.
   ============================================================ */
.res-hero{ padding-top:3.5rem; padding-bottom:2.25rem; }
.res-hero-inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:2.5rem; }
.res-crumb{ font-family:var(--font-display); font-weight:700; font-size:0.719rem; letter-spacing:.11em; color:#AEB7A6; margin:0 0 0.875rem; }
.res-title{ font-family:var(--font-display); font-weight:800; font-size:3.25rem; letter-spacing:-.01em; line-height:1.02; color:#F6F8F3; margin:0 0 0.875rem; }
.res-sub{ color:#AEB7A6; font-size:0.9375rem; line-height:1.5; max-width:35rem; margin:0; }
.res-count{ display:flex; flex-direction:column; align-items:flex-end; flex:none; }
.res-count-n{ font-family:var(--font-display); font-weight:800; font-size:2.5rem; line-height:1; color:#F6F8F3; }
.res-count-l{ font-family:var(--font-display); font-weight:700; font-size:0.656rem; letter-spacing:.09em; color:#AEB7A6; margin-top:0.25rem; }

/* Document register (dark) */
.res-register{ background:#272E27; }
.res-register .wrap{ padding-block:3rem 3.5rem; }
.res-h2{ font-family:var(--font-display); font-weight:800; font-size:1.375rem; color:#232925; margin:0 0 1rem; }
.res-h2.light{ color:#F6F8F3; }
.doc-table{ margin-top:1rem; }
.doc-row{ display:grid; grid-template-columns:1fr 10.625rem 8.125rem 5.625rem 2.5rem; align-items:center; gap:1.25rem; padding-block:0.875rem; border-bottom:1px solid #3A4238; color:inherit; }
.doc-head{ border-bottom:1.5px solid #F6F8F3; padding-block:0.75rem; }
.doc-head span{ font-family:var(--font-display); font-weight:700; font-size:0.688rem; letter-spacing:.09em; color:#AEB7A6; }
a.doc-row{ transition:background .12s ease; }
a.doc-row:hover{ background:#2C342B; }
.doc-row .d0{ font-family:var(--font-display); font-weight:700; font-size:0.906rem; color:#F6F8F3; }
.doc-row .d1, .doc-row .d2{ color:#AEB7A6; font-size:0.781rem; }
.doc-row .d3{ color:#F6F8F3; font-size:0.813rem; }
.doc-row .d4{ display:flex; justify-content:flex-end; color:#F6F8F3; }
.doc-row .d4 svg{ width:1.0625rem; height:1.0625rem; }

/* System build-ups (light) */
.res-buildups{ background:#FBFAF6; }
.res-buildups .wrap{ padding-block:3.75rem; }
.res-bu-hdr{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.res-bu-link{ font-family:var(--font-display); font-weight:700; font-size:0.781rem; letter-spacing:.03em; color:#232925; }
.res-bu-link:hover{ color:var(--brand); }
.res-bu{ display:flex; align-items:center; gap:2.75rem; margin-bottom:2rem; }
.res-bu.rev{ flex-direction:row-reverse; }
.res-bu-diagram{ flex:0 0 32.5rem; height:18.75rem; background-color:#fff; background-size:contain; background-position:center; background-repeat:no-repeat; border:1px solid #E4E0D4; border-radius:0.25rem; }
.res-bu-info{ flex:1 1 0; display:flex; flex-direction:column; gap:0.875rem; }
.res-bu-code{ font-family:var(--font-display); font-weight:700; font-size:0.719rem; letter-spacing:.12em; color:#5C6660; }
.res-bu-name{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.01em; color:#232925; }
.res-bu-layers{ margin-top:0.375rem; }
.res-layer{ display:flex; align-items:center; gap:1.25rem; padding-block:0.6875rem; border-bottom:1px solid #E4E0D4; }
.res-layer:last-child{ border-bottom:0; }
.res-layer-k{ flex:0 0 6.875rem; font-family:var(--font-display); font-weight:700; font-size:0.656rem; letter-spacing:.09em; color:#5C6660; }
.res-layer-v{ color:#232925; font-size:0.844rem; }

/* CTA (dark) */
.res-cta{ background:#171B17; }
.res-cta-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.125rem; padding-block:3.75rem; }
.res-cta-e{ font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.1em; color:#AEB7A6; margin:0; }
.res-cta-h{ font-family:var(--font-display); font-weight:800; font-size:1.875rem; color:#F6F8F3; margin:0; max-width:43.75rem; }

@media (max-width:900px){
  .res-hero-inner{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .res-count{ align-items:flex-start; }
  .res-title{ font-size:2.5rem; }
  .doc-row{ grid-template-columns:1fr 5rem 2.5rem; }
  .doc-row .d1, .doc-head .d1, .doc-row .d2, .doc-head .d2{ display:none; }
  .res-bu, .res-bu.rev{ flex-direction:column; align-items:stretch; }
  .res-bu-diagram{ flex-basis:auto; width:100%; }
}
@media (max-width:480px){
  .res-title{ font-size:2rem; }
}