:root {
  --ink: #0a0a0a;
  --paper: #f3f1ec;
  --white: #fcfaf5;
  --orange: #f47b27;
  --blue: #073e67;
  --yellow: #ffd348;
  --mint: #b8d8c3;
  --pink: #e7b9c7;
  --line: rgba(10, 10, 10, .2);
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.4; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 300; padding: .7rem 1rem; color: var(--white); background: var(--ink); transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { color: inherit; font: inherit; }

.site-header {
  height: 72px;
  padding: 0 3.5vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 241, 236, .92);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.mark { width: fit-content; font-weight: 600; letter-spacing: -.08em; }
nav { display: flex; gap: 2rem; font-size: .86rem; }
.header-cta { justify-self: end; font-size: .86rem; font-weight: 600; }
nav a, .header-cta, .underlined-link { transition: opacity .2s ease; }
nav a:hover, .header-cta:hover, .underlined-link:hover { opacity: .5; }
nav a.active { padding-bottom: .25rem; border-bottom: 1px solid; }
.menu-toggle, .mobile-menu { display: none; }

.hero {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 51% 49%;
  border-bottom: 1px solid var(--ink);
}
.hero-copy {
  min-height: 720px;
  padding: 4.5vw 3.5vw 2.5rem;
  display: flex;
  flex-direction: column;
}
.kicker { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 2.5rem); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin: auto 0 3.5rem;
  max-width: 850px;
  font-size: clamp(4rem, 6.6vw, 7.7rem);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .86;
}
em { font-family: var(--serif); font-weight: 400; }
.hero-details { display: grid; grid-template-columns: minmax(240px, 390px) auto; align-items: end; gap: clamp(3rem, 6vw, 7rem); }
.hero-details p { margin-bottom: 0; font-size: 1.08rem; letter-spacing: -.02em; }
.underlined-link { width: fit-content; padding-bottom: .3rem; border-bottom: 1px solid; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.aside-note { margin: 2.7rem 0 0; padding-left: 1rem; border-left: 2px solid var(--orange); font-size: .78rem; line-height: 1.45; text-transform: uppercase; letter-spacing: .06em; }

.hero-visual {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 4rem 2rem;
  background: var(--orange);
}
.visual-label, .mini-label { position: absolute; top: 1.2rem; left: 1.2rem; font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.process-side { height: 62%; min-height: 390px; position: relative; border: 1px solid var(--ink); background: rgba(255,255,255,.12); }
.process-side svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.process-side path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 7; }
.process-node {
  position: absolute;
  z-index: 2;
  padding: .45rem .65rem;
  border: 1px solid;
  border-radius: 100px;
  background: var(--paper);
  font-size: .65rem;
  font-weight: 600;
}
.node-a { top: 14%; left: 12%; }.node-b { top: 26%; right: 9%; }.node-c { bottom: 30%; left: 12%; }.node-d { right: 15%; bottom: 10%; }
.process-arrow { display: grid; gap: .25rem; text-align: center; font-family: var(--serif); font-size: 2rem; }
.process-arrow span { font-family: var(--sans); font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }
.process-after { display: grid; place-items: center; padding: 2rem 1.2rem; background: var(--yellow); }
.clean-line { width: 100%; display: flex; align-items: center; }
.clean-node { min-width: 50px; padding: .5rem .35rem; border: 1px solid; border-radius: 100px; text-align: center; background: var(--paper); font-size: .56rem; font-weight: 600; }
.clean-node.accent { background: var(--orange); }
.clean-node.dark { color: var(--paper); background: var(--ink); }
.clean-line i { height: 1px; flex: 1; background: var(--ink); }
.auto-chip { position: absolute; bottom: 2rem; padding: .4rem .65rem; border: 1px dashed; border-radius: 100px; font-size: .55rem; }
.scribble { position: absolute; z-index: 3; font-family: var(--serif); font-size: 1.05rem; font-style: italic; transform: rotate(-7deg); }
.scribble-one { top: 14%; left: 10%; }.scribble-two { bottom: 12%; left: 34%; transform: rotate(6deg); }.scribble-three { top: 18%; right: 8%; transform: rotate(8deg); }
.visual-caption { position: absolute; right: 1.3rem; bottom: 1rem; left: 1.3rem; display: flex; justify-content: space-between; font-size: .56rem; text-transform: uppercase; letter-spacing: .07em; }

.section { padding: 8rem 3.5vw; }
.eyebrow { margin: 0; font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; }
.section-intro { display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; margin-bottom: 5rem; }
.section-intro h2, .method h2, .about h2, .contact h2 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(3.3rem, 6vw, 7.3rem);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .89;
}
.split-intro { grid-template-columns: 3fr 1fr; }
.split-intro > p { max-width: 330px; align-self: end; }
.split-intro > div .eyebrow { margin-bottom: 2rem; }

.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid; background: var(--ink); }
.capability-card { min-width: 0; background: var(--white); }
.capability-art { height: 370px; position: relative; overflow: hidden; border-bottom: 1px solid; background: var(--yellow); }
.card-copy { min-height: 190px; padding: 1.5rem; }
.card-copy > span { font-size: .74rem; }
.card-copy h3 { margin: 2.5rem 0 .6rem; font-size: 1.6rem; font-weight: 500; letter-spacing: -.045em; }
.card-copy p { max-width: 320px; margin-bottom: 0; font-size: .9rem; opacity: .72; }
.flow-row { position: absolute; left: 8%; right: 8%; display: flex; align-items: center; }
.flow-row.long { top: 30%; }.flow-row.short { bottom: 23%; left: 23%; right: 23%; }
.flow-row b { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; background: var(--paper); font-size: .65rem; }
.flow-row i { height: 1px; flex: 1; background: var(--ink); }
.pencil-arrow { position: absolute; top: 53%; right: 10%; font-family: var(--serif); font-size: .95rem; font-style: italic; transform: rotate(-4deg); }
.sheets-art { background: var(--mint); }
.sheet { position: absolute; width: 44%; height: 29%; padding: .7rem; border: 1px solid; background: var(--paper); font-size: .55rem; box-shadow: 5px 5px 0 rgba(10,10,10,.12); }
.sheet::after { content:""; display:block; height: 55%; margin-top: .6rem; background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(10,10,10,.16) 12px), repeating-linear-gradient(90deg, transparent 0 29px, rgba(10,10,10,.12) 30px); }
.sheet-one { top: 23%; left: 8%; transform: rotate(-7deg); }.sheet-two { top: 33%; left: 18%; transform: rotate(2deg); }.sheet-three { top: 43%; left: 10%; transform: rotate(7deg); }
.system-box { position: absolute; right: 7%; bottom: 24%; width: 34%; padding: 1.2rem .7rem; border: 1px solid; border-radius: 50%; text-align: center; background: var(--orange); font-family: var(--serif); }
.tiny-arrow { position: absolute; top: 48%; left: 55%; font-size: 1.6rem; }
.people-art { background: var(--pink); }
.people-ring { position: absolute; inset: 20% 13% 12%; border: 1px solid; border-radius: 50%; }
.people-ring strong { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--blue); text-align: center; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; line-height: .9; }
.people-ring span { position: absolute; padding: .35rem .55rem; border: 1px solid; border-radius: 100px; background: var(--paper); font-size: .57rem; font-weight: 600; }
.people-ring span:nth-child(1) { top: -6%; left: 38%; }.people-ring span:nth-child(2) { top: 42%; right: -7%; }.people-ring span:nth-child(3) { bottom: -5%; left: 38%; }.people-ring span:nth-child(4) { top: 42%; left: -8%; }

.independent { background: var(--white); }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.case-card { border: 1px solid; }
.case-visual { aspect-ratio: 1.32; position: relative; overflow: hidden; }
.ce-visual { background: #dce8e7; }
.story-path { position: absolute; inset: 20% 7% 18%; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .7rem; }
.story-stage { min-height: 190px; padding: 1rem; display: flex; flex-direction: column; border: 1px solid; background: rgba(252,250,245,.55); }
.story-stage > span { font-size: .62rem; font-weight: 600; }
.story-stage strong { margin-top: auto; font-size: clamp(.9rem, 1.3vw, 1.25rem); font-weight: 500; letter-spacing: -.035em; }
.story-stage i { height: 55px; margin: 1rem 0 auto; display: block; }
.stage-arrow { font-family: var(--serif); font-size: 2rem; }
.scribbled-lines { background: repeating-linear-gradient(-10deg, transparent 0 8px, rgba(10,10,10,.55) 9px 10px); transform: rotate(-3deg); }
.clear-lines { background: repeating-linear-gradient(0deg, transparent 0 13px, var(--orange) 14px 16px); }
.family-path { position: relative; border-bottom: 3px solid var(--orange); }
.family-path::before, .family-path::after { content:""; position:absolute; bottom:-7px; width: 12px; height: 12px; border: 2px solid; border-radius: 50%; background: var(--paper); }
.family-path::before { left: 0; }.family-path::after { right: 0; background: var(--orange); }
.case-transformation { position: absolute; bottom: 1.2rem; left: 1.2rem; margin: 0; font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.case-transformation span { padding: 0 .45rem; }
.kene-visual { color: var(--white); background: var(--blue); }
.light { color: var(--white); }
.category-cloud { position: absolute; inset: 15%; display: grid; place-items: center; }
.category-cloud span { position: absolute; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.65); border-radius: 100px; font-family: var(--serif); font-size: 1.2rem; opacity: .65; }
.category-cloud span:nth-child(1) { top: 5%; left: 2%; transform: rotate(-8deg); }.category-cloud span:nth-child(2) { top: 17%; right: 0; transform: rotate(7deg); }.category-cloud span:nth-child(3) { bottom: 8%; left: 8%; transform: rotate(4deg); }
.category-cloud strong { padding: 2rem; border: 1px solid var(--orange); border-radius: 50%; background: var(--orange); color: var(--ink); text-align: center; font-size: clamp(1rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -.04em; }
.case-copy { min-height: 175px; padding: 1.5rem; display: flex; justify-content: space-between; align-items: end; gap: 2rem; border-top: 1px solid; }
.case-copy h3 { max-width: 480px; margin: 1.4rem 0 0; font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.case-copy a { font-size: .8rem; font-weight: 600; white-space: nowrap; }

.method { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; color: var(--white); background: var(--blue); }
.method-sticky { height: 100vh; padding: 7rem 3.5vw; position: sticky; top: 0; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.25); }
.method-sticky h2 { font-size: clamp(4rem, 6vw, 7.5rem); }
.method-sticky > p:last-child { max-width: 350px; margin-bottom: 0; }
.decision-list { padding: 22vh 3.5vw 18vh; }
.decision-list article { min-height: 150px; display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.25); }
.decision-list article span { font-size: .6rem; opacity: .65; }
.decision-list article p { margin: 0; font-size: .85rem; }
.decision-list article strong { color: var(--orange); font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4.5rem); font-weight: 400; }

.writing { overflow: hidden; }
.desk { min-height: 760px; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 2rem; border: 1px solid; background: #d9d1c5; }
.article-card { position: relative; z-index: 2; align-self: start; padding-bottom: 1.5rem; border: 1px solid; background: var(--white); }
.article-card:nth-child(2) { margin-top: 9rem; }
.article-art { height: 330px; position: relative; overflow: hidden; border-bottom: 1px solid; }
.article-card > p, .article-card > h3, .article-card > span { margin-right: 1.2rem; margin-left: 1.2rem; }
.article-card > p { margin-top: 1rem; font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; }
.article-card > h3 { margin-bottom: .5rem; font-size: 2rem; font-weight: 500; letter-spacing: -.05em; }
.article-card > span { display: block; max-width: 400px; font-size: .75rem; opacity: .7; }
.article-link { width: fit-content; display: inline-block; margin: 1.5rem 1.2rem 0; padding-bottom: .25rem; border-bottom: 1px solid; font-size: .75rem; font-weight: 600; }
.article-puzzle .article-art { background: var(--orange); }
.puzzle-system { position: absolute; inset: 12%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid; background: var(--ink); transform: rotate(-4deg); }
.puzzle-system span { display: grid; place-items: center; background: var(--paper); font-family: var(--serif); font-size: 1.1rem; }
.article-curtain .article-art { display: grid; place-items: center; background: var(--yellow); }
.browser-window { width: 65%; aspect-ratio: 1.4; padding: .8rem; border: 1px solid; background: var(--paper); }
.browser-window i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: var(--ink); }
.browser-window strong { height: 80%; display: grid; place-items: center; font-size: 2rem; letter-spacing: -.08em; }
.curtain { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--blue); }
.curtain.left { left: 0; transform: skewX(-7deg) translateX(-16%); }.curtain.right { right: 0; transform: skewX(7deg) translateX(16%); }
.sticky-note { width: 205px; min-height: 175px; position: absolute; z-index: 5; padding: 1.2rem; border: 0; box-shadow: 8px 10px 20px rgba(10,10,10,.15); text-align: left; cursor: grab; font-family: var(--serif); font-size: 1.1rem; line-height: 1.05; transition: transform .15s ease; }
.sticky-note span { display: block; margin-bottom: 2rem; font-family: var(--sans); font-size: .52rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.sticky-note:hover { transform: rotate(0) scale(1.03); }.sticky-note.dragging { cursor: grabbing; transform: scale(1.04); }
.note-one { top: 1rem; left: 42%; background: var(--yellow); transform: rotate(5deg); }
.note-two { right: 1rem; bottom: 1rem; background: var(--pink); transform: rotate(-4deg); }
.note-three { left: 25%; bottom: 0; background: var(--mint); transform: rotate(3deg); }

.about { display: grid; grid-template-columns: 42% 58%; gap: 0; padding: 0; border-top: 1px solid; }
.about-photo { min-height: 760px; position: relative; overflow: hidden; background: var(--blue); }
.about-photo img { height: 100%; object-fit: cover; object-position: center 25%; }
.annotation { position: absolute; padding: .58rem .9rem; border: 1px solid; border-radius: 100px; background: var(--paper); font-size: .75rem; font-weight: 600; box-shadow: 4px 4px 0 var(--orange); }
.ann-one { top: 10%; left: 8%; transform: rotate(-7deg); }.ann-two { top: 24%; right: 6%; transform: rotate(7deg); }.ann-three { bottom: 30%; left: 6%; transform: rotate(4deg); }.ann-four { bottom: 12%; right: 8%; transform: rotate(-5deg); }.ann-five { top: 48%; left: 10%; font-family: var(--serif); font-size: 1.05rem; font-style: italic; }
.about-copy { padding: 7rem 5vw; display: flex; flex-direction: column; justify-content: center; }
.about-copy .eyebrow { margin-bottom: 4rem; }
.about-copy h2 { margin-bottom: 4rem; font-size: clamp(3.5rem, 5.6vw, 7rem); }
.about-copy > p:not(.eyebrow) { max-width: 520px; margin-bottom: 3rem; }

.contact { min-height: 78vh; position: relative; overflow: hidden; padding: 6rem 3.5vw 4rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: var(--orange); }
.contact h2 { max-width: 1200px; font-size: clamp(5rem, 10vw, 12rem); }
.contact > .eyebrow, .contact h2, .contact > p:not(.eyebrow), .contact > a { position: relative; z-index: 2; }
.contact > p:not(.eyebrow) { max-width: 430px; }
.contact > a { padding-bottom: .5rem; border-bottom: 2px solid; font-weight: 600; }
.contact-path { position: absolute; right: -2%; bottom: -10%; left: -2%; width: 104%; }
.contact-path path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 12 12; opacity: .2; }

footer { min-height: 150px; padding: 2rem 3.5vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; color: var(--white); background: var(--ink); font-size: .84rem; }
footer div { display: flex; gap: 1.5rem; }
footer div a { transition: opacity .2s ease; }
footer div a:hover { opacity: .55; }
footer p { margin: 0; justify-self: end; }

/* Interior pages */
.page-hero {
  min-height: 82vh;
  position: relative;
  overflow: hidden;
  padding: 7rem 3.5vw 3rem;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid;
}
.page-hero h1 {
  max-width: 1350px;
  margin: auto 0 5rem;
  font-size: clamp(5rem, 9.2vw, 11rem);
}
.page-hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12vw; }
.page-hero-bottom p { max-width: 480px; margin-bottom: 0; font-size: 1.05rem; }
.work-page-hero { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 58% 42%; gap: 3vw; align-items: center; background: var(--yellow); }
.work-hero-copy { min-width: 0; }
.work-hero-copy h1 { margin: 6rem 0 3rem; font-size: clamp(4.8rem, 7.8vw, 9.5rem); }
.work-hero-copy > p:last-child { max-width: 590px; margin-bottom: 0; font-size: 1.05rem; }
.writing-page-hero { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 55% 45%; gap: 4vw; align-items: center; color: var(--white); background: var(--blue); }
.writing-hero-copy { min-width: 0; }
.writing-hero-copy h1 { margin: 6rem 0 3rem; font-size: clamp(4.8rem, 7.8vw, 9.5rem); }
.writing-hero-copy > p:last-child { max-width: 610px; margin-bottom: 0; font-size: 1.05rem; }
.thought-wall { min-height: 500px; position: relative; overflow: hidden; color: var(--ink); }
.thought-note { width: 60%; min-height: 190px; position: absolute; top: 7%; left: 7%; z-index: 2; padding: 1.4rem; background: var(--yellow); box-shadow: 12px 15px 0 rgba(0,0,0,.2); font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.4rem); line-height: .95; transform: rotate(-5deg); }
.thought-scrap { position: absolute; padding: .65rem .8rem; border: 1px solid; background: var(--paper); box-shadow: 4px 5px 0 rgba(0,0,0,.18); font-family: var(--serif); font-size: 1rem; font-style: italic; }
.scrap-one { top: 4%; right: 5%; transform: rotate(6deg); }.scrap-two { top: 40%; left: 6%; z-index: 3; background: var(--pink); transform: rotate(4deg); }.scrap-three { right: 5%; bottom: 31%; z-index: 3; max-width: 190px; background: var(--mint); transform: rotate(-4deg); }
.thought-underline { position: absolute; top: 52%; left: 20%; max-width: 48%; padding-bottom: .2rem; border-bottom: 3px solid var(--orange); color: var(--white); font-family: var(--serif); font-size: 1.2rem; line-height: 1.1; transform: rotate(-2deg); }
.thought-arrow { position: absolute; bottom: 12%; left: 4%; color: var(--white); font-family: var(--serif); font-size: 1.15rem; font-style: italic; transform: rotate(5deg); }
.article-sheet { width: 42%; min-height: 245px; position: absolute; right: 4%; bottom: 1%; padding: 1.2rem; border: 1px solid var(--ink); background: var(--paper); box-shadow: 9px 11px 0 var(--orange); transform: rotate(3deg); }
.article-sheet span { font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }.article-sheet strong { display: block; margin: 4rem 0 2rem; font-family: var(--serif); font-size: 2rem; font-weight: 400; }.article-sheet i { height: 1px; display: block; margin-top: .8rem; background: rgba(10,10,10,.35); }
.hero-toolkit { position: relative; top: auto; right: auto; width: 100%; padding: 1rem; border: 1px solid; background: rgba(243,241,236,.4); }
.toolkit-question { padding: 1rem; border: 1px solid; background: var(--paper); text-align: center; font-family: var(--serif); font-size: 1.3rem; }
.toolkit-branches { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; margin-top: 1rem; background: var(--ink); border: 1px solid; }
.toolkit-branches span { min-height: 110px; padding: .7rem; display: flex; flex-direction: column; justify-content: space-between; background: var(--white); }
.toolkit-branches span:nth-child(2) { background: var(--orange); }.toolkit-branches span:nth-child(3) { background: var(--mint); }.toolkit-branches span:nth-child(4) { background: var(--pink); }
.toolkit-branches small { font-size: .55rem; text-transform: uppercase; letter-spacing: .06em; }.toolkit-branches strong { font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.hero-note-stack { position: absolute; top: 7rem; right: 4vw; width: 260px; height: 180px; }
.hero-note-stack i { position: absolute; padding: 1rem; color: var(--ink); background: var(--yellow); box-shadow: 5px 7px 0 rgba(0,0,0,.25); font-family: var(--serif); font-size: 1.15rem; }
.hero-note-stack i:nth-child(1) { top: 0; left: 0; transform: rotate(-7deg); }.hero-note-stack i:nth-child(2) { top: 45px; right: 0; background: var(--pink); transform: rotate(5deg); }.hero-note-stack i:nth-child(3) { bottom: 0; left: 40px; background: var(--mint); transform: rotate(-2deg); }

.professional-map { background: #dce8f7; }
.professional-map-grid { display: grid; grid-template-columns: .75fr 2.25fr; gap: 5vw; align-items: start; }
.map-context { position: sticky; top: 7rem; }
.map-context p { max-width: 360px; }.map-context > strong { display: block; max-width: 360px; margin: 4rem 0; font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; }
.process-map { border: 1px solid; background: var(--white); }
.process-map article { min-height: 180px; display: grid; grid-template-columns: 65px 1fr; padding: 1.5rem; }
.process-map article > span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; background: var(--paper); font-size: .6rem; }
.process-map small { display: block; font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.process-map strong { display: block; margin: 1.6rem 0 .5rem; font-size: 1.65rem; font-weight: 500; letter-spacing: -.04em; }
.process-map p { max-width: 470px; margin: 0; font-size: .82rem; opacity: .72; }
.process-map > i { display: block; height: 45px; position: relative; border-top: 1px solid; border-bottom: 1px solid; background: var(--yellow); }
.process-map > i::after { content:"↓"; position: absolute; top: 50%; left: 48px; transform: translateY(-50%); font-size: 1.2rem; }
.work-list { border-top: 1px solid; }
.work-list article { min-height: 190px; position: relative; display: grid; grid-template-columns: 70px 1fr 1fr 140px; align-items: center; gap: 2rem; border-bottom: 1px solid; }
.work-list article > span { font-size: .68rem; }
.work-list h3 { margin: 0; font-size: clamp(1.7rem, 2.5vw, 3rem); font-weight: 500; letter-spacing: -.05em; }
.work-list p { max-width: 470px; margin: 0; font-size: .9rem; }
.list-icon { width: 90px; height: 90px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; justify-self: end; color: var(--white); background: var(--blue); font-family: var(--serif); font-size: 1.3rem; }
.system-icon { background: var(--orange); color: var(--ink); font-size: 2rem; }.control-icon { background: var(--mint); color: var(--ink); font-size: 2rem; }.launch-icon { background: var(--pink); color: var(--ink); }

.work-perspective { min-height: 90vh; position: relative; overflow: hidden; padding: 7rem 3.5vw; color: var(--white); background: var(--blue); }
.work-perspective h2 { max-width: 900px; margin: 5rem 0 3rem; font-size: clamp(4rem, 7vw, 8rem); font-weight: 500; letter-spacing: -.07em; line-height: .88; }
.work-perspective > p:not(.eyebrow) { max-width: 460px; margin-bottom: 3rem; }
.system-puzzle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid; background: var(--orange); }
.work-perspective .system-puzzle { width: 46%; aspect-ratio: 1.5; position: absolute; right: 3.5vw; bottom: 7rem; color: var(--ink); transform: rotate(4deg); }
.system-puzzle span { display: grid; place-items: center; background: var(--paper); font-family: var(--serif); font-size: clamp(.8rem, 1.5vw, 1.4rem); }

.case-study-preview { min-height: 620px; display: grid; grid-template-columns: 42% 58%; margin-bottom: 1.5rem; border: 1px solid; }
.case-study-preview.reverse { grid-template-columns: 42% 58%; }
.case-study-preview.reverse .preview-copy { order: 2; }.case-study-preview.reverse .preview-visual { order: 1; }
.preview-copy { padding: 3.5rem; display: flex; flex-direction: column; justify-content: center; background: var(--white); }
.preview-copy h2 { margin: 4rem 0 2rem; font-size: clamp(2.8rem, 4.6vw, 5.5rem); font-weight: 500; letter-spacing: -.065em; line-height: .9; }
.preview-copy > p:not(.eyebrow) { max-width: 450px; }
.scope-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2rem; }
.scope-tags span { padding: .4rem .65rem; border: 1px solid; border-radius: 100px; font-size: .63rem; }
.case-study-link { width: fit-content; margin-top: 3rem; padding-bottom: .4rem; border-bottom: 1px solid; font-size: .8rem; font-weight: 600; }
.preview-visual { position: relative; overflow: hidden; display: grid; place-items: center; padding: 4rem; }
.ce-preview { background: #dce8e7; }
.question-card { max-width: 540px; padding: 3rem; border: 1px solid; background: var(--paper); box-shadow: 16px 16px 0 var(--orange); font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 3.8rem); line-height: .95; transform: rotate(-3deg); }
.answer-path { position: absolute; right: 2rem; bottom: 2rem; left: 2rem; display: flex; align-items: center; }
.answer-path i { height: 1px; flex: 1; background: var(--ink); }.answer-path span { padding: .4rem .6rem; border: 1px solid; border-radius: 100px; background: var(--paper); font-size: .58rem; }
.kene-preview { color: var(--white); background: var(--blue); }
.kene-preview > strong { font-family: var(--serif); font-size: clamp(3rem, 5vw, 6rem); font-weight: 400; }
.orbit-label { position: absolute; padding: .55rem .8rem; border: 1px solid; border-radius: 100px; font-family: var(--serif); font-size: 1.1rem; opacity: .7; }
.orbit-sales { top: 13%; left: 12%; transform: rotate(-6deg); }.orbit-build { top: 18%; right: 9%; transform: rotate(5deg); }.orbit-consult { bottom: 16%; left: 18%; transform: rotate(3deg); }
.position-answer { position: absolute; right: 12%; bottom: 10%; width: 210px; height: 150px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--ink); text-align: center; font-weight: 600; transform: rotate(-5deg); }

.experiments { display: grid; grid-template-columns: 1fr 2fr 1.2fr; gap: 2rem; align-items: start; }
.experiments h2 { margin: 0 0 2rem; font-size: clamp(4rem, 6vw, 7rem); font-weight: 500; letter-spacing: -.07em; line-height: .88; }
.experiments > div:nth-child(2) p { max-width: 440px; }
.experiment-placeholder { padding: 1.5rem; border: 1px solid; background: var(--yellow); transform: rotate(2deg); }
.experiment-placeholder span { font-size: .65rem; }.experiment-placeholder strong { display: block; margin: 5rem 0 1rem; font-family: var(--serif); font-size: 2rem; font-weight: 400; }

.page-cta { min-height: 72vh; padding: 6rem 3.5vw 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.page-cta h2 { max-width: 1250px; margin: 4rem 0; font-size: clamp(5rem, 10vw, 12rem); font-weight: 500; letter-spacing: -.075em; line-height: .85; }
.page-cta a { width: fit-content; padding-bottom: .5rem; border-bottom: 2px solid; font-weight: 600; }
.blue-cta { color: var(--white); background: var(--blue); }.orange-cta { background: var(--orange); }
.orange-cta h2 { max-width: 1050px; font-size: clamp(4.5rem, 7.5vw, 9rem); }

.featured-writing .eyebrow { margin-bottom: 3rem; }
.featured-article { display: grid; grid-template-columns: 58% 42%; border: 1px solid; }
.featured-art { min-height: 620px; display: grid; place-items: center; padding: 6rem; background: var(--orange); }
.system-puzzle.large { width: 100%; aspect-ratio: 1.35; transform: rotate(-5deg); }
.featured-copy { padding: 4rem; display: flex; flex-direction: column; justify-content: center; background: var(--white); }
.featured-copy > p { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }.featured-copy h2 { margin: 4rem 0 2rem; font-size: clamp(3rem, 5vw, 6rem); font-weight: 500; letter-spacing: -.065em; line-height: .9; }.featured-copy > span { max-width: 470px; }.featured-copy a { width: fit-content; margin-top: 4rem; padding-bottom: .4rem; border-bottom: 1px solid; font-weight: 600; }

.notes-section { min-height: 100vh; display: grid; grid-template-columns: 38% 62%; color: var(--white); background: var(--blue); }
.notes-copy { padding: 7rem 3.5vw; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.25); }
.notes-copy h2 { margin: auto 0 3rem; font-size: clamp(4rem, 6.5vw, 8rem); font-weight: 500; letter-spacing: -.07em; line-height: .86; }
.notes-copy > p:last-child { max-width: 380px; }
.notes-board { min-height: 900px; position: relative; overflow: hidden; }
.paper-note { width: 260px; min-height: 225px; position: absolute; padding: 1.4rem; color: var(--ink); box-shadow: 12px 15px 25px rgba(0,0,0,.2); }
.paper-note span { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }.paper-note p { margin: 3.5rem 0 1.25rem; font-family: var(--serif); font-size: 1.5rem; line-height: 1; }.paper-note small { display: block; font-family: var(--sans); font-size: .82rem; line-height: 1.4; opacity: .65; }
.yellow-note { top: 10%; left: 9%; background: var(--yellow); transform: rotate(-5deg); }.pink-note { top: 16%; right: 8%; background: var(--pink); transform: rotate(5deg); }.mint-note { top: 42%; left: 32%; background: var(--mint); transform: rotate(3deg); }.orange-note { bottom: 8%; left: 7%; background: var(--orange); transform: rotate(-3deg); }.blue-note { right: 8%; bottom: 10%; background: #dce8e7; transform: rotate(6deg); }

.archive-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 4rem; }.archive-head h2 { margin: 2rem 0 0; font-size: clamp(4rem, 6vw, 7rem); font-weight: 500; letter-spacing: -.07em; line-height: .88; }
.topic-pills { display: flex; flex-wrap: wrap; gap: .45rem; }.topic-pills button { padding: .45rem .8rem; border: 1px solid; border-radius: 100px; background: transparent; font-size: .7rem; cursor: pointer; }.topic-pills button.active { color: var(--white); background: var(--ink); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid; background: var(--ink); }
.archive-grid article { padding-bottom: 1.5rem; background: var(--white); }
.archive-grid article > a { padding-bottom: 1.5rem; }
.archive-grid article > p, .archive-grid article > h3, .archive-grid article > span,
.archive-grid article > a > p, .archive-grid article > a > h3, .archive-grid article > a > span { margin-right: 1.2rem; margin-left: 1.2rem; }
.archive-grid article > p, .archive-grid article > a > p { margin-top: 1rem; font-size: .6rem; text-transform: uppercase; }
.archive-grid h3 { margin-bottom: .5rem; font-size: 1.6rem; font-weight: 500; letter-spacing: -.045em; }
.archive-grid article > span, .archive-grid article > a > span { display: block; font-size: .9rem; line-height: 1.45; opacity: .72; }
.archive-link { width: fit-content; display: block; margin: 1.6rem 1.2rem 0; padding-bottom: .3rem; border-bottom: 1px solid; font-size: .88rem; font-weight: 600; }
.archive-status { width: fit-content; display: block; margin: 1.6rem 1.2rem 0; padding-bottom: .3rem; border-bottom: 1px dashed; font-size: .88rem; font-weight: 600; opacity: .55; }
.archive-cover { height: 310px; position: relative; overflow: hidden; display: grid; place-items: center; border-bottom: 1px solid; }.curtain-cover { background: var(--yellow); }.curtain-cover::before,.curtain-cover::after { content:""; position:absolute; top:0; bottom:0; width:40%; background:var(--blue); }.curtain-cover::before { left:0; transform:skewX(-6deg) translateX(-15%); }.curtain-cover::after { right:0; transform:skewX(6deg) translateX(15%); }.curtain-cover strong { z-index:1; font-size:2.5rem; }.audit-cover { grid-template-columns:1fr 1fr; background:var(--pink); }.audit-cover span { width:110px; height:110px; display:grid; place-items:center; border:1px solid; border-radius:50%; }.audit-cover span:last-child { background:var(--orange); transform:translateX(-20px); }.automation-cover { color:var(--white); background:var(--blue); font-family:var(--serif); font-size:8rem; }
.archive-grid article[hidden] { display: none; }
.empty-filter { padding: 3rem; border: 1px dashed; text-align: center; font-family: var(--serif); font-size: 1.4rem; }
.page-cta > p:not(.eyebrow) { max-width: 520px; margin-bottom: 2rem; font-size: 1rem; }

.about-page-hero { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 55% 45%; border-bottom: 1px solid; }
.about-hero-copy { padding: 6rem 3.5vw 3rem; display: flex; flex-direction: column; justify-content: space-between; }.about-hero-copy h1 { margin: auto 0 4rem; font-size: clamp(4.5rem, 7.5vw, 9rem); }.about-hero-copy > p:last-child { max-width: 610px; font-size: 1.05rem; }
.about-hero-image { min-height: 720px; position: relative; overflow: hidden; background:var(--blue); }.about-hero-image img { height:100%; object-fit:cover; object-position:center 23%; }.about-hero-image span { position:absolute; padding:.55rem .8rem; border:1px solid; border-radius:100px; background:var(--paper); box-shadow:4px 4px 0 var(--orange); font-size:.7rem; font-weight:600; }.about-hero-image span:nth-of-type(1){top:8%;left:8%;transform:rotate(-5deg)}.about-hero-image span:nth-of-type(2){top:22%;right:7%;transform:rotate(6deg)}.about-hero-image span:nth-of-type(3){bottom:24%;left:7%;transform:rotate(4deg)}.about-hero-image span:nth-of-type(4){bottom:10%;right:10%;transform:rotate(-4deg)}.about-hero-image span:nth-of-type(5){top:45%;left:5%;transform:rotate(-3deg)}.about-hero-image span:nth-of-type(6){top:52%;right:7%;font-family:var(--serif);font-size:1.1rem;font-style:italic}

.story-timeline { position:relative; }.story-timeline > .eyebrow { margin-bottom:5rem; }.timeline-line { position:absolute; top:13rem; bottom:8rem; left:calc(3.5vw + 30px); width:1px; background:var(--ink); }.story-timeline article { min-height:520px; position:relative; display:grid; grid-template-columns:80px minmax(0,1.45fr) minmax(260px,.55fr); gap:3rem; padding:4rem 0; border-top:1px solid; }.story-timeline article > span { width:60px; height:60px; z-index:2; display:grid; place-items:center; border:1px solid; border-radius:50%; background:var(--paper); font-size:.65rem; }.timeline-year { font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }.story-timeline h2 { max-width:900px; margin:4rem 0 2rem; font-size:clamp(3rem,5vw,6rem); font-weight:500; letter-spacing:-.065em; line-height:.9; }.story-timeline article > div:nth-child(2) > p:last-child { max-width:600px; }.timeline-doodle { align-self:center; justify-self:center; }.ledger-doodle { padding:2rem; border:1px solid; background:var(--yellow); font-family:var(--serif); font-size:1.5rem; transform:rotate(4deg); }.puzzle-doodle { width:240px; display:grid; grid-template-columns:1fr 1fr; gap:3px; transform:rotate(-5deg); }.puzzle-doodle i { aspect-ratio:1; border:1px solid; background:var(--mint); }.puzzle-doodle i:nth-child(2),.puzzle-doodle i:nth-child(3){background:var(--orange)}.shift-doodle { font-family:var(--serif); font-size:1.7rem; }.shift-doodle span { text-decoration:line-through; opacity:.5; }.shift-doodle strong { padding:.8rem; border:1px solid; border-radius:50%; background:var(--orange); font-weight:400; }.curiosity-doodle { font-family:var(--serif); font-size:4rem; color:var(--orange); transform:rotate(-8deg); }

.how-i-work { display:grid; grid-template-columns:42% 58%; color:var(--white); background:var(--blue); }.how-copy { min-height:760px; padding:7rem 3.5vw; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid rgba(255,255,255,.25); }.how-copy h2 { margin:auto 0 3rem; font-size:clamp(4rem,6.5vw,8rem); font-weight:500; letter-spacing:-.07em; line-height:.86; }.principle-grid { display:grid; grid-template-columns:1fr 1fr; }.principle-grid article { min-height:380px; padding:2rem; border-right:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25); }.principle-grid span { font-size:.65rem; opacity:.6; }.principle-grid h3 { margin:6rem 0 1rem; color:var(--orange); font-family:var(--serif); font-size:2.2rem; font-weight:400; line-height:1; }.principle-grid p { max-width:300px; font-size:.85rem; }

.curiosity { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; }.curiosity h2 { margin:5rem 0 0; font-size:clamp(4rem,6vw,7rem); font-weight:500; letter-spacing:-.07em; line-height:.88; }.curiosity-cloud { min-height:600px; position:relative; }.curiosity-cloud span { position:absolute; padding:.8rem 1rem; border:1px solid; border-radius:100px; background:var(--paper); box-shadow:5px 5px 0 var(--orange); font-family:var(--serif); font-size:clamp(1rem,1.6vw,1.5rem); }.curiosity-cloud span:nth-child(1){top:5%;left:10%;transform:rotate(-5deg)}.curiosity-cloud span:nth-child(2){top:20%;right:3%;transform:rotate(4deg)}.curiosity-cloud span:nth-child(3){top:38%;left:2%;transform:rotate(3deg)}.curiosity-cloud span:nth-child(4){top:52%;right:14%;transform:rotate(-6deg)}.curiosity-cloud span:nth-child(5){bottom:15%;left:18%;transform:rotate(5deg)}.curiosity-cloud span:nth-child(6){bottom:2%;right:2%;transform:rotate(-2deg)}.curiosity-cloud span:nth-child(7){top:4%;right:4%;background:var(--yellow);transform:rotate(7deg)}
.professional-details { display:grid; grid-template-columns:1fr 3fr; gap:3rem; background:var(--white); }.professional-details h2 { max-width:1100px; margin:0 0 3rem; font-size:clamp(3.5rem,5.5vw,6.5rem); font-weight:500; letter-spacing:-.065em; line-height:.9; }.professional-details > div > p { max-width:650px; }.detail-links { display:flex; gap:2rem; margin-top:3rem; }
.professional-details + .page-cta { min-height: 560px; justify-content: flex-start; gap: 0; }
.professional-details + .page-cta h2 { margin: 4rem 0 0; }
.professional-details + .page-cta a { margin-top: 4rem; }

