/* YesterLabs — shared components for content pages */

/* page header (dark) */
.page-head{ background:var(--ink); color:var(--t-on-ink); padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(44px,6vw,80px); }
.page-head .head-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,5vw,64px); align-items:end; }
.page-head h1{ margin:18px 0 0; }
.page-head .lead{ margin-top:0; }
@media (max-width:860px){ .page-head .head-grid{ grid-template-columns:1fr; gap:24px; } }

/* intro / two-col lede */
.lede{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(24px,5vw,80px); }
.lede .h-md{ max-width:24ch; }
@media (max-width:860px){ .lede{ grid-template-columns:1fr; gap:20px; } }

/* section header row */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
.sec-head h2{ margin-top:18px; }

/* numbered capability / step list */
.steps{ border-top:1px solid var(--hair); }
.ink-bg .steps{ border-color:var(--hair-d); }
.step{ display:grid; grid-template-columns:96px 1fr; gap:clamp(20px,4vw,56px); padding:34px 0; border-bottom:1px solid var(--hair); align-items:start; transition:.3s; }
.ink-bg .step{ border-color:var(--hair-d); }
.step:hover{ background:color-mix(in srgb,var(--card) 60%, transparent); }
.ink-bg .step:hover{ background:var(--ink-1); }
.step__n{ font-family:var(--f-mono); font-size:14px; color:var(--accent); letter-spacing:.08em; padding-top:6px; }
.step__t{ margin-bottom:12px; }
.step__d{ color:var(--t-mid); max-width:60ch; font-size:16px; }
.ink-bg .step__d{ color:var(--t-on-ink-mid); }
@media (max-width:600px){ .step{ grid-template-columns:1fr; gap:10px; padding:26px 0; } }

/* offer / feature card grid */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair); border-left:1px solid var(--hair); }
.ink-bg .feat-grid{ border-color:var(--hair-d); }
.feat{ padding:36px 32px 42px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); transition:.35s var(--ease); }
.ink-bg .feat{ border-color:var(--hair-d); }
.feat:hover{ background:var(--card); }
.ink-bg .feat:hover{ background:var(--ink-1); }
.feat__n{ font-family:var(--f-mono); font-size:13px; color:var(--t-lo); letter-spacing:.08em; }
.feat__t{ margin:24px 0 12px; }
.feat__d{ color:var(--t-mid); font-size:15.5px; }
.ink-bg .feat__d{ color:var(--t-on-ink-mid); }
@media (max-width:900px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .feat-grid{ grid-template-columns:1fr; } }

/* defining values / chips list */
.values{ display:flex; flex-wrap:wrap; gap:12px; }
.value-tag{ font-family:var(--f-disp); font-weight:600; text-transform:uppercase; font-size:clamp(20px,2.4vw,30px); letter-spacing:.005em;
  padding:12px 20px; border:1px solid var(--hair); color:var(--t-hi); transition:.3s var(--ease); }
.ink-bg .value-tag{ border-color:var(--hair-d); color:#fff; }
.value-tag:hover{ border-color:var(--accent); color:var(--accent); }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.ink-bg .stats{ background:var(--hair-d); border-color:var(--hair-d); }
.stat{ background:var(--paper); padding:32px 28px; }
.ink-bg .stat{ background:var(--ink); }
.stat__v{ font-family:var(--f-disp); font-weight:700; font-size:clamp(34px,4vw,54px); line-height:1; }
.stat__l{ font-family:var(--f-mono); font-size:12px; color:var(--t-mid); letter-spacing:.06em; text-transform:uppercase; margin-top:14px; }
.ink-bg .stat__l{ color:var(--t-on-ink-mid); }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } }

/* prose */
.prose p{ font-size:18px; line-height:1.65; color:var(--t-mid); margin-bottom:22px; max-width:64ch; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--t-hi); font-weight:600; }
.ink-bg .prose p{ color:var(--t-on-ink-mid); }
.ink-bg .prose strong{ color:#fff; }

/* not-list (we are not...) */
.not-list{ display:flex; flex-direction:column; gap:2px; }
.not-list li{ list-style:none; display:flex; gap:16px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--hair); font-family:var(--f-disp); font-weight:600; text-transform:uppercase; font-size:clamp(20px,2.6vw,32px); color:var(--t-hi); }
.ink-bg .not-list li{ border-color:var(--hair-d); color:#fff; }
.not-list li .x{ color:var(--accent); font-family:var(--f-mono); font-size:14px; }

/* big closing statement */
.closing{ background:var(--ink); color:#fff; }
.closing .big{ font-family:var(--f-disp); text-transform:uppercase; font-weight:700; font-size:clamp(28px,4vw,56px); line-height:1.04; letter-spacing:-.01em; max-width:20ch; }
.closing .big em{ font-style:normal; background:linear-gradient(180deg,#fff,#9aa0a7); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* generic cta band */
.cta-band{ background:var(--ink); color:#fff; }
.cta-band .inner{ display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:end; }
@media (max-width:900px){ .cta-band .inner{ grid-template-columns:1fr; gap:32px; } }

/* media block (text + placeholder) */
.media{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.media.rev > .media__txt{ order:2; }
.media__fig{ aspect-ratio:4/3; }
@media (max-width:860px){ .media{ grid-template-columns:1fr; gap:28px; } .media.rev > .media__txt{ order:0; } }