/* ------------------------------------------------------------
   brunomatias.com — site styles
   1. Tokens & base
   2. Shared components
   3. Navigation
   4. Hero
   5. Sections (work, about, experience, insights, contact)
   6. Project dialog
   7. Insight pages
   8. Responsive & reduced motion
------------------------------------------------------------ */

/* 1. Tokens & base
------------------------------------------------------------ */
:root {
    --bg: #f5f2ec;
    --cream: #f8f1e3; /* hero + page loader (index.html inline styles repeat it) */
    --bg-deep: #ece7de;
    --surface: #fbfaf7;
    --ink: #16161c;
    --ink-2: #3b3a41;
    --muted: #75726b;
    --line: #d9d3c8;
    --line-soft: #e6e1d8;

    --blue: #2643c9;
    --blue-deep: #1b2f97;
    --blue-tint: #e4e8f8;
    --terracotta: #b5441b;
    --terracotta-tint: #f6e3d9;

    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    --gutter: clamp(16px, 4vw, 48px);
    --max: 1280px;
    --nav-h: 72px;
    --section-y: clamp(96px, 14vw, 180px);

    --r-lg: 28px;
    --r-md: 16px;
    --r-sm: 10px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --shadow: 0 1px 2px rgba(40, 32, 20, .04), 0 12px 40px -12px rgba(40, 32, 20, .14);

    --z-nav: 50;
    --z-progress: 55;
    --z-grain: 60;
    --z-skip: 70;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--nav-h);
    scrollbar-gutter: stable; /* page width stays put while a modal locks scrolling */
}

html:not(.lenis) {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button {
    font: inherit;
    color: inherit;
}

em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

::selection {
    background: var(--terracotta-tint);
    color: var(--terracotta);
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: calc(var(--max) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Lenis */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Grain overlay */
.grain {
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: var(--z-progress);
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: var(--z-skip);
    padding: 10px 16px;
    border-radius: var(--r-sm);
    background: var(--ink);
    color: var(--surface);
    transition: top .2s var(--ease);
}

.skip-link:focus-visible {
    top: 12px;
}

/* 2. Shared components
------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s var(--ease);
}

.btn:hover svg {
    transform: translateY(2px);
}

.btn:active {
    transform: scale(.97);
}

.btn-primary {
    background: var(--blue);
    color: #fff;
}

.btn-primary:hover {
    background: var(--blue-deep);
}

.btn-dark {
    background: var(--ink);
    color: var(--surface);
}

.btn-dark:hover {
    background: var(--blue);
}

.btn-sm {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
}

.link-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 15px;
    padding: 4px 0;
}

.link-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(.3);
    transform-origin: 0 50%;
    opacity: .5;
    transition: transform .45s var(--ease), opacity .3s, background-color .3s;
}

.link-arrow:hover::after {
    transform: scaleX(1);
    opacity: 1;
    background: var(--terracotta);
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.eyebrow span {
    color: var(--terracotta);
}

.eyebrow::after {
    content: "";
    flex: 0 0 48px;
    height: 1px;
    background: currentColor;
    opacity: .4;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tags li {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink-2);
    transition: border-color .3s, color .3s, background-color .3s;
}

.tags--lg li {
    padding: 8px 16px;
    font-size: 15px;
    background: var(--surface);
}

.tags--lg li:hover {
    border-color: var(--terracotta);
    color: var(--terracotta);
}

/* Word split helpers (created by js/site.js) */
.w {
    display: inline-block;
    overflow: clip;
    overflow-clip-margin: .12em;
    vertical-align: top;
    padding-bottom: .06em;
    margin-bottom: -.06em;
}

.wi {
    display: inline-block;
    will-change: transform;
}

/* 3. Navigation
------------------------------------------------------------ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease);
}

.nav.is-scrolled {
    background: rgba(245, 242, 236, .78);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 var(--line-soft);
}

.nav.is-hidden {
    transform: translateY(-100%);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--nav-h);
    max-width: calc(var(--max) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.nav-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--surface);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .3s var(--ease);
}

.nav-brand:hover .nav-mark {
    background: var(--terracotta);
}

.nav-links {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid var(--line-soft);
}

.nav-links a {
    display: block;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

.nav-links a:hover {
    color: var(--ink);
}

.nav-links a.is-active {
    background: var(--ink);
    color: var(--surface);
}

/* 4. Hero
------------------------------------------------------------ */
.hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--nav-h) + 48px);
    overflow: hidden;
    background: var(--cream);
}

.hero::before {
    /* soft ambient light behind the headline */
    content: "";
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    right: -25vmax;
    top: -30vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(38, 67, 201, .10), rgba(38, 67, 201, 0));
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    width: 40vmax;
    height: 40vmax;
    left: -18vmax;
    bottom: -10vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(181, 68, 27, .07), rgba(181, 68, 27, 0));
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(40px, 7vw, 88px);
}

.anim [data-hero] {
    opacity: 0;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.hero-photo {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: var(--shadow);
}

.hero-name {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.01em;
}

.hero-role {
    font-size: 14px;
    color: var(--muted);
}

.hero-title {
    max-width: 19ch;
    font-size: clamp(2.6rem, 6.4vw, 6.2rem);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.hero-title em {
    color: var(--blue);
    letter-spacing: -.02em;
}

.hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px 64px;
    margin-top: clamp(32px, 5vw, 64px);
}

.hero-lead {
    max-width: 44ch;
    font-size: clamp(17px, 1.5vw, 19px);
    color: var(--ink-2);
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.marquee {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
    overflow: hidden;
    white-space: nowrap;
    /* can be dragged sideways (js/site.js); vertical swipes still scroll the page */
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.marquee.is-dragging {
    cursor: grabbing;
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding-right: 28px;
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.6vw, 34px);
    color: var(--ink-2);
    will-change: transform;
}

.marquee:has(.marquee-toggle)::after {
    /* fades the text out behind the pause button */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(var(--gutter) + 96px);
    background: linear-gradient(90deg, rgba(248, 241, 227, 0), var(--cream) 60%);
    pointer-events: none;
}

.marquee-toggle {
    position: absolute;
    top: 50%;
    right: var(--gutter);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}

.marquee-toggle:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}

.marquee-toggle svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.marquee-toggle .icon-play,
.marquee-toggle[aria-pressed="true"] .icon-pause {
    display: none;
}

.marquee-toggle[aria-pressed="true"] .icon-play {
    display: block;
}

.marquee-track i {
    font-style: normal;
    font-size: .6em;
    color: var(--terracotta);
    transition: color .4s var(--ease);
}

.marquee-track i.is-held {
    /* the ball sits behind it */
    color: var(--cream);
}

.marquee-track .ch {
    /* each letter fades on its own (js/site.js splits the items) */
    transition: color .45s var(--ease), text-shadow .45s var(--ease);
}

.marquee-track .is-lit {
    /* the item after the ball's asterisk. The serif has no bold weight, so thin shadows thicken it (they can fade) */
    color: var(--ink);
    text-shadow: .022em 0 0 currentColor, -.008em 0 0 currentColor, 0 0 .01em currentColor;
}

.marquee-track .is-lit .is-off {
    /* a letter the ball has already hopped past */
    color: var(--ink-2);
    text-shadow: none;
}

.marquee-track .no-fade,
.marquee-track .no-fade .ch {
    /* the track wrapped around and another copy took over: no fade */
    transition: none;
}

/* the loader's dot, travelling down the page: the marquee, then the data-ball-stop elements (js/site.js, pageBall) */
.page-ball {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; /* in the strip: behind it (.marquee is z-index 1) */
    border-radius: 50%;
    background: var(--blue); /* inside the dark contact block it takes another colour (js/site.js, paint) */
    pointer-events: none;
    will-change: transform;
}

.page-ball.is-free {
    /* falling through the hero, in front of everything */
    z-index: 2;
}

.page-ball.is-over {
    /* while the loader fades out above the page */
    position: fixed;
    z-index: 10000;
}

.page-ball.is-flying {
    /* between stations: over the page, under the nav */
    position: fixed;
    z-index: 45;
}

.page-ball.is-flying.is-tucked {
    /* coming out from behind a card (js/site.js, data-ball-bounce): placed right before it in the page */
    z-index: auto;
}

.page-ball.is-flying.is-over {
    /* the page opened scrolled down: it sets off while the loader still fades out */
    z-index: 10000;
}

.page-ball.is-away {
    /* lost off screen while scrolling, until its station is on screen (js/site.js, goAway) */
    visibility: hidden;
}

.page-ball.is-posed {
    /* at a station, behind its text (js/site.js, POSES) */
    z-index: -1;
}

.ball-host {
    position: relative;
    isolation: isolate; /* keeps the ball behind the text but above the backgrounds */
}

.ball-host {
    transition: color .4s var(--ease);
}

.ball-host.has-ball {
    color: var(--cream);
}

.eyebrow--light .ball-host.has-ball {
    /* on the dark contact block the ball is light (data-ball-tint): dark text on it */
    color: var(--ink);
}

/* "Selected Work", "About" and "Insights" as the ball gets to 01 / 02 / 04: a blue highlight sweeps in from the left (js/site.js, poseMark) */
.eyebrow-hl {
    margin: 0 -.5em;
    padding: 0 .5em;
    border-radius: 3px;
    font-weight: inherit;
    background: linear-gradient(rgba(38, 67, 201, .15), rgba(38, 67, 201, .15)) no-repeat 0 0 / 0% 100%;
    transition: background-size .8s var(--ease), color .5s var(--ease);
}

.eyebrow-hl.is-hl {
    background-size: 100% 100%;
    color: var(--ink);
}

/* "01.01" when the ball bounces on it on its way to the Live Demo: the same sweep, keeping its colour */
.index-hl {
    margin: 0 -.4em;
    padding: 0 .4em;
    border-radius: 3px;
    font-weight: inherit;
    background: linear-gradient(rgba(38, 67, 201, .15), rgba(38, 67, 201, .15)) no-repeat 0 0 / 0% 100%;
    transition: background-size .8s var(--ease);
}

.index-hl.is-hl {
    background-size: 100% 100%;
}

/* A card number the ball stops behind (js/site.js, data-ball-stop) */
.card-num {
    font-weight: inherit;
}

/* A button the ball drops into and turns into its outline (js/site.js, poseRing): the ball sits next to it, behind it */
.ring-stage {
    position: relative;
}

.ring-host {
    position: relative;
    z-index: 1;
}

.page-ball.is-ringed {
    z-index: 0;
}

.page-ball.is-sitting {
    /* on top of a button, in front of it (js/site.js, poseSit) */
    z-index: 2;
}

.page-ball.is-beside {
    /* just before a heading's text (js/site.js, poseBeside) */
    z-index: 1;
}

/* A Live Demo button the scroll is at, with no ball: an outline pops up around it (js/site.js, data-ball-stop="outline").
   Size and place come from the script */
.live-ring {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--blue);
    pointer-events: none;
    opacity: 0;
    translate: -50% -50%;
    scale: .82;
    transition: scale .2s var(--ease), opacity .2s linear;
}

.live-ring.is-on {
    opacity: 1;
    scale: 1;
    /* overshoots a little, then settles */
    transition: scale .42s cubic-bezier(.34, 1.56, .64, 1), opacity .15s linear;
}

/* 5. Sections
------------------------------------------------------------ */
.section {
    padding: var(--section-y) 0 calc(var(--section-y) * 1.1);
}

.section--tint {
    background: var(--bg-deep);
}

.section-head {
    margin-bottom: clamp(48px, 7vw, 96px);
}

.section-title {
    max-width: 18ch;
    margin-top: 24px;
    font-size: clamp(2.2rem, 5.4vw, 4.6rem);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.section-title em {
    color: var(--blue);
    transition: color .5s var(--ease);
}

/* Until the ball hits it (js/site.js, data-ball-pre): dark like the rest of the title, then it turns blue */
.section-title em.is-plain {
    color: inherit;
}

/* Work: pinned heading + stacking cards */
.work-pin {
    --pin-h: 220px; /* real value set by site.js from .work-head height */
    --last-card-h: 0px; /* set by site.js */
    --stack-top: calc(var(--nav-h) + var(--pin-h) + 16px);
    /* End the pin area where the last card lands (its height + its 48px sticky offset),
       so the heading scrolls away together with the stack; the margin restores the layout */
    --pin-release: calc(var(--last-card-h) + 64px);
    display: flow-root; /* keeps the stack's negative margin from collapsing into this one */
    margin-bottom: var(--pin-release);
}

.work-head {
    position: sticky;
    top: var(--nav-h);
    z-index: 2;
    margin-bottom: 0;
    padding: 16px 0 24px;
    background: var(--bg);
}

.work-head .section-title {
    margin-top: 16px;
    font-size: clamp(2rem, 4.2vw, 3.6rem);
}

.work-pin .stack {
    margin-top: clamp(32px, 4vw, 56px);
    margin-bottom: calc(var(--pin-release) * -1);
}

.stack {
    display: grid;
    gap: 32px;
}

.stack-card {
    position: sticky;
    top: var(--stack-top);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: center;
    min-height: min(500px, calc(100vh - var(--stack-top) - 64px));
    padding: clamp(20px, 2.8vw, 36px);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    transform-origin: 50% 0;
    will-change: transform;
}

.stack-card:nth-child(2) {
    top: calc(var(--stack-top) + 16px);
}

.stack-card:nth-child(3) {
    top: calc(var(--stack-top) + 32px);
}

.stack-card:nth-child(4) {
    top: calc(var(--stack-top) + 48px);
}

.card-index {
    display: flex;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--terracotta);
}

.card-index span {
    color: var(--muted);
}

.stack-text h3 {
    margin: 16px 0 12px;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.stack-text > p:not(.card-index) {
    max-width: 46ch;
    color: var(--ink-2);
    text-wrap: pretty;
}

.stack-text .tags {
    margin-top: 24px;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 24px;
}

.stack-media {
    position: relative;
    display: block;
    align-self: stretch;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
}

.stack-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0;
    transition: scale 1s var(--ease);
}

.stack-media:hover img {
    scale: 1.03;
}

/* Work: more projects (list with screen thumbnails, same look as Insights) */
.more {
    /* padding, not margin: a margin would collapse into .work-pin's margin-bottom */
    padding-top: clamp(96px, 12vw, 160px);
}

.more-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.more-title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    letter-spacing: -.03em;
}

.more-count {
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--muted);
}

.insight.more-row {
    grid-template-columns: 64px clamp(120px, 15vw, 200px) minmax(0, 1fr) auto 48px;
    padding: clamp(20px, 2.4vw, 28px) 0;
}

.more-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
    background: var(--surface);
}

.more-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0;
    transition: scale .8s var(--ease);
}

.more-row:hover .more-thumb img {
    scale: 1.06;
}

.more-text {
    display: block;
    min-width: 0;
    transition: transform .5s var(--ease);
}

/* Slide title and description together instead of the title alone */
.more-row:hover .more-text {
    transform: translateX(12px);
}

.more-row:hover .insight-title {
    transform: none;
}

.more-row .insight-title {
    display: block;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}

.more-desc {
    display: block;
    max-width: 58ch;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
}

/* About */
.statement {
    max-width: 26ch;
    font-size: clamp(1.8rem, 4.2vw, 3.6rem);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.035em;
    text-wrap: pretty;
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(40px, 6vw, 96px);
    margin-top: clamp(64px, 9vw, 120px);
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.facts {
    display: grid;
    gap: 18px;
    align-content: start;
}

.facts div {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    font-size: 15px;
}

.facts dt {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    padding-top: 3px;
}

.facts a:hover {
    color: var(--blue);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.stat {
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.stat-num {
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    color: var(--terracotta);
}

.stat-num span {
    color: var(--ink);
}

.stat-label {
    margin-top: 12px;
    max-width: 22ch;
    font-size: 15px;
    color: var(--muted);
}

.services {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(40px, 6vw, 96px);
    margin-top: clamp(96px, 12vw, 160px);
}

.services-title {
    position: sticky;
    top: calc(var(--nav-h) + 32px);
    align-self: start;
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.04em;
}

.services-title em {
    color: var(--blue);
}

.services-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
}

.services-list li {
    padding: 28px 0 32px;
    border-top: 1px solid var(--line);
}

.svc-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--terracotta);
}

.services-list h4 {
    margin: 14px 0 8px;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.02em;
}

.services-list p {
    color: var(--muted);
    font-size: 16px;
    text-wrap: pretty;
}

/* Experience */
.timeline {
    position: relative;
    display: grid;
    gap: 0;
    padding-left: 40px;
}

.timeline-line {
    position: absolute;
    left: 5px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--line);
}

.timeline-progress {
    position: absolute;
    inset: 0;
    background: var(--blue);
    transform: scaleY(0);
    transform-origin: 50% 0;
}

.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 16px 48px;
    padding: 36px 0;
    border-bottom: 1px solid var(--line-soft);
}

.tl-item::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 44px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--muted);
    transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}

.tl-item.is-active::before {
    background: var(--terracotta);
    border-color: var(--terracotta);
    transform: scale(1.15);
}

.tl-period {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--muted);
    padding-top: 4px;
    font-variant-numeric: tabular-nums;
}

.tl-body h3 {
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.03em;
}

.tl-org {
    margin: 6px 0 14px;
    font-size: 15px;
    color: var(--terracotta);
}

.tl-org a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tl-body > p:not(.tl-org) {
    max-width: 62ch;
    color: var(--ink-2);
    text-wrap: pretty;
}

.tl-points {
    display: grid;
    gap: 6px;
    max-width: 62ch;
    margin-top: 14px;
    font-size: 15px;
    color: var(--muted);
}

.tl-points li {
    position: relative;
    padding-left: 18px;
}

.tl-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 8px;
    height: 1px;
    background: var(--terracotta);
}

.tl-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border: 1px solid var(--blue);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--blue);
}

.tl-divider {
    padding: 72px 0 8px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1;
    color: var(--ink);
}

.toolkit {
    margin-top: clamp(96px, 12vw, 160px);
}

.toolkit-title {
    margin-bottom: 16px;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    letter-spacing: -.03em;
}

.toolkit-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 16px 48px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
}

.toolkit-label {
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    padding-top: 9px;
}

/* Insights */
.insights {
    border-top: 1px solid var(--line);
}

.insight {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto 48px;
    align-items: center;
    gap: 24px;
    padding: clamp(28px, 3.5vw, 44px) 0;
    border-bottom: 1px solid var(--line);
    isolation: isolate;
}

.insight::before {
    content: "";
    position: absolute;
    inset: 0 calc(var(--gutter) * -1);
    z-index: -1;
    background: var(--surface);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform .5s var(--ease);
}

.insight:hover::before {
    transform: scaleY(1);
}

.insight-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--terracotta);
}

.insight-title {
    font-size: clamp(1.5rem, 3.4vw, 2.8rem);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.035em;
    transition: transform .5s var(--ease), color .3s;
}

.insight:hover .insight-title {
    transform: translateX(12px);
    color: var(--blue);
}

.insight-meta {
    font-size: 15px;
    color: var(--muted);
    text-align: right;
}

.insight-arrow {
    justify-self: end;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: transform .5s var(--ease), color .3s;
}

.insight:hover .insight-arrow {
    transform: rotate(45deg);
    color: var(--terracotta);
}

/* Contact (+ footer, sharing the same dark backdrop) */
.closing {
    position: relative;
    background: var(--ink);
    color: var(--surface);
    overflow: hidden;
}

.contact {
    padding: var(--section-y) 0;
}

.closing::before {
    content: "";
    position: absolute;
    width: 80vmax;
    height: 80vmax;
    right: -30vmax;
    bottom: -50vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(38, 67, 201, .35), rgba(38, 67, 201, 0));
    pointer-events: none;
}

.closing::after {
    content: "";
    position: absolute;
    width: 50vmax;
    height: 50vmax;
    left: -20vmax;
    top: -30vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(181, 68, 27, .35), rgba(181, 68, 27, 0));
    pointer-events: none;
}

.contact .container,
.closing .footer {
    background: transparent;
    position: relative;
    z-index: 1;
}

.eyebrow--light {
    color: rgba(251, 250, 247, .55);
}

.eyebrow--light span {
    color: #e08aa0;
}

.contact-title {
    max-width: 16ch;
    margin: 28px 0 clamp(48px, 7vw, 88px);
    font-size: clamp(2.6rem, 7vw, 6.4rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.contact-title em {
    color: #9fb0ff;
}

.contact-mail {
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    font-size: clamp(1.4rem, 4.4vw, 3.4rem);
    font-weight: 500;
    letter-spacing: -.03em;
    position: relative;
    padding-bottom: 8px;
    transition: color .3s;
    overflow-wrap: anywhere;
}

.contact-mail::before,
.contact-mail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
}

.contact-mail::before {
    background: rgba(251, 250, 247, .25);
}

.contact-mail::after {
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .6s var(--ease);
}

.contact-mail:hover {
    color: #c9d2ff;
}

.contact-mail:hover::after {
    transform: scaleX(1);
}

.contact-mail svg {
    flex: none;
    width: .8em;
    height: .8em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    transition: transform .5s var(--ease);
}

.contact-mail:hover svg {
    transform: rotate(45deg);
}

.contact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin-top: 40px;
    color: rgba(251, 250, 247, .6);
}

.contact-meta a:hover {
    color: var(--surface);
}

.footer {
    background: var(--ink);
    border-top: 1px solid rgba(251, 250, 247, .1);
    color: rgba(251, 250, 247, .5);
    font-size: 14px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 28px;
    padding-bottom: 32px;
}

.footer .link-arrow {
    font-size: 14px;
}

.footer .link-arrow:hover {
    color: var(--surface);
}

.footer .link-arrow:hover::after {
    background: var(--surface);
}

/* 6. Project dialog
------------------------------------------------------------ */
.project-dialog {
    width: min(1100px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 40px 120px -20px rgba(22, 22, 28, .45);
    overflow: hidden;
}

.project-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: dialog-in .55s var(--ease);
}

.project-dialog::backdrop {
    background: rgba(22, 22, 28, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fade-in .4s var(--ease);
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(32px) scale(.98); }
}

@keyframes fade-in {
    from { opacity: 0; }
}

/* Closing: site.js waits for these to finish before calling close() */
.project-dialog.is-leaving {
    animation: dialog-out .35s var(--ease) forwards;
    pointer-events: none;
}

.project-dialog.is-leaving::backdrop {
    animation: fade-out .35s var(--ease) forwards;
}

@keyframes dialog-out {
    to { opacity: 0; transform: translateY(24px) scale(.98); }
}

@keyframes fade-out {
    to { opacity: 0; }
}

.dialog-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 16px 0;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
    transition: background-color .3s var(--ease), border-color .3s, color .3s, transform .3s var(--ease);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}

.icon-btn:active {
    transform: scale(.94);
}

.icon-btn--close {
    margin-left: 8px;
}

.icon-btn:disabled {
    opacity: .35;
    pointer-events: none;
}

.dialog-body {
    overflow-y: auto;
    padding: 8px clamp(20px, 4vw, 48px) clamp(28px, 4vw, 48px);
}

.sheet-head h2 {
    margin-top: 10px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.04em;
}

.sheet-head .eyebrow::after {
    display: none;
}

.gallery {
    position: relative;
    margin: 28px 0 32px;
}

.sheet-gallery {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--r-md);
}

.sheet-gallery::-webkit-scrollbar {
    display: none;
}

.sheet-gallery img {
    flex: 0 0 100%;
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    object-position: 50% 0;
    scroll-snap-align: start;
    border-radius: var(--r-md);
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
}

.gallery-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.gallery-count {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.gallery-count b {
    font-weight: 500;
    color: var(--terracotta);
}

.gallery-btns {
    display: flex;
    gap: 8px;
}

.sheet-body {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 32px 56px;
}

.sheet-body p {
    color: var(--ink-2);
    text-wrap: pretty;
}

.sheet-body p + p {
    margin-top: 1em;
}

.sheet-body a:not(.btn) {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sheet-side {
    display: grid;
    gap: 24px;
    align-content: start;
}

.sheet-side h3 {
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.sheet-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dialog-loading {
    display: grid;
    gap: 16px;
    padding: 8px 0 24px;
}

.skeleton {
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--bg-deep) 0%, var(--line-soft) 50%, var(--bg-deep) 100%) 0 0 / 200% 100%;
    animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
    to { background-position: -200% 0; }
}

.dialog-error {
    padding: 48px 0;
    color: var(--muted);
}

/* 6b. Live demo (full-screen frame with a bar on top)
------------------------------------------------------------ */
.btn-live {
    box-shadow: 0 10px 28px -10px rgba(38, 67, 201, .7);
}

.btn-live:hover {
    box-shadow: 0 14px 34px -10px rgba(27, 47, 151, .8);
}

.live-dot {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    animation: live-pulse 1.8s var(--ease) infinite;
}

@keyframes live-pulse {
    from { transform: scale(1); opacity: .7; }
    to { transform: scale(3.2); opacity: 0; }
}

.demo-view {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ink);
    color: var(--surface);
    overflow: hidden;
}

.demo-view[open] {
    display: flex;
    flex-direction: column;
    animation: fade-in .3s var(--ease);
}

.demo-view::backdrop {
    background: rgba(22, 22, 28, .45);
    animation: fade-in .3s var(--ease);
}

/* Closing: fades out, then site.js calls close() */
.demo-view.is-leaving,
.demo-view.is-leaving::backdrop {
    animation: fade-out .3s var(--ease) forwards;
    pointer-events: none;
}

.demo-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 56px;
    padding: 0 10px 0 clamp(12px, 2vw, 20px);
    font-size: 14px;
}

.demo-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
}

.demo-title b {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.demo-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.demo-tag .live-dot {
    width: 6px;
    height: 6px;
}

.demo-note {
    color: rgba(251, 250, 247, .55);
}

.demo-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.demo-newtab,
.demo-exit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.demo-newtab {
    color: rgba(251, 250, 247, .7);
}

.demo-newtab:hover {
    background: rgba(251, 250, 247, .1);
    color: var(--surface);
}

.demo-exit {
    border: 0;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.demo-exit:hover {
    background: var(--blue);
    color: #fff;
}

.demo-exit:active {
    transform: scale(.96);
}

.demo-newtab svg,
.demo-exit svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.demo-stage {
    position: relative;
    flex: 1;
    min-height: 0;
}

.demo-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

/* The page loader, played inside the stage instead of over the whole screen */
.demo-stage .ld-screen {
    position: absolute;
    z-index: 1;
}

.ld-caption {
    margin: -75px 0 0;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ld-caption::after {
    content: "";
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: ld-ellipsis 1.2s steps(4, end) infinite;
}

@keyframes ld-ellipsis {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75%, 100% { content: "..."; }
}

@media (max-width: 760px) {
    .demo-note,
    .demo-newtab span {
        display: none;
    }

    .demo-newtab {
        padding: 0 10px;
    }
}

/* 7. Insight pages
------------------------------------------------------------ */
.article-hero {
    padding: calc(var(--nav-h) + clamp(48px, 8vw, 112px)) 0 clamp(40px, 6vw, 72px);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    transition: color .3s;
}

.back-link span {
    transition: transform .3s var(--ease);
}

.back-link:hover {
    color: var(--ink);
}

.back-link:hover span {
    transform: translateX(-4px);
}

.article-title {
    max-width: 18ch;
    margin: 24px 0 28px;
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.article-title em {
    color: var(--blue);
}

.article-lead {
    max-width: 52ch;
    font-size: clamp(18px, 1.7vw, 21px);
    color: var(--ink-2);
    text-wrap: pretty;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 36px;
}

.article-cover {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--bg-deep);
    box-shadow: var(--shadow);
}

.article-cover img {
    width: 100%;
    transform-origin: 50% 0;
}

.prose {
    max-width: 760px;
    margin: clamp(64px, 9vw, 120px) auto 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-2);
}

.prose h2 {
    margin: 2.4em 0 .7em;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.03em;
    color: var(--ink);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p + p {
    margin-top: 1.1em;
}

.prose code {
    font-family: var(--font-mono);
    font-size: .88em;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--bg-deep);
}

.prose a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
    max-width: 1040px;
    margin: clamp(48px, 6vw, 80px) auto;
}

.topic {
    padding: 28px 0 32px;
    border-top: 1px solid var(--line);
}

.topic h3 {
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.02em;
}

.topic h3 span {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--terracotta);
    padding-top: 5px;
}