/* Long-form pages */
.case-page-hero,.article-hero{min-height:calc(100vh - 72px);display:grid;grid-template-columns:56% 44%;border-bottom:1px solid}
.case-page-hero>div:first-child,.article-hero>div:first-child{padding:7rem 3.5vw 4rem;display:flex;flex-direction:column;justify-content:space-between}
.case-page-hero h1,.article-hero h1{margin:6rem 0 2.5rem;font-size:clamp(4.5rem,7.7vw,9rem);font-weight:500;letter-spacing:-.075em;line-height:.87}
.case-page-hero>div:first-child>p:last-child,.article-hero>div:first-child>p:last-child{max-width:620px;font-size:1.08rem}
.case-hero-art{min-height:690px;position:relative;overflow:hidden;padding:3rem;border-left:1px solid}
.ce-case-hero{background:var(--white)}.ce-story-art{display:flex;align-items:center;gap:.7rem;background:#dce9e8}.ce-story-art span{padding:.55rem .8rem;border:1px solid;border-radius:100px;background:var(--paper);font-size:.7rem}.ce-story-art i{height:2px;flex:1;background:var(--orange)}.ce-story-art strong{max-width:260px;padding:2rem;border:1px solid;background:var(--yellow);font-family:var(--serif);font-size:2.3rem;font-weight:400;line-height:1;transform:rotate(-3deg)}
.kene-case-hero{color:var(--white);background:var(--blue)}.kene-identity-art{background:#0b4b77}.kene-identity-art span{position:absolute;padding:.6rem .8rem;border:1px solid var(--white);border-radius:100px;font-family:var(--serif)}.kene-identity-art span:nth-child(1){top:18%;left:12%;transform:rotate(-8deg)}.kene-identity-art span:nth-child(2){top:25%;right:10%;transform:rotate(7deg)}.kene-identity-art span:nth-child(3){bottom:22%;left:14%;transform:rotate(5deg)}.kene-identity-art strong{position:absolute;top:45%;left:14%;font-family:var(--serif);font-size:4rem;font-weight:400}.kene-identity-art em{position:absolute;right:9%;bottom:20%;max-width:260px;padding:2rem;border-radius:50%;color:var(--ink);background:var(--orange);text-align:center;font-family:var(--sans);font-size:1.2rem;font-style:normal}
.case-facts{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid}.case-facts div{min-height:130px;padding:1.5rem 3.5vw;border-right:1px solid}.case-facts div:last-child{border-right:0}.case-facts span{display:block;margin-bottom:2.5rem;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em}.case-facts strong{font-weight:500}
.longform-section{padding:8rem 3.5vw}.longform-section>.eyebrow{margin-bottom:4rem}.prose-lead{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw}.prose-lead h2,.case-problem h2,.case-output h2{margin:0;font-size:clamp(3.4rem,6vw,7rem);font-weight:500;letter-spacing:-.07em;line-height:.9}.prose-lead>div{align-self:end}.prose-lead p{font-size:1.03rem}
.case-problem{min-height:720px;display:grid;grid-template-columns:1fr 1fr;background:var(--yellow)}.problem-copy{padding:7rem 3.5vw}.problem-copy .eyebrow{margin-bottom:5rem}.problem-copy p:last-child{max-width:560px;margin-top:3rem}.problem-stack,.category-choice{position:relative;overflow:hidden;border-left:1px solid;background:var(--pink)}.problem-stack span{position:absolute;padding:.8rem 1rem;border:1px solid;border-radius:100px;background:var(--paper);font-family:var(--serif)}.problem-stack span:nth-child(1){top:15%;left:12%}.problem-stack span:nth-child(2){top:34%;right:10%}.problem-stack span:nth-child(3){bottom:25%;left:18%}.problem-stack strong{position:absolute;right:12%;bottom:12%;padding:2rem;background:var(--blue);color:var(--white);font-family:var(--serif);font-size:2rem;font-weight:400;transform:rotate(-4deg)}
.kene-problem{color:var(--white);background:var(--blue)}.category-choice{color:var(--ink);background:var(--orange)}.category-choice span{position:absolute;padding:.7rem 1rem;border:1px solid;border-radius:100px;background:var(--paper)}.category-choice span:nth-child(1){top:14%;left:10%}.category-choice span:nth-child(2){top:16%;right:9%}.category-choice span:nth-child(3){top:40%;left:34%}.category-choice i{position:absolute;top:55%;left:42%;font-family:var(--serif)}.category-choice strong{position:absolute;right:10%;bottom:13%;left:10%;padding:2.5rem;border:1px solid;background:var(--yellow);text-align:center;font-family:var(--serif);font-size:2.8rem;font-weight:400}
.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid}.approach-grid article{min-height:430px;padding:1.5rem;border-right:1px solid}.approach-grid article:last-child{border-right:0}.approach-grid span{font-size:.65rem}.approach-grid h3{margin:7rem 0 1rem;font-size:2.5rem;font-weight:500;letter-spacing:-.05em}.approach-grid p{max-width:350px}
.decision-section{padding:8rem 3.5vw;color:var(--white);background:var(--blue)}.decision-section>.eyebrow{margin-bottom:4rem}.decision-section article{min-height:170px;display:grid;grid-template-columns:60px 1fr 1fr;align-items:center;gap:2rem;border-top:1px solid rgba(255,255,255,.45)}.decision-section article:last-child{border-bottom:1px solid rgba(255,255,255,.45)}.decision-section article span{font-size:.65rem}.decision-section h3{margin:0;font-size:2rem;font-weight:500}.decision-section p{max-width:450px;margin:0}.kene-decisions{color:var(--ink);background:var(--mint)}.kene-decisions article{border-color:var(--ink)}
.case-output{min-height:680px;padding:8rem 3.5vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:var(--pink)}.case-output .eyebrow{margin-bottom:4rem}.kene-output{background:var(--yellow)}.output-list{display:grid;grid-template-columns:1fr 1fr;align-content:center}.output-list span{padding:2rem 1rem;border-top:1px solid}.output-list span:nth-last-child(-n+2){border-bottom:1px solid}
.result-section{background:var(--white)}.next-story{min-height:300px;padding:4rem 3.5vw;display:flex;flex-direction:column;justify-content:space-between;color:var(--white);background:var(--orange)}.next-story span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.next-story strong{max-width:1200px;font-size:clamp(2.8rem,5.5vw,6.5rem);font-weight:500;letter-spacing:-.06em;line-height:.95}
.article-hero{grid-template-columns:58% 42%;color:var(--white);background:var(--blue)}.article-hero-puzzle,.website-draft-art{min-height:680px;position:relative;overflow:hidden;border-left:1px solid}.article-hero-puzzle{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);padding:4rem;gap:1px;background:var(--orange)}.article-hero-puzzle span{display:grid;place-items:center;border:1px solid;color:var(--ink);background:var(--paper);font-family:var(--serif);font-size:1.4rem}.article-hero-puzzle span:nth-child(2),.article-hero-puzzle span:nth-child(5){background:var(--mint)}.article-hero-puzzle span:nth-child(3),.article-hero-puzzle span:nth-child(6){background:var(--pink)}
.website-article-hero{color:var(--ink);background:var(--yellow)}.website-draft-art{background:var(--orange)}.website-draft-art span{position:absolute;padding:1rem;border:1px solid;background:var(--paper);font-family:var(--serif);transform:rotate(-5deg)}.website-draft-art span:nth-child(1){top:15%;left:9%}.website-draft-art span:nth-child(2){top:32%;right:8%;transform:rotate(6deg)}.website-draft-art span:nth-child(3){top:52%;left:16%;transform:rotate(3deg)}.website-draft-art strong{position:absolute;right:8%;bottom:12%;left:8%;padding:2rem;border:1px solid;background:var(--blue);color:var(--white);font-family:var(--serif);font-size:3rem;font-weight:400;line-height:1}
.article-body{width:min(760px,calc(100% - 2.4rem));margin:0 auto;padding:8rem 0}.article-body p{margin-bottom:1.6rem;font-size:1.14rem;line-height:1.75}.article-body .article-intro{margin-bottom:5rem;font-family:var(--serif);font-size:2rem;line-height:1.25}.article-body h2{margin:6rem 0 1.5rem;font-size:3.4rem;font-weight:500;letter-spacing:-.06em;line-height:1}.article-body aside{margin:6rem -8vw;padding:5rem 8vw;color:var(--white);background:var(--blue);font-family:var(--serif);font-size:clamp(2.4rem,4.5vw,5rem);line-height:1}.article-system-map,.thread-figure{position:relative;margin:6rem -12vw;padding:4rem;display:flex;align-items:center;gap:1rem;border:1px solid;background:var(--yellow)}.article-system-map span,.thread-figure span{padding:.7rem 1rem;border:1px solid;border-radius:100px;background:var(--paper);font-size:.75rem}.article-system-map i,.thread-figure i{height:1px;flex:1;background:var(--ink)}.article-system-map figcaption{position:absolute;bottom:1rem;left:4rem;font-family:var(--serif);font-style:italic}.thread-figure{flex-wrap:wrap;background:var(--pink)}.thread-figure strong{flex-basis:100%;margin-top:3rem;font-family:var(--serif);font-size:2.4rem;font-weight:400;text-align:center}
.article-index{padding:2rem 3.5vw;display:grid;grid-template-columns:1fr 3fr;gap:2rem;border-bottom:1px solid;background:var(--white)}.article-index>span{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.article-index div{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem}.article-index a{padding-bottom:.2rem;border-bottom:1px solid transparent;font-size:.78rem}.article-index a:hover{border-color:currentColor}.article-body h2[id]{scroll-margin-top:100px}.next-story strong i{font-family:var(--sans);font-size:.65em;font-style:normal;white-space:nowrap}
.archive-grid article>a{display:block}

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 690px; }
  .hero-visual { min-height: 680px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { display: grid; grid-template-columns: 1fr 1fr; }
  .capability-art { height: 360px; border-right: 1px solid; border-bottom: 0; }
  .case-grid { grid-template-columns: 1fr; }
  .case-visual { height: 440px; aspect-ratio: auto; }
  .writing .desk { min-height: auto; }
  .about { grid-template-columns: 1fr; }
  .about-photo { min-height: 700px; }
  .case-study-preview, .case-study-preview.reverse { grid-template-columns: 1fr; }
  .case-study-preview.reverse .preview-copy { order: 1; }.case-study-preview.reverse .preview-visual { order: 2; }
  .preview-visual { min-height: 580px; }
  .featured-article { grid-template-columns: 1fr; }
  .notes-section { grid-template-columns: 1fr; }
  .notes-copy { min-height: 600px; border-right: 0; }
  .about-page-hero { grid-template-columns: 1fr; }
  .how-i-work { grid-template-columns: 1fr; }
  .how-copy { min-height: 650px; border-right: 0; }
}

