/* ==========================================================================
   ASPECT MANAGEMENT SERVICES — "Contour & Current" design system v1.1
   File: layout.css
   Source of truth: Aspect Website.pdf (design-system board, PDF pp. 1–6). These files are the
   stylesheet the PDF was rendered from, split by section; visual rules are unchanged.
   ========================================================================== */

/* ---------- Layout -------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(72px, 8vw, 128px); position: relative; }
.sec--tight { padding-block: clamp(56px, 6vw, 88px); }
.sec--white { background: var(--white); }
.sec--mist { background: var(--mist); }
.sec--sand { background: var(--sand); }
.sec--deep { background: var(--deep); color: var(--on-deep); }
.sec--rule { border-top: 1px solid var(--line); }

.stack { display: flex; flex-direction: column; gap: var(--s5); }
.stack--s { gap: var(--s3); }
.stack--l { gap: var(--s7); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.row--between { justify-content: space-between; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid--200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--340 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid--wide-gap { gap: clamp(32px, 4vw, 64px); }

.split { display: grid; gap: clamp(36px, 5vw, 88px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--top { align-items: start; }
.split--end { align-items: end; }

/* ---------- Section heads ------------------------------------------------- */
.sec-head { display: grid; gap: 20px; max-width: 780px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head--split { max-width: none; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 88px); align-items: end; }
.sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- Heroes -------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 6vw, 96px) clamp(56px, 6vw, 96px); }
.hero__top { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 72px); align-items: end; position: relative; z-index: 1; }
.hero__media { margin-top: clamp(40px, 5vw, 72px); position: relative; z-index: 1; }
.page-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 6vw, 96px) clamp(56px, 6vw, 96px); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: end; position: relative; z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.crumbs a { color: var(--muted); }
.crumbs span[aria-hidden] { opacity: .6; }

/* Decorative terrain contours + logo currents */
.contours { position: absolute; pointer-events: none; z-index: 0; }
.contours path { fill: none; stroke: var(--line-2); stroke-width: 1; }
.sec--deep .contours path { stroke: var(--deep-line); }
.wv { display: block; width: 100%; overflow: visible; }
.wv path { fill: none; stroke-linecap: round; }
.wv .w1 { stroke: var(--blue); stroke-width: 2.5; }
.wv .w2 { stroke: var(--azure); stroke-width: 2; }
.wv .w3 { stroke: var(--green); stroke-width: 1.5; opacity: .75; }
.sec--deep .wv .w1 { stroke: var(--on-deep-blue); }
.sec--deep .wv .w2 { stroke: var(--azure); opacity: .7; }
.sec--deep .wv .w3 { stroke: var(--on-deep-green); }