:root {
    --canvas: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f6f7fb;
    --ink: #171a24;
    --muted: #62697a;
    --line: #e5e7ee;
    --blue: #3d5bd9;
    --blue-dark: #2a3f9b;
    --blue-soft: #eaf0ff;
    --teal: #159f91;
    --teal-soft: #e3f8f4;
    --coral: #f26452;
    --rose-soft: #fff0ed;
    --violet-soft: #f0edff;
    --sand: #fbf4df;
    --white: #ffffff;
    --wine: #64152b;
    --display: "Instrument Serif", Georgia, serif;
    --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --page: min(1240px, calc(100% - 48px));
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --shadow: 0 24px 70px rgba(25, 36, 61, 0.09);
    --shadow-small: 0 12px 34px rgba(25, 36, 61, 0.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; }
a { color: inherit; }
::selection { color: var(--white); background: var(--blue); }

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    transform: translateY(-160%);
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--white);
    background: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }
.shell { width: var(--page); margin-inline: auto; }
.page-main { padding: 104px 0 28px; }

.masthead {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    z-index: 50;
    width: var(--page);
    margin: 0;
    transform: translateX(-50%);
}

.masthead-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 64px;
    align-items: center;
    gap: 20px;
    padding: 8px 12px;
    border: 1px solid rgba(229, 231, 238, 0.92);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 44px rgba(35, 47, 81, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 11px;
    padding-left: 5px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    background: var(--blue);
}

.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.main-nav ul,
.footer-nav,
.tag-list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav { min-width: 0; }
.main-nav ul { justify-content: center; }

.main-nav a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
    color: var(--white);
    background: var(--blue);
    outline: none;
}

.masthead-availability {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-right: 10px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.availability-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4fbd71;
    box-shadow: 0 0 0 4px rgba(79, 189, 113, 0.14);
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--blue);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.label::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(32px, 6vw, 78px);
    min-height: 720px;
    align-items: center;
    padding: clamp(72px, 10vw, 132px) 0 70px;
}

.home-hero-main { min-width: 0; }

.home-hero h1 {
    max-width: 850px;
    margin: 22px 0 0;
    font-family: var(--display);
    font-size: clamp(4.8rem, 10vw, 9.2rem);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.8;
}

.home-hero h1 em { color: var(--blue); font-weight: 400; }

.hero-bottom {
    display: grid;
    grid-template-columns: auto minmax(260px, 460px);
    gap: 34px;
    align-items: end;
    margin-top: 54px;
}

.hero-intro { margin: 0; color: var(--muted); font-size: 1rem; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; }

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 19px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 5px 16px rgba(25, 36, 61, 0.05);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(25, 36, 61, 0.12);
    outline: none;
}

.button-primary { color: var(--white); border-color: var(--blue); background: var(--blue); }
.button-primary:hover { background: var(--blue-dark); }
.button-acid { border-color: var(--white); background: var(--white); }
.button-light { border-color: var(--white); background: var(--white); }

.home-hero-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hero-logo {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--blue);
    box-shadow: var(--shadow);
}

.hero-logo img { width: 100%; height: 100%; object-fit: cover; }

.hero-rail-copy {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.76);
}

.hero-rail-copy strong { display: block; margin-bottom: 10px; font-size: 0.92rem; }
.hero-rail-copy p { margin: 0; color: var(--muted); font-size: 0.82rem; }

.expertise-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    overflow-x: auto;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
    scrollbar-width: none;
}

.expertise-strip::-webkit-scrollbar { display: none; }
.expertise-strip span { white-space: nowrap; color: var(--muted); font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; }
.expertise-strip span + span::before { content: "•"; margin-right: 18px; color: var(--blue); }

.section { padding: clamp(74px, 9vw, 122px) 0; }
.section + .section { border-top: 1px solid var(--line); }

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
    gap: 40px;
    align-items: end;
    margin-bottom: clamp(34px, 5vw, 58px);
}

.section-head h2,
.page-intro h1 {
    max-width: 850px;
    margin: 15px 0 0;
    font-family: var(--display);
    font-size: clamp(3.3rem, 7vw, 6.8rem);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 0.88;
}

.section-head p,
.page-intro-copy { margin: 0; color: var(--muted); }

.focus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.focus-card {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.focus-card:nth-child(2) { background: var(--blue-soft); }
.focus-card:nth-child(3) { background: var(--violet-soft); }
.focus-number { color: var(--muted); font-family: var(--mono); font-size: 0.68rem; }
.focus-card h3 { max-width: 300px; margin: 0 0 14px; font-family: var(--display); font-size: clamp(2.1rem, 3.5vw, 3.5rem); font-weight: 400; letter-spacing: -0.035em; line-height: 0.96; }
.focus-card p { margin: 0; color: var(--muted); font-size: 0.86rem; }

.featured-project {
    display: grid;
    grid-template-columns: minmax(310px, 0.7fr) minmax(0, 1.3fr);
    min-height: 580px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.featured-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(32px, 5vw, 58px);
}

.featured-copy h3 { margin: 18px 0; font-family: var(--display); font-size: clamp(3.5rem, 6vw, 6.5rem); font-weight: 400; letter-spacing: -0.055em; line-height: 0.82; }
.featured-copy p { margin: 0; color: var(--muted); }
.featured-media { position: relative; min-height: 450px; overflow: hidden; background: var(--blue); }
.featured-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 600ms cubic-bezier(.16,1,.3,1); }
.featured-media:hover img { transform: scale(1.025); }
.featured-badge { position: absolute; right: 20px; bottom: 20px; display: grid; width: 104px; height: 104px; place-items: center; border-radius: 50%; color: var(--blue); background: var(--white); box-shadow: var(--shadow-small); font-family: var(--mono); font-size: 0.62rem; font-weight: 700; text-align: center; text-transform: uppercase; }

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft); }
.stat:nth-child(2) { background: var(--teal-soft); }
.stat:nth-child(3) { background: var(--rose-soft); }
.stat strong { display: block; font-family: var(--display); font-size: clamp(4rem, 7vw, 7rem); font-weight: 400; letter-spacing: -0.055em; line-height: 0.8; }
.stat span { display: block; margin-top: 16px; color: var(--muted); font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; }

.contact-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    padding: clamp(38px, 6vw, 68px);
    border-radius: var(--radius-xl);
    color: var(--white);
    background: var(--blue);
    box-shadow: var(--shadow);
}

.contact-band h2 { max-width: 760px; margin: 0; font-family: var(--display); font-size: clamp(3.1rem, 6vw, 6.1rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.88; }
.contact-band p { max-width: 650px; margin: 16px 0 0; color: rgba(255,255,255,0.68); }
.contact-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.contact-shortcuts a { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 0.8rem; font-weight: 800; text-decoration: none; }
.contact-shortcuts i { grid-row: 1 / 3; color: var(--blue); font-size: 1.05rem; }
.contact-shortcuts span { color: var(--muted); font-size: 0.68rem; font-weight: 600; overflow-wrap: anywhere; }

.page-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
    gap: 48px;
    align-items: end;
    padding: clamp(76px, 10vw, 126px) 0 clamp(58px, 8vw, 94px);
    border-bottom: 1px solid var(--line);
}

.page-intro h1 { font-size: clamp(4.5rem, 10vw, 9.4rem); }
.page-intro-copy p { margin: 0 0 18px; }

.cv-layout { display: grid; grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 94px); padding: 70px 0 110px; }
.cv-sidebar { align-self: start; position: sticky; top: 110px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.cv-sidebar h2 { margin: 0 0 16px; font-family: var(--display); font-size: 2.2rem; font-weight: 400; line-height: 1; }
.cv-sidebar p { margin: 0 0 25px; color: var(--muted); font-size: 0.86rem; }
.cv-contact { display: grid; gap: 9px; }
.cv-contact a { width: fit-content; color: var(--blue); font-size: 0.73rem; font-weight: 700; text-decoration: none; }
.cv-contact a:hover { text-decoration: underline; }
.cv-section + .cv-section { margin-top: 78px; }
.cv-section-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cv-section-title h2 { margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.9; }
.cv-section-title span { color: var(--muted); font-family: var(--mono); font-size: 0.62rem; }
.timeline-list { margin: 0; padding: 0; list-style: none; }
.timeline-item { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.timeline-date { color: var(--muted); font-family: var(--mono); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; }
.timeline-item h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.timeline-company { margin: 6px 0 0; color: var(--blue); font-size: 0.83rem; font-weight: 700; }
.timeline-description { max-width: 720px; margin: 10px 0 0; color: var(--muted); font-size: 0.85rem; }
.compact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.compact-list li { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.compact-list time { color: var(--blue); font-family: var(--mono); font-size: 0.63rem; }
.compact-list strong { display: block; margin-top: 9px; font-size: 0.9rem; line-height: 1.4; }
.compact-list span { display: block; margin-top: 7px; color: var(--muted); font-size: 0.75rem; }
.token-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.token { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 0.63rem; font-weight: 600; text-transform: uppercase; }
.token:nth-child(4n+1) { color: var(--blue-dark); background: var(--blue-soft); }

.projects-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 64px 0 110px; }
.project-row { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); min-height: 390px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-small); text-decoration: none; transition: transform 200ms ease, box-shadow 200ms ease; }
.project-row:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.project-number { grid-row: 1 / 3; display: grid; place-items: start center; padding-top: 25px; border-right: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 0.63rem; }
.project-info { padding: 30px 30px 12px; }
.project-info h2 { margin: 14px 0 0; font-family: var(--display); font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.87; }
.project-summary { padding: 0 72px 30px 30px; }
.project-summary p { margin: 0; color: var(--muted); }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.project-tags span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: 0.56rem; text-transform: uppercase; }
.project-arrow { position: absolute; right: 20px; bottom: 20px; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--white); background: var(--blue); transition: transform 200ms ease; }
.project-row:hover .project-arrow { transform: rotate(45deg); }
.project-row.tone-cobalt { background: var(--blue-soft); }
.project-row.tone-coral { background: var(--rose-soft); }
.project-row.tone-acid { background: var(--sand); }
.project-row.tone-violet { background: var(--violet-soft); }

.case-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    min-height: 680px;
    margin-top: 34px;
    overflow: hidden;
    border-radius: var(--radius-xl);
    color: var(--white);
    background: #3f0c1c;
    box-shadow: var(--shadow);
}

.case-intro-copy { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px, 6vw, 68px); }
.case-intro .label { color: #dcd7b1; }
.case-intro h1 { margin: 22px 0; font-family: var(--display); font-size: clamp(4.5rem, 9vw, 9rem); font-weight: 400; letter-spacing: -0.065em; line-height: 0.75; }
.case-intro h1 em { color: #dcd7b1; font-weight: 400; }
.case-intro p { max-width: 540px; margin: 0; color: rgba(255,255,255,0.75); }
.case-intro-media { position: relative; min-height: 460px; overflow: hidden; }
.case-intro-media img { width: 100%; height: 100%; object-fit: cover; }
.case-intro-note { position: absolute; right: 18px; bottom: 18px; max-width: 190px; padding: 14px; border-radius: 12px; color: var(--ink); background: var(--white); box-shadow: var(--shadow-small); font-family: var(--mono); font-size: 0.61rem; text-transform: uppercase; }

.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
.case-meta div { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.case-meta span { display: block; color: var(--muted); font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; }
.case-meta strong { display: block; margin-top: 7px; font-size: 0.84rem; }
.case-section { padding: clamp(72px, 9vw, 120px) 0; }
.case-section + .case-section { border-top: 1px solid var(--line); }
.case-two-col { display: grid; grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr); gap: clamp(44px, 8vw, 110px); }
.case-two-col h2 { margin: 12px 0 0; font-family: var(--display); font-size: clamp(3rem, 5.8vw, 5.8rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.88; }
.case-copy { max-width: 740px; }
.case-copy > p { margin: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); }
.case-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 38px; }
.case-point { min-height: 200px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.case-point span { color: var(--blue); font-family: var(--mono); font-size: 0.61rem; }
.case-point h3 { margin: 34px 0 7px; font-family: var(--display); font-size: 1.85rem; font-weight: 400; line-height: 1; }
.case-point p { margin: 0; color: var(--muted); font-size: 0.78rem; }
.palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); min-height: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.swatch { display: flex; flex-direction: column; justify-content: flex-end; padding: 13px; border-right: 1px solid rgba(17,24,39,0.22); color: var(--white); }
.swatch:last-child { border-right: 0; }
.swatch.light { color: var(--ink); }
.swatch strong { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; }
.swatch code { margin-top: 10px; font-family: var(--mono); font-size: 0.56rem; }
.screen-gallery { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; }
.screen-stack { display: grid; gap: 18px; }
.screen { overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-small); }
.screen img { display: block; width: 100%; height: auto; }
.screen figcaption { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 0.61rem; text-transform: uppercase; }
.screen-mobile img { height: 100%; object-fit: cover; object-position: top; }

.study-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
    min-height: 620px;
    margin-top: 34px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.study-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 72px); }
.study-hero h1 { margin: 22px 0; font-family: var(--display); font-size: clamp(4.2rem, 8vw, 8rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.78; }
.study-hero h1 em { color: var(--blue); font-weight: 400; }
.study-hero-copy > p { max-width: 620px; margin: 0 0 28px; color: var(--muted); }
.study-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--blue-soft); }
.study-symbol { position: relative; z-index: 2; font-family: var(--display); font-size: clamp(6rem, 13vw, 12rem); letter-spacing: -0.08em; }
.study-visual-note { position: absolute; right: 18px; bottom: 18px; padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,0.84); font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; }
.study-hero-memory .study-visual { background: var(--rose-soft); }
.study-hero-memory .study-symbol { color: var(--wine); }
.study-hero-eclipse .study-visual { color: var(--white); background: var(--ink); }
.study-hero-eclipse .study-visual-note { color: var(--ink); }
.eclipse-orbit { position: absolute; width: min(76%, 380px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.36); border-radius: 50%; }
.eclipse-orbit::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--blue); box-shadow: -60px 0 0 12px var(--ink); }
.principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.principles-grid article { min-height: 280px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.principles-grid article:nth-child(2) { background: var(--blue-soft); }
.principles-grid article:nth-child(3) { background: var(--sand); }
.principles-grid span { color: var(--blue); font-family: var(--mono); font-size: 0.62rem; }
.principles-grid h3 { margin: 72px 0 10px; font-family: var(--display); font-size: 2.2rem; font-weight: 400; line-height: 1; }
.principles-grid p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.private-case-note { max-width: 900px; margin: 0 auto; padding: clamp(38px, 7vw, 78px); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.private-case-note .label { justify-content: center; }
.private-case-note h2 { margin: 22px auto 32px; font-family: var(--display); font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.94; }

.contact-intro { padding-top: 58px; padding-bottom: 48px; border-bottom: 0; }
.contact-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 74px; }
.contact-card { display: flex; min-height: 270px; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--teal-soft); box-shadow: var(--shadow-small); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.contact-card:nth-child(2) { background: var(--blue-soft); }
.contact-card:nth-child(3) { background: var(--rose-soft); }
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.contact-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; color: var(--white); background: var(--teal); font-size: 1.2rem; }
.contact-card:nth-child(2) .contact-icon { background: var(--blue); }
.contact-card:nth-child(3) .contact-icon { background: var(--coral); }
.contact-kind { margin-top: 36px; color: var(--muted); font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; }
.contact-card strong { margin-top: 8px; font-size: clamp(1rem, 2vw, 1.25rem); overflow-wrap: anywhere; }
.contact-action { margin-top: auto; color: var(--blue); font-size: 0.75rem; font-weight: 800; }
.contact-note { display: grid; grid-template-columns: 0.4fr 1fr; gap: 36px; align-items: start; margin-bottom: 110px; padding: 42px; border-radius: var(--radius-xl); color: var(--white); background: var(--blue); }
.contact-note .label { color: rgba(255,255,255,0.72); }
.contact-note h2 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.92; }
.contact-note p { max-width: 660px; margin: 0; color: rgba(255,255,255,0.78); }