.topic p {
    font-size: 16px;
    color: var(--muted);
    text-wrap: pretty;
}

.pull {
    max-width: 22ch;
    margin: clamp(64px, 8vw, 104px) auto;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.08;
    text-align: center;
    color: var(--terracotta);
    text-wrap: balance;
}

.article-tags {
    max-width: 760px;
    margin: 56px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.next-insight {
    display: block;
    margin-top: var(--section-y);
    padding: clamp(56px, 8vw, 104px) 0;
    border-top: 1px solid var(--line);
    transition: background-color .5s var(--ease);
}

.next-insight:hover {
    background: var(--bg-deep);
}

.next-insight .eyebrow::after {
    display: none;
}

.next-insight-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
    font-size: clamp(2rem, 5.4vw, 4.6rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.045em;
}

.next-insight-title svg {
    flex: none;
    width: .7em;
    height: .7em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    transition: transform .5s var(--ease), color .3s;
}

.next-insight:hover .next-insight-title svg {
    transform: rotate(45deg);
    color: var(--terracotta);
}

/* 8. Responsive & reduced motion
------------------------------------------------------------ */
@media (max-width: 1024px) {
    .stack-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .stack-media {
        order: -1;
        aspect-ratio: 16 / 9;
    }

    .about-grid,
    .services {
        grid-template-columns: 1fr;
    }

    .services-title {
        position: static;
    }

    .insight {
        grid-template-columns: 48px minmax(0, 1fr) 32px;
    }

    .insight-meta {
        display: none;
    }

    .insight.more-row {
        grid-template-columns: 48px clamp(110px, 18vw, 160px) minmax(0, 1fr) 32px;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 16px;
    }

    .nav-name,
    .nav .btn {
        display: none;
    }

    .nav-links a {
        padding: 7px 12px;
    }

    .hero-meta {
        margin-bottom: 24px;
    }

    .hero-photo {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .hero-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .work-head {
        position: static;
        padding: 0;
    }

    .stack-card,
    .stack-card:nth-child(2),
    .stack-card:nth-child(3),
    .stack-card:nth-child(4) {
        position: relative;
        top: 0;
    }

    .insight.more-row {
        grid-template-columns: 96px minmax(0, 1fr) 24px;
        gap: 16px;
    }

    .more-row .insight-num {
        display: none;
    }

    .more-desc {
        font-size: 14px;
    }

    .stats {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .services-list {
        grid-template-columns: 1fr;
    }

    .timeline {
        padding-left: 28px;
    }

    .tl-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tl-item::before {
        left: -28px;
        top: 41px;
    }

    .toolkit-row {
        grid-template-columns: 1fr;
    }

    .sheet-body {
        grid-template-columns: 1fr;
    }

    .topics {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .marquee-track {
        white-space: normal;
    }

    .skeleton {
        animation: none;
    }
}

/* Captions under case-study screenshots */
.article-cover + .article-cover {
    margin-top: clamp(32px, 5vw, 64px);
}

.article-cover figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: var(--muted);
}