/* Sargeant theme — Greg-style cream hero + bold case storytelling */

:root{
    /* Light: plain white bg, color lives only inside cards */
    --bg:#ffffff;
    --surface:#f4f4f5;
    --surface-2:#ececee;
    --ink:#0a0a0c;
    --ink-dim:#3c3c42;
    --ink-mute:#6a6a72;
    --line:rgba(0,0,0,.08);
    --line-strong:rgba(0,0,0,.16);
    --accent:#fac200;
    --accent-2:#22d3ee;
    --accent-3:#f43f5e;
    --accent-4:#fb923c;
    --accent-5:#a78bfa;
    --accent-6:#86efac;
    /* Card palette — used for cycled colored cards (process, why-me, etc.) */
    --c-mint:#86efac;        --c-mint-ink:#0d2618;
    --c-lav:#a78bfa;         --c-lav-ink:#1c0f3d;
    --c-amber:#fac200;       --c-amber-ink:#3a2a05;
    --c-cyan:#22d3ee;        --c-cyan-ink:#062b30;
    --c-orange:#fb923c;      --c-orange-ink:#3f1e05;
    --c-pink:#fda4af;        --c-pink-ink:#400d18;
    --c-cream:#f3ede0;       --c-cream-ink:#1a1a1c;
    --c-ink:#0d0d0f;         --c-ink-fg:#fafaf7;
    --radius:28px;
    --radius-sm:18px;
    --shadow-card:0 1px 0 rgba(0,0,0,.04), 0 12px 28px -16px rgba(0,0,0,.18);
    --shadow-soft:0 1px 0 rgba(0,0,0,.03), 0 24px 48px -24px rgba(0,0,0,.16);
    --font-display:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

[data-theme="dark"]{
    /* Dark: plain near-black bg, cards keep their color */
    --bg:#0a0a0c;
    --surface:#15151a;
    --surface-2:#1d1d24;
    --ink:#fafaf7;
    --ink-dim:#d6d3cb;
    --ink-mute:#9b9aa3;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.18);
    --shadow-card:0 1px 0 rgba(255,255,255,.04), 0 18px 40px -18px rgba(0,0,0,.65);
    --shadow-soft:0 1px 0 rgba(255,255,255,.03), 0 24px 60px -24px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--font-text);font-size:17px;line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    position:relative;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px, 4vw, 56px)}

.skip{position:fixed;top:-100px;left:0;background:var(--accent);color:#000;padding:8px 14px;border-radius:0 0 8px 0;z-index:200;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{top:0;clip:auto;clip-path:none;width:auto;height:auto;overflow:visible}

/* ---------- Global focus-visible ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.btn-primary:focus-visible,.btn-yellow:focus-visible,
.fcard:focus-visible,.bento-tile:focus-visible,
.persona-chip:focus-visible,.see-all:focus-visible,.media-item:focus-visible,
.topnav-cta:focus-visible{outline-offset:4px}
.topnav-icon:focus-visible,.topnav-burger:focus-visible{outline-offset:2px}

/* ---------- Sticky top nav ---------- */
.topnav{
    position:sticky;top:0;z-index:100;
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(1.2) blur(14px);
    backdrop-filter:saturate(1.2) blur(14px);
    border-bottom:1px solid var(--line);
}
[data-theme="dark"] .topnav{background:rgba(10,10,12,.82)}
.topnav-inner{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(24px, 5vw, 80px);position:relative}
.topnav-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--ink);flex:none}
.topnav-brand-mark{
    width:32px;height:32px;border-radius:50%;
    background:var(--accent) center/cover no-repeat;
    border:2px solid var(--ink);flex:none;
}
.topnav-links{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;min-width:0;overflow:hidden}
.topnav-links a.topnav-hidden{display:none}
.topnav-links a{
    padding:8px 14px;border-radius:999px;
    font-size:14px;font-weight:500;color:var(--ink-dim);
    transition:.15s ease;
}
.topnav-links a:hover{color:var(--ink);background:rgba(0,0,0,.05)}
[data-theme="dark"] .topnav-links a:hover{background:rgba(255,255,255,.06)}
.topnav-actions{display:flex;gap:8px;align-items:center;flex:none}
.topnav-icon{
    width:38px;height:38px;background:transparent;color:var(--ink);
    border:1px solid var(--line-strong);border-radius:50%;
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    transition:.15s ease;
}
.topnav-icon:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.topnav-cta{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 18px;border-radius:999px;
    background:var(--ink);color:var(--bg);
    font-weight:600;font-size:14px;border:1px solid var(--ink);
    transition:.15s ease;
}
.topnav-cta:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.topnav-burger{
    display:none;width:38px;height:38px;
    background:transparent;color:var(--ink);
    border:1px solid var(--line-strong);border-radius:50%;
    cursor:pointer;align-items:center;justify-content:center;
    transition:.15s ease;
}
.topnav-burger:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:880px){
    .topnav-links{
        display:none;flex-direction:column;align-items:stretch;gap:2px;
        position:absolute;right:16px;top:calc(100% + 8px);
        background:var(--surface);border:1px solid var(--line);
        border-radius:18px;padding:8px;min-width:220px;
        box-shadow:var(--shadow-card);
    }
    .topnav-links{overflow:visible}
    .topnav-links.open{display:flex}
    .topnav-links a{padding:10px 14px;font-size:15px}
    .topnav-links a.topnav-hidden{display:block}
    .topnav-burger{display:inline-flex}
}
@media (max-width:560px){
    .topnav-cta span{display:none}
    .topnav-cta{padding:9px 14px}
}

/* ---------- Floating CTA (mobile rescue, kept for case/work pages without nav scroll) ---------- */
.floating-cta{
    position:fixed;right:24px;bottom:24px;z-index:90;
    background:var(--accent);color:#0d0d0f;
    padding:14px 22px;border-radius:999px;
    font-weight:700;font-size:14px;
    box-shadow:0 12px 32px rgba(255,212,0,.35), 0 1px 0 rgba(0,0,0,.05);
    display:inline-flex;align-items:center;gap:10px;
    transition:transform .2s ease, box-shadow .2s ease;
}
.floating-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,212,0,.5)}
.floating-cta i{transform:rotate(-45deg);transition:transform .2s ease}
.floating-cta:hover i{transform:rotate(0)}
@media (max-width:560px){
    .floating-cta{right:14px;bottom:14px;padding:12px 18px;font-size:13px}
}

/* Anchor offset so sticky nav doesn't cover section headings */
section[id]{scroll-margin-top:84px}

/* ---------- HERO — 2-column shell (profile card + headline) ---------- */
.hero{padding:36px 0 24px;position:relative}
.hero > .wrap{position:relative}
.hero-shell{
    display:grid;grid-template-columns:minmax(280px, 0.85fr) 1.5fr;
    gap:18px;align-items:stretch;
}
@media (max-width:980px){.hero-shell{grid-template-columns:1fr}}

.profile-card{
    --card-bg:#a78bfa;
    background:var(--card-bg);
    border-radius:32px;
    padding:28px 32px 32px;
    color:#fff;
    position:relative;
    display:flex;flex-direction:column;gap:16px;
    overflow:hidden;
    min-height:440px;
    box-shadow:var(--shadow-soft);
}
[data-theme="dark"] .profile-card{--card-bg:#7c5cff}
.profile-stamp{display:none}

.hero-main{
    display:flex;flex-direction:column;justify-content:center;
    padding:8px 0 4px;
}
.hero-headline{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(40px, 6.2vw, 88px);
    line-height:.96;
    letter-spacing:-.035em;
    margin:0 0 22px;
    color:var(--ink);
    max-width:none;
}
.hero-headline .em{font-style:normal}
.hero-headline .emoji{display:inline-block;vertical-align:-.12em;margin:0 .12em;font-size:.92em;line-height:1}
.hero-deck{
    font-size:clamp(17px, 1.6vw, 22px);
    line-height:1.45;
    color:var(--ink-dim);
    max-width:680px;
    margin:0 0 26px;
    font-weight:400;
}
.hero-availability{
    display:inline-flex;align-items:center;gap:10px;
    margin:0 0 22px;
    font-size:13px;color:var(--ink-mute);font-weight:500;
}
.hero-availability .dot{
    width:8px;height:8px;border-radius:50%;
    background:#22c55e;flex:none;
    box-shadow:0 0 0 4px rgba(34,197,94,.18);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (max-width:720px){
    .hero{padding:24px 0 16px}
    .profile-card{min-height:auto;padding:24px 24px 28px;border-radius:24px}
}

/* corner marks removed — keep a positioning anchor for cards that need it */
.testimonial,
.extras-link,
.process-step,
.why-me-points li,
.case-stat,
.case-block-callout{
    position:relative;
}
.corner-tl,.corner-br{display:none !important}

.btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 24px;border-radius:999px;
    font-weight:600;font-size:15px;
    border:1px solid var(--line-strong);
    background:var(--surface);color:var(--ink);
    cursor:pointer;transition:.18s ease;
    box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 16px -10px rgba(0,0,0,.2);
}
.btn:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 1px 0 rgba(0,0,0,.04), 0 12px 24px -12px rgba(0,0,0,.28)}
.btn-primary{background:var(--ink);color:#fafaf7;border-color:var(--ink)}
.btn-primary:hover{background:var(--accent);color:#0d0d0f;border-color:var(--accent)}
.btn-yellow{background:var(--accent);color:#0d0d0f;border-color:var(--accent)}
.btn-yellow:hover{background:#ffe24d;border-color:#ffe24d}
.btn-ghost{background:transparent;color:var(--ink-dim);border-color:var(--line-strong);box-shadow:none}
.btn-ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}

/* ---------- Dossier modal — copy-ready B2B card ---------- */
.dossier-modal[hidden]{display:none}
.dossier-modal{
    position:fixed;inset:0;z-index:200;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
}
.dossier-backdrop{
    position:absolute;inset:0;background:rgba(10,10,12,.55);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.dossier-card{
    position:relative;z-index:1;
    background:var(--bg);color:var(--ink);
    border-radius:24px;border:1px solid var(--line);
    width:min(720px, 100%);max-height:min(86vh, 900px);
    display:flex;flex-direction:column;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.45);
    padding:24px 28px 22px;
}
.dossier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dossier-eyebrow{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);font-weight:700;margin-bottom:6px;
}
.dossier-card h3{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;
    margin:0;line-height:1.15;
}
.dossier-x{
    width:36px;height:36px;border-radius:50%;
    background:transparent;color:var(--ink);border:1px solid var(--line-strong);
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;
    transition:.15s ease;
}
.dossier-x:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dossier-hint{
    margin:14px 0 16px;color:var(--ink-dim);
    font-size:14px;line-height:1.5;
}
.dossier-tabs{
    display:flex;flex-wrap:wrap;gap:6px;
    margin:14px 0 16px;padding:4px;
    background:var(--surface);border-radius:14px;
    border:1px solid var(--line);
}
.dossier-tab{
    flex:1 1 auto;min-width:0;
    padding:9px 14px;border-radius:10px;
    background:transparent;color:var(--ink-dim);
    border:1px solid transparent;
    font-size:13px;font-weight:600;cursor:pointer;
    transition:.15s ease;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
}
.dossier-tab:hover{color:var(--ink)}
.dossier-tab.active{
    background:var(--bg);color:var(--ink);
    border-color:var(--line-strong);
    box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 16px -10px rgba(0,0,0,.18);
}
[data-theme="dark"] .dossier-tab.active{background:var(--surface-2)}
.dossier-preview-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.dossier-preview-wrap .dossier-preview[hidden]{display:none}
.dossier-actions{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin-bottom:14px;
}
.dossier-actions .btn{padding:11px 18px;font-size:14px}
.dossier-status{font-size:13px;color:var(--ink-mute);font-weight:600;min-height:18px}
.dossier-status.ok{color:#15803d}
.dossier-status.err{color:#b91c1c}
[data-theme="dark"] .dossier-status.ok{color:#86efac}
[data-theme="dark"] .dossier-status.err{color:#fda4af}
.dossier-preview{
    overflow:auto;flex:1;
    background:var(--surface);
    border:1px solid var(--line);border-radius:14px;
    padding:18px 22px;
    font-size:14px;line-height:1.5;color:var(--ink);
}
.dossier-preview h2{font-size:20px;letter-spacing:-.01em;font-weight:800;margin:0 0 6px}
.dossier-preview h3{font-size:16px;font-weight:700;margin:14px 0 6px}
.dossier-preview p{margin:0 0 8px}
.dossier-preview ul{margin:0 0 12px;padding-left:22px}
.dossier-preview li{margin-bottom:4px}
.dossier-preview strong{color:var(--ink)}
@media (max-width:560px){
    .dossier-modal{padding:12px}
    .dossier-card{padding:20px 18px 18px;border-radius:18px}
    .dossier-card h3{font-size:20px}
}

/* ---------- Persona picker (right under hero CTAs) ---------- */
.persona-picker{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    margin-top:24px;
}
.persona-prompt{
    color:var(--ink-mute);font-size:13px;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;margin-right:4px;
}
.persona-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 18px;border-radius:999px;
    background:var(--surface);
    border:1px solid transparent;
    color:var(--ink);font-weight:600;font-size:14px;
    transition:.15s ease;
    box-shadow:var(--shadow-card);
}
.persona-chip:hover{background:var(--accent);color:#000;border-color:var(--accent);transform:translateY(-1px)}
.persona-chip .hint{font-weight:400;color:var(--ink-mute);font-size:12px;margin-left:2px}
.persona-chip:hover .hint{color:rgba(0,0,0,.65)}

/* ---------- Service strip — quick deliverables under each direction ---------- */
.service-strip{
    display:flex;flex-wrap:wrap;gap:8px;
    margin:-4px 0 26px;
}
.service-strip span{
    display:inline-flex;align-items:center;
    min-height:34px;
    padding:7px 12px;border-radius:999px;
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--ink-dim);
    font-size:13px;font-weight:600;
    box-shadow:var(--shadow-card);
}

/* ---------- Hero stats — neutral surface cards ---------- */
.hero-stats{
    display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;margin-top:36px;
}
.hero-stat{
    padding:24px 26px 26px;border-radius:22px;
    background:var(--surface);color:var(--ink);
    display:flex;flex-direction:column;gap:6px;
    min-height:140px;justify-content:flex-end;
    box-shadow:var(--shadow-card);
    position:relative;overflow:hidden;
}
.hero-stat .num{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(34px, 3.6vw, 48px);line-height:.95;letter-spacing:-.025em;
    color:var(--ink);
}
.hero-stat .lbl{font-size:14px;font-weight:600;color:var(--ink-mute)}
@media (max-width:560px){.hero-stats{grid-template-columns:1fr;gap:10px}.hero-stat{min-height:auto}}

/* ---------- Companies strip ---------- */
.companies-strip{
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid var(--line);
}
.companies-head{
    display:grid;
    grid-template-columns:minmax(140px,.26fr) 1fr;
    gap:18px;
    align-items:start;
    margin-bottom:16px;
}
.companies-head p{
    margin:0;
    max-width:720px;
    color:var(--ink-dim);
    font-size:15px;
    font-weight:600;
    line-height:1.45;
}
.companies-marquee{
    display:flex;
    gap:8px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.companies-marquee:hover .companies-list,
.companies-marquee:focus-within .companies-list{
    animation-play-state:paused;
}
.companies-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:max-content;
    animation:companies-scroll 34s linear infinite;
}
.companies-list li > a,
.companies-list li > span{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface);
    color:var(--ink-dim);
    text-align:center;
    font-size:13px;
    font-weight:800;
    line-height:1.18;
}
.companies-list li > a:hover{
    color:var(--ink);
    border-color:var(--line-strong);
}
.companies-list img{
    display:block;
    max-width:130px;
    max-height:30px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:grayscale(100%) opacity(.72);
}
@keyframes companies-scroll{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-100% - 8px))}
}
@media (max-width:720px){
    .companies-head{
        grid-template-columns:1fr;
        gap:8px;
    }
    .companies-list{animation-duration:28s}
    .companies-list li > a,
    .companies-list li > span{min-width:138px}
}
@media (prefers-reduced-motion:reduce){
    .companies-marquee{
        overflow-x:auto;
        -webkit-mask-image:none;
                mask-image:none;
        scrollbar-width:none;
    }
    .companies-marquee::-webkit-scrollbar{display:none}
    .companies-list{animation:none}
    .companies-list[aria-hidden="true"]{display:none}
}

/* ---------- Section filter chips (tag + client) ---------- */
.section-filters{
    margin:0 0 28px;
    display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
}
.filter-group{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-label{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);font-weight:700;margin-right:4px;
}
.filter-chip{
    appearance:none;cursor:pointer;
    background:var(--surface);color:var(--ink);
    border:1px solid var(--line);
    padding:7px 14px;border-radius:999px;
    font-size:13px;font-weight:600;line-height:1.2;
    text-decoration:none;
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
a.filter-chip:hover{text-decoration:none}
.filter-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.filter-chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filter-chip.is-client.is-active{background:var(--accent);color:#000;border-color:var(--accent)}
.filter-clear{
    appearance:none;cursor:pointer;background:transparent;
    color:var(--ink-mute);border:0;padding:7px 4px;
    font-size:13px;font-weight:600;
    text-decoration:underline;text-underline-offset:3px;
}
.filter-clear:hover{color:var(--ink)}
.filter-empty{
    font-size:13px;color:var(--ink-mute);font-style:italic;
}
.fcard.is-filtered-out,.bento-tile.is-filtered-out{display:none}

/* ---------- Tag/client cloud on /tag/ and /client/ pages ---------- */
.tax-cloud{display:flex;flex-direction:column;gap:18px}
.tax-cloud-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tax-cloud-label{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);font-weight:700;margin-right:6px;
}
.tax-cloud-chip{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--surface);color:var(--ink);
    border:1px solid var(--line);
    padding:7px 14px;border-radius:999px;
    font-size:13px;font-weight:600;text-decoration:none;
    transition:transform .15s ease, border-color .15s ease;
}
.tax-cloud-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.tax-cloud-chip .cnt{
    font-size:11px;color:var(--ink-mute);
    background:var(--bg);border-radius:999px;padding:2px 8px;
}
.tax-cloud-chip.is-client{font-style:italic}
.muted-tags{margin-top:8px;opacity:.85}
.muted-tags a{font-size:11px}
@media (max-width:600px){
    .section-filters{gap:10px 14px}
    .filter-chip{padding:6px 11px;font-size:12px}
}

/* ---------- Section primitive ---------- */
.section{padding:72px 0 16px;position:relative}
.section.tight{padding:48px 0 16px}
.section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:24px;margin-bottom:32px;flex-wrap:wrap;position:relative;
}
.section-head > div:first-child{flex:1;min-width:0}
.section-eyebrow{
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);margin-bottom:14px;font-weight:700;
    display:inline-flex;align-items:center;gap:10px;
    background:var(--surface);padding:7px 14px 7px 11px;
    border-radius:999px;box-shadow:var(--shadow-card);
}
.section-eyebrow::before{
    content:"✱";font-size:16px;line-height:1;
    color:var(--accent-5);background:transparent;
    transform:rotate(-8deg);display:inline-block;
    width:auto;height:auto;
}
/* On dark colored cards (contact, profile-card), drop the white pill chrome */
.contact .section-eyebrow,
.profile-card .section-eyebrow,
.bento-tile .section-eyebrow{
    background:transparent;box-shadow:none;padding:0;
    color:rgba(255,255,255,.66);
}
.contact .section-eyebrow::before,
.profile-card .section-eyebrow::before{
    color:var(--accent);
}
.section-title{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(32px, 4.2vw, 64px);
    line-height:.98;margin:0;letter-spacing:-.03em;
}
.section-intro{color:var(--ink-dim);max-width:680px;margin-top:14px;font-size:clamp(17px, 1.4vw, 19px);line-height:1.5}
.see-all{
    align-self:flex-end;font-size:14px;font-weight:600;
    border:1px solid var(--line-strong);padding:10px 16px;border-radius:999px;
    transition:.15s;white-space:nowrap;
}
.see-all:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- Featured grid (per section) — asymmetric, lead card 2-col ---------- */
.featured-grid{
    display:grid;gap:18px;
    grid-template-columns:repeat(4,1fr);
    grid-auto-flow:dense;
}
.featured-grid > .fcard{grid-column:span 2}
.featured-grid > .fcard:first-child{grid-column:span 4;flex-direction:row}
.featured-grid > .fcard:first-child .thumb{flex:1.2;aspect-ratio:auto;align-self:stretch}
.featured-grid > .fcard:first-child .fcard-body{flex:1;padding:32px 36px 36px;justify-content:center}
.featured-grid > .fcard:first-child h3{font-size:clamp(24px, 2.4vw, 36px);line-height:1.05;letter-spacing:-.02em}
.featured-grid > .fcard:first-child p{font-size:16px}
@media (max-width:1080px){
    .featured-grid{grid-template-columns:repeat(2,1fr)}
    .featured-grid > .fcard{grid-column:span 1}
    .featured-grid > .fcard:first-child{grid-column:span 2;flex-direction:column}
    .featured-grid > .fcard:first-child .thumb{aspect-ratio:16/8}
    .featured-grid > .fcard:first-child .fcard-body{padding:22px 24px 26px}
}
@media (max-width:640px) {
    .featured-grid{grid-template-columns:1fr}
    .featured-grid > .fcard,
    .featured-grid > .fcard:first-child{grid-column:span 1}
}

.fcard{
    background:var(--surface);border:none;border-radius:28px;
    overflow:hidden;display:flex;flex-direction:column;position:relative;
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:var(--shadow-card);
}
.fcard .thumb{position:relative}
.fcard .metric-badge{
    position:absolute;top:14px;left:14px;z-index:2;
    background:var(--accent);color:#0d0d0f;
    border-radius:14px;padding:8px 14px;
    display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;
    box-shadow:0 8px 22px -8px rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.06);
    line-height:1;max-width:calc(100% - 28px);
}
.fcard .metric-badge .num{
    font-family:var(--font-display);font-weight:800;
    font-size:18px;letter-spacing:-.02em;
}
.fcard .metric-badge .lbl{
    font-size:11px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;opacity:.85;margin-top:2px;
}
.fcard:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(0,0,0,.04), 0 24px 48px -16px rgba(0,0,0,.28)}
[data-theme="dark"] .fcard{background:#1d1d24}
.fcard .thumb{aspect-ratio:4/3;background:var(--surface-2);overflow:hidden;position:relative}
.fcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.fcard:hover .thumb img{transform:scale(1.04)}
.fcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.fcard .tags{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute)}
.fcard .tags span{background:var(--surface-2);border:none;border-radius:6px;padding:4px 9px}
.case-card-meta{
    color:var(--ink-mute);
    font-size:12px;font-weight:700;line-height:1.35;
    letter-spacing:.04em;text-transform:uppercase;
}
.fcard h3{font-size:20px;line-height:1.25;margin:4px 0 0;font-weight:700}
.fcard p{color:var(--ink-dim);margin:0;font-size:15px}
.fcard .more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:14px}
.fcard .more i{transition:transform .2s ease}
.fcard:hover .more i{transform:translateX(3px)}

/* ---------- Compact list (non-featured cases) ---------- */
.bento{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px 24px;
    margin-top:56px;
    border-top:1px solid var(--line);
}
.bento-tile{
    display:grid;
    grid-template-columns:56px 1fr auto;
    align-items:center;gap:14px;
    padding:14px 4px;
    border-bottom:1px solid var(--line);
    color:var(--ink);
    transition:background .15s ease, padding .15s ease;
    position:relative;
}
.bento-tile:hover{background:var(--surface);padding-left:14px;padding-right:14px;border-radius:12px}
.bento-tile:hover + .bento-tile{border-top-color:transparent}
.bento-img{
    width:56px;height:56px;border-radius:10px;
    object-fit:cover;display:block;
    background:var(--surface-2);
    grid-column:1;
}
.bento-tile.notext{grid-template-columns:8px 1fr auto}
.bento-tile.notext::before{
    content:"";display:block;width:8px;height:8px;border-radius:50%;
    background:var(--accent-5);grid-column:1;
}
.bento-tile .bento-meta{
    display:flex;flex-direction:column;gap:2px;min-width:0;grid-column:2;
}
.bento-tile h4{
    font-size:15px;font-weight:600;margin:0;color:var(--ink);line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bento-tile .bento-sub{
    font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-mute);
}
.bento-tile p{
    margin:3px 0 0;
    color:var(--ink-dim);
    font-size:13px;line-height:1.35;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.bento-tile::after{
    content:"\2197";grid-column:3;
    font-size:14px;font-weight:600;color:var(--ink-mute);
    transition:transform .2s ease, color .2s ease;
}
a.bento-tile:hover::after{color:var(--ink);transform:translate(2px,-2px)}
article.bento-tile::after{display:none}

@media (max-width:880px){
    .bento{grid-template-columns:1fr;gap:0}
}

/* ---------- Stacked list (legacy) ---------- */
.stack{margin-top:32px;border-top:1px solid var(--line)}
.stack-row{
    display:grid;
    grid-template-columns:80px minmax(280px, 1.4fr) minmax(240px, 2fr);
    gap:32px;align-items:center;
    padding:22px 32px;
    border-bottom:1px solid var(--line);
    margin:0 -32px;
    border-radius:16px;
    transition:background .15s ease;
}
.stack-row .num{font-family:var(--font-display);font-weight:700;color:var(--ink-mute);font-size:16px;letter-spacing:.05em}
.stack-row h4{font-size:18px;font-weight:600;margin:0;line-height:1.3;color:var(--ink)}
.stack-row p{color:var(--ink-dim);font-size:15px;margin:0;line-height:1.45}
.stack-row:hover{background:var(--surface-2);border-bottom-color:transparent}
@media (max-width:880px){
    .stack-row{grid-template-columns:50px 1fr;gap:18px;padding:18px 24px;margin:0 -24px}
    .stack-row p{grid-column:2}
}
@media (max-width:520px){
    .stack-row{grid-template-columns:1fr;gap:6px;padding:16px 18px;margin:0 -18px}
    .stack-row .num{font-size:13px;color:var(--ink-mute)}
}

/* ---------- Press / media (compact pills) ---------- */
.media-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.media-item{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 18px;border-radius:999px;
    border:none;
    background:var(--surface);
    color:var(--ink);font-size:13px;font-weight:600;
    transition:.15s ease;
    box-shadow:var(--shadow-card);
}
.media-item:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.media-item i{font-size:11px;opacity:.7}
.media-item.no-link{cursor:default}
.media-item.no-link:hover{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}

/* ---------- Extras ---------- */
.extras-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
@media (max-width:880px){ .extras-grid{grid-template-columns:1fr} }
.extras ul{margin:0;padding-left:20px;color:var(--ink-dim)}
.extras li{margin-bottom:10px;font-size:16px}
.extras-link{background:var(--surface);border:none;border-radius:22px;padding:28px;box-shadow:var(--shadow-card)}

/* ---------- Contact ---------- */
.contact{
    background:var(--c-ink);color:var(--c-ink-fg);
    border-radius:40px;padding:56px;
    display:grid;grid-template-columns:1.1fr 1fr;gap:48px;
    align-items:start;margin-bottom:48px;position:relative;overflow:hidden;
    box-shadow:var(--shadow-soft);
}
.contact.contact-simple{
    display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    padding:64px 56px;
}
.contact.contact-simple h2{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:clamp(36px, 5.6vw, 84px);line-height:.96}
.contact.contact-simple p{margin:0;max-width:520px;font-size:18px;color:rgba(250,250,247,.78)}
.contact-tg{margin-top:8px}
.contact h2{font-family:var(--font-display);font-size:clamp(36px, 5vw, 64px);line-height:1.02;margin:0 0 16px;letter-spacing:-.02em;font-weight:800;position:relative;z-index:1}
.contact p{color:rgba(250,250,247,.7);margin:0 0 24px;position:relative;z-index:1}
.contact > *{position:relative;z-index:1}
.contact .tg-direct{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.2);position:relative;z-index:1}
.contact .tg-direct:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.contact form{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.contact label{font-size:12px;color:rgba(250,250,247,.5);margin-bottom:4px;display:block;text-transform:uppercase;letter-spacing:.06em}
.contact input,.contact textarea,.contact select{
    width:100%;background:rgba(255,255,255,.08);color:#fafaf7;
    border:1px solid rgba(255,255,255,.16);border-radius:12px;
    padding:14px 16px;font:inherit;font-size:15px;
    -webkit-text-fill-color:#fafaf7;
}
.contact input::placeholder,.contact textarea::placeholder{color:rgba(255,255,255,.45)}
.contact input:focus,.contact textarea:focus,.contact select:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.12)}
.contact select option{background:#0d0d0f;color:#fafaf7}
.contact textarea{min-height:130px;resize:vertical}
.contact .form-msg{font-size:14px;min-height:20px}
.contact .form-msg.ok{color:#86efac}
.contact .form-msg.err{color:#fda4af}
@media (max-width:880px){ .contact{padding:36px 28px;grid-template-columns:1fr;gap:28px;border-radius:28px} }

/* ---------- Footer ---------- */
.foot{max-width:none;color:var(--ink-mute);font-size:13px;padding:28px clamp(24px, 5vw, 80px) 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* =====================================================
   CASE PAGE — colored chrome + big display
===================================================== */
.case-hero{padding:32px 0 56px;position:relative}
.case-hero .breadcrumb{
    font-size:13px;color:var(--ink-mute);
    display:inline-flex;gap:10px;align-items:center;margin-bottom:22px;
    background:var(--surface);padding:7px 14px;border-radius:999px;
    box-shadow:var(--shadow-card);font-weight:600;
}
.case-hero .breadcrumb a:hover{color:var(--ink)}
.case-kicker{
    display:inline-block;background:var(--c-lav);color:var(--c-lav-ink);
    border-radius:14px;padding:8px 16px;
    font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    margin-bottom:24px;
    box-shadow:var(--shadow-card);
}
.case-title{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(40px, 6.2vw, 96px);
    line-height:.96;letter-spacing:-.04em;
    margin:0 0 24px;max-width:1100px;
}
.case-subtitle{font-size:clamp(18px,1.7vw,24px);color:var(--ink-dim);margin:0 0 36px;max-width:820px;line-height:1.4;font-weight:400}
.case-meta{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
    padding:0;margin:0 0 36px;
    border:none;
}
.case-meta-row{
    background:var(--surface);border-radius:18px;padding:18px 20px;
    box-shadow:var(--shadow-card);position:relative;
}
.case-meta-row .label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px;font-weight:700}
.case-meta-row .val{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3}
.case-cover{
    width:100%;border-radius:32px;overflow:hidden;
    aspect-ratio:16/9;background:var(--surface-2);
    box-shadow:var(--shadow-soft);position:relative;
}
.case-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.case-body{padding:60px 0 80px}
.case-body .container{max-width:820px;margin:0 auto}
.case-body p{font-size:19px;line-height:1.65;margin:0 0 28px;color:var(--ink)}
.case-body p.lede{font-size:clamp(22px,2vw,28px);line-height:1.4;font-weight:500;margin:0 0 40px;color:var(--ink)}
.case-body h2.h{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.015em;
    margin:48px 0 20px;
}

/* Block: full-bleed image */
.case-block-image{margin:48px auto 56px;max-width:1100px}
.case-block-image figure{margin:0;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-soft)}
.case-block-image img{width:100%;display:block}
.case-block-image figcaption{font-size:14px;color:var(--ink-mute);margin-top:14px;text-align:center}

/* Block: gallery */
.case-block-gallery{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1100px;margin:48px auto 56px}
.case-block-gallery figure{margin:0;border-radius:24px;overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-card)}
.case-block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.case-block-gallery figcaption{padding:12px 14px;font-size:13px;color:var(--ink-mute)}

/* Block: stat row (Apple-Watch-card vibe) */
.case-block-stats{
    display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    max-width:1100px;margin:48px auto 56px;
}
.case-stat{
    border-radius:28px;padding:32px 28px 30px;color:#0d0d0f;
    background:var(--accent);
    box-shadow:var(--shadow-card);
    display:flex;flex-direction:column;gap:8px;min-height:180px;justify-content:flex-end;
    position:relative;overflow:hidden;
}
.case-stat .num{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.03em;
}
.case-stat .lbl{font-size:14px;font-weight:600;opacity:.85}

/* Block: callout (Apple-Watch-style colored card) */
.case-block-callout{
    border-radius:28px;padding:36px 40px 38px;
    margin:32px auto;max-width:820px;
    color:#0d0d0f;
    box-shadow:var(--shadow-soft);
}
.case-block-callout h3{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2vw,30px);margin:0 0 12px;letter-spacing:-.01em}
.case-block-callout p{font-size:17px;line-height:1.5;margin:0;color:#0d0d0f}

/* Block: quote */
.case-block-quote{max-width:820px;margin:48px auto;padding:0 0 0 24px;border-left:4px solid var(--ink)}
.case-block-quote p{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.2vw,32px);line-height:1.25;letter-spacing:-.015em;margin:0 0 12px}
.case-block-quote cite{font-size:14px;color:var(--ink-mute);font-style:normal}

/* Block: video / embed */
.case-block-video{max-width:1100px;margin:48px auto;border-radius:32px;overflow:hidden;aspect-ratio:16/9;background:#000;box-shadow:var(--shadow-soft)}
.case-block-video iframe{width:100%;height:100%;border:0;display:block}

/* "Other cases" footer on case page */
.other-cases{padding:60px 0 80px;border-top:1px solid var(--line)}

/* utilities */
.muted{color:var(--ink-mute)}
.center{text-align:center}

/* ---------- Process strip — neutral cards, accented step number ---------- */
.process-strip{
    display:grid;gap:14px;
    grid-template-columns:repeat(4,1fr);
    margin-top:8px;
}
.process-step{
    background:var(--surface);
    color:var(--ink);
    border:none;
    border-radius:22px;padding:28px 24px 24px;
    display:flex;flex-direction:column;gap:10px;
    box-shadow:var(--shadow-card);
    min-height:180px;
}
.process-step .num{
    font-family:var(--font-display);font-weight:800;font-size:13px;
    color:var(--accent-5);letter-spacing:.08em;
}
.process-step h4{font-size:18px;font-weight:700;margin:0;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.process-step p{margin:0;font-size:14px;color:var(--ink-dim);line-height:1.5}
@media (max-width:880px){.process-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.process-strip{grid-template-columns:1fr}}

/* ---------- Testimonials ---------- */
.testimonials{
    display:grid;gap:18px;
    grid-template-columns:repeat(2,1fr);
    margin-top:8px;
}
.testimonial{
    background:var(--surface);border:none;
    border-radius:24px;padding:32px 32px 34px;
    display:flex;flex-direction:column;gap:14px;
    box-shadow:var(--shadow-card);
}
.testimonial blockquote{
    margin:0;font-size:18px;line-height:1.5;color:var(--ink);
    font-weight:500;font-style:normal;
}
.testimonial blockquote::before{
    content:"\201C";font-family:var(--font-display);
    font-size:46px;line-height:0;
    color:var(--accent);margin-right:8px;vertical-align:-12px;
}
.testimonial cite{
    font-style:normal;font-size:14px;color:var(--ink-mute);
    display:flex;flex-direction:column;gap:2px;
}
.testimonial cite b{color:var(--ink);font-weight:600;font-size:15px}
@media (max-width:880px){.testimonials{grid-template-columns:1fr}}

/* ---------- Video reel ---------- */
.reel-wrap{
    margin:0 0 32px;
    border-radius:32px;overflow:hidden;
    aspect-ratio:16/9;background:#000;
    box-shadow:var(--shadow-soft);
    position:relative;
}
.reel-wrap iframe{
    position:absolute;inset:0;width:100%;height:100%;
    border:0;display:block;
}

/* ---------- Contact upgrade (checklist + channels + availability) ---------- */
.contact.contact-simple{padding:48px 56px}
.contact-extras{
    display:flex;flex-direction:column;gap:18px;
    margin-top:6px;width:100%;max-width:560px;
}
.contact-checklist{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:8px;
    font-size:15px;color:rgba(250,250,247,.82);
    line-height:1.4;
}
.contact-checklist li{
    display:flex;align-items:flex-start;gap:10px;
}
.contact-checklist li::before{
    content:"\2713";color:var(--accent);
    font-weight:800;flex:none;line-height:1.4;
}
.contact-channels{
    display:flex;flex-wrap:wrap;gap:10px;margin-top:2px;
}
.contact-channels .btn{
    background:rgba(255,255,255,.08);
    color:var(--c-ink-fg);
    border-color:rgba(255,255,255,.24);
    box-shadow:none;
}
.contact-channels .btn:hover{
    background:var(--accent);color:#000;border-color:var(--accent);
}
.contact-channels .btn-yellow{background:var(--accent);color:#000;border-color:var(--accent)}
.contact-availability{
    font-size:13px;color:rgba(250,250,247,.6);
    display:inline-flex;align-items:center;gap:10px;
    margin-top:4px;
}
.contact-availability .dot{
    width:8px;height:8px;border-radius:50%;
    background:#86efac;flex:none;
    box-shadow:0 0 0 4px rgba(134,239,172,.18);
}
@media (max-width:560px){
    .contact.contact-simple{padding:36px 28px}
}

/* ---------- Why me — full-width section, eyebrow + title above the colored point grid ---------- */
.why-me{
    border-radius:0;background:transparent;
    padding:0;box-shadow:none;border:none;
    max-width:none;
    position:relative;
}
.why-me::before{display:none}
.why-me .section-eyebrow{margin-bottom:14px}
.why-me .section-title{margin-bottom:18px;max-width:880px}
.why-me-lede{
    font-size:clamp(17px, 1.5vw, 21px);
    color:var(--ink-dim);line-height:1.45;
    margin:0 0 28px;max-width:680px;
    position:relative;
}
.why-me-points{
    list-style:none;padding:0;margin:0;
    display:grid;gap:14px;
    grid-template-columns:repeat(3, 1fr);
    position:relative;
}
.why-me-points li{
    display:flex;align-items:flex-start;gap:14px;
    background:var(--surface);
    color:var(--ink);
    border:none;
    border-radius:22px;padding:24px 22px 26px;
    box-shadow:var(--shadow-card);
}
.why-me-emoji{
    font-size:24px;line-height:1;flex:none;
    width:44px;height:44px;border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface-2);
}
.why-me-points h3{
    font-size:16px;font-weight:700;margin:0 0 6px;
    color:var(--ink);line-height:1.3;letter-spacing:-.01em;
}
.why-me-points p{
    margin:0;font-size:14px;color:var(--ink-dim);line-height:1.5;
}
@media (max-width:880px){
    .why-me-points{grid-template-columns:1fr}
    .why-me{padding:36px 28px;border-radius:24px}
}

/* ---------- Reel inside a case ---------- */
.case-block-reel{
    margin:48px auto;max-width:1100px;
    border-radius:32px;overflow:hidden;aspect-ratio:16/9;background:#000;
    box-shadow:var(--shadow-soft);
}
.case-block-reel iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Empty-state CMS placeholder (shown when ?preview=1) ---------- */
.cms-placeholder{
    border:2px dashed var(--line-strong);
    border-radius:24px;padding:32px;
    color:var(--ink-mute);text-align:center;
    background:repeating-linear-gradient(45deg,transparent 0,transparent 12px,rgba(0,0,0,.025) 12px,rgba(0,0,0,.025) 24px);
}
.cms-placeholder strong{color:var(--ink-dim);display:block;margin-bottom:6px;font-weight:700}
.cms-placeholder a{color:var(--ink);font-weight:600;text-decoration:underline}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    .fcard:hover,.top-card:hover,.bento-tile:hover,
    .btn:hover,.persona-chip:hover,.floating-cta:hover,
    .fcard:hover .thumb img,.top-card:hover .arrow,
    .bento-tile:hover .bento-img,.fcard:hover .more i{
        transform:none !important;
    }
}

/* =====================================================
   UTILITARIAN REFRESH
   Flatter surfaces, sturdier typography, tighter controls.
===================================================== */
:root{
    --bg:#f7f7f4;
    --surface:#ffffff;
    --surface-2:#eeeeea;
    --ink:#111111;
    --ink-dim:#333333;
    --ink-mute:#6b6b65;
    --line:rgba(17,17,17,.12);
    --line-strong:rgba(17,17,17,.26);
    --accent:#fac200;
    --accent-2:#00a4b8;
    --accent-3:#d92d50;
    --accent-4:#b75f00;
    --accent-5:#5b6ee1;
    --accent-6:#1f9d55;
    --c-mint:#d8f6df;        --c-mint-ink:#102819;
    --c-lav:#dfe3ff;         --c-lav-ink:#1d245f;
    --c-amber:#fff0b8;       --c-amber-ink:#342500;
    --c-cyan:#d5f4f8;        --c-cyan-ink:#073036;
    --c-orange:#ffe0c2;      --c-orange-ink:#3a1900;
    --c-pink:#ffe0e7;        --c-pink-ink:#3f0715;
    --c-cream:#f1efe7;       --c-cream-ink:#171717;
    --radius:10px;
    --radius-sm:6px;
    --shadow-card:0 1px 0 rgba(17,17,17,.04);
    --shadow-soft:0 1px 0 rgba(17,17,17,.06), 0 18px 42px -34px rgba(17,17,17,.45);
}

[data-theme="dark"]{
    --bg:#10100f;
    --surface:#181817;
    --surface-2:#22221f;
    --ink:#f4f4ef;
    --ink-dim:#d8d8cf;
    --ink-mute:#9b9b91;
    --line:rgba(244,244,239,.12);
    --line-strong:rgba(244,244,239,.26);
    --accent:#fac200;
    --shadow-card:0 1px 0 rgba(244,244,239,.06);
    --shadow-soft:0 1px 0 rgba(244,244,239,.06), 0 18px 42px -28px rgba(0,0,0,.75);
}

body{
    font-size:16px;
    line-height:1.58;
    font-weight:500;
    background:
        linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(17,17,17,.035) 1px, transparent 1px),
        var(--bg);
    background-size:32px 32px;
}
[data-theme="dark"] body{
    background:
        linear-gradient(90deg, rgba(244,244,239,.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(244,244,239,.045) 1px, transparent 1px),
        var(--bg);
    background-size:32px 32px;
}

.wrap{max-width:1180px}
.topnav{
    background:rgba(247,247,244,.9);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
[data-theme="dark"] .topnav{background:rgba(16,16,15,.9)}
.topnav-inner{padding-top:8px;padding-bottom:8px}
.topnav-brand{font-weight:800;letter-spacing:.01em;text-transform:uppercase}
.topnav-brand-mark{border-radius:8px;border-width:1px;filter:grayscale(100%) contrast(1.08)}
.topnav-links a,
.topnav-cta,
.topnav-icon,
.topnav-burger,
.btn,
.persona-chip,
.service-strip span,
.media-item,
.filter-chip,
.filter-clear,
.tax-cloud-chip{
    border-radius:8px;
}
.topnav-links a{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.topnav-cta,.btn{font-weight:800}
.topnav-icon,.topnav-burger{border-radius:8px}

.hero{padding:44px 0 28px}
.hero > .wrap{position:relative}
.hero-shell{
    display:block;
    position:relative;
    min-height:clamp(430px, 48vw, 580px);
}
.hero-shell.has-pins .hero-main{
    width:min(680px, calc(100% - 520px));
    min-height:clamp(410px, 46vw, 560px);
    position:relative;
    z-index:2;
}
.profile-card{
    --card-bg:#151515;
    border-radius:10px;
    border:1px solid var(--line-strong);
    min-height:420px;
    box-shadow:var(--shadow-soft);
    min-width:0;
    overflow:hidden;
}
.hero-pins{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}
.hero-pin{
    position:absolute;
    margin:0;
    overflow:hidden;
    border-radius:18px;
    border:1px solid var(--line-strong);
    background:var(--surface-2);
    box-shadow:0 28px 70px -34px rgba(0,0,0,.85);
}
.hero-pin img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero-pin-1{
    width:clamp(240px, 23vw, 340px);
    aspect-ratio:4/3;
    right:0;
    top:clamp(130px, 12vw, 170px);
    transform:rotate(1.5deg);
}
.hero-pin-2{
    width:clamp(170px, 15vw, 230px);
    aspect-ratio:1;
    right:clamp(210px, 20vw, 250px);
    top:clamp(270px, 23vw, 335px);
    transform:rotate(-3deg);
}
.hero-pin-3{
    width:clamp(180px, 17vw, 260px);
    aspect-ratio:5/4;
    right:clamp(12px, 2vw, 32px);
    top:clamp(330px, 28vw, 405px);
    transform:rotate(2.5deg);
}
[data-theme="dark"] .profile-card{--card-bg:#f4f4ef;color:#111}
.hero-headline,
.section-title,
.case-title,
.contact h2,
.contact.contact-simple h2{
    font-weight:900;
    letter-spacing:-.02em;
}
.hero-headline,.case-title{line-height:1}
.hero-deck,.case-subtitle,.section-intro,.why-me-lede{font-weight:600;color:var(--ink-dim)}
.hero-availability,.persona-prompt,.section-eyebrow,.case-kicker{
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.btn{
    padding:13px 18px;
    border-color:var(--line-strong);
    box-shadow:none;
}
.btn:hover,
.persona-chip:hover,
.fcard:hover,
.top-card:hover{
    transform:none;
}
.btn-primary,.topnav-cta{background:var(--ink);color:var(--bg)}
.btn-primary:hover,.topnav-cta:hover,.btn-yellow,.contact-channels .btn-yellow{
    background:var(--accent);
    color:#111;
    border-color:#111;
}

.hero-stat,
.process-step,
.testimonial,
.extras-link,
.fcard,
.case-meta-row,
.case-stat,
.case-block-callout,
.why-me-points li,
.dossier-card,
.dossier-preview,
.cms-placeholder{
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:var(--shadow-card);
}
.hero-stat,.process-step,.testimonial,.extras-link,.case-meta-row,.why-me-points li{
    background:var(--surface);
}
.hero-stat .lbl,
.case-stat .lbl,
.process-step p,
.testimonial cite,
.fcard p,
.bento-tile p,
.extras li{
    font-weight:600;
}
.section{padding:64px 0}
.section-head{border-top:1px solid var(--line);padding-top:22px}
.section-title{line-height:1.02}
.section-eyebrow{
    color:var(--ink-mute);
    font-size:12px;
}

.featured-grid{gap:18px}
.fcard{overflow:hidden;background:var(--surface)}
[data-theme="dark"] .fcard{background:var(--surface)}
.fcard .thumb{background:var(--surface-2)}
.fcard .tags span,
.fcard .tags a,
.dossier-tab.active{
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface-2);
    font-weight:800;
}
.fcard h3,.bento-tile h4,.process-step h4,.why-me-points h3{font-weight:800}
.bento{gap:0;border-color:var(--line-strong)}
.bento-tile{grid-template-columns:48px 1fr auto;padding:13px 0}
.bento-tile:hover{border-radius:8px}
.bento-img,.why-me-emoji{border-radius:6px}

.contact{
    border-radius:10px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:var(--shadow-soft);
}
.contact input,.contact textarea,.contact select{
    border-radius:8px;
    font-weight:600;
}
.case-cover,
.case-block-image figure,
.case-block-gallery figure,
.case-block-video,
.case-block-reel,
.reel-wrap{
    border-radius:10px;
    border:1px solid var(--line);
}
.case-body p{font-weight:500}
.case-body p.lede{font-weight:700}

@media (max-width:720px){
    .profile-card{
        border-radius:10px;
        min-height:360px;
        padding:24px 28px 30px;
    }
}

@media (max-width:1100px){
    .hero-shell.has-pins .hero-main{
        width:min(610px, calc(100% - 390px));
    }
    .hero-pin-1{
        width:clamp(210px, 25vw, 280px);
        top:140px;
    }
    .hero-pin-2{
        width:clamp(145px, 17vw, 190px);
        right:clamp(180px, 21vw, 245px);
        top:280px;
    }
    .hero-pin-3{
        width:clamp(150px, 18vw, 210px);
        top:350px;
    }
}

@media (max-width:880px){
    .hero-shell{
        min-height:0;
    }
    .hero-shell.has-pins .hero-main{
        width:100%;
        min-height:0;
    }
    .hero-pins{
        position:relative;
        inset:auto;
        display:grid;
        grid-template-columns:1.2fr .8fr;
        gap:10px;
        margin-top:24px;
    }
    .hero-pin{
        position:relative;
        inset:auto;
        width:auto;
        transform:none;
        border-radius:14px;
    }
    .hero-pin-1{
        grid-row:span 2;
        aspect-ratio:4/5;
    }
    .hero-pin-2,
    .hero-pin-3{
        aspect-ratio:4/3;
    }
}

@media (max-width:560px){
    .hero-pins{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }
    .hero-pin-1{
        grid-column:1 / -1;
        grid-row:auto;
        aspect-ratio:16/10;
    }
    .hero-pin{
        border-radius:12px;
    }
}