@media (max-width: 760px) {
  .site-header { height: 64px; padding: 0 1.2rem; grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero-copy { min-height: 640px; padding: 2.5rem 1.2rem 1.5rem; }
  h1 { font-size: clamp(3.6rem, 16vw, 5.5rem); }
  .hero-details { grid-template-columns: 1fr; }
  .hero-details { gap: 1.8rem; }
  .hero-visual { min-height: 620px; padding: 4rem 1rem 3rem; grid-template-columns: 1fr; }
  .process-side { min-height: 245px; height: 245px; }
  .process-before { display: block; }
  .process-arrow { display: grid; min-height: 54px; place-content: center; font-size: 1.4rem; transform: rotate(90deg); }
  .process-arrow span { transform: rotate(-90deg); }
  .scribble-one, .scribble-three { display: none; }
  .scribble-two { left: 1.2rem; bottom: 4rem; }
  .section { padding: 6rem 1.2rem; }
  .section-intro, .split-intro { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; }
  .section-intro h2, .method h2, .about h2 { font-size: 3.5rem; }
  .capability-card { grid-template-columns: 1fr; }
  .capability-art { height: 320px; border-right: 0; border-bottom: 1px solid; }
  .card-copy { min-height: 190px; }
  .card-copy h3 { margin-top: 2.5rem; }
  .case-visual { height: 360px; aspect-ratio: auto; }
  .ce-visual { height: 330px; }
  .story-path { inset: 22% 4% 21%; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .35rem; }
  .story-stage { min-height: 155px; padding: .65rem; }
  .story-stage strong { font-size: .72rem; }
  .story-stage i { height: 38px; margin: .6rem 0 0; }
  .stage-arrow { text-align: center; font-size: 1.1rem; transform: none; }
  .case-transformation { right: .7rem; bottom: .65rem; left: .7rem; font-size: .48rem; white-space: nowrap; }
  .case-copy { min-height: 200px; display: block; }
  .case-copy a { display: inline-block; margin-top: 2rem; }
  .method { display: block; }
  .method-sticky { height: auto; min-height: 460px; position: relative; top: auto; padding: 4rem 1.2rem; justify-content: flex-start; gap: 2.75rem; border-right: 0; }
  .method-sticky h2 { margin-bottom: 0; }
  .method-sticky > p:last-child { margin-top: auto; }
  .decision-list { padding: 0 1.2rem 5rem; }
  .decision-list article { min-height: 115px; grid-template-columns: 28px 1fr; }
  .decision-list article strong { grid-column: 2; font-size: 2.6rem; }
  .desk { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 1.2rem; }
  .article-card:nth-child(2) { margin-top: 0; }
  .article-art { height: 260px; }
  .sticky-note { width: auto; min-height: 150px; position: static; transform: none !important; cursor: default; box-shadow: 4px 5px 0 rgba(10,10,10,.16); }
  .about-photo { min-height: 560px; }
  .about-copy { padding: 4rem 1.2rem 3rem; }
  .about-copy .eyebrow { margin-bottom: 2.5rem; }
  .about-copy h2 { margin-bottom: 2.5rem; }
  .about-copy > p:not(.eyebrow) { margin-bottom: 2.5rem; }
  .contact { min-height: 560px; padding: 4rem 1.2rem 2.5rem; justify-content: flex-start; gap: 0; }
  .contact h2 { margin: 4rem 0 0; font-size: 4.6rem; }
  .contact > p:not(.eyebrow) { margin: 4rem 0 0; }
  .contact > a { margin-top: 3.5rem; }
  .contact-path { bottom: -2%; opacity: .55; }
  footer { min-height: 0; padding: 1.5rem 1.2rem; display: grid; grid-template-columns: 1fr auto; gap: 1.1rem 1rem; align-items: center; }
  footer .mark { grid-column: 1; grid-row: 1; }
  footer div { display: contents; }
  footer div a { font-size: .82rem; }
  footer div a:nth-child(1) { grid-column: 1; grid-row: 2; }
  footer div a:nth-child(2) { grid-column: 1; grid-row: 2; margin-left: 3.6rem; }
  footer div a:nth-child(3) { grid-column: 1; grid-row: 2; margin-left: 8.4rem; }
  footer div a:nth-child(1)::after,
  footer div a:nth-child(2)::after { content: "·"; margin-left: .55rem; opacity: .5; }
  footer div a:last-child { grid-column: 2; grid-row: 1; text-align: right; }
  footer p { grid-column: 1 / -1; grid-row: 3; justify-self: start; font-size: .72rem; opacity: .8; }
  .page-hero { min-height: 760px; padding: 5rem 1.2rem 2rem; }
  .page-hero h1 { margin: auto 0 3rem; font-size: 4.6rem; }
  .page-hero-bottom { grid-template-columns: 1fr; gap: 1.2rem; }
  .hero-note-stack { display: none; }
  .menu-toggle { width: 32px; height: 32px; display: grid; align-content: center; gap: 6px; justify-self: end; padding: 4px; border: 0; background: transparent; }
  .menu-toggle span { width: 24px; height: 2px; display: block; background: var(--ink); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .header-cta { display: none; }
  .mobile-menu { position: absolute; top: 64px; right: 0; left: 0; padding: 1.5rem 1.2rem 2rem; z-index: 60; border-bottom: 1px solid; background: var(--paper); }
  .mobile-menu.open { display: grid; gap: 1rem; }
  .mobile-menu a { font-size: 1.25rem; font-weight: 500; }
  .work-page-hero { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 3.5rem; padding-top: 5rem; padding-bottom: 3rem; }
  .work-hero-copy h1 { margin: 9rem 0 2.5rem; font-size: 4.6rem; }
  .work-hero-copy > p:last-child { font-size: 1rem; }
  .hero-toolkit { display: block; overflow-x: auto; padding: .8rem; }
  .toolkit-question, .toolkit-branches { min-width: 520px; }
  .writing-page-hero { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 3.5rem; padding-top: 5rem; padding-bottom: 3rem; }
  .writing-hero-copy h1 { margin: 9rem 0 2.5rem; font-size: 4.6rem; }
  .writing-hero-copy > p:last-child { font-size: 1rem; }
  .thought-wall { min-height: 610px; overflow: hidden; }
  .thought-note { width: 74%; min-height: 180px; top: 4%; left: 3%; font-size: 2.4rem; }
  .scrap-one { top: 31%; right: 4%; }
  .scrap-two { top: 43%; left: 4%; }
  .scrap-three { right: 3%; bottom: 30%; max-width: 150px; }
  .thought-underline { top: 55%; left: 5%; max-width: 52%; font-size: 1.05rem; }
  .thought-arrow { bottom: 8%; left: 4%; }
  .article-sheet { width: 55%; min-height: 215px; right: 4%; bottom: 1%; }
  .professional-map-grid { grid-template-columns: 1fr; }
  .map-context { position: static; }
  .process-map article { min-height: 210px; }
  .work-list article { min-height: 270px; grid-template-columns: 32px 1fr; gap: 1rem; padding: 2rem 0; }
  .work-list article p { grid-column: 2; }.list-icon { grid-column: 2; width: 65px; height: 65px; justify-self: start; }
  .work-perspective { min-height: 850px; padding: 5rem 1.2rem; }
  .work-perspective .system-puzzle { width: calc(100% - 2.4rem); right: 1.2rem; bottom: 4rem; }
  .preview-copy { padding: 3rem 1.2rem; }.preview-visual { min-height: 520px; padding: 2rem; }
  .case-study-preview .preview-visual,
  .case-study-preview.reverse .preview-visual { order: 1; }
  .case-study-preview .preview-copy,
  .case-study-preview.reverse .preview-copy { order: 2; }
  .experiments { grid-template-columns: 1fr; }.experiment-placeholder { margin-top: 2rem; }
  .page-cta { min-height: 520px; padding: 4rem 1.2rem 2.5rem; justify-content: flex-start; }
  .page-cta h2 { margin: 4.5rem 0 0; font-size: 4.8rem; }
  .page-cta > p:not(.eyebrow) { margin-top: 2rem; }
  .page-cta > a { margin-top: auto; }
  .featured-art { min-height: 420px; padding: 2rem; }.featured-copy { padding: 3rem 1.2rem; }
  .notes-board { min-height: auto; padding: 1.2rem; display: grid; gap: 1rem; }
  .paper-note { width: auto; min-height: 180px; position: static; transform: none; }
  .paper-note small { font-size: .9rem; line-height: 1.45; opacity: .65; }
  .archive-head { display: block; }
  .topic-pills { margin-top: 2rem; }
  .archive-grid { grid-template-columns: 1fr; gap: 1.5rem; border: 0; background: transparent; }
  .archive-grid article { border: 1px solid; }
  .archive-grid article > span, .archive-grid article > a > span { font-size: 1rem; line-height: 1.5; }
  .archive-link { margin-top: 1.75rem; font-size: .95rem; }
  .archive-status { margin-top: 1.75rem; font-size: .95rem; }
  .orange-cta h2 { font-size: 4rem; }
  .about-hero-copy { min-height: 680px; padding: 5rem 1.2rem 2rem; }.about-hero-copy h1 { font-size: 4.5rem; }.about-hero-image { min-height: 600px; }
  .timeline-line { left: calc(1.2rem + 24px); }.story-timeline article { min-height: auto; grid-template-columns: 52px 1fr; gap: 1rem; }.story-timeline article > span { width: 48px; height: 48px; }.story-timeline article > div:nth-child(2) { grid-column: 2; }.timeline-doodle { grid-column: 2; margin: 2rem 0 3rem; justify-self: start; }
  .principle-grid { grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,.25); }
  .principle-grid article { min-height: 260px; padding: 2rem 1.2rem; border-right: 0; }
  .principle-grid h3 { margin-top: 3.5rem; }
  .curiosity { grid-template-columns: 1fr; }.curiosity-cloud { min-height: 700px; }
  .professional-details { grid-template-columns: 1fr; }
  .professional-details + .page-cta { min-height: 500px; padding-top: 4rem; }
  .professional-details + .page-cta h2 { margin-top: 4rem; }
  .professional-details + .page-cta a { margin-top: 4rem; }
  .case-page-hero,.article-hero{min-height:auto;grid-template-columns:1fr}
  .case-page-hero>div:first-child,.article-hero>div:first-child{min-height:700px;padding:5rem 1.2rem 3rem}
  .case-page-hero h1,.article-hero h1{margin:8rem 0 2.5rem;font-size:4.5rem}
  .case-hero-art,.article-hero-puzzle,.website-draft-art{min-height:560px;border-top:1px solid;border-left:0}
  .ce-story-art{padding:1.2rem;gap:.35rem}.ce-story-art strong{padding:1.2rem;font-size:1.7rem}.ce-story-art span{padding:.4rem;font-size:.55rem}
  .kene-identity-art strong{left:8%;font-size:3rem}.kene-identity-art em{right:6%;left:35%;font-size:1rem}
  .case-facts{grid-template-columns:1fr 1fr}.case-facts div{min-height:120px;padding:1.2rem;border-bottom:1px solid}.case-facts div:nth-child(2){border-right:0}.case-facts span{margin-bottom:1.5rem}
  .longform-section{padding:5rem 1.2rem}.longform-section>.eyebrow{margin-bottom:3rem}.prose-lead{grid-template-columns:1fr;gap:3rem}.prose-lead h2,.case-problem h2,.case-output h2{font-size:3.7rem}
  .case-problem{min-height:auto;grid-template-columns:1fr}.problem-copy{min-height:620px;padding:5rem 1.2rem}.problem-stack,.category-choice{min-height:560px;border-top:1px solid;border-left:0}
  .approach-grid{grid-template-columns:1fr}.approach-grid article{min-height:300px;border-right:0;border-bottom:1px solid}.approach-grid article:last-child{border-bottom:0}.approach-grid h3{margin:4rem 0 1rem}
  .decision-section{padding:5rem 1.2rem}.decision-section article{min-height:260px;grid-template-columns:32px 1fr;gap:1rem}.decision-section h3{font-size:2rem}.decision-section p{grid-column:2}
  .case-output{min-height:auto;padding:5rem 1.2rem;grid-template-columns:1fr;gap:4rem}.output-list span{padding:1.5rem .5rem}
  .next-story{min-height:260px;padding:3rem 1.2rem}.next-story strong{font-size:2.6rem;line-height:1}
  .article-hero-puzzle{padding:1.2rem}.article-hero-puzzle span{font-size:1rem}
  .website-draft-art strong{font-size:2.4rem}
  .article-body{padding:5rem 0}.article-body p{font-size:1.05rem}.article-body .article-intro{font-size:1.7rem}.article-body h2{margin-top:4.5rem;font-size:2.8rem}.article-body aside{margin:4rem -1.2rem;padding:4rem 1.2rem;font-size:2.8rem}
  .article-index{padding:1.5rem 1.2rem;display:block}.article-index>span{display:block;margin-bottom:0}.article-index div{display:none}
  .article-system-map,.thread-figure{margin:4rem 0;padding:2rem 1rem;flex-wrap:wrap}.article-system-map i,.thread-figure i{min-width:20px}.article-system-map figcaption{position:static;flex-basis:100%;margin-top:2rem}.thread-figure strong{font-size:1.8rem}
}

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

/* Motion */
.motion-ready body { opacity: 0; transform: translateY(8px); }
.motion-ready body.page-entered { opacity: 1; transform: none; transition: opacity .45s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.motion-reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease var(--reveal-delay, 0ms), transform .8s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms); }
.motion-reveal.is-visible { opacity: 1; transform: none; }
.motion-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
@media (hover:hover) and (pointer:fine) {
  .motion-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10,10,10,.1); }
  .underlined-link, .case-study-link, .article-link, .archive-link, .page-cta a, .contact > a { transition: opacity .2s ease, transform .25s ease; }
  .underlined-link:hover, .case-study-link:hover, .article-link:hover, .archive-link:hover, .page-cta a:hover, .contact > a:hover { opacity: .65; transform: translateX(3px); }
}
.reduce-motion body, .reduce-motion .motion-reveal { opacity: 1 !important; transform: none !important; }
.scroll-progress { height: 3px; position: fixed; top: 0; right: 0; left: 0; z-index: 100; transform: scaleX(0); transform-origin: left center; background: var(--orange); pointer-events: none; will-change: transform; }
.motion-step { transition: background-color .45s ease, color .45s ease, transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease; }
.motion-step.motion-active { transform: translateX(5px); }
.decision-list .motion-step:not(.motion-active), .process-map .motion-step:not(.motion-active), .story-timeline .motion-step:not(.motion-active) { opacity: .68; }
.principle-grid .motion-step.motion-active { background: rgba(255,255,255,.045); }
.approach-grid .motion-step.motion-active { background: rgba(7,62,103,.05); }
.decision-section .motion-step.motion-active { background: rgba(255,255,255,.04); }
.kene-decisions .motion-step.motion-active { background: rgba(255,255,255,.2); }
.motion-line { transform: scaleX(0); transform-origin: left center; transition: transform .85s cubic-bezier(.22,1,.36,1); }
.motion-line.is-drawn { transform: scaleX(1); }
.motion-path { clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(.22,1,.36,1); }
.motion-path.is-drawn { clip-path: inset(0); }
.motion-timeline { transform: scaleY(0); transform-origin: top center; transition: transform 1.3s cubic-bezier(.22,1,.36,1); }
.motion-timeline.is-drawn { transform: scaleY(1); }
.article-index a { transition: color .25s ease, padding-left .25s ease; }
.article-index a.is-current { color: var(--orange); padding-left: .35rem; }
.reduce-motion .scroll-progress { display: none; }
.reduce-motion .motion-step { opacity: 1 !important; transform: none !important; }
.reduce-motion .motion-line, .reduce-motion .motion-timeline { transform: none !important; }
.reduce-motion .motion-path { clip-path: none !important; }

/* 404 */
.error-main {
  min-height: calc(100vh - 72px);
  display: block;
  border-bottom: 1px solid var(--ink);
  background: var(--orange);
}
.error-copy {
  min-height: calc(100vh - 72px);
  padding: 4.5vw 3.5vw 3rem;
  display: flex;
  flex-direction: column;
}
.error-copy h1 {
  margin: auto 0 3rem;
  max-width: 1100px;
}
.error-copy > p:not(.eyebrow) {
  max-width: 540px;
  margin-bottom: 2.5rem;
  font-size: 1.1rem;
}
.error-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}
.error-links a {
  padding-bottom: .3rem;
  border-bottom: 1px solid;
  font-size: .9rem;
  font-weight: 600;
}
.error-primary {
  padding: .85rem 1.15rem !important;
  border: 1px solid !important;
  background: var(--yellow);
}
@media (hover:hover) and (pointer:fine) {
  .error-links a { transition: opacity .2s ease, transform .25s ease; }
  .error-links a:hover { opacity: .65; transform: translateX(3px); }
}

@media (max-width: 760px) {
  .error-main { min-height: auto; }
  .error-copy { min-height: 610px; padding: 4rem 1.2rem 3rem; }
  .error-copy h1 { margin: auto 0 2.5rem; font-size: 4.4rem; }
  .error-copy > p:not(.eyebrow) { font-size: 1rem; }
  .error-links { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
}