:root {
  --black: #090908;
  --black-soft: #11110f;
  --ivory: #e9e4d8;
  --smoke: #918d84;
  --bronze: #b7794f;
  --line: rgba(233,228,216,.2);
  --display: "Bodoni Moda", Didot, serif;
  --sans: "Libre Franklin", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--ivory); font-family: var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .8rem 1rem; background: var(--ivory); color: var(--black); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.grain { position: fixed; z-index: 90; inset: -80%; width: 260%; height: 260%; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: grain 1s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(2%,-1%)} 50%{transform:translate(-1%,2%)} 75%{transform:translate(1%,1%)} 100%{transform:translate(-2%,-1%)} }

.site-header { position: absolute; z-index: 40; top: 0; left: 0; right: 0; height: 88px; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--ivory); border-bottom: 1px solid rgba(233,228,216,.24); }
.logo { font: 400 1.1rem var(--display); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.logo em { color: var(--bronze); font-weight: 400; }
.site-nav { display: flex; gap: clamp(1rem,2.1vw,2.35rem); }
.site-nav a, .header-contact { font: 400 .58rem var(--mono); text-transform: uppercase; letter-spacing: .11em; text-decoration: none; }
.site-nav a { position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.5rem; height: 1px; background: var(--bronze); transition: right .3s; }
.site-nav a:hover::after { right: 0; }
.nav-enquire { display: none; }
.header-contact { justify-self: end; border-bottom: 1px solid var(--ivory); padding-bottom: .35rem; }
.header-contact span { color: var(--bronze); }
.menu-toggle { display: none; background: none; color: inherit; border: 0; font: 400 .6rem var(--mono); text-transform: uppercase; }

.hero { min-height: 100svh; position: relative; overflow: hidden; padding: 120px var(--gutter) 3rem; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; }
.hero-stills { position: absolute; z-index: -3; inset: 0; display: grid; grid-template-columns: 1.45fr .55fr; }
.hero-still { overflow: hidden; }
.hero-still img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.48) brightness(.54); }
.hero-still-fos img { object-position: center; transform: scale(1.02); }
.hero-still-kinu { border-left: 1px solid rgba(233,228,216,.24); }
.hero-still-kinu img { object-position: 62% 67%; filter: saturate(.28) brightness(.38); }
.hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.06) 34%,rgba(0,0,0,.68)),linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%); }
.hero-topline { display: grid; grid-template-columns: 1fr 1fr auto; font: 400 .54rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.hero-topline span:nth-child(2) { text-align: center; }
.hero-title-wrap { align-self: center; text-align: center; position: relative; z-index: 2; }
.hero-kicker { font: 400 .56rem var(--mono); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 2.2rem; }
.hero h1 { margin: 0; font: 400 clamp(6rem,13vw,13rem)/.73 var(--display); letter-spacing: -.065em; text-shadow: 0 2px 40px rgba(0,0,0,.45); }
.hero h1 em { color: var(--bronze); font-weight: 400; }
.hero-footer { display: grid; grid-template-columns: 1fr 1fr .4fr; gap: 3rem; align-items: end; border-top: 1px solid rgba(233,228,216,.35); padding-top: 1rem; }
.hero-intro { max-width: 30rem; margin: 0; font: 300 clamp(.8rem,1vw,1rem)/1.65 var(--sans); }
.hero-scroll { justify-self: center; display: flex; align-items: center; gap: 1.2rem; font: 400 .55rem var(--mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.hero-scroll i { font-style: normal; color: var(--bronze); font-size: 1rem; transition: transform .25s; }
.hero-scroll:hover i { transform: translateY(5px); }
.frame-count { justify-self: end; display: flex; align-items: baseline; gap: .65rem; font: 300 .5rem var(--mono); text-transform: uppercase; }
.frame-count strong { font: 400 1.5rem var(--display); color: var(--bronze); }

.section { padding: clamp(7rem,12vw,12rem) var(--gutter); }
.chapter-label { display: flex; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px solid var(--line); font: 400 .55rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--smoke); }
.manifesto { background: var(--black); }
.manifesto-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(4rem,10vw,12rem); align-items: end; margin-top: clamp(5rem,9vw,9rem); }
.manifesto h2, .services h2, .about h2 { margin: 0; font: 400 clamp(4rem,8.5vw,9rem)/.88 var(--display); letter-spacing: -.045em; }
.manifesto h2 em, .services h2 em { color: var(--bronze); font-weight: 400; }
.manifesto-grid > p { max-width: 28rem; margin: 0 0 .6rem; font: 300 .78rem/1.9 var(--sans); color: #c1bdb4; }

.work-disclosure { padding: 2rem var(--gutter); display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem,8vw,10rem); align-items: start; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--black-soft); }
.work-disclosure span { font: 400 .52rem var(--mono); text-transform: uppercase; letter-spacing: .13em; color: var(--bronze); }
.work-disclosure p { max-width: 48rem; margin: 0; font: 300 .68rem/1.75 var(--sans); color: #bcb8af; }

.film-project { min-height: 110svh; position: relative; isolation: isolate; overflow: hidden; padding: clamp(7rem,10vw,10rem) var(--gutter) 3rem; display: grid; grid-template-rows: auto 1fr auto; }
.project-bg { position: absolute; z-index: -3; inset: 0; }
.project-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.film-project:hover .project-bg img { transform: scale(1.018); }
.project-fos .project-bg img { object-position: center; filter: saturate(.56) brightness(.58); }
.project-kinu .project-bg img { object-position: 63% 69%; filter: saturate(.32) brightness(.48); }
.project-residence .project-bg img { object-position: center; filter: saturate(.46) brightness(.52); }
.project-dentist .project-bg img { object-position: 50% 36%; filter: saturate(.5) brightness(.52); }
.project-sillage .project-bg img { object-position: 50% 54%; filter: saturate(.42) brightness(.48) contrast(1.08); }
.project-materia .project-bg img { object-position: 62% 50%; filter: saturate(.55) brightness(.48) contrast(1.12); }
.project-vignette { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.06) 36%,rgba(0,0,0,.78)),radial-gradient(circle at 50% 48%,transparent 25%,rgba(0,0,0,.52) 110%); }
.project-chapter { display: flex; justify-content: space-between; font: 400 .55rem var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.project-title { align-self: center; text-align: center; }
.project-title > p:first-child { font: 400 .55rem var(--mono); text-transform: uppercase; letter-spacing: .16em; }
.project-title h3 { margin: .5rem 0; font: 500 clamp(8rem,22vw,22rem)/.75 var(--display); letter-spacing: -.06em; text-shadow: 0 2px 50px rgba(0,0,0,.55); }
.project-fos .project-title h3 { letter-spacing: -.1em; }
.project-residence .project-title h3 { font-size: clamp(5rem,14vw,14rem); }
.project-dentist .project-title h3 { font-size: clamp(4.7rem,12vw,12rem); }
.project-sillage .project-title h3 { font-size: clamp(5rem,13vw,13rem); letter-spacing: -.045em; }
.project-materia .project-title h3 { font-size: clamp(4.7rem,11.5vw,11rem); letter-spacing: -.055em; }
.project-line { width: fit-content; margin: 2rem auto 0; text-align: left; font: 400 clamp(1.1rem,1.8vw,1.7rem)/1.25 var(--display); font-style: italic; }
.project-bottom { display: grid; grid-template-columns: 1fr .6fr .4fr; gap: 3rem; align-items: end; padding-top: 1.2rem; border-top: 1px solid rgba(233,228,216,.45); }
.project-bottom > p { max-width: 30rem; margin: 0; font: 300 .68rem/1.75 var(--sans); }
.project-bottom ul { list-style: none; margin: 0; padding: 0; font: 400 .5rem/1.8 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.project-links { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; }
.project-links a { width: fit-content; padding-bottom: .35rem; border-bottom: 1px solid var(--ivory); font: 400 .52rem var(--mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.project-links a span { color: var(--bronze); }

.case-studies { padding-bottom: clamp(8rem,14vw,15rem); background: #ded9ce; color: var(--black); }
.case-studies .chapter-label { color: #67635c; border-color: rgba(9,9,8,.25); }
.case-intro { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(4rem,10vw,11rem); align-items: end; margin: clamp(5rem,9vw,9rem) 0 clamp(9rem,15vw,16rem); }
.case-intro h2 { margin: 0; font: 400 clamp(4.5rem,9vw,9.5rem)/.82 var(--display); letter-spacing: -.055em; }
.case-intro h2 em { color: #8a5132; font-weight: 400; }
.case-intro-copy > p { max-width: 25rem; margin: 0 0 3rem; font: 300 .76rem/1.9 var(--sans); color: #5f5b54; }
.case-intro-copy nav { display: flex; border-top: 1px solid rgba(9,9,8,.3); border-bottom: 1px solid rgba(9,9,8,.3); }
.case-intro-copy a { flex: 1; padding: 1rem 0; font: 400 .54rem var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.case-intro-copy a + a { padding-left: 1rem; border-left: 1px solid rgba(9,9,8,.3); }

.case-study { scroll-margin-top: 2rem; padding-top: clamp(5rem,8vw,8rem); border-top: 1px solid rgba(9,9,8,.42); }
.case-study + .case-study { margin-top: clamp(10rem,18vw,19rem); }
.case-header { display: flex; justify-content: space-between; align-items: center; font: 400 .53rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.case-header p { margin: 0; }
.case-header p:first-child { display: flex; align-items: center; gap: 1rem; }
.case-header p:first-child span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid currentColor; border-radius: 50%; }
.case-title { display: grid; grid-template-columns: 1.35fr .65fr; gap: 4rem; align-items: end; margin: clamp(4rem,7vw,7rem) 0; }
.case-title h3 { margin: 0; font: 500 clamp(8rem,19vw,19rem)/.67 var(--display); letter-spacing: -.075em; }
.case-fos .case-title h3 { letter-spacing: -.11em; }
.case-fos .case-title h3 span { color: #2450dd; }
.case-kinu .case-title h3 { font-size: clamp(7rem,17vw,17rem); }
.case-kinu .case-title h3 small { margin-left: 1.4rem; font: 400 clamp(.85rem,1.4vw,1.3rem)/1 serif; letter-spacing: .25em; vertical-align: top; }
.case-sillage .case-title h3 { font-size: clamp(5.6rem,12vw,12rem); letter-spacing: -.055em; }
.case-sillage .case-title h3 small { display: inline-block; margin-left: 1rem; font: 400 clamp(.8rem,1.25vw,1.2rem)/1 var(--mono); letter-spacing: .12em; vertical-align: top; }
.case-title > p { max-width: 24rem; margin: 0 0 .7rem; font: 400 clamp(1.3rem,2.1vw,2rem)/1.25 var(--display); font-style: italic; }
.case-visual { margin: 0; position: relative; background: var(--black); overflow: hidden; }
.case-visual img { width: 100%; height: min(68vw,900px); object-fit: cover; }
.case-fos .case-visual img { object-position: center; }
.case-kinu .case-visual img { object-position: 63% 70%; filter: saturate(.7) contrast(1.03); }
.case-sillage .case-visual img { object-position: 50% 55%; filter: saturate(.72) contrast(1.04); }
.case-visual figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 3rem 2rem 1.4rem; color: white; background: linear-gradient(transparent,rgba(0,0,0,.66)); font: 400 .5rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.case-overview { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(5rem,11vw,13rem); margin: clamp(6rem,10vw,10rem) 0; }
.case-label { margin: 0 0 2rem; font: 500 .52rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #716c64; }
.case-lead > p:last-child { max-width: 49rem; margin: 0; font: 400 clamp(2rem,4vw,4rem)/1.16 var(--display); letter-spacing: -.025em; }
.case-facts { margin: 0; align-self: end; border-top: 1px solid rgba(9,9,8,.36); }
.case-facts div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(9,9,8,.2); }
.case-facts dt { font: 500 .5rem var(--mono); text-transform: uppercase; color: #777168; }
.case-facts dd { margin: 0; font: 400 .63rem/1.6 var(--sans); }
.case-problem-solution { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(9,9,8,.4); border-bottom: 1px solid rgba(9,9,8,.4); }
.case-problem-solution section { min-height: 420px; padding: clamp(3rem,5vw,5rem) clamp(2rem,5vw,5rem) 3rem 0; }
.case-problem-solution section + section { padding-left: clamp(2rem,5vw,5rem); border-left: 1px solid rgba(9,9,8,.4); }
.case-problem-solution h4 { max-width: 30rem; margin: 0 0 3rem; font: 400 clamp(2.2rem,4vw,4rem)/1.05 var(--display); letter-spacing: -.025em; }
.case-problem-solution section > p:last-child { max-width: 31rem; margin: 0; font: 300 .7rem/1.9 var(--sans); color: #58544d; }
.case-system { min-height: 420px; margin: clamp(7rem,12vw,12rem) 0; padding: clamp(2rem,4vw,4rem); display: grid; grid-template-columns: 1fr .75fr .65fr; gap: 4rem; align-items: end; }
.case-system-fos { background: #1e48d7; color: #f1eadc; }
.case-system-kinu { background: #11110f; color: #f3f1eb; }
.case-system-sillage { background: #24251f; color: #eee8dc; }
.case-palette { align-self: start; display: grid; grid-template-columns: repeat(2,minmax(100px,1fr)); gap: 1.2rem; }
.case-palette span { display: flex; align-items: center; gap: .7rem; font: 400 .48rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.case-palette span::before { content: ""; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; border-radius: 50%; background: var(--swatch); border: 1px solid rgba(255,255,255,.35); }
.case-type { display: flex; flex-direction: column; gap: .5rem; }
.case-type span { font: 400 clamp(2rem,3vw,3.2rem) var(--display); }
.case-type small { font: 400 .5rem var(--mono); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.case-system > p { margin: 0; font: 500 clamp(2.1rem,4vw,4rem)/.92 var(--display); letter-spacing: -.025em; }
.case-system-kinu > p { font-family: serif; font-weight: 400; line-height: 1.35; letter-spacing: .12em; }
.case-system-sillage .case-type span, .case-system-sillage > p { font-family: "Italiana",serif; font-weight: 400; }
.case-system-sillage > p { line-height: .88; }
.case-system-sillage > p em { color: #b7794f; font-weight: 400; }
.case-decisions { display: grid; grid-template-columns: .32fr 1fr; gap: clamp(3rem,8vw,9rem); }
.case-decisions ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(9,9,8,.4); }
.case-decisions li { min-height: 180px; display: grid; grid-template-columns: 3rem 1fr; gap: 2rem; align-items: center; border-bottom: 1px solid rgba(9,9,8,.3); }
.case-decisions li > span { align-self: start; padding-top: 3rem; font: 400 .5rem var(--mono); }
.case-decisions h4 { margin: 0 0 .7rem; font: 400 clamp(1.8rem,3vw,3rem) var(--display); }
.case-decisions li p { max-width: 38rem; margin: 0; font: 300 .66rem/1.8 var(--sans); color: #5d5951; }
.case-outcome { margin-top: clamp(7rem,12vw,12rem); padding: clamp(3rem,5vw,5rem); display: grid; grid-template-columns: 1fr auto; gap: 4rem; align-items: end; background: #0b0b0a; color: var(--ivory); }
.case-outcome > div > p:last-child { max-width: 53rem; margin: 0; font: 400 clamp(1.7rem,3.2vw,3.1rem)/1.2 var(--display); }
.case-outcome .case-label { color: #98938a; }
.case-outcome a { white-space: nowrap; padding-bottom: .5rem; border-bottom: 1px solid; font: 400 .53rem var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.case-outcome a span { color: var(--bronze); }

.collateral-showcase { background: var(--black); }
.collateral-intro { color: var(--ivory); }
.collateral-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(4rem,10vw,11rem); align-items: end; margin: clamp(5rem,9vw,9rem) 0; }
.collateral-heading h2 { margin: 0; font: 400 clamp(4.5rem,9vw,9.5rem)/.82 var(--display); letter-spacing: -.055em; }
.collateral-heading h2 em { color: var(--bronze); font-weight: 400; }
.collateral-heading > div p { max-width: 25rem; margin: 0 0 2.5rem; font: 300 .75rem/1.9 var(--sans); color: #bbb7ae; }
.collateral-heading > div a { display: inline-block; padding-bottom: .4rem; border-bottom: 1px solid; font: 400 .53rem var(--mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.collateral-heading > div a span { color: var(--bronze); }
.collateral-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.collateral-services li { min-height: 120px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 clamp(1.2rem,2vw,2rem) var(--display); }
.collateral-services li span { font: 400 .48rem var(--mono); color: var(--bronze); }

.collateral-brand { scroll-margin-top: 1rem; padding: clamp(7rem,11vw,11rem) var(--gutter); overflow: hidden; }
.collateral-fos { background: #d8d0c0; color: #1d211c; }
.collateral-kinu { background: #edeae2; color: #11110f; }
.collateral-brand-header { display: grid; grid-template-columns: .35fr 1fr .55fr; gap: clamp(2rem,6vw,7rem); align-items: end; margin-bottom: clamp(6rem,11vw,11rem); }
.collateral-brand-header > div { align-self: start; display: flex; flex-direction: column; gap: .7rem; font: 500 .51rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.collateral-brand-header > div span:first-child { color: #716c64; }
.collateral-brand-header h3 { margin: 0; font: 400 clamp(4.2rem,8.5vw,9rem)/.84 var(--display); letter-spacing: -.05em; }
.collateral-brand-header h3 em { font-weight: 400; }
.collateral-fos .collateral-brand-header h3 em { color: #1e48d7; }
.collateral-kinu .collateral-brand-header h3 em { color: #bd3d2b; }
.collateral-brand-header > p { max-width: 25rem; margin: 0 0 .6rem; font: 300 .7rem/1.9 var(--sans); color: #5a5650; }
.collateral-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(3rem,7vw,8rem) clamp(1.5rem,3vw,3rem); align-items: start; }
.collateral-piece { margin: 0; }
.piece-stage { position: relative; overflow: hidden; display: grid; place-items: center; }
.piece-stage > img { width: 100%; height: 100%; object-fit: contain; }
.collateral-piece figcaption { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1rem; border-top: 1px solid rgba(17,17,15,.3); font: 500 .49rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.collateral-piece figcaption span:last-child { color: #6f6a62; text-align: right; }
.piece-print { grid-row: span 2; }
.piece-print .piece-stage { min-height: 760px; padding: clamp(2rem,5vw,5rem); background: #b9b1a3; }
.piece-print .piece-stage img { width: min(72%,560px); height: auto; filter: drop-shadow(0 28px 28px rgba(0,0,0,.2)); transform: rotate(-1.6deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.piece-print:hover .piece-stage img { transform: rotate(0) translateY(-6px); }
.collateral-fos .piece-board .piece-stage { background: #1e48d7; }
.collateral-kinu .piece-board .piece-stage { background: #11110f; }
.piece-board .piece-stage { min-height: 430px; padding: clamp(1.2rem,2vw,2rem); }
.piece-board .piece-stage img { filter: drop-shadow(0 18px 22px rgba(0,0,0,.22)); }
.piece-cards { margin-top: clamp(2rem,6vw,7rem); }
.card-stage { min-height: 510px; background: #aaa295; }
.collateral-kinu .card-stage { background: #c9c4ba; }
.card-stage img { position: absolute; width: min(67%,560px); height: auto; filter: drop-shadow(0 22px 24px rgba(0,0,0,.22)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card-stage img:first-child { transform: translate(-13%,-14%) rotate(-5deg); }
.card-stage img:last-child { transform: translate(14%,18%) rotate(4deg); }
.piece-cards:hover .card-stage img:first-child { transform: translate(-17%,-18%) rotate(-7deg); }
.piece-cards:hover .card-stage img:last-child { transform: translate(18%,22%) rotate(6deg); }
.piece-social { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: clamp(1.5rem,4vw,4rem); margin-top: clamp(4rem,9vw,10rem); }
.piece-social .piece-stage { min-height: 780px; padding: clamp(3rem,7vw,8rem); background: #23231f; }
.collateral-kinu .piece-social .piece-stage { background: #d5d0c6; }
.piece-social .piece-stage img { width: min(60%,420px); height: auto; filter: drop-shadow(0 28px 30px rgba(0,0,0,.26)); }
.piece-social figcaption { align-self: end; margin-bottom: 1rem; }
.collateral-downloads { margin-top: clamp(7rem,12vw,12rem); padding: 2rem 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; border-top: 1px solid rgba(17,17,15,.36); border-bottom: 1px solid rgba(17,17,15,.36); }
.collateral-downloads p { margin: 0 0 .6rem; font: 400 1.5rem var(--display); }
.collateral-downloads > div span { font: 400 .5rem/1.6 var(--mono); text-transform: uppercase; color: #6f6a62; }
.collateral-downloads nav { display: flex; justify-content: flex-end; gap: clamp(1rem,3vw,3rem); }
.collateral-downloads a { padding-bottom: .4rem; border-bottom: 1px solid; font: 500 .49rem var(--mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; }
.collateral-fos .collateral-downloads a span { color: #1e48d7; }
.collateral-kinu .collateral-downloads a span { color: #bd3d2b; }

.services { background: var(--black-soft); }
.services-intro { display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 5rem; margin: clamp(5rem,9vw,9rem) 0; }
.services-intro > p { max-width: 22rem; font: 300 .72rem/1.8 var(--sans); color: #b6b2aa; }
.services-list { border-top: 1px solid var(--line); }
.service { min-height: 175px; display: grid; grid-template-columns: .15fr .75fr 1fr auto; gap: 3rem; align-items: center; border-bottom: 1px solid var(--line); transition: color .3s, padding .3s; }
.service:hover { color: var(--bronze); padding: 0 1.5rem; }
.service > span { font: 400 .5rem var(--mono); color: var(--smoke); }
.service h3 { margin: 0; font: 400 clamp(2.3rem,4vw,4.2rem) var(--display); }
.service p { max-width: 30rem; font: 300 .67rem/1.75 var(--sans); color: #a8a49c; }
.service i { font-style: normal; }

.packages { scroll-margin-top: 2rem; margin-top: clamp(10rem,17vw,18rem); }
.packages-header > div:first-child { display: flex; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px solid var(--line); font: 400 .52rem var(--mono); text-transform: uppercase; letter-spacing: .11em; color: var(--smoke); }
.packages-header { display: grid; grid-template-columns: 1.35fr .65fr; gap: 0 clamp(4rem,10vw,11rem); align-items: end; }
.packages-header > div:first-child { grid-column: 1 / -1; }
.packages-header h3 { margin: clamp(5rem,9vw,9rem) 0; font: 400 clamp(4.5rem,9vw,9.5rem)/.82 var(--display); letter-spacing: -.055em; }
.packages-header h3 em { color: var(--bronze); font-weight: 400; }
.packages-header > p { max-width: 25rem; margin: 0 0 clamp(5rem,9vw,9rem); font: 300 .72rem/1.9 var(--sans); color: #b6b2aa; }
.package-list { border-top: 1px solid rgba(233,228,216,.36); }
.package { position: relative; min-height: 560px; display: grid; grid-template-columns: .85fr .5fr 1fr; gap: clamp(2rem,5vw,6rem); padding: clamp(3rem,5vw,5rem) 0 2rem; border-bottom: 1px solid rgba(233,228,216,.36); }
.package-featured { margin: 0 calc(var(--gutter) * -.45); padding-left: calc(var(--gutter) * .45); padding-right: calc(var(--gutter) * .45); background: #090908; border: 1px solid rgba(183,121,79,.7); }
.package-marker { position: absolute; top: 0; right: 0; padding: .75rem 1.2rem; background: var(--bronze); color: var(--black); font: 500 .48rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.package-name { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.2rem; align-content: start; }
.package-name > span { padding-top: .7rem; font: 400 .5rem var(--mono); color: var(--bronze); }
.package-name h4 { margin: 0 0 1.5rem; font: 400 clamp(2.3rem,4vw,4rem)/1 var(--display); letter-spacing: -.025em; }
.package-name p { max-width: 22rem; margin: 0; font: 300 .64rem/1.8 var(--sans); color: #aaa69e; }
.package-price { display: flex; flex-direction: column; align-items: flex-start; }
.package-price small { font: 400 .48rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); }
.package-price strong { margin: auto 0 .8rem; font: 400 clamp(3.4rem,5.8vw,6rem)/.9 var(--display); letter-spacing: -.045em; white-space: nowrap; }
.package-price span { font: 400 .45rem var(--mono); text-transform: uppercase; color: var(--smoke); }
.package-details { padding-top: .5rem; }
.package-best { margin: 0 0 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font: 500 .48rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--smoke); }
.package-best span { display: block; margin-top: .6rem; color: var(--ivory); line-height: 1.5; }
.package-details ul { list-style: none; margin: 0; padding: 0; }
.package-details li { position: relative; padding: .72rem 0 .72rem 1.5rem; border-bottom: 1px solid rgba(233,228,216,.12); font: 300 .62rem/1.6 var(--sans); color: #c2beb5; }
.package-details li::before { content: "＋"; position: absolute; left: 0; color: var(--bronze); }
.package-footer { grid-column: 1 / -1; align-self: end; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.package-footer > span { font: 400 .48rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--smoke); }
.package-footer a { padding-bottom: .4rem; border-bottom: 1px solid; font: 500 .5rem var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.package-footer a i { color: var(--bronze); font-style: normal; }
.package-extras { margin-top: clamp(8rem,13vw,13rem); display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(4rem,10vw,11rem); }
.extras-heading p { margin: 0 0 1rem; font: 400 clamp(2.5rem,4.5vw,4.5rem)/1 var(--display); }
.extras-heading span { font: 300 .62rem var(--sans); color: var(--smoke); }
.package-extras dl { margin: 0; border-top: 1px solid rgba(233,228,216,.36); }
.package-extras dl div { display: grid; grid-template-columns: 1fr auto; gap: 2rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(233,228,216,.22); }
.package-extras dt { font: 300 .65rem var(--sans); }
.package-extras dd { margin: 0; font: 500 .53rem var(--mono); text-transform: uppercase; color: var(--bronze); }
.package-notes { margin-top: clamp(6rem,10vw,10rem); padding: clamp(2rem,4vw,4rem); display: grid; grid-template-columns: .35fr 1fr; gap: clamp(3rem,8vw,9rem); background: var(--ivory); color: var(--black); }
.package-notes > p { margin: 0; font: 400 1.5rem var(--display); }
.package-notes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; counter-reset: notes; }
.package-notes li { counter-increment: notes; position: relative; padding-left: 2rem; font: 300 .6rem/1.75 var(--sans); color: #4e4b46; }
.package-notes li::before { content: "0" counter(notes); position: absolute; left: 0; top: .08rem; font: 500 .45rem var(--mono); color: #8a5132; }
.project-terms { margin-top: clamp(8rem,13vw,13rem); }
.project-terms-header { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem,8vw,9rem); align-items: end; margin-bottom: clamp(3rem,5vw,5rem); }
.project-terms-header > div > span { display: block; margin-bottom: 1.2rem; font: 500 .48rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--bronze); }
.project-terms-header h4 { max-width: 34rem; margin: 0; font: 400 clamp(2.8rem,5vw,5.2rem)/.95 var(--display); letter-spacing: -.035em; }
.project-terms-header > p { max-width: 34rem; margin: 0 0 .35rem; font: 300 .68rem/1.85 var(--sans); color: #aaa69e; }
.project-terms-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(233,228,216,.36); border-left: 1px solid rgba(233,228,216,.36); }
.project-term { min-height: 430px; padding: clamp(1.8rem,3vw,3rem); display: flex; flex-direction: column; border-right: 1px solid rgba(233,228,216,.36); border-bottom: 1px solid rgba(233,228,216,.36); }
.project-term > span { font: 500 .48rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--bronze); }
.project-term h5 { margin: 2rem 0 clamp(2.5rem,4vw,4rem); font: 400 clamp(1.8rem,2.7vw,2.8rem)/1.05 var(--display); letter-spacing: -.02em; }
.project-term ul { list-style: none; margin: auto 0 0; padding: 0; }
.project-term li { position: relative; padding: .85rem 0 .85rem 1.25rem; border-top: 1px solid rgba(233,228,216,.13); font: 300 .58rem/1.7 var(--sans); color: #b9b5ad; }
.project-term li::before { content: "—"; position: absolute; left: 0; color: var(--bronze); }
.project-terms-note { margin: 0; padding: 1.5rem 0; display: grid; grid-template-columns: .75fr 2.25fr; gap: 2rem; border-bottom: 1px solid rgba(233,228,216,.36); font: 300 .6rem/1.7 var(--sans); color: #a8a49c; }
.project-terms-note span { font: 500 .47rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ivory); }

.process { background: var(--bronze); color: var(--black); }
.process .chapter-label { color: rgba(9,9,8,.67); border-color: rgba(9,9,8,.35); }
.process-intro { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(4rem,10vw,11rem); align-items: end; margin: clamp(5rem,9vw,9rem) 0; }
.process-intro h2 { margin: 0; font: 400 clamp(4.5rem,9vw,9.5rem)/.82 var(--display); letter-spacing: -.055em; }
.process-intro h2 em { color: var(--ivory); font-weight: 400; }
.process-intro-copy p { max-width: 27rem; margin: 0 0 1.4rem; font: 300 .73rem/1.9 var(--sans); }
.process-intro-copy p:first-child { font: 400 clamp(1.2rem,1.9vw,1.8rem)/1.35 var(--display); }
.process-filter { margin-bottom: clamp(8rem,13vw,13rem); padding: clamp(2rem,4vw,4rem); background: var(--black); color: var(--ivory); }
.process-filter > p { margin: 0 0 clamp(3rem,6vw,6rem); font: 400 .52rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--smoke); }
.process-filter ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); }
.process-filter li { min-height: 190px; padding: 1.4rem 1.2rem 1rem 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.process-filter li + li { padding-left: 1.2rem; }
.process-filter li:last-child { border-right: 0; }
.process-filter li span { font: 400 .48rem var(--mono); color: var(--bronze); }
.process-filter li strong { margin-top: auto; font: 400 clamp(1.5rem,2.4vw,2.4rem) var(--display); }
.process-filter li small { min-height: 2.8rem; margin-top: .65rem; font: 300 .55rem/1.55 var(--sans); color: #aaa69d; }
.process-steps { border-top: 1px solid rgba(9,9,8,.42); }
.process-step { min-height: 410px; display: grid; grid-template-columns: .17fr .83fr 1fr; gap: clamp(2rem,5vw,6rem); align-items: start; padding: clamp(3.5rem,6vw,6rem) 0; border-bottom: 1px solid rgba(9,9,8,.42); }
.process-number { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.process-number span { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px solid var(--black); border-radius: 50%; font: 500 .52rem var(--mono); }
.process-number i { width: 1px; flex: 1; min-height: 5rem; background: rgba(9,9,8,.35); }
.process-step-title > p { margin: .9rem 0 2.5rem; font: 500 .5rem var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.process-step-title h3 { max-width: 38rem; margin: 0; font: 400 clamp(2.5rem,4.7vw,4.8rem)/1.03 var(--display); letter-spacing: -.035em; }
.process-step-copy { padding-top: .7rem; }
.process-step-copy > p { max-width: 34rem; margin: 0 0 clamp(3rem,6vw,6rem); font: 300 .72rem/1.95 var(--sans); }
.process-step-copy dl { margin: 0; border-top: 1px solid rgba(9,9,8,.32); }
.process-step-copy dl div { display: grid; grid-template-columns: .55fr 1.45fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(9,9,8,.2); }
.process-step-copy dt { font: 500 .47rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(9,9,8,.64); }
.process-step-copy dd { margin: 0; font: 500 .52rem/1.5 var(--mono); text-transform: uppercase; }
.process-belief { margin: clamp(9rem,15vw,16rem) 0 0; padding: clamp(4rem,7vw,7rem); background: var(--black); color: var(--ivory); }
.process-belief p { max-width: 65rem; margin: 0; font: 400 clamp(3rem,6.6vw,7rem)/.98 var(--display); letter-spacing: -.04em; }
.process-belief footer { margin-top: 4rem; font: 400 .5rem var(--mono); text-transform: uppercase; letter-spacing: .13em; color: var(--bronze); }

.about { background: var(--ivory); color: var(--black); }
.about .chapter-label { color: #69665f; border-color: rgba(9,9,8,.25); }
.about-grid { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: clamp(4rem,10vw,11rem); align-items: start; margin-top: clamp(5rem,9vw,9rem); }
.about-portrait { position: sticky; top: 2rem; margin: 0; }
.about-portrait-frame { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--black); }
.about-portrait-frame::after { content: ""; position: absolute; inset: 1.2rem; border: 1px solid rgba(233,228,216,.28); pointer-events: none; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.82) contrast(1.03); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.about-portrait:hover img { transform: scale(1.018); filter: saturate(.95) contrast(1.02); }
.about-portrait-index { position: absolute; z-index: 1; right: 2rem; bottom: 2rem; padding: .5rem .65rem; background: var(--ivory); color: var(--black); font: 500 .45rem var(--mono); letter-spacing: .1em; }
.about-portrait figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(9,9,8,.3); font: 500 .46rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #65615a; }
.about-kicker { margin: 0 0 2.5rem; font: 500 .5rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #766f66; }
.about h2 { font-size: clamp(4rem,7vw,7.5rem); }
.about h2 em { color: var(--bronze); font-weight: 400; }
.about-lead { max-width: 45rem; margin: 4rem 0 2.5rem; font: 400 clamp(1.3rem,2.3vw,2.25rem)/1.35 var(--display); }
.about-story { max-width: 45rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(2rem,4vw,4rem); }
.about-story p { margin: 0; font: 300 .69rem/1.9 var(--sans); color: #57544e; }
.about-story p:first-child { grid-column: 1 / -1; max-width: 38rem; font-size: .76rem; color: #393733; }
.about-capabilities { margin-top: 4rem; padding: 1.5rem 0; display: grid; grid-template-columns: .45fr 1.55fr; gap: 2rem; border-top: 1px solid rgba(9,9,8,.3); border-bottom: 1px solid rgba(9,9,8,.3); }
.about-capabilities > p { margin: 0; font: 500 .48rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #77736b; }
.about-capabilities ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 2rem; }
.about-capabilities li { position: relative; padding-left: 1.2rem; font: 400 .58rem var(--mono); text-transform: uppercase; }
.about-capabilities li::before { content: "↗"; position: absolute; left: 0; color: var(--bronze); }
.about-meta { margin: 3.5rem 0 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem 2rem; }
.about-meta div { display: flex; flex-direction: column; gap: .6rem; }
.about-meta dt { font: 400 .5rem var(--mono); text-transform: uppercase; color: #77736b; }
.about-meta dd { margin: 0; font: 400 .57rem/1.5 var(--mono); }
.about-meta dd i { display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: #5c8d4c; }
.about-statement { margin: clamp(8rem,13vw,14rem) 0 0; padding: clamp(3rem,6vw,6rem); background: var(--black); color: var(--ivory); }
.about-statement p { max-width: 72rem; margin: 0; font: 400 clamp(2.8rem,6.4vw,6.8rem)/.98 var(--display); letter-spacing: -.04em; }
.about-statement footer { margin-top: 4rem; font: 500 .48rem var(--mono); text-transform: uppercase; letter-spacing: .13em; color: var(--bronze); }

.contact { min-height: 100svh; padding: clamp(6rem,9vw,9rem) var(--gutter) 3rem; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; background: var(--black); }
.contact-light { position: absolute; width: 65vw; height: 65vw; border-radius: 50%; background: radial-gradient(circle,rgba(183,121,79,.25),rgba(183,121,79,.06) 34%,transparent 68%); left: 50%; top: 45%; transform: translate(-50%,-50%); pointer-events: none; }
.contact-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr); gap: clamp(4rem,8vw,9rem); align-items: center; padding: clamp(5rem,9vw,9rem) 0; }
.contact-content { align-self: center; text-align: left; position: relative; z-index: 1; }
.contact-content > p { font: 400 .56rem var(--mono); text-transform: uppercase; letter-spacing: .15em; }
.contact h2 { margin: 2.5rem 0; font: 400 clamp(4.5rem,8vw,8.2rem)/.82 var(--display); letter-spacing: -.055em; }
.contact h2 em { color: var(--bronze); font-weight: 400; }
.contact-email { display: inline-block; font: 400 clamp(1rem,1.6vw,1.45rem) var(--display); text-underline-offset: .45rem; }
.contact-email span { color: var(--bronze); }
.contact-availability { display: flex; align-items: center; gap: .65rem; margin-top: 1.6rem; color: var(--smoke); }
.contact-availability i { width: .48rem; height: .48rem; border-radius: 50%; background: #6d995d; box-shadow: 0 0 0 .28rem rgba(109,153,93,.1); }
.enquiry-form { border: 1px solid var(--line); padding: clamp(1.5rem,3vw,2.7rem); background: rgba(17,17,15,.72); backdrop-filter: blur(12px); }
.enquiry-heading { display: grid; grid-template-columns: .6fr 1.4fr; gap: 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.enquiry-heading span, .enquiry-form label > span { font: 400 .48rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.enquiry-heading span { color: var(--bronze); }
.enquiry-heading p { margin: 0; font: 300 .62rem/1.7 var(--sans); color: #aaa69d; }
.enquiry-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; padding: 2rem 0; }
.enquiry-form label { display: flex; flex-direction: column; gap: .75rem; }
.enquiry-form label > span { color: #aaa69d; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid rgba(233,228,216,.3); border-radius: 0; padding: .2rem 0 .7rem; background: transparent; color: var(--ivory); font: 300 .72rem/1.5 var(--sans); appearance: none; }
.enquiry-form select { cursor: pointer; background-image: linear-gradient(45deg,transparent 50%,var(--bronze) 50%),linear-gradient(135deg,var(--bronze) 50%,transparent 50%); background-position: calc(100% - 6px) calc(50% - 2px),100% calc(50% - 2px); background-size: 6px 6px,6px 6px; background-repeat: no-repeat; padding-right: 1.2rem; }
.enquiry-form select option { background: var(--black); color: var(--ivory); }
.enquiry-form textarea { min-height: 7rem; resize: vertical; }
.enquiry-form textarea::placeholder { color: #6f6b64; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { outline: 0; border-color: var(--bronze); }
.enquiry-message { grid-column: 1 / -1; }
.enquiry-submit { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.enquiry-submit button { border: 1px solid var(--bronze); padding: .9rem 1.1rem; background: var(--bronze); color: var(--black); cursor: pointer; font: 500 .52rem var(--mono); text-transform: uppercase; letter-spacing: .08em; transition: background .25s,color .25s; }
.enquiry-submit button:hover { background: transparent; color: var(--ivory); }
.enquiry-submit p { max-width: 12rem; margin: 0; text-align: right; font: 300 .54rem/1.55 var(--sans); color: var(--smoke); }
.contact-footer { display: grid; grid-template-columns: 1fr 1fr auto; border-top: 1px solid var(--line); padding-top: 1rem; font: 400 .5rem var(--mono); text-transform: uppercase; color: var(--smoke); }
.contact-footer span:nth-child(2) { text-align: center; }

.site-footer { min-height: 230px; padding: 3rem var(--gutter); display: grid; grid-template-columns: 1.2fr 1fr .8fr auto; gap: 3rem; background: #050504; border-top: 1px solid var(--line); font: 400 .5rem/1.8 var(--mono); text-transform: uppercase; color: var(--smoke); }
.site-footer > a { font: 400 1.2rem var(--display); color: var(--ivory); text-decoration: none; text-transform: uppercase; }
.site-footer > a em { color: var(--bronze); font-weight: 400; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-direction: column; }
.site-footer nav a { width: fit-content; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.2,.7,.18,1), transform 1s cubic-bezier(.2,.7,.18,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { height: 74px; grid-template-columns: 1fr auto; background: rgba(9,9,8,.92); }
  .header-contact { display: none; }
  .menu-toggle { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
  .menu-toggle i { width: 24px; height: 1px; background: currentColor; position: relative; transition: transform .25s; }
  .menu-toggle i::after { content: ""; position: absolute; left: 0; top: 6px; width: 100%; height: 1px; background: currentColor; transition: top .25s, transform .25s; }
  .menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i::after { top: 0; transform: rotate(-90deg); }
  .site-nav { display: none; position: fixed; inset: 74px 0 0; width: 100vw; background: var(--black); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
  .site-nav.is-open { display: flex; }
  .site-nav a { font: 400 3rem var(--display); text-transform: none; letter-spacing: 0; }
  .site-nav .nav-enquire { display: block; margin-top: 1rem; padding: .8rem 1.15rem; border: 1px solid var(--bronze); color: var(--bronze); font: 400 .6rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
  .site-nav .nav-enquire::after { display: none; }
  body.nav-open { overflow: hidden; }
  .hero { padding-top: 100px; }
  .hero-stills { grid-template-columns: 1fr .35fr; }
  .hero h1 { font-size: clamp(5.6rem,18vw,10rem); }
  .manifesto-grid, .services-intro { grid-template-columns: 1fr; }
  .manifesto-grid > p { margin-left: auto; }
  .project-bottom { grid-template-columns: 1fr auto; }
  .project-bottom ul { display: none; }
  .case-intro, .case-title, .case-overview { grid-template-columns: 1fr; }
  .case-intro-copy { width: min(100%,34rem); margin-left: auto; }
  .case-title > p { margin-left: auto; }
  .case-overview { gap: 5rem; }
  .case-facts { width: min(100%,40rem); margin-left: auto; }
  .case-problem-solution section { min-height: 380px; }
  .case-system { grid-template-columns: 1fr 1fr; }
  .case-system > p { grid-column: 2; }
  .case-decisions { grid-template-columns: 1fr; }
  .case-decisions > .case-label { margin-bottom: 0; }
  .case-outcome { grid-template-columns: 1fr; }
  .case-outcome a { width: fit-content; }
  .collateral-heading { grid-template-columns: 1fr; }
  .collateral-heading > div { width: min(100%,32rem); margin-left: auto; }
  .collateral-services { grid-template-columns: repeat(2,1fr); }
  .collateral-brand-header { grid-template-columns: .35fr 1.15fr; }
  .collateral-brand-header > p { grid-column: 2; }
  .piece-print .piece-stage { min-height: 610px; }
  .piece-board .piece-stage { min-height: 340px; }
  .card-stage { min-height: 400px; }
  .piece-social .piece-stage { min-height: 620px; }
  .collateral-downloads { grid-template-columns: 1fr; }
  .collateral-downloads nav { justify-content: flex-start; }
  .service { grid-template-columns: .15fr .85fr; padding: 2rem 0; }
  .service p { grid-column: 2; margin: 0; }
  .service i { display: none; }
  .packages-header { grid-template-columns: 1fr; }
  .packages-header > div:first-child { grid-column: 1; }
  .packages-header > p { width: min(100%,32rem); margin-left: auto; }
  .package { grid-template-columns: .8fr 1.2fr; }
  .package-name { grid-column: 1; grid-row: 1; }
  .package-price { grid-column: 1; grid-row: 2; }
  .package-price strong { margin: 3rem 0 .8rem; }
  .package-details { grid-column: 2; grid-row: 1 / 3; }
  .package-footer { grid-column: 1 / -1; }
  .package-extras { grid-template-columns: 1fr; }
  .extras-heading { max-width: 28rem; }
  .package-notes { grid-template-columns: 1fr; }
  .project-terms-header { grid-template-columns: 1fr; }
  .project-terms-header > p { margin-left: auto; }
  .project-terms-grid { grid-template-columns: 1fr; }
  .project-term { min-height: 0; }
  .process-intro { grid-template-columns: 1fr; }
  .process-intro-copy { width: min(100%,34rem); margin-left: auto; }
  .process-filter ol { grid-template-columns: repeat(3,1fr); }
  .process-filter li:nth-child(3) { border-right: 0; }
  .process-filter li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .process-step { grid-template-columns: .18fr .82fr; }
  .process-step-copy { grid-column: 2; }
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { position: relative; top: auto; width: 62%; }
  .about-copy { width: min(100%,48rem); margin-left: auto; }
  .contact-layout { grid-template-columns: 1fr; gap: 5rem; }
  .contact-content { max-width: 42rem; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .hero-topline { grid-template-columns: 1fr auto; }
  .hero-topline span:nth-child(2) { display: none; }
  .hero-stills { grid-template-columns: 1fr; }
  .hero-still-kinu { display: none; }
  .hero-still-fos img { object-position: 61% center; }
  .hero h1 { font-size: 23vw; }
  .hero-kicker { max-width: 17rem; margin-left: auto; margin-right: auto; line-height: 1.6; }
  .hero-footer { grid-template-columns: 1fr auto; gap: 2rem; }
  .hero-intro { grid-column: 1 / -1; }
  .hero-scroll { justify-self: start; }
  .frame-count { justify-self: end; }
  .manifesto h2, .services h2 { font-size: 17vw; }
  .film-project { min-height: 100svh; }
  .project-fos .project-bg img { object-position: 59% center; }
  .project-dentist .project-bg img { object-position: 55% 32%; }
  .project-sillage .project-bg img { object-position: 52% 50%; }
  .project-materia .project-bg img { object-position: 68% 50%; }
  .project-title h3 { font-size: 33vw; }
  .project-dentist .project-title h3 { font-size: 20vw; }
  .project-sillage .project-title h3 { font-size: 20vw; }
  .project-materia .project-title h3 { font-size: 18vw; }
  .project-line { font-size: 1.1rem; }
  .project-bottom { grid-template-columns: 1fr; gap: 1.5rem; }
  .project-links { justify-self: start; align-items: flex-start; }
  .case-intro { margin-bottom: 8rem; }
  .case-intro h2 { font-size: 19vw; }
  .case-intro-copy nav { flex-direction: column; }
  .case-intro-copy a + a { padding-left: 0; border-left: 0; border-top: 1px solid rgba(9,9,8,.3); }
  .case-header { align-items: flex-start; gap: 2rem; }
  .case-header p:last-child { text-align: right; }
  .case-title { gap: 2rem; margin: 4rem 0; }
  .case-title h3, .case-kinu .case-title h3 { font-size: 29vw; }
  .case-sillage .case-title h3 { font-size: 21vw; }
  .case-sillage .case-title h3 small { display: block; margin: 1.2rem 0 0 .5rem; }
  .case-kinu .case-title h3 small { display: block; margin: 1.2rem 0 0 .5rem; }
  .case-title > p { margin-left: 10%; }
  .case-visual img { height: 125vw; }
  .case-visual figcaption { padding: 3rem 1rem 1rem; }
  .case-visual figcaption span:last-child { display: none; }
  .case-lead > p:last-child { font-size: 8.5vw; }
  .case-facts { width: 100%; }
  .case-facts div { grid-template-columns: 1fr; gap: .5rem; }
  .case-problem-solution { grid-template-columns: 1fr; }
  .case-problem-solution section { min-height: 0; padding: 3rem 0 4rem; }
  .case-problem-solution section + section { padding-left: 0; border-left: 0; border-top: 1px solid rgba(9,9,8,.4); }
  .case-system { min-height: 560px; grid-template-columns: 1fr; gap: 3rem; align-items: end; padding: 1.5rem; }
  .case-system > p { grid-column: 1; }
  .case-palette { grid-template-columns: 1fr 1fr; }
  .case-decisions li { grid-template-columns: 2rem 1fr; gap: 1rem; padding: 2rem 0; }
  .case-decisions li > span { padding-top: .7rem; }
  .case-outcome { padding: 2.2rem 1.5rem; }
  .case-outcome > div > p:last-child { font-size: 7vw; }
  .collateral-heading h2 { font-size: 18vw; }
  .collateral-services { grid-template-columns: 1fr; }
  .collateral-services li { min-height: 92px; }
  .collateral-brand { padding-top: 6rem; padding-bottom: 6rem; }
  .collateral-brand-header { grid-template-columns: 1fr; gap: 2.5rem; }
  .collateral-brand-header > p { grid-column: 1; }
  .collateral-brand-header h3 { font-size: 17vw; }
  .collateral-grid { grid-template-columns: 1fr; gap: 4.5rem; }
  .piece-print { grid-row: auto; }
  .piece-print .piece-stage { min-height: 510px; padding: 2.5rem 1.5rem; }
  .piece-print .piece-stage img { width: 82%; }
  .piece-board .piece-stage { min-height: 245px; padding: 1rem; }
  .piece-cards { margin-top: 0; }
  .card-stage { min-height: 360px; }
  .card-stage img { width: 76%; }
  .piece-social { grid-column: auto; display: block; margin-top: 0; }
  .piece-social .piece-stage { min-height: 560px; padding: 3rem 1.5rem; }
  .piece-social .piece-stage img { width: 68%; }
  .piece-social figcaption { margin: 0; }
  .collateral-piece figcaption { margin-top: 0; padding-top: .9rem; }
  .collateral-downloads nav { flex-direction: column; align-items: flex-start; }
  .collateral-downloads a { width: fit-content; }
  .service { grid-template-columns: 2rem 1fr; gap: 1rem; }
  .service h3 { font-size: 2.5rem; }
  .packages-header > div:first-child { flex-direction: column; gap: .7rem; }
  .packages-header h3 { font-size: 18vw; }
  .package { min-height: 0; grid-template-columns: 1fr; gap: 3rem; padding: 4rem 0 2rem; }
  .package-featured { margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
  .package-name, .package-price, .package-details { grid-column: 1; grid-row: auto; }
  .package-price strong { margin: 2rem 0 .8rem; font-size: 16vw; }
  .package-footer { grid-column: 1; flex-direction: column; align-items: flex-start; }
  .package-extras dl div { grid-template-columns: 1fr; gap: .6rem; }
  .package-notes { padding: 2rem 1.5rem; }
  .package-notes ul { grid-template-columns: 1fr; }
  .project-terms-header h4 { font-size: 13vw; }
  .project-terms-header > p { margin-left: 0; }
  .project-term { padding: 2rem 1.5rem; }
  .project-term h5 { font-size: 2rem; }
  .project-terms-note { grid-template-columns: 1fr; gap: .8rem; }
  .process-intro h2 { font-size: 18vw; }
  .process-filter { padding: 1.5rem; }
  .process-filter ol { grid-template-columns: 1fr; }
  .process-filter li { min-height: 125px; padding: 1.2rem 0; border-right: 0; border-top: 1px solid var(--line); }
  .process-filter li:first-child { border-top: 0; }
  .process-filter li + li { padding-left: 0; }
  .process-filter li strong { margin-top: 2rem; }
  .process-filter li small { min-height: 0; }
  .process-step { min-height: 0; grid-template-columns: 1fr; gap: 2rem; padding: 4rem 0; }
  .process-number { height: auto; flex-direction: row; align-items: center; }
  .process-number span { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; }
  .process-number i { width: auto; height: 1px; min-height: 0; flex: 1; }
  .process-step-title > p { margin-top: 0; }
  .process-step-title h3 { font-size: 10vw; }
  .process-step-copy { grid-column: 1; padding-top: 0; }
  .process-step-copy > p { font-size: .68rem; }
  .process-step-copy dl div { grid-template-columns: 1fr; gap: .45rem; }
  .process-belief { padding: 3rem 1.5rem; }
  .process-belief p { font-size: 11vw; }
  .about-portrait { width: 100%; }
  .about-portrait figcaption { flex-direction: column; }
  .about h2 { font-size: 17vw; }
  .about-lead { margin-top: 3rem; }
  .about-story { grid-template-columns: 1fr; }
  .about-story p:first-child { grid-column: 1; }
  .about-capabilities { grid-template-columns: 1fr; }
  .about-capabilities ul { grid-template-columns: 1fr; }
  .about-meta { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-statement { padding: 3rem 1.5rem; }
  .about-statement p { font-size: 11vw; }
  .work-disclosure { grid-template-columns: 1fr; gap: 1rem; }
  .contact-layout { padding: 5rem 0; }
  .contact h2 { font-size: 18vw; }
  .contact-email { overflow-wrap: anywhere; }
  .enquiry-form { padding: 1.3rem; }
  .enquiry-heading, .enquiry-fields { grid-template-columns: 1fr; }
  .enquiry-heading { gap: .9rem; }
  .enquiry-message { grid-column: 1; }
  .enquiry-submit { align-items: flex-start; flex-direction: column; }
  .enquiry-submit p { max-width: none; text-align: left; }
  .contact-footer { grid-template-columns: 1fr; gap: .7rem; }
  .contact-footer span:nth-child(2) { text-align: left; }
  .site-footer { grid-template-columns: 1fr; min-height: 380px; }
}

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

@media (max-width: 900px) {
  .menu-toggle { min-width: 44px; min-height: 44px; justify-content: center; padding: .65rem; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; }
}