/* ===== Shared light layout for secondary pages (work, case study, experience)
   used by every non-Classic template so the whole site stays consistent.
   Accent gradient comes from the profile's theme colors (set inline on body). */
:root {
    --bg:#f7f8fc; --surface:#ffffff; --panel:#f2f3f9; --ink:#12131a; --body:#41455a;
    --muted:#6c7188; --faint:#9aa0b4; --line:#e7e9f2;
    --shadow:0 18px 46px rgba(17,20,39,.09); --shadow-lg:0 34px 74px rgba(17,20,39,.14); --radius:18px;
    --accent:#4f46e5; --accent2:#0ea5e9;
    --sans:"Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--body); font-family:var(--sans); font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.narrow { max-width:760px; }
a { color:inherit; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:16px; top:16px; background:var(--surface); padding:10px 16px; border-radius:8px; z-index:50; }

/* Header / footer shared with the marketing homepages */
.nav { position:sticky; top:0; z-index:30; background:rgba(247,248,252,.85); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s; }
.nav.scrolled { border-color:var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; max-width:1080px; margin:0 auto; padding:15px 24px; }
.brand { display:flex; gap:10px; align-items:center; font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand .mk { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent2)); }
.nav-links a { color:var(--muted); text-decoration:none; font-weight:600; font-size:14.5px; margin-left:20px; }
.nav-links a:hover, .nav-links a.on { color:var(--ink); }
@media (max-width:600px){ .nav-links a:not(.nav-cta){ display:none; } }
.nav-cta { color:#fff !important; padding:9px 18px; border-radius:10px; background:linear-gradient(100deg,var(--accent),var(--accent2)); }

.page-head { padding:64px 0 30px; }
.page-head .eyebrow { color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.page-head h1 { font-size:clamp(34px,5.6vw,58px); line-height:1.04; letter-spacing:-.03em; font-weight:800; color:var(--ink); margin-top:14px; max-width:20ch; }
.page-head p { color:var(--muted); font-size:clamp(16px,2vw,20px); max-width:60ch; margin-top:16px; }

.breadcrumb { font-size:14px; color:var(--muted); margin-bottom:22px; }
.breadcrumb a { color:var(--accent); text-decoration:none; }
.breadcrumb span { margin:0 8px; color:var(--faint); }

section { padding:34px 0; }
h2.block { font-size:clamp(22px,3.4vw,30px); letter-spacing:-.02em; font-weight:800; color:var(--ink); margin-bottom:16px; }
h3.sub { font-size:18px; font-weight:700; color:var(--ink); margin-bottom:8px; }
p.para { color:var(--body); margin-bottom:.9em; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.chip { display:inline-block; font-size:12.5px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:5px 12px; }
.chip-accent { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%, #fff); border-color:color-mix(in srgb,var(--accent) 22%, transparent); }
.tags { display:flex; flex-wrap:wrap; gap:8px; }

/* Work index */
.work-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.wk { display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.wk:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--accent) 26%, var(--line)); }
.wk .tag { color:var(--accent); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.wk h3 { color:var(--ink); font-size:22px; font-weight:800; letter-spacing:-.02em; margin:12px 0 8px; }
.wk p { color:var(--muted); font-size:15px; }
.wk .tags { margin-top:14px; }
.wk .tags b { font-weight:500; font-size:12px; color:var(--faint); border:1px solid var(--line); border-radius:100px; padding:4px 11px; }
@media (max-width:720px){ .work-grid{ grid-template-columns:1fr; } }

/* Case study detail */
.proof-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0; }
.proof-row .b { text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; }
.proof-row .b strong { display:block; font-size:30px; font-weight:800; color:var(--ink); background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.proof-row .b span { color:var(--muted); font-size:13px; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:10px 0 8px; }
.summary-grid .g { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
.summary-grid .g h3 { font-size:14px; color:var(--accent); font-weight:700; margin-bottom:8px; }
.summary-grid .g p { color:var(--body); font-size:14.5px; }
@media (max-width:720px){ .proof-row, .summary-grid{ grid-template-columns:1fr; } }
.detail-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin:6px 0; }
.detail-list li { display:flex; gap:10px; color:var(--body); }
.detail-list li::before { content:"✓"; color:var(--accent); font-weight:800; flex:none; }
.detail-list.plain li::before { content:"–"; color:var(--faint); }
.insight { border-left:3px solid var(--accent); background:var(--panel); border-radius:0 12px 12px 0; padding:18px 22px; margin:20px 0; font-size:18px; color:var(--ink); font-weight:600; }

/* Experience */
.timeline { list-style:none; position:relative; padding-left:28px; }
.timeline::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--accent),var(--accent2)); border-radius:2px; }
.tl { position:relative; margin-bottom:18px; }
.tl::before { content:""; position:absolute; left:-24px; top:26px; width:14px; height:14px; border-radius:50%; background:var(--surface); border:3px solid var(--accent); }
.exp-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:12px; }
.exp-head h2 { font-size:20px; color:var(--ink); font-weight:800; }
.exp-head .co { color:var(--accent); font-weight:600; font-size:15px; }
.exp-meta { display:flex; flex-wrap:wrap; gap:8px; }
.edu-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.edu-col h3 { font-size:16px; color:var(--ink); font-weight:800; margin-bottom:14px; }
.edu-card { margin-bottom:12px; }
.edu-card h4 { color:var(--ink); font-size:16px; font-weight:700; }
.edu-card p { color:var(--muted); font-size:14px; margin:4px 0 8px; }
.cert-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.cert-list li { display:flex; gap:10px; color:var(--body); }
.cert-list li::before { content:"✓"; color:var(--accent); font-weight:800; }
@media (max-width:720px){ .edu-grid{ grid-template-columns:1fr; } }

/* CTA + buttons */
.page-cta { text-align:center; background:linear-gradient(120deg,var(--accent),var(--accent2)); color:#fff; border-radius:24px; padding:52px 30px; margin:40px 0 10px; box-shadow:var(--shadow-lg); }
.page-cta h2 { font-size:clamp(24px,4vw,38px); font-weight:800; letter-spacing:-.02em; }
.page-cta p { opacity:.92; margin:12px auto 22px; max-width:50ch; }
.btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:15px; padding:13px 26px; border-radius:12px; transition:transform .15s; }
.btn-white { background:#fff; color:var(--ink); }
.btn-primary { background:linear-gradient(100deg,var(--accent),var(--accent2)); color:#fff; }
.btn:hover { transform:translateY(-2px); }

footer { text-align:center; padding:44px 0; color:var(--faint); font-size:14px; border-top:1px solid var(--line); margin-top:20px; }
footer a { color:var(--accent); text-decoration:none; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }