:root {
  --paper: #f5f1e8;
  --ink: #171714;
  --muted: #6b6861;
  --line: rgba(23, 23, 20, .16);
  --line-strong: rgba(23, 23, 20, .28);
  --max: 1440px;
  --pad: clamp(22px, 4vw, 64px);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

.container { width: min(100%, calc(var(--max) - 2 * var(--pad))); margin-inline: auto; }
.site-shell, .case-page { overflow: clip; }

.site-header { width: min(100%, calc(var(--max) - 2 * var(--pad))); margin-inline: auto; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 50; }
.brand-mark { display: inline-flex; align-items: center; gap: 14px; }
.brand-mark > span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.brand-mark small { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.site-nav > a:not(.nav-cta) { color: var(--muted); transition: color .2s ease; }
.site-nav > a:not(.nav-cta):hover { color: var(--ink); }
.nav-cta { padding: 11px 16px; border: 1px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; transition: background .2s ease, color .2s ease; }
.nav-cta:hover { background: var(--ink); color: var(--paper); }
.menu-button { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.menu-icon { display: grid; gap: 6px; width: 24px; }
.menu-icon span { display: block; height: 1.5px; background: currentColor; transition: transform .2s ease; }

.hero { min-height: 100svh; padding-top: clamp(150px, 17vh, 210px); padding-bottom: 50px; position: relative; display: flex; flex-direction: column; justify-content: center; }
.eyebrow, .section-label, .project-card__meta, .case-hero__meta, .hero-proof, .service-number, .note-card__top { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: var(--muted); }
.hero-title { margin: 28px 0 0; max-width: 1100px; font: 400 clamp(58px, 8.4vw, 124px)/1.04 var(--serif); letter-spacing: -.045em; position: relative; z-index: 2; }
.hero-title em { color: #8c6b5f; font-style: italic; }
.hero-bottom { margin-top: 64px; display: flex; justify-content: space-between; align-items: end; gap: 40px; position: relative; z-index: 2; }
.hero-bottom p { max-width: 520px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.circle-link { width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; transition: transform .25s var(--ease), background .25s ease, color .25s ease; }
.circle-link:hover { transform: translateY(-5px); background: var(--ink); color: var(--paper); }
.circle-link .arrow { width: 22px; height: 22px; transform: rotate(90deg); }
.hero-proof { margin-top: 72px; display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 10px; }
.hero-proof b { color: var(--ink); font-weight: 500; }
.hero-orbit { position: absolute; right: 1%; top: 32%; width: min(28vw, 420px); aspect-ratio: 1; border: 1px solid rgba(23,23,20,.12); border-radius: 50%; opacity: .55; pointer-events: none; z-index: 0; }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(23,23,20,.09); border-radius: 50%; transform: rotate(28deg); }
.hero-orbit::after { inset: 22%; transform: rotate(-22deg); }
/* Dots and labels are centered on the outer ring using matching top/right/bottom anchor pairs so both sit on the same point instead of drifting apart. */
.hero-orbit span { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--ink); border-radius: 50%; }
.hero-orbit span.pos-top { left: 50%; top: 0; }
.hero-orbit span.pos-right { left: 100%; top: 50%; }
.hero-orbit span.pos-bottom { left: 38%; top: 100%; }
.hero-orbit i { position: absolute; font-style: normal; font-size: 9px; letter-spacing: .16em; color: var(--muted); white-space: nowrap; }
.hero-orbit i.pos-top { left: 50%; top: -20px; transform: translateX(-50%); }
.hero-orbit i.pos-right { left: 100%; top: 50%; transform: translate(14px, -50%); }
.hero-orbit i.pos-bottom { left: 38%; top: 100%; transform: translate(-50%, 12px); }

.section-label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.section-label > span { width: 26px; height: 1px; background: currentColor; }
.section-heading--split { display: grid; grid-template-columns: .55fr 1fr; gap: 60px; align-items: start; }
.section-heading--split > p { margin: 0; max-width: 700px; color: var(--muted); font-size: 18px; line-height: 1.6; }

.statement { padding-top: 150px; padding-bottom: 150px; border-top: 1px solid var(--line); }
.statement-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; margin-top: 52px; }
.statement-grid h2 { margin: 0; max-width: 900px; font: 400 clamp(48px, 6.1vw, 92px)/.98 var(--serif); letter-spacing: -.05em; }
.statement-grid p { max-width: 560px; margin: 0; font-size: 28px; line-height: 1.3; }
.statement-grid .statement-muted { margin-top: 36px; color: var(--muted); font-size: 18px; line-height: 1.65; }

.work { padding-top: 150px; padding-bottom: 120px; }
.project-stack { margin-top: 70px; display: grid; gap: 28px; }
.project-card { min-height: 760px; background: var(--dark); color: var(--paper); border-radius: 28px; overflow: hidden; position: relative; }
.project-card__link { min-height: 760px; display: grid; grid-template-columns: 80px .9fr 1.1fr; grid-template-rows: auto 1fr auto; gap: 32px; padding: 30px; position: relative; }
.project-card__meta { grid-column: 1 / -1; display: grid; grid-template-columns: 60px 1fr auto; gap: 22px; color: rgba(255,255,255,.55); font-size: 10px; }
.project-card__copy { grid-column: 2 / 3; grid-row: 2; align-self: center; padding-right: 20px; position: relative; z-index: 3; min-width: 0; }
.project-card__link > .artwork { grid-column: 3 / 4; grid-row: 2; }
.project-card__copy h3 { margin: 0; font: 400 clamp(52px, 7vw, 104px)/.88 var(--serif); letter-spacing: -.06em; overflow-wrap: break-word; }
.project-card__copy p { max-width: 420px; margin: 28px 0 0; color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.55; }
.project-card__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; position: relative; z-index: 5; }
.project-card__bottom .arrow { width: 25px; height: 25px; transition: transform .25s var(--ease); }
.project-card:hover .project-card__bottom .arrow { transform: translateX(8px); }
.concept-note { margin: 34px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 780px; }
.concept-note span { color: var(--ink); font-weight: 700; margin-right: 6px; }

/* Artwork: intentionally abstract placeholders so you can replace them with final project imagery. */
.artwork { min-height: 520px; position: relative; overflow: hidden; align-self: center; border-radius: 22px; background: var(--soft); color: var(--dark); isolation: isolate; }
.artwork--large { min-height: 540px; width: min(100%, calc(var(--max) - 2 * var(--pad))); margin-inline: auto; margin-top: 60px; }
.artwork::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.18)); z-index: -1; }
.coffee-pouch { position: absolute; left: 12%; bottom: 16%; width: 36%; height: 53%; background: #4f2f21; color: #f4dfcd; border-radius: 18px 18px 12px 12px; transform: rotate(-8deg); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 24px 28px 0 rgba(38,23,16,.10); }
.coffee-pouch::before { content: ""; position: absolute; top: 7%; left: 10%; right: 10%; height: 1px; background: rgba(255,255,255,.25); }
.coffee-pouch span { font: 400 52px/1 var(--serif); }
.coffee-pouch small { margin-top: 10px; letter-spacing: .16em; text-transform: uppercase; font-size: 9px; opacity: .72; }
.coffee-cup { position: absolute; left: 51%; bottom: 19%; width: 25%; aspect-ratio: 1; border-radius: 50%; background: #f7eee6; box-shadow: inset 0 0 0 13px #d9b79e; display: grid; place-items: center; transform: rotate(9deg); }
.coffee-cup span { font: 400 72px/1 var(--serif); color: #4f2f21; }
.coffee-ring { position: absolute; left: 47%; top: 18%; width: 32%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(79,47,33,.25); }
.coffee-ticket { position: absolute; right: 8%; top: 12%; background: #f6eee7; padding: 12px 16px; font-family: var(--serif); transform: rotate(6deg); box-shadow: 12px 12px 0 rgba(38,23,16,.08); }
.skin-box { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #d7b7bf; color: #3a1e28; box-shadow: 18px 22px 0 rgba(70,31,49,.08); }
.skin-box--one { left: 11%; bottom: 14%; width: 31%; height: 55%; transform: rotate(-5deg); }
.skin-box--two { right: 14%; top: 16%; width: 25%; height: 36%; transform: rotate(8deg); background: #f5eeeb; }
.skin-box span { font: 400 24px/1 var(--serif); letter-spacing: .03em; }
.skin-box small { margin-top: 10px; text-transform: uppercase; letter-spacing: .14em; font-size: 8px; }
.skin-bottle { position: absolute; left: 49%; bottom: 11%; width: 16%; height: 60%; border-radius: 50px 50px 24px 24px; background: #efe8e4; border: 1px solid rgba(58,30,40,.15); display: grid; place-items: center; box-shadow: 20px 22px 0 rgba(58,30,40,.09); }
.skin-bottle::before { content: ""; position: absolute; top: -10%; width: 52%; height: 13%; background: #b598a3; border-radius: 8px 8px 2px 2px; }
.skin-bottle span { font-family: var(--serif); font-size: 28px; }
.skin-line { position: absolute; left: 8%; top: 8%; font-size: 9px; letter-spacing: .16em; }
.vertex-grid { position: absolute; inset: 9%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; opacity: .32; }
.vertex-grid span { border: 1px solid rgba(16,26,48,.35); }
.vertex-machine { position: absolute; left: 25%; bottom: 16%; width: 50%; height: 48%; background: #c5d4f2; border: 1px solid rgba(16,26,48,.45); box-shadow: 22px 22px 0 rgba(16,26,48,.08); }
.vertex-machine::before { content: ""; position: absolute; left: 10%; right: 10%; top: 14%; bottom: 16%; border: 1px solid rgba(16,26,48,.28); }
.vertex-machine i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #2457d6; }
.vertex-machine i:nth-child(1) { left: 12%; bottom: 12%; }
.vertex-machine i:nth-child(2) { right: 16%; top: 18%; }
.vertex-machine i:nth-child(3) { right: 22%; bottom: 16%; }
.vertex-machine b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 84px/1 var(--serif); color: #101a30; opacity: .74; }
.vertex-caption { position: absolute; left: 8%; bottom: 8%; font-size: 9px; letter-spacing: .16em; }
.flow-window { position: absolute; left: 13%; top: 15%; width: 74%; height: 64%; background: #fbfaff; border: 1px solid rgba(28,21,54,.15); box-shadow: 18px 20px 0 rgba(28,21,54,.08); }
.flow-top { height: 18%; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid rgba(28,21,54,.09); }
.flow-top b { margin-right: auto; font-size: 12px; letter-spacing: .08em; }
.flow-top span { width: 7px; height: 7px; border-radius: 50%; background: #c8b9fa; }
.flow-cols { position: absolute; left: 5%; top: 28%; width: 22%; display: grid; gap: 10px; }
.flow-cols i { height: 10px; background: #ebe5fd; border-radius: 999px; }
.flow-board { position: absolute; right: 5%; top: 28%; width: 64%; padding: 12px; display: grid; gap: 9px; }
.flow-board strong { font-size: 12px; }
.flow-board em { height: 30px; border-radius: 8px; background: #f0ecff; border: 1px solid #ded5fb; }
.flow-orbit { position: absolute; right: 7%; bottom: 7%; width: 25%; aspect-ratio: 1; border: 1px solid rgba(111,69,232,.32); border-radius: 50%; }
.flow-orbit span { position: absolute; width: 10px; height: 10px; background: #6f45e8; border-radius: 50%; }
.flow-orbit span:nth-child(1) { left: 5%; top: 48%; }
.flow-orbit span:nth-child(2) { left: 44%; top: 5%; }
.flow-orbit span:nth-child(3) { right: 3%; bottom: 9%; }

.thinking { padding-top: 150px; padding-bottom: 120px; border-top: 1px solid var(--line); }
.thinking-intro { margin-top: 52px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; }
.thinking-intro h2 { margin: 0; font: 400 clamp(46px, 5.8vw, 84px)/.98 var(--serif); letter-spacing: -.05em; }
.thinking-intro p { margin: 8px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 560px; }
.thinking-map { margin-top: 80px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: stretch; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.thinking-node { min-height: 210px; padding: 20px 18px 24px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.thinking-node + .thinking-node { padding-left: 18px; }
.thinking-node span { font-size: 11px; color: var(--muted); }
.thinking-node strong { margin-top: auto; font: 400 31px/1 var(--serif); }
.thinking-node p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.thinking-node--accent { background: var(--ink); color: var(--paper); padding-left: 18px; border-right: 0; }
.thinking-node--accent p, .thinking-node--accent span { color: rgba(245,241,232,.62); }

.process { padding-top: 120px; padding-bottom: 150px; }
.process-intro { margin-top: 52px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; }
.process-intro h2 { margin: 0; font: 400 clamp(44px, 5.2vw, 76px)/1 var(--serif); letter-spacing: -.05em; }
.process-intro p { margin: 8px 0 0; max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.process-list { margin-top: 70px; border-top: 1px solid var(--line); }
.process-step { display: grid; grid-template-columns: 70px .8fr 1.2fr; gap: 30px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.process-step > span { color: var(--muted); font-size: 12px; }
.process-step strong { font: 400 33px/1 var(--serif); }
.process-step p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

.services { padding-top: 120px; padding-bottom: 150px; border-top: 1px solid var(--line); }
.service-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-card { min-height: 340px; padding: 28px 20px 34px 0; border-right: 1px solid var(--line); }
.service-card + .service-card { padding-left: 20px; }
.service-card:last-child { border-right: 0; }
.service-card__heading { margin-top: 82px; min-height: 70px; display: flex; align-items: flex-end; }
.service-card h3 { margin: 0 0 26px; font: 400 31px/1 var(--serif); letter-spacing: -.03em; }
.service-card ul { list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.service-number { color: var(--muted); font-size: 10px; }

.thinking-notes { padding-top: 120px; padding-bottom: 150px; border-top: 1px solid var(--line); }
.notes-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.note-card { min-height: 390px; padding: 24px 18px 28px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.note-card + .note-card { padding-left: 18px; }
.note-card:last-child { border-right: 0; }
.note-card__top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; }
.note-card__heading { margin-top: 44px; min-height: 88px; display: flex; align-items: flex-end; }
.note-card h3 { margin: 0 0 18px; font: 400 27px/1.04 var(--serif); letter-spacing: -.03em; }
.note-card p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.note-card strong { margin-top: auto; padding-top: 24px; font-size: 14px; line-height: 1.45; }

.about { padding-top: 150px; padding-bottom: 150px; border-top: 1px solid var(--line); }
.about-grid { margin-top: 60px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: stretch; }
.about-portrait { min-height: 620px; background: var(--ink); color: var(--paper); border-radius: 28px; position: relative; display: grid; place-items: center; overflow: hidden; }
.about-portrait::before, .about-portrait::after { content: ""; position: absolute; border: 1px solid rgba(245,241,232,.16); border-radius: 50%; }
.about-portrait::before { width: 120%; aspect-ratio: 1; }
.about-portrait::after { width: 74%; aspect-ratio: 1; }
.about-portrait span { position: relative; z-index: 2; font: 400 clamp(110px, 16vw, 220px)/.8 var(--serif); letter-spacing: -.08em; }
.about-portrait small { position: absolute; left: 28px; bottom: 28px; color: rgba(245,241,232,.55); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.about-copy { display: flex; flex-direction: column; justify-content: center; }
.about-copy .about-lead { margin: 0; font: 400 clamp(40px, 5vw, 74px)/1 var(--serif); letter-spacing: -.05em; }
.about-copy > p:not(.about-lead) { max-width: 700px; margin: 38px 0 0; font-size: 19px; line-height: 1.65; color: var(--muted); }
.about-copy .about-note { padding-top: 32px; border-top: 1px solid var(--line); }

.contact { padding-top: 150px; padding-bottom: 110px; border-top: 1px solid var(--line); }
.contact h2 { margin: 34px 0 58px; max-width: 1180px; font: 400 clamp(48px, 7vw, 112px)/.93 var(--serif); letter-spacing: -.055em; }
.contact-link { display: inline-flex; align-items: center; gap: 18px; max-width: 100%; border-bottom: 1px solid var(--ink); padding-bottom: 10px; font: 400 clamp(24px, 3vw, 42px)/1.1 var(--serif); }
.contact-link span { min-width: 0; overflow-wrap: break-word; }
.contact-link .arrow { width: 26px; height: 26px; flex-shrink: 0; transition: transform .25s var(--ease); }
.contact-link:hover .arrow { transform: translateX(8px); }
.contact-note { color: var(--muted); font-size: 12px; margin-top: 28px; }

.footer { padding-top: 28px; padding-bottom: 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 12px; }
.footer nav { display: flex; gap: 24px; }

/* Case studies */
.case-page { background: var(--paper); }
.case-hero { min-height: 100svh; padding-top: 150px; padding-bottom: 72px; background: var(--dark); color: var(--paper); }
.case-hero > * { width: min(100%, calc(var(--max) - 2 * var(--pad))); margin-inline: auto; }
.case-hero__meta { display: grid; grid-template-columns: 70px 1fr auto; gap: 20px; color: rgba(255,255,255,.56); font-size: 10px; }
.case-hero__title-row { margin-top: 66px; display: grid; grid-template-columns: 1fr .45fr; gap: 60px; align-items: end; }
.case-hero h1 { margin: 0; font: 400 clamp(72px, 11vw, 150px)/.84 var(--serif); letter-spacing: -.075em; }
.case-hero__title-row > p { margin: 0 0 8px; color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.55; }
.case-section { padding-top: 130px; padding-bottom: 130px; }
.case-columns { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; }
.case-columns h3 { margin: 0 0 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.case-columns p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.7; max-width: 650px; }
.case-opportunity { margin-top: 78px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: .5fr 1.5fr; gap: 60px; }
.case-opportunity span { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.case-opportunity p { margin: 0; font: 400 clamp(34px, 4vw, 60px)/1.06 var(--serif); letter-spacing: -.04em; }
.case-section--soft { background: var(--soft); }
.case-inner { width: min(100%, calc(var(--max) - 2 * var(--pad))); margin-inline: auto; }
.customer-block { margin-top: 54px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; }
.customer-block h2 { margin: 0; font: 400 clamp(42px, 5.5vw, 82px)/.98 var(--serif); letter-spacing: -.05em; }
.customer-block p { margin: 8px 0 0; color: color-mix(in srgb, var(--dark) 66%, transparent); font-size: 17px; line-height: 1.65; }
.case-section--dark { background: var(--dark); color: var(--paper); }
.case-section--dark .section-label { color: rgba(245,241,232,.52); }
.case-quote { margin: 46px 0 80px; max-width: 1100px; font: italic 400 clamp(42px, 5.8vw, 82px)/1.02 var(--serif); letter-spacing: -.05em; }
.decision-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(245,241,232,.18); }
.decision-card { min-height: 280px; padding: 28px 22px 28px 0; border-right: 1px solid rgba(245,241,232,.18); }
.decision-card + .decision-card { padding-left: 22px; }
.decision-card:last-child { border-right: 0; }
.decision-card span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,241,232,.52); }
.decision-card p { margin: 14px 0 0; font-size: 17px; line-height: 1.55; }
.decision-arrow { margin: 22px 0; color: rgba(245,241,232,.45); }
.principle-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principle-grid article { min-height: 260px; padding: 22px 20px 28px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.principle-grid article + article { padding-left: 20px; }
.principle-grid article:last-child { border-right: 0; }
.principle-grid span { color: var(--muted); font-size: 11px; }
.principle-grid h3 { margin: auto 0 0; font: 400 30px/1.05 var(--serif); letter-spacing: -.03em; }
.deliverable-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 76px 28px; }
.deliverable-card__meta { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.deliverable-placeholder { margin-top: 18px; aspect-ratio: 1.33; background: var(--soft); position: relative; overflow: hidden; display: grid; place-items: center; }
.deliverable-placeholder::before, .deliverable-placeholder::after { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.deliverable-placeholder::before { width: 42%; height: 58%; background: color-mix(in srgb, white 58%, var(--soft)); transform: rotate(-8deg); box-shadow: 18px 18px 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.deliverable-placeholder::after { width: 28%; aspect-ratio: 1; border-radius: 50%; right: 8%; top: 9%; }
.deliverable-placeholder--2::before { width: 62%; height: 37%; transform: rotate(4deg); }
.deliverable-placeholder--3::before { width: 30%; height: 68%; transform: rotate(7deg); }
.deliverable-placeholder > span { z-index: 2; background: var(--dark); color: var(--paper); padding: 11px 14px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.deliverable-card h3 { margin: 20px 0 10px; font: 400 clamp(28px, 3vw, 44px)/1 var(--serif); letter-spacing: -.03em; }
.deliverable-card p { margin: 0; max-width: 560px; color: var(--muted); line-height: 1.6; font-size: 15px; }
.case-reflection { border-top: 1px solid var(--line); }
.case-reflection blockquote { max-width: 1160px; margin: 50px 0 0; font: italic 400 clamp(42px, 5.2vw, 78px)/1.05 var(--serif); letter-spacing: -.05em; }
.concept-note--case { margin-top: 60px; max-width: 900px; }
.next-project { min-height: 360px; padding: 80px var(--pad) 64px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; background: var(--accent); color: var(--dark); }
.next-project > span { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.next-project strong { grid-column: 1 / 2; margin-top: 30px; font: 400 clamp(58px, 9vw, 130px)/.85 var(--serif); letter-spacing: -.06em; }
.next-project .arrow { grid-column: 2; grid-row: 2; width: 50px; height: 50px; transition: transform .25s var(--ease); }
.next-project:hover .arrow { transform: translateX(12px); }

.reveal-up { animation: reveal .8s both var(--ease); }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; }
@keyframes reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .project-card, .project-card__link { min-height: 760px; }
  .project-card__link { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .project-card__copy { grid-column: auto; grid-row: auto; align-self: start; padding-right: 0; }
  .project-card__link > .artwork { grid-column: auto; grid-row: auto; }
  .project-card__copy p { max-width: 620px; }
  .artwork { min-height: 400px; }

  .service-grid, .notes-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card:nth-child(3), .note-card:nth-child(3) { border-right: 0; }
  .service-card:nth-child(4), .service-card:nth-child(5), .note-card:nth-child(4), .note-card:nth-child(5) { border-top: 1px solid var(--line); }
  .service-card:nth-child(4), .note-card:nth-child(4) { padding-left: 0; }
  .service-card:nth-child(5), .note-card:nth-child(5) { padding-left: 20px; }
  .thinking-map { grid-template-columns: repeat(3, 1fr); }
  .thinking-node { border-bottom: 1px solid var(--line); }
  .thinking-node:nth-child(3n) { border-right: 0; }
}

@media (max-width: 980px) {
  .menu-button { display: block; z-index: 60; }
  .site-nav { position: fixed; inset: 0; background: var(--ink); color: var(--paper); flex-direction: column; justify-content: center; align-items: center; gap: 24px; font: 400 34px var(--serif); transform: translateY(-105%); transition: transform .35s ease; }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav > a:not(.nav-cta) { color: var(--paper); }
  .nav-cta { margin-top: 14px; font: 700 13px var(--sans); border-color: var(--paper); }
  .section-heading--split, .statement-grid, .thinking-intro, .process-intro, .about-grid, .case-columns, .customer-block { grid-template-columns: 1fr; }
  .section-heading--split { gap: 24px; }
  .hero-orbit { width: 70vw; right: -18%; top: 20%; opacity: .35; }
  .thinking-map { grid-template-columns: repeat(2, 1fr); }
  .thinking-node:nth-child(3n) { border-right: 1px solid var(--line); }
  .thinking-node:nth-child(2n) { border-right: 0; }
  .service-grid, .notes-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(3), .note-card:nth-child(3) { border-right: 1px solid var(--line); }
  .service-card:nth-child(2n), .note-card:nth-child(2n) { border-right: 0; }
  .service-card:nth-child(4), .service-card:nth-child(5), .note-card:nth-child(4), .note-card:nth-child(5) { border-top: 1px solid var(--line); }
  .service-card:nth-child(5), .note-card:nth-child(5) { grid-column: 1 / -1; padding-left: 0; }
  .case-hero__title-row { grid-template-columns: 1fr; gap: 28px; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .customer-block { gap: 28px; }
  .decision-list { grid-template-columns: 1fr; }
  .decision-card, .decision-card + .decision-card { padding-left: 0; border-right: 0; border-bottom: 1px solid rgba(245,241,232,.18); }
  .decision-card:last-child { border-bottom: 0; }
  .principle-grid { grid-template-columns: repeat(2, 1fr); }
  .principle-grid article:nth-child(2n) { border-right: 0; }
  .principle-grid article:nth-child(3), .principle-grid article:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  :root { --pad: 18px; }
  .site-header { padding-top: 16px; }
  .brand-mark small { display: none; }
  .hero { min-height: auto; padding-top: 120px; padding-bottom: 70px; }
  .hero-title { font-size: clamp(54px, 16.8vw, 78px); }
  .hero-bottom { margin-top: 44px; flex-direction: column; align-items: flex-start; }
  .hero-bottom p { font-size: 16px; }
  .hero-proof { margin-top: 48px; line-height: 1.6; }
  .hero-orbit { width: 95vw; right: -46%; top: 28%; opacity: .25; }
  .statement, .work, .thinking, .process, .services, .thinking-notes, .about, .contact, .case-section { padding-top: 90px; padding-bottom: 90px; }
  .statement-grid { margin-top: 38px; gap: 36px; }
  .statement-grid p { font-size: 23px; }
  .statement-grid .statement-muted { font-size: 16px; }
  .project-stack { margin-top: 48px; }
  .project-card, .project-card__link { min-height: 690px; }
  .project-card { border-radius: 20px; }
  .project-card__link { padding: 22px; }
  .project-card__meta, .case-hero__meta { grid-template-columns: 36px 1fr; gap: 10px; }
  .project-card__meta span:last-child, .case-hero__meta span:last-child { grid-column: 2; }
  .project-card__copy h3 { font-size: 54px; }
  .project-card__copy p { font-size: 15px; }
  .artwork { min-height: 300px; }
  .coffee-pouch { width: 36%; left: 10%; }
  .coffee-cup { width: 29%; left: 50%; }
  .skin-box--one { width: 34%; left: 8%; }
  .skin-box--two { width: 28%; }
  .skin-bottle { width: 20%; }
  .vertex-machine { width: 58%; left: 20%; }
  .flow-window { width: 80%; left: 10%; }
  .thinking-intro, .process-intro { margin-top: 38px; gap: 32px; }
  .thinking-intro h2 { font-size: 46px; }
  .thinking-map { margin-top: 48px; grid-template-columns: 1fr; }
  .thinking-node, .thinking-node--accent { min-height: 170px; padding: 20px 0 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .thinking-node--accent { padding-left: 18px; padding-right: 18px; }
  .thinking-node strong { margin-top: 46px; font-size: 29px; }
  .process-step { grid-template-columns: 38px 1fr; gap: 12px; }
  .process-step p { grid-column: 2; }
  .service-grid, .notes-grid { grid-template-columns: 1fr; }
  .service-card, .service-card + .service-card, .note-card, .note-card + .note-card { min-height: auto; padding: 28px 0 38px; border-right: 0; border-top: 1px solid var(--line); }
  .service-card:first-child, .note-card:first-child { border-top: 0; }
  .service-card__heading { margin-top: 32px; height: auto; }
  .note-card__heading { margin-top: 46px; height: auto; }
  .about-grid { margin-top: 42px; gap: 42px; }
  .about-portrait { min-height: 420px; }
  .about-copy .about-lead { font-size: 42px; }
  .about-copy > p:not(.about-lead) { font-size: 17px; }
  .footer { flex-direction: column; gap: 20px; }
  .footer nav { gap: 16px; flex-wrap: wrap; }
  .case-hero { padding-top: 118px; }
  .case-hero__title-row { margin-top: 44px; }
  .case-hero h1 { font-size: clamp(70px, 21vw, 108px); }
  .artwork--large { min-height: 340px; margin-top: 40px; }
  .case-facts { grid-template-columns: 1fr; gap: 18px; }
  .case-columns, .customer-block { gap: 34px; }
  .case-opportunity { grid-template-columns: 1fr; gap: 18px; }
  .case-opportunity p { font-size: 37px; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article, .principle-grid article + article { min-height: 190px; padding: 22px 0 28px; border-right: 0; border-top: 1px solid var(--line); }
  .principle-grid article:first-child { border-top: 0; }
  .deliverable-grid { grid-template-columns: 1fr; gap: 54px; }
  .next-project { min-height: 290px; grid-template-columns: 1fr auto; padding-top: 58px; padding-bottom: 50px; }
  .next-project strong { font-size: 60px; white-space: normal; }
  .next-project .arrow { width: 34px; height: 34px; }
}

/* Production hardening + accessibility pass */
:root {
  --focus-ring: 3px solid #2457d6;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
}

html { scroll-padding-top: 24px; }

.site-shell, .case-page { overflow: visible; overflow-x: clip; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 11px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  transition: transform .2s ease;
}

.skip-link:focus-visible { transform: translateY(0); }

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

main[tabindex="-1"]:focus { outline: none; }

:where(a, button, input, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

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

button { cursor: pointer; }

.nav-cta:active, .circle-link:active, .menu-button:active, .contact-link:active { transform: translateY(1px); }

.project-card__link, .next-project, .contact-link, .circle-link, .brand-mark { position: relative; }

.project-card__link:focus-visible,
.next-project:focus-visible,
.circle-link:focus-visible,
.brand-mark:focus-visible,
.contact-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

/* Case-study header sits on a dark hero. Keep contrast intentional. */
.case-page .site-header { color: var(--paper); }
.case-page .brand-mark > span { border-color: rgba(245,241,232,.72); }
.case-page .brand-mark small { color: rgba(245,241,232,.62); }
.case-page .site-nav > a:not(.nav-cta) { color: rgba(245,241,232,.66); }
.case-page .site-nav > a:not(.nav-cta):hover,
.case-page .site-nav > a:not(.nav-cta):focus-visible { color: var(--paper); }
.case-page .nav-cta { border-color: rgba(245,241,232,.82); color: var(--paper); }
.case-page .nav-cta:hover,
.case-page .nav-cta:focus-visible { background: var(--paper); color: var(--dark); }
.case-page .menu-button { color: var(--paper); }

/* Grid children must be allowed to shrink instead of creating horizontal overflow. */
.project-card__copy,
.case-columns > *,
.customer-block > *,
.section-heading--split > *,
.thinking-intro > *,
.process-intro > *,
.about-grid > *,
.service-card,
.note-card,
.deliverable-card,
.decision-card { min-width: 0; }

.hero-title,
.project-card__copy h3,
.case-hero h1,
.case-opportunity p,
.customer-block h2,
.next-project strong,
.contact h2 { text-wrap: balance; }

/* Mobile menu: visually and interactively hidden until opened. */
@media (max-width: 980px) {
  .site-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-105%);
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .menu-button.is-open .menu-icon span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-button.is-open .menu-icon span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .case-page .site-nav > a:not(.nav-cta) { color: var(--paper); }
  .case-page .nav-cta { border-color: var(--paper); color: var(--paper); }
}

/* Thinking framework: semantic ordered list, balanced at intermediate widths. */
.thinking-map {
  list-style: none;
  padding-left: 0;
}

.thinking-node:nth-child(3n) { border-right: 1px solid var(--line); }
.thinking-node:nth-child(6n) { border-right: 0; }

@media (max-width: 1180px) and (min-width: 981px) {
  .thinking-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .thinking-node:nth-child(n) { border-right: 1px solid var(--line); }
  .thinking-node:nth-child(3n) { border-right: 0; }
  .thinking-node:nth-child(n + 4) { border-top: 1px solid var(--line); }

  .service-grid, .notes-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .service-card, .note-card { grid-column: span 2; }
  .service-card:nth-child(4), .note-card:nth-child(4) { grid-column: 2 / span 2; }
  .service-card:nth-child(5), .note-card:nth-child(5) { grid-column: 4 / span 2; }
  .service-card:nth-child(n), .note-card:nth-child(n) {
    border-right: 1px solid var(--line);
    border-top: 0;
    padding-left: 20px;
  }
  .service-card:nth-child(3), .note-card:nth-child(3),
  .service-card:nth-child(5), .note-card:nth-child(5) { border-right: 0; }
  .service-card:nth-child(n + 4), .note-card:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .service-card:first-child, .note-card:first-child { padding-left: 0; }
}

@media (max-width: 980px) and (min-width: 641px) {
  .thinking-node:nth-child(n) { border-right: 1px solid var(--line); }
  .thinking-node:nth-child(2n) { border-right: 0; }
  .thinking-node:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .service-grid, .notes-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .service-card, .note-card { grid-column: span 3; }
  .service-card:nth-child(5), .note-card:nth-child(5) { grid-column: 2 / span 4; }
  .service-card:nth-child(n), .note-card:nth-child(n) {
    border-right: 1px solid var(--line);
    border-top: 0;
    padding-left: 20px;
  }
  .service-card:nth-child(2), .service-card:nth-child(4),
  .note-card:nth-child(2), .note-card:nth-child(4) { border-right: 0; }
  .service-card:nth-child(n + 3), .note-card:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .service-card:first-child, .note-card:first-child { padding-left: 0; }
}

@media (max-width: 640px) {
  .thinking-node:nth-child(n) { border-right: 0; border-top: 1px solid var(--line); }
  .thinking-node:first-child { border-top: 0; }
  .service-grid, .notes-grid { grid-template-columns: 1fr; }
  .service-card, .note-card { grid-column: auto; }
  .service-card:nth-child(n), .note-card:nth-child(n) { border-right: 0; }
}

/* Semantic responsive audit table */
.audit-table-wrap { margin-top: 54px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.audit-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.audit-table th, .audit-table td { padding: 28px 18px 28px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.audit-table th { width: 24%; font-size: 14px; font-weight: 700; }
.audit-table td { width: 38%; color: var(--muted); font-size: 15px; line-height: 1.55; }
.audit-table thead th { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 500; }
.audit-table tbody th { font-weight: 600; }

.case-facts { margin-top: 42px; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 30px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 20px; }
.case-facts > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.case-facts dt { color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.case-facts dd { margin: 0; font-size: 14px; line-height: 1.45; }

.not-found { width: min(100%, calc(var(--max) - 2 * var(--pad))); min-height: 70svh; margin-inline: auto; padding-top: 180px; padding-bottom: 120px; }
.not-found h1 { max-width: 900px; margin: 42px 0 18px; font: 400 clamp(54px, 7vw, 104px)/.94 var(--serif); letter-spacing: -.06em; }
.not-found p { margin: 0 0 34px; color: var(--muted); font-size: 18px; }
.not-found-link { display: inline-flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; font: 400 28px/1.1 var(--serif); }
.not-found-link .arrow { width: 22px; height: 22px; flex-shrink: 0; transition: transform .25s var(--ease); }
.not-found-link:hover .arrow { transform: translateX(8px); }

@media (max-width: 640px) {
  .audit-table-wrap { margin-top: 42px; overflow: visible; }
  .audit-table, .audit-table thead, .audit-table tbody, .audit-table tr, .audit-table th, .audit-table td { display: block; width: 100%; }
  .audit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .audit-table tr { padding: 22px 0; border-bottom: 1px solid var(--line); }
  .audit-table th, .audit-table td { padding: 0; border: 0; }
  .audit-table th { margin-bottom: 10px; font-size: 16px; }
  .audit-table td + td { margin-top: 14px; }
  .audit-table td::before { display: block; margin-bottom: 5px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
  .audit-table td:first-of-type::before { content: "Observation"; }
  .audit-table td:last-of-type::before { content: "Design opportunity"; }
  .case-facts { grid-template-columns: 1fr; gap: 18px; }
  .not-found { padding-top: 140px; }
  .not-found h1 { font-size: clamp(54px, 16vw, 78px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .site-nav, .menu-icon span, .project-card__bottom .arrow, .next-project .arrow, .contact-link .arrow { transition: none !important; }
}

.noscript-message { max-width: 720px; margin: 0 auto; padding: 96px 24px; font-family: var(--sans); }
.noscript-message h1 { margin: 0 0 16px; font: 400 56px/1 var(--serif); letter-spacing: -.05em; }
.noscript-message p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }