/* ============================================================
   Maardh — site styles

   This file has TWO sections:
     1. Tailwind utilities (auto-generated, see Tailwind regen
        instructions in tw-build/README.md — do not hand-edit).
     2. Custom Maardh styles — edit these freely.
   ============================================================ */

/* ----- 1) TAILWIND UTILITIES (generated) ----- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-20{margin-top:5rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[16\/9\]{aspect-ratio:16/9}.h-full{height:100%}.max-h-0{max-height:0}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-grow,.grow{flex-grow:1}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-2{row-gap:.5rem}.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(4rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(4rem*var(--tw-space-y-reverse))}.space-y-24>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(6rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(6rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.scroll-smooth{scroll-behavior:smooth}.rounded-\[10px\]{border-radius:10px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.border-zinc-300{--tw-border-opacity:1;border-color:rgb(212 212 216/var(--tw-border-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-zinc-100{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-28{padding-bottom:7rem}.pb-8{padding-bottom:2rem}.pt-12{padding-top:3rem}.pt-2{padding-top:.5rem}.pt-24{padding-top:6rem}.pt-28{padding-top:7rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[0\.98\]{line-height:.98}.leading-\[1\.02\]{line-height:1.02}.leading-\[1\.04\]{line-height:1.04}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-zinc-50{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.selection\:bg-zinc-900 ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.selection\:bg-zinc-900 ::selection{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.selection\:text-zinc-50 ::-moz-selection{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.selection\:text-zinc-50 ::selection{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.selection\:bg-zinc-900::-moz-selection{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.selection\:bg-zinc-900::selection{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.selection\:text-zinc-50::-moz-selection{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.selection\:text-zinc-50::selection{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-zinc-900:hover{--tw-border-opacity:1;border-color:rgb(24 24 27/var(--tw-border-opacity,1))}.hover\:bg-zinc-700:hover{--tw-bg-opacity:1;background-color:rgb(63 63 70/var(--tw-bg-opacity,1))}.hover\:bg-zinc-800:hover{--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.hover\:text-zinc-500:hover{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.hover\:text-zinc-900:hover{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.group:hover .group-hover\:scale-\[1\.02\]{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:flex-row{flex-direction:row}}@media (min-width:768px){.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-8{grid-column:span 8/span 8}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-12{gap:3rem}.md\:py-32{padding-top:8rem;padding-bottom:8rem}.md\:py-44{padding-top:11rem;padding-bottom:11rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-5xl{font-size:3rem}.md\:text-5xl,.md\:text-6xl{line-height:1}.md\:text-6xl{font-size:3.75rem}.md\:text-7xl{font-size:4.5rem}.md\:text-7xl,.md\:text-8xl{line-height:1}.md\:text-8xl{font-size:6rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:pb-2{padding-bottom:.5rem}.lg\:pr-8{padding-right:2rem}}

/* ----- 2) CUSTOM MAARDH STYLES ----- */

:root {
    --bg: #fafafa;
    --bg-soft: #f4f4f5;
    --bg-subtle: #f8f8f8;
    --surface: #ffffff;
    --surface-soft: #f4f4f5;
    --surface-dark: #18181b;

    --text: #18181b;
    --text-soft: #52525b;
    --text-muted: #b2b2b2;
    --text-inverse: #fafafa;

    --line: rgba(24, 24, 27, 0.1);
    --line-strong: rgba(24, 24, 27, 0.16);

    --selection-bg: #18181b;
    --selection-text: #fafafa;

    --hero-serif:
        Baskerville, "Big Caslon", "Times New Roman",
        serif;
    --sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

    --max-width: 1280px;
    --pad-x: clamp(24px, 3vw, 40px);

    --section-space: clamp(88px, 10vw, 156px);
    --hero-space-y: clamp(120px, 14vw, 220px);

    --radius-pill: 999px;
    --radius-card: 24px;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);

    --black: #18181b;
    --white: #ffffff;
}

/* Base */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

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

img,
svg,
video {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* Layout */

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}

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

.section-tight {
    padding-top: 0;
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
}

.stack-4 > * + * {
    margin-top: 1rem;
}

.stack-6 > * + * {
    margin-top: 1.5rem;
}

.stack-8 > * + * {
    margin-top: 2rem;
}

/* Header */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background: rgba(250, 250, 250, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(24, 24, 27, 0.06);
}

.site-header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo {
    height: 28px;
    width: auto;
    display: block;
}

/* Marten animation */

.hero {
    position: relative;
}

.hero-marten {
    position: absolute;
    width: 90px;
    height: auto;
    pointer-events: none;
    transform: translateX(100vw);
    will-change: transform;
}

.desktop-nav {
    display: none;
    gap: 2rem;
    align-items: center;
}

.desktop-nav a {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 500;
    color: var(--text-soft);
    transition: color 180ms ease;
}

.desktop-nav a:hover {
    color: var(--text);
}

.menu-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.menu-label {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 500;
}

.hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(24, 24, 27, 0.98);
    color: var(--text-inverse);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

.menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu-overlay-inner {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.menu-nav a {
    font-size: clamp(2.25rem, 6vw, 4.25rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.05em;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.menu-nav a:hover {
    opacity: 0.72;
    transform: translateY(-1px);
}

/* Typography */

.eyebrow {
    display: inline-block;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.display-serif {
    font-family: var(--hero-serif);
    font-weight: 400;
    letter-spacing: -0.03em;
}

.display-hero {
    font-size: clamp(3.75rem, 8vw, 7rem);
    line-height: 0.98;
    margin: 0;
}

.display-xl {
    font-size: clamp(2.75rem, 5vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    font-weight: 700;
    margin: 0;
}

.display-lg {
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
    font-weight: 700;
    margin: 0;
}

.lead-xl {
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}

.lead-lg {
    font-size: clamp(1.25rem, 2vw, 1.875rem);
    line-height: 1.35;
    letter-spacing: -0.025em;
    color: var(--text-soft);
    margin: 0;
}

.body-lg {
    font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
    line-height: 1.65;
    color: var(--text-soft);
    margin: 0;
}

.body-md {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-soft);
    margin: 0;
}

.muted {
    color: var(--text-muted);
}

/* Hero */

.hero {
    padding-top: calc(var(--hero-space-y) + 32px);
    padding-bottom: var(--hero-space-y);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Cap hero at 670px on md+ so the full block fits above the fold on a
   MacBook Air M1 / MacBook Neo (≈ 770px viewport minus header ≈ 674px). */
@media (min-width: 768px) {
    .hero {
        height: 670px;
        min-height: 670px;
        max-height: 670px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.hero-inner {
    max-width: 56rem;
}

.hero-title .secondary {
    color: #71717a;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-pill);
    background: rgba(228, 228, 231, 0.72);
    color: #27272a;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.2;
    font-weight: 500;
    margin-top: 2rem;
}

/* Services */

.services {
    background: var(--surface);
}

.services-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.services-intro {
    max-width: 28rem;
}

.accordion-list {
    border-top: 1px solid var(--line);
}

.accordion-item {
    border-bottom: 1px solid var(--line);
}

.accordion-header {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text);
    text-align: left;
    padding: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}

.accordion-title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 600;
    transition: color 180ms ease;
}

.accordion-header:hover .accordion-title {
    color: var(--text-soft);
}

.accordion-icon {
    flex: 0 0 auto;
    transition: transform 280ms ease;
}

.accordion-item.is-active .accordion-icon,
.rotate-90 {
    transform: rotate(90deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-inner {
    padding: 0 0 2rem;
}

.accordion-inner-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.discipline-core {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    line-height: 1.35;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.discipline-detail {
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.65;
    color: var(--text-soft);
    margin: 0;
}

/* Philosophy */

.philosophy {
    background: var(--surface-dark);
    color: var(--text-inverse);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82vh;
    padding: 7rem 2rem;
    overflow: hidden;
}

.philosophy-inner {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
}

.philosophy-eyebrow {
    color: rgba(244, 244, 245, 0.35);
}

.philosophy-stage {
    position: relative;
    min-height: clamp(8rem, 16vw, 14rem);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.philosophy-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    width: 100%;
    padding: 0 1rem;
}

.philosophy-item.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.philosophy-prefix {
    font-size: clamp(0.7rem, 1.1vw, 0.9rem);
    font-weight: 400;
    color: rgba(244, 244, 245, 1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}

.philosophy-word {
    font-size: clamp(3.2rem, 9vw, 8.5rem);
    font-weight: 700;
    color: var(--text-inverse);
    letter-spacing: -0.04em;
    line-height: 0.95;
    word-break: break-word;
}

/* The word transitions smoothly to/from opacity 0 when the dust overlay
   takes over. The JS sets transition:none when dust starts, so the word
   disappears the frame the particles spawn. */
.philosophy-word {
    transition: opacity 0.35s ease;
}

.philosophy-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.philosophy-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(244, 244, 245, 0.22);
    transition: background 0.35s ease, transform 0.35s ease;
    flex-shrink: 0;
}

.philosophy-dot.active {
    background: rgba(244, 244, 245, 0.75);
    transform: scale(1.5);
}

/* Work teaser */

.work-teaser {
    background: var(--bg);
}

.work-teaser-inner {
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
}

/* About */

.about {
    background: #f4f4f5;
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.about-copy {
    max-width: 48rem;
}

/* Contact */

.contact {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.contact-inner {
    max-width: 42rem;
    margin: 0 auto;
    text-align: center;
}

/* Buttons */

.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-pill);
    background: var(--black);
    color: var(--white);
    font-size: 1rem;
    line-height: 1;
    font-weight: 500;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        opacity 180ms ease;
}

.button-primary:hover {
    background: #27272a;
    transform: translateY(-1px);
}

/* Work page */

.hero-work {
    padding-top: calc(var(--hero-space-y) + 32px);
    padding-bottom: calc(var(--hero-space-y) * 0.72);
}

.hero-work-inner {
    max-width: 58rem;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.case-list {
    border-top: 1px solid var(--line);
}

.case-item {
    display: block;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
    transition: transform 180ms ease;
}

.case-item:hover {
    transform: translateY(-1px);
}

.case-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.case-name {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 600;
}

.case-content {
    max-width: 48rem;
}

.case-statement {
    font-size: clamp(1.375rem, 2vw, 2rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    font-weight: 500;
    margin: 0 0 0.625rem;
}

.case-role {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.65;
    color: var(--text-soft);
    margin: 0 0 0.875rem;
}

.case-outcome {
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.55;
    margin: 0 0 1rem;
    font-weight: 600;
}

.case-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(24, 24, 27, 0.88);
}

.case-link::after {
    content: "→";
    font-size: 0.875rem;
    line-height: 1;
    transform: translateY(-1px);
}

/* Case pages */

.hero-case {
    padding-top: calc(var(--hero-space-y) + 32px);
    padding-bottom: calc(var(--hero-space-y) * 0.72);
}

.hero-case-inner {
    max-width: 60rem;
}

.section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.section-title {
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}

.section-copy {
    max-width: 52rem;
}

.lead {
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    line-height: 1.24;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1rem;
}

.body-copy {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.65;
    color: var(--text-soft);
    margin: 0;
}

.divider-section {
    border-top: 1px solid var(--line);
}

.deliverables-list {
    border-top: 1px solid var(--line);
}

.deliverable {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--line);
}

.deliverable-name {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 600;
    margin: 0;
}

.deliverable-copy {
    font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
    line-height: 1.65;
    color: var(--text-soft);
    margin: 0;
    max-width: 48rem;
}

.outcome-band {
    background: linear-gradient(to bottom, #f2ede2 0%, #e9dfcf 100%);
}

.outcome-quote {
    font-size: clamp(2.25rem, 4.5vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 600;
    margin: 0 0 1rem;
    max-width: 56rem;
}

.outcome-note {
    font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
    line-height: 1.65;
    color: var(--text-soft);
    margin: 0;
    max-width: 48rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(24, 24, 27, 0.88);
}

.back-link::before {
    content: "←";
    font-size: 0.875rem;
    line-height: 1;
    transform: translateY(-1px);
}

/* Footer */

.footer {
    background: var(--surface-dark);
    color: rgba(244, 244, 245, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 2.5rem;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 3rem 0;
    text-align: center;
}

.footer-brand {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.footer-brand-mark {
    color: var(--text-inverse);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.footer-logo {
    height: 18px;
    width: auto;
    display: block;
    opacity: 0.9;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.footer-links a {
    transition: color 180ms ease;
}

.footer-links a:hover {
    color: var(--text-inverse);
}

.footer-sep {
    opacity: 0.35;
    font-size: 1rem;
    line-height: 1;
    user-select: none;
}

/* Responsive */

@media (min-width: 900px) {
    .desktop-nav {
        display: flex;
    }

    .menu-button {
        display: none;
    }

    .services-layout {
        grid-template-columns: minmax(260px, 360px) 1fr;
        gap: 4rem;
    }

    .about-layout {
        grid-template-columns: minmax(220px, 280px) 1fr;
        gap: 3rem;
        align-items: start;
    }

    .intro-grid,
    .section-grid,
    .deliverable {
        grid-template-columns: minmax(220px, 280px) 1fr;
        gap: 2rem;
        align-items: start;
    }

    .case-inner {
        grid-template-columns: minmax(260px, 320px) 1fr;
        gap: 2rem;
    }

    .accordion-inner-content {
        flex-direction: row;
        gap: 3rem;
    }

    .discipline-core,
    .discipline-detail {
        flex: 1;
    }

    .footer-inner {
        flex-direction: row;
        text-align: left;
    }

    .footer-brand,
    .footer-links {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .hero,
    .hero-work,
    .hero-case {
        padding-top: 120px;
    }

    .hero {
        padding-bottom: 120px;
    }

    .hero-work,
    .hero-case {
        padding-bottom: 84px;
    }

    .philosophy {
        min-height: 70vh;
        padding: 5rem 1.5rem;
    }
}