.blog-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.35fr); min-height: 440px; margin: 62px 0 110px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.blog-empty-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 7vw, 78px); }
.blog-empty h1, .blog-empty h2 { max-width: 760px; margin: 18px 0; font-family: var(--display); font-size: clamp(3.3rem, 6.5vw, 6.2rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.87; }
.blog-empty p { max-width: 600px; margin: 0; color: var(--muted); }
.blog-empty-mark { display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-family: var(--display); font-size: clamp(6rem, 12vw, 11rem); }
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 62px 0 110px; }
.blog-card { min-height: 340px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.blog-card time { color: var(--muted); font-family: var(--mono); font-size: 0.61rem; }
.blog-card h2 { margin: 48px 0 14px; font-family: var(--display); font-size: clamp(2.3rem, 4vw, 3.7rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.96; }
.blog-card p { margin: 0 0 28px; color: var(--muted); }
.text-link { width: fit-content; margin-top: auto; color: var(--blue); font-family: var(--mono); font-size: 0.65rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.text-link:hover { text-decoration: underline; }

.site-footer { width: var(--page); margin: 0 auto; padding: 34px 0 42px; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; padding-bottom: 30px; }
.footer-name { margin: 0; font-family: var(--display); font-size: clamp(3rem, 6vw, 6.4rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.8; }
.footer-nav { flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
.footer-nav a, .footer-bottom a { color: var(--muted); font-size: 0.7rem; font-weight: 700; text-decoration: none; }
.footer-nav a:hover, .footer-bottom a:hover { color: var(--blue); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 0.59rem; text-transform: uppercase; }

@media (max-width: 1000px) {
    :root { --page: min(100% - 32px, 1240px); }
    .masthead-inner { grid-template-columns: auto minmax(0, 1fr) auto; border-radius: 999px; }
    .main-nav { grid-column: auto; grid-row: auto; border-top: 0; }
    .main-nav ul { justify-content: center; overflow-x: auto; padding-top: 0; scrollbar-width: none; }
    .main-nav ul::-webkit-scrollbar { display: none; }
    .masthead-availability { grid-column: auto; grid-row: auto; }
    .home-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 58px; }
    .home-hero-rail { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: stretch; }
    .hero-bottom { grid-template-columns: 1fr; }
    .focus-grid { grid-template-columns: 1fr 1fr; }
    .focus-card:last-child { grid-column: 1 / -1; min-height: 280px; }
    .featured-project { grid-template-columns: 1fr; }
    .featured-copy { min-height: 430px; }
    .page-intro, .case-two-col { grid-template-columns: 1fr; }
    .cv-layout { grid-template-columns: 1fr; }
    .cv-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
    .projects-stack { grid-template-columns: 1fr; }
    .case-intro, .study-hero { grid-template-columns: 1fr; }
    .case-intro-copy { min-height: 560px; }
    .case-intro-media, .study-visual { min-height: 440px; }
    .palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .swatch { min-height: 190px; border-bottom: 1px solid rgba(17,24,39,0.22); }
    .swatch:nth-child(4) { border-right: 0; }
    .swatch:nth-child(n+5) { border-bottom: 0; }
    .contact-intro { grid-template-columns: minmax(0, .85fr) minmax(280px, 1fr); gap: 30px; }
    .contact-shortcuts { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    :root { --page: calc(100% - 24px); }
    .page-main { padding-top: 84px; }
    .masthead { top: max(8px, env(safe-area-inset-top)); margin-top: 0; }
    .masthead-inner { grid-template-columns: auto minmax(0, 1fr); min-height: 58px; padding: 6px 8px; border-radius: 22px; }
    .brand { font-size: 0.8rem; padding-left: 0; }
    .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
    .brand > span:last-child, .masthead-availability { display: none; }
    .main-nav ul { justify-content: space-between; }
    .main-nav a { min-height: 38px; padding: 0 7px; font-size: 0.62rem; white-space: nowrap; }
    .home-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 46px; }
    .home-hero h1 { font-size: clamp(4.4rem, 22vw, 7rem); }
    .home-hero-rail { display: grid; grid-template-columns: 125px minmax(0, 1fr); align-items: stretch; }
    .hero-logo { border-radius: 24px; }
    .hero-rail-copy { padding: 18px; }
    .expertise-strip { justify-content: flex-start; margin-top: 16px; }
    .section { padding: 62px 0; }
    .section-head { grid-template-columns: 1fr; gap: 20px; }
    .focus-grid, .stats-grid { grid-template-columns: 1fr; }
    .focus-card, .focus-card:last-child { grid-column: auto; min-height: 290px; }
    .featured-copy { min-height: 420px; }
    .featured-media { min-height: 330px; }
    .contact-band { grid-template-columns: 1fr; }
    .page-intro { padding-top: 48px; padding-bottom: 52px; }
    .page-intro h1 { font-size: clamp(4.1rem, 22vw, 7rem); }
    .cv-sidebar { grid-template-columns: 1fr; }
    .timeline-item { grid-template-columns: 1fr; gap: 8px; }
    .compact-list { grid-template-columns: 1fr; }
    .project-row { min-height: 350px; }
    .project-info { padding: 26px 22px 10px; }
    .project-summary { padding: 0 64px 26px 22px; }
    .case-intro { margin-top: 20px; }
    .case-intro-copy { min-height: 520px; padding: 30px 24px; }
    .case-intro-media, .study-visual { min-height: 350px; }
    .case-meta { grid-template-columns: 1fr 1fr; }
    .case-points { grid-template-columns: 1fr; }
    .palette { grid-template-columns: 1fr 1fr; }
    .swatch { min-height: 150px; border-right: 1px solid rgba(17,24,39,0.22); border-bottom: 1px solid rgba(17,24,39,0.22) !important; }
    .swatch:nth-child(even) { border-right: 0; }
    .swatch:nth-last-child(-n+2) { border-bottom: 0 !important; }
    .screen-gallery { grid-template-columns: 1fr; }
    .screen-mobile { width: min(100%, 390px); justify-self: center; }
    .screen-mobile img { height: auto; }
    .study-hero { margin-top: 20px; }
    .study-hero-copy { padding: 38px 24px; }
    .principles-grid { grid-template-columns: 1fr; }
    .principles-grid article { min-height: 240px; }
    .contact-intro { grid-template-columns: 1fr; gap: 24px; padding-top: 42px; padding-bottom: 34px; }
    .contact-intro h1 { font-size: clamp(3.9rem, 20vw, 6.2rem); }
    .contact-options { grid-template-columns: 1fr; gap: 12px; padding-bottom: 48px; }
    .contact-card, .contact-card:last-child { grid-column: auto; min-height: 220px; padding: 22px; }
    .contact-kind { margin-top: 26px; }
    .contact-note { grid-template-columns: 1fr; margin-bottom: 74px; padding: 30px 24px; }
    .blog-empty { grid-template-columns: 1fr; }
    .blog-empty-mark { min-height: 190px; }
    .blog-grid { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-nav { justify-content: flex-start; }
    .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media (max-width: 360px) {
    .masthead-inner { display: block; min-height: 52px; padding: 6px; }
    .masthead .brand { display: none; }
    .main-nav ul { width: 100%; justify-content: space-between; }
    .main-nav a { min-height: 40px; padding: 0 6px; font-size: 0.59rem; }
}

/* Editorial refresh */
:root {
    --ink: #111827;
    --muted: #596174;
    --line: #d7dce7;
    --blue: #2f4fa6;
    --blue-dark: #203878;
    --blue-soft: #edf2ff;
    --surface-soft: #f7f8fb;
    --radius-xl: 8px;
    --radius-lg: 5px;
    --radius-md: 3px;
    --shadow: 0 24px 60px rgba(31, 49, 91, 0.11);
    --shadow-small: 0 12px 28px rgba(31, 49, 91, 0.07);
}

body { font-size: 1rem; }
.page-main { padding-top: 108px; }

.masthead-inner {
    position: relative;
    border-color: rgba(47, 79, 166, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 42px rgba(26, 39, 76, 0.13);
}

.brand-mark {
    border: 1px solid rgba(47, 79, 166, 0.24);
    border-radius: 10px;
    background: var(--white);
}

.brand-mark img,
.hero-logo img { transform: scale(1.012); }

.nav-toggle {
    display: none;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink);
    background: var(--white);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus-visible { color: var(--white); border-color: var(--blue); background: var(--blue); outline: none; }
.main-nav a { gap: 7px; border-radius: 10px; }
.main-nav a i { width: 14px; color: var(--blue); font-size: 0.75rem; text-align: center; }
.main-nav a:hover i,
.main-nav a:focus-visible i,
.main-nav a[aria-current="page"] i { color: currentColor; }
.masthead-availability i { color: var(--blue); }

.home-hero {
    position: relative;
    border-bottom: 1px solid var(--ink);
}

.home-hero-main {
    padding-top: 28px;
    border-top: 4px solid var(--ink);
}

.home-hero h1 { line-height: 0.76; }
.hero-intro { padding-left: 20px; border-left: 1px solid var(--ink); }

.button {
    border-radius: 4px;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.button i { font-size: 0.82em; }

.hero-logo {
    border: 1px solid var(--blue);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
}

.hero-rail-copy {
    border-radius: 0;
    border-left: 4px solid var(--blue);
    background: var(--white);
}

.expertise-strip {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
}

.section-head {
    padding-bottom: 24px;
    border-bottom: 4px double var(--ink);
}

.focus-grid {
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.focus-card,
.focus-card:nth-child(2),
.focus-card:nth-child(3) {
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
}

.focus-card:last-child { border-right: 0; }
.focus-card:nth-child(2) { border-top: 5px solid var(--blue); }
.focus-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.focus-icon { color: var(--blue); font-size: 1.4rem; }
.focus-card p { font-size: 0.92rem; }

.featured-project,
.project-row,
.case-intro,
.study-hero,
.screen,
.private-case-note,
.blog-empty {
    border-radius: 0;
    box-shadow: none;
}

.featured-project { border-top: 5px solid var(--blue); }
.featured-copy { border-right: 1px solid var(--line); }
.featured-badge { border-radius: 2px; }

.featured-project + .featured-project { margin-top: 32px; }
.featured-project-memory { border-top-color: #6d3bd1; }
.featured-project-memory .featured-copy h3 { font-size: clamp(3.2rem, 5.4vw, 5.9rem); }
.memory-featured-media { background: #e8edff; }
.memory-featured-media .memory-preview-main { object-position: top left; }
.memory-featured-media .memory-preview-map {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 54%;
    height: 43%;
    border: 8px solid var(--white);
    object-fit: cover;
    box-shadow: 0 18px 42px rgba(23, 31, 55, 0.24);
}
.memory-featured-media:hover .memory-preview-main { transform: scale(1.018); }
.memory-featured-media:hover .memory-preview-map { transform: translateY(-5px); }
.featured-project-memory .featured-badge { right: auto; left: 20px; }

.stats-grid {
    gap: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.stat,
.stat:nth-child(2),
.stat:nth-child(3) {
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
}

.stat:last-child { border-right: 0; }
.stat:nth-child(2) strong { color: var(--blue); }

.contact-band {
    border-radius: 0;
    box-shadow: none;
    background: var(--blue-dark);
}

.page-intro { border-top: 4px solid var(--ink); }
.cv-sidebar { border-radius: 0; border-top: 4px solid var(--blue); }
.cv-contact a { display: inline-flex; align-items: center; gap: 9px; }
.cv-contact i { width: 15px; text-align: center; }
.compact-list li { border-radius: 0; }

.project-row { border-top: 4px solid var(--blue); }
.project-row:hover { box-shadow: var(--shadow-small); }
.project-arrow { border-radius: 3px; }

.case-meta { gap: 0; border-bottom: 1px solid var(--line); }
.case-meta div { border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.case-meta div:last-child { border-right: 0; }
.case-point { border-radius: 0; }
.case-point p,
.principles-grid p { font-size: 0.9rem; }
.principles-grid { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principles-grid article { border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.principles-grid article:last-child { border-right: 0; }

.contact-options { gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.contact-card,
.contact-card:nth-child(2),
.contact-card:nth-child(3) {
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
}
.contact-card:first-child { border-top: 5px solid var(--teal); }
.contact-card:nth-child(2) { border-top: 5px solid var(--blue); }
.contact-card:nth-child(3) { border-top: 5px solid var(--coral); border-right: 0; }

.footer-nav a { display: inline-flex; align-items: center; gap: 7px; }
.footer-nav i { color: var(--blue); }
.footer-social { display: flex; align-items: center; gap: 8px; }
.footer-social a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--blue);
    text-decoration: none;
}
.footer-social a:hover,
.footer-social a:focus-visible { color: var(--white); border-color: var(--blue); background: var(--blue); outline: none; }

.memory-cover-icon {
    position: absolute;
    top: 30px;
    left: 30px;
    color: rgba(100, 21, 43, 0.16);
    font-size: clamp(4rem, 8vw, 8rem);
}

.memory-story {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(42px, 8vw, 108px);
}

.memory-story h2 {
    margin: 14px 0 0;
    font-family: var(--display);
    font-size: clamp(3.2rem, 6vw, 6.4rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.84;
}

.memory-lede {
    margin: 0 0 32px;
    font-family: var(--display);
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    letter-spacing: -0.025em;
    line-height: 1.04;
}

.memory-lede::first-letter {
    float: left;
    margin: 7px 10px 0 0;
    color: var(--blue);
    font-size: 3.5em;
    line-height: 0.7;
}

.memory-columns { columns: 2 250px; column-gap: 34px; }
.memory-columns p { break-inside: avoid; margin: 0 0 20px; color: var(--muted); }
.memory-editorial-copy blockquote {
    margin: 34px 0 0;
    padding: 26px 0 0;
    border-top: 4px double var(--ink);
    color: var(--blue);
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 4rem);
    font-style: italic;
    line-height: 1;
}

.memory-screens .section-head { margin-bottom: 34px; }
.memory-screen-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 22px; align-items: start; }
.memory-screen { overflow: hidden; margin: 0; border: 1px solid var(--line); background: var(--white); }
.memory-screen-map { margin-top: 86px; }
.memory-screen a { display: block; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--blue-soft); }
.memory-screen img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 500ms cubic-bezier(.16,1,.3,1); }
.memory-screen a:hover img { transform: scale(1.018); }
.memory-screen figcaption { display: grid; gap: 7px; padding: 18px 20px 20px; }
.memory-screen figcaption span { color: var(--blue); font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.memory-screen figcaption strong { font-family: var(--display); font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 400; line-height: 1; }

@media (max-width: 1000px) {
    .featured-copy { border-right: 0; border-bottom: 1px solid var(--line); }
}

.memory-modules {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--line);
}

.memory-modules article {
    grid-column: span 4;
    min-height: 300px;
    padding: 26px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.memory-modules article:first-child { grid-column: span 5; color: var(--white); background: var(--blue-dark); }
.memory-modules article:nth-child(2) { grid-column: span 7; background: var(--blue-soft); }
.memory-modules article > i { display: block; margin-bottom: 70px; color: var(--blue); font-size: 1.65rem; }
.memory-modules article:first-child > i,
.memory-modules article:first-child span,
.memory-modules article:first-child p { color: rgba(255, 255, 255, 0.82); }
.memory-modules article span { color: var(--blue); font-family: var(--mono); font-size: 0.72rem; }
.memory-modules article h3 { margin: 14px 0 10px; font-family: var(--display); font-size: 2.2rem; font-weight: 400; line-height: 0.95; }
.memory-modules article p { margin: 0; color: var(--muted); font-size: 0.92rem; }

@media (max-width: 800px) {
    body.nav-open { overflow: hidden; }
    body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(17, 24, 39, 0.26); backdrop-filter: blur(2px); }
    .page-main { padding-top: 88px; }
    .masthead { width: calc(100% - 20px); }
    .masthead-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 60px; gap: 10px; padding: 7px; border-radius: 15px; }
    .masthead .brand { display: inline-flex; min-width: 0; }
    .brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
    .brand > span:last-child { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .js .nav-toggle { display: inline-flex; justify-self: end; }
    .masthead-availability { display: none; }
    .main-nav { grid-column: 1 / -1; }
    .main-nav ul { width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; overflow: visible; }
    .main-nav a { width: 100%; min-height: 48px; justify-content: flex-start; gap: 12px; padding: 0 14px; border-radius: 8px; font-size: 0.88rem; }
    .main-nav a i { width: 22px; font-size: 0.95rem; }
    .js .main-nav {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        visibility: hidden;
        overflow-y: auto;
        max-height: calc(100dvh - 96px);
        border: 1px solid var(--line);
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }
    .js .masthead.is-menu-open .main-nav { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
    html:not(.js) .nav-toggle { display: none; }
    html:not(.js) .main-nav { border-top: 1px solid var(--line); }

    .home-hero-main { padding-top: 20px; }
    .hero-intro { padding-top: 14px; padding-left: 0; border-top: 1px solid var(--ink); border-left: 0; }
    .hero-logo { border-radius: 0; }
    .section-head { padding-bottom: 18px; }
    .focus-grid,
    .stats-grid,
    .contact-options { border: 1px solid var(--line); }
    .focus-card,
    .focus-card:nth-child(2),
    .focus-card:nth-child(3),
    .stat,
    .stat:nth-child(2),
    .stat:nth-child(3),
    .contact-card,
    .contact-card:nth-child(2),
    .contact-card:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line); }
    .focus-card:last-child,
    .stat:last-child,
    .contact-card:last-child { border-bottom: 0; }
    .featured-copy { border-right: 0; border-bottom: 1px solid var(--line); }
    .case-meta { grid-template-columns: 1fr; }
    .case-meta div { border-right: 0; border-bottom: 1px solid var(--line); }
    .case-meta div:last-child { border-bottom: 0; }
    .principles-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
    .principles-grid article:last-child { border-bottom: 0; }
    .memory-story { grid-template-columns: 1fr; gap: 34px; }
    .memory-columns { columns: 1; }
    .memory-screen-grid { grid-template-columns: 1fr; }
    .memory-screen-map { margin-top: 0; }
    .memory-modules { grid-template-columns: 1fr; }
    .memory-modules article,
    .memory-modules article:first-child,
    .memory-modules article:nth-child(2) { grid-column: auto; min-height: 250px; }
    .memory-modules article > i { margin-bottom: 44px; }
    .footer-social { margin-top: 4px; }
}

@media (max-width: 360px) {
    .masthead-inner { display: grid; }
    .masthead .brand { display: inline-flex; }
    .main-nav a { min-height: 48px; padding: 0 14px; font-size: 0.88rem; }
    .nav-toggle span { display: none; }
    .nav-toggle { width: 44px; padding: 0; }
}