/* ============================================================
   SCALEWELL — interior pages (work, case study, about)
   ============================================================ */

/* ---- Page hero ---- */
.page-hero { padding-top: 148px; padding-bottom: clamp(40px,5vw,68px); position: relative; }
.page-hero .kicker { margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); letter-spacing: -0.04em; line-height: 0.98; }
.page-hero .lead { margin-top: 22px; max-width: 600px; }
.crumbs { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--faint); font-weight:600; margin-bottom:26px; }
.crumbs a { color:var(--dim); transition:color .2s; }
.crumbs a:hover { color:var(--text); }
.crumbs svg { width:14px; height:14px; opacity:.5; }

/* ---- Work filter ---- */
.filter-bar { display:flex; gap:9px; flex-wrap:wrap; margin-bottom: clamp(30px,4vw,48px); }
.filter-bar button { background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--dim); padding:10px 18px; border-radius:999px; font-size:14px; font-weight:700; transition:all .25s; white-space:nowrap; }
.filter-bar button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.filter-bar button:hover:not(.on) { color:var(--text); border-color:rgba(255,255,255,.2); }

.work-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.work-grid-3 .work-card.hide { display:none; }
@media (max-width:980px){ .work-grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .work-grid-3{grid-template-columns:1fr} }

/* ---- Case study page ---- */
.cs-hero-viz { aspect-ratio:21/9; margin-top:clamp(28px,4vw,44px); border-radius:var(--radius-lg); }
.cs-meta-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:clamp(26px,3vw,36px) clamp(26px,3vw,40px); border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--surface),var(--bg-2)); margin-top:clamp(28px,4vw,44px); }
.cs-meta h5 { font-family:var(--font-body); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin:0 0 8px; font-weight:700; }
.cs-meta p { margin:0; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--text); }
.cs-meta .tags { display:flex; gap:6px; flex-wrap:wrap; }

.cs-body { display:grid; grid-template-columns: 1fr; gap:clamp(48px,6vw,80px); max-width:820px; margin-inline:auto; }
.cs-block h2 { font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:-.03em; margin-bottom:18px; }
.cs-block h2 .num { color:var(--accent-2); font-size:.8em; margin-right:14px; }
.cs-block p { font-size:1.08rem; color:var(--dim); line-height:1.65; }
.cs-block p + p { margin-top:1em; }

.before-after { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
.ba-card { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.ba-card .ba-label { display:flex; align-items:center; gap:8px; padding:13px 18px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line); }
.ba-card .ba-label.after { color:var(--accent-2); }
.ba-card .ba-viz { aspect-ratio:16/11; }
.ba-card .ba-viz.before { filter:grayscale(.7) brightness(.6) saturate(.5); }
@media (max-width:600px){ .before-after{grid-template-columns:1fr} }

.cs-results { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.cs-result { text-align:center; padding:30px 18px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.cs-result b { font-family:var(--font-display); font-weight:700; font-size:2.6rem; letter-spacing:-.03em; display:block; line-height:1; }
.cs-result b .accent-text{ color:var(--accent-2); }
.cs-result span { font-size:13.5px; color:var(--faint); margin-top:8px; display:block; }
@media (max-width:600px){ .cs-results{grid-template-columns:1fr} }

.cs-quote-big { border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(32px,4vw,48px); background:linear-gradient(180deg,var(--surface),var(--bg-2)); position:relative; }
.cs-quote-big .qm { font-family:var(--font-display); font-size:5rem; line-height:.5; color:var(--accent); opacity:.4; height:36px; display:block; }
.cs-quote-big p { font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.4; letter-spacing:-.02em; color:var(--text); margin:0 0 24px; }
.cs-quote-big .by { display:flex; align-items:center; gap:14px; }
.cs-quote-big .av { width:48px; height:48px; border-radius:50%; background:linear-gradient(140deg,var(--accent),#b06bff); flex:none; }
.cs-quote-big b { font-family:var(--font-display); font-size:16px; }
.cs-quote-big span { color:var(--faint); font-size:13.5px; display:block; }

.cs-toollist { display:flex; gap:9px; flex-wrap:wrap; margin-top:8px; }
.cs-next { border-top:1px solid var(--line); }

@media (max-width:760px){ .cs-meta-bar{grid-template-columns:1fr 1fr; gap:24px} }

/* ---- About page ---- */
.about-hero-grid { display:grid; grid-template-columns:1fr 0.85fr; gap:clamp(36px,5vw,72px); align-items:center; }
.about-hero-photo { aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); position:relative; }
.about-hero-photo .viz { position:absolute; inset:0; border:none; border-radius:0; }
@media (max-width:840px){ .about-hero-grid{grid-template-columns:1fr} .about-hero-photo{max-width:420px} }

.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.value-card { padding:30px 28px; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.value-card .vic { width:48px; height:48px; border-radius:13px; background:color-mix(in oklab,var(--accent) 14%,transparent); border:1px solid color-mix(in oklab,var(--accent) 26%,transparent); display:grid; place-items:center; color:var(--accent-2); margin-bottom:20px; }
.value-card .vic svg{width:22px;height:22px}
.value-card h3 { font-size:1.25rem; margin-bottom:10px; }
.value-card p { font-size:14.5px; color:var(--dim); margin:0; }
@media (max-width:840px){ .values-grid{grid-template-columns:1fr} }

.tl { max-width:760px; margin-inline:auto; }
.tl-row { display:grid; grid-template-columns:130px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line); }
.tl-row:first-child { border-top:none; }
.tl-year { font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--accent-2); }
.tl-row h3 { font-size:1.35rem; margin-bottom:8px; }
.tl-row p { font-size:14.5px; color:var(--dim); margin:0; }
@media (max-width:560px){ .tl-row{grid-template-columns:1fr; gap:8px} }

.toolkit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.tool-item { display:flex; align-items:center; gap:14px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.02); transition:border-color .3s, transform .3s; }
.tool-item:hover { border-color:color-mix(in oklab,var(--accent) 40%,transparent); transform:translateY(-3px); }
.tool-item .ti-ic { width:42px; height:42px; border-radius:11px; background:color-mix(in oklab,var(--accent) 13%,transparent); display:grid; place-items:center; color:var(--accent-2); flex:none; font-family:var(--font-display); font-weight:700; font-size:16px; }
.tool-item b { font-family:var(--font-display); font-size:15px; display:block; }
.tool-item span { font-size:12.5px; color:var(--faint); }

/* ---- Legal pages (terms / privacy) ---- */
.legal-body { max-width:760px; margin-inline:auto; }
.legal-body .upd { color:var(--faint); font-size:13.5px; font-weight:600; margin-bottom:34px; }
.legal-body h2 { font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.02em; margin:42px 0 14px; }
.legal-body h2:first-of-type { margin-top:0; }
.legal-body p, .legal-body li { font-size:1.02rem; color:var(--dim); line-height:1.72; }
.legal-body p + p { margin-top:1em; }
.legal-body ul { margin:14px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.legal-body a { color:var(--accent-2); font-weight:600; }
.legal-body strong { color:var(--text); font-weight:700; }