:root {
  --ink: #11100d;
  --paper: #f2efe6;
  --paper-deep: #e6e0d3;
  --acid: #d5ed9c;
  --blue: #5964ff;
  --coral: #ff6b4a;
  --muted: #656259;
  --line: rgba(17, 16, 13, 0.2);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", Consolas, monospace;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.012; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, textarea { font: inherit; }
button { color: inherit; }
::selection { color: var(--ink); background: var(--acid); }
:focus-visible { outline: 3px solid #819d46; outline-offset: 4px; }

.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 1000; padding: .75rem 1rem; color: var(--ink); background: var(--acid); transform: translateY(-200%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 200; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: var(--acid); }
.pointer-light { position: fixed; z-index: 99; width: 26rem; height: 26rem; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(200,255,61,.08), transparent 67%); transform: translate(-50%, -50%); transition: opacity .2s; }
body:hover .pointer-light { opacity: 1; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 6.5rem; padding: 0 var(--pad); color: var(--paper); border-bottom: 1px solid rgba(242,239,230,.24); }
.brand { display: inline-flex; align-items: center; gap: .85rem; width: max-content; }
.brand__letters { font-family: var(--sans); font-size: 1.55rem; font-weight: 700; }
.monogram { display: inline-flex; align-items: baseline; line-height: 1; letter-spacing: 0; }
.monogram > * { position: relative; }
.monogram > :nth-child(2) { z-index: 0; }
.monogram > :first-child { z-index: 1; margin-right: -.07em; }
.monogram > :last-child { z-index: 1; margin-left: -.1em; }
.brand__descriptor { padding-left: .85rem; border-left: 1px solid currentColor; font-family: var(--mono); font-size: .56rem; line-height: 1.3; text-transform: uppercase; }
.availability { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .03em; text-transform: uppercase; }
.availability span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .25rem rgba(200,255,61,.13); animation: pulse 2.4s infinite; }
.site-nav { justify-self: end; display: flex; gap: clamp(1.2rem, 2.5vw, 2.8rem); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; }
.site-nav a { position: relative; padding: .5rem 0; }
.site-nav a::after { content: ""; position: absolute; inset: auto 0 .15rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; }

.hero { position: relative; display: grid; gap: clamp(2rem, 4.5vh, 3.25rem); padding: 8.5rem var(--pad) clamp(2.5rem, 5vh, 4rem); color: var(--paper); background: var(--ink); }
.hero__meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem; padding-bottom: 1rem; color: rgba(242,239,230,.55); border-bottom: 1px solid rgba(242,239,230,.14); font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.hero__meta p { margin: 0; }
.hero__time { justify-self: end; }
.hero__time strong { margin-left: .5rem; color: var(--paper); font-weight: 400; }
.hero__lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); align-items: end; gap: clamp(2rem, 5vw, 6rem); }
.hero h1 { margin: 0; font-size: clamp(3.4rem, 7.4vw, 8.4rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.02; }
.hero h1 em { margin-right: .04em; color: var(--acid); font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.hero__aside { display: grid; justify-items: start; gap: 1.5rem; padding-bottom: .4rem; }
.hero__aside p { margin: 0; color: rgba(242,239,230,.68); font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.6; }
.pill-link { display: inline-flex; align-items: center; gap: .9rem; padding: .95rem 1.35rem; color: var(--ink); background: var(--acid); border-radius: 3rem; font-size: .9rem; font-weight: 600; transition: color .3s, background .3s; }
.pill-link span { transition: transform .3s; }
.pill-link:hover { color: var(--paper); background: #2a2924; }
.pill-link:hover span { transform: translate(2px, 2px); }
.hero-reel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.2vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.reel-card { display: grid; gap: .85rem; }
.reel-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #1d1c18; border-radius: .9rem; }
.reel-card__media > img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.reel-card:hover .reel-card__media > img, .reel-card:hover .mini-ui { transform: scale(1.035); }
.reel-card--homeos .reel-card__media { padding: 6% 7% 0; background: linear-gradient(135deg, #6677ff, #3538a8 55%, #1b1c38); }
.reel-card--homeos .reel-card__media > img { border-radius: .4rem .4rem 0 0; }
.reel-card__caption { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .65rem; row-gap: .2rem; padding: 0 .15rem; }
.reel-card__caption i { color: var(--acid); font-family: var(--mono); font-size: .6rem; font-style: normal; }
.reel-card__caption b { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.reel-card__caption small { margin-left: auto; white-space: nowrap; color: rgba(242,239,230,.5); font-family: var(--mono); font-size: .58rem; text-transform: uppercase; }
.mini-ui { position: absolute; inset: 0; display: grid; grid-template: auto 1fr / 20% 1fr; background: #f7f5f1; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.mini-ui__bar { grid-column: 1 / -1; display: flex; align-items: center; padding: .55rem .75rem; color: #f4f1e9; background: #242132; font-family: var(--mono); font-size: .5rem; }
.mini-ui__bar b { font-weight: 400; }
.mini-ui__bar i { width: .9rem; height: .9rem; margin-left: auto; border-radius: 50%; background: var(--acid); }
.mini-ui__side { display: grid; align-content: start; gap: .4rem; padding: .75rem .55rem; background: #1b1924; }
.mini-ui__side i { height: .55rem; border-radius: .15rem; background: #34304a; }
.mini-ui__side i:first-child { background: var(--acid); }
.mini-ui__canvas { position: relative; margin: .75rem; overflow: hidden; border-radius: .3rem; }
.mini-ui__canvas img { width: 100%; height: 100%; object-fit: cover; }
.mini-ui__canvas em { position: absolute; right: .6rem; bottom: .6rem; padding: .4rem .65rem; color: var(--ink); background: var(--acid); border-radius: 2rem; font-family: var(--mono); font-size: .5rem; font-style: normal; text-transform: uppercase; }

.ticker { --ticker-gap: clamp(1.25rem, 2.2vw, 2.25rem); padding: clamp(.95rem, 1.6vw, 1.5rem) 0; color: var(--ink); background: var(--acid); overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: none; }
.ticker__group { display: flex; flex-shrink: 0; align-items: center; gap: var(--ticker-gap); padding-right: var(--ticker-gap); }
.ticker span { font-size: clamp(.75rem, 1.2vw, 1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.ticker i { font-family: var(--serif); font-size: clamp(1rem, 1.8vw, 1.75rem); font-style: normal; line-height: 1; }
.section-pad { padding-left: var(--pad); padding-right: var(--pad); }
.section-label { display: flex; align-items: center; gap: .85rem; margin: 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.section-label span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid currentColor; border-radius: 50%; font-size: .54rem; }

.manifesto { padding-top: clamp(4.5rem, 7vw, 7rem); padding-bottom: clamp(4.5rem, 7vw, 7rem); }
.manifesto__copy { display: grid; grid-template-columns: 1fr 21rem; gap: clamp(3rem, 8vw, 9rem); align-items: end; margin-top: clamp(3rem, 5vw, 5rem); }
.manifesto h2 { max-width: 22ch; margin: 0; font-size: clamp(2.4rem, 4.5vw, 4.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.manifesto h2 em { font-family: var(--serif); font-weight: 400; }
.manifesto__aside { padding-bottom: .7rem; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.manifesto__aside p { margin: 0 0 1.25rem; }

.work { border-top: 1px solid var(--ink); }
.section-head { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; gap: 2rem; padding-top: 3rem; padding-bottom: 5rem; }
.section-head h2, .why__head h2, .capabilities__intro h2, .people__head h2 { margin: 5rem 0 0; font-size: clamp(2.8rem, 5.5vw, 6rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; }
.section-head h2 em, .why__head h2 em, .capabilities__intro h2 em, .people__head h2 em { font-family: var(--serif); font-weight: 400; }
.section-head > p:last-child { max-width: 18rem; margin: 0 0 .7rem; color: var(--muted); font-size: .86rem; line-height: 1.55; }

.case { overflow: hidden; }
.case__intro { display: grid; grid-template-columns: 1fr 1.7fr 1.2fr; gap: 2rem; align-items: end; padding-top: 2.3rem; padding-bottom: 2.3rem; color: var(--paper); background: var(--ink); border-top: 1px solid rgba(242,239,230,.25); }
.case__intro p { margin: 0; }
.case__number, .case__type { font-family: var(--mono); font-size: .57rem; letter-spacing: .04em; text-transform: uppercase; }
.case__type { margin-top: .55rem !important; color: rgba(242,239,230,.55); }
.case__intro h3, .case__intro h1 { margin: 0; font-family: var(--serif); font-size: clamp(3rem, 5.5vw, 6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }
.case__lede { max-width: 24rem; color: rgba(242,239,230,.72); font-size: clamp(.95rem, 1.4vw, 1.25rem); line-height: 1.55; }
.case__visual { position: relative; margin: 0; color: #fff; background: #1b2030; }
.case__visual--screen { padding: clamp(1.5rem, 6vw, 6rem) clamp(1rem, 7vw, 8rem) 0; background: linear-gradient(135deg, #6677ff, #3538a8 50%, #1b1c38); }
.case__visual--screen img { max-height: 52rem; object-fit: cover; object-position: top; border-radius: 0 0 .65rem .65rem; box-shadow: 0 2rem 5rem rgba(0,0,0,.35); }
.browser-chrome { display: flex; align-items: center; gap: .45rem; padding: .9rem 1rem; color: #9da4b5; background: #171a22; border-radius: .65rem .65rem 0 0; }
.browser-chrome span { width: .55rem; height: .55rem; border-radius: 50%; background: #434956; }
.browser-chrome span:first-child { background: var(--coral); }
.browser-chrome span:nth-child(2) { background: #f9c84a; }
.browser-chrome span:nth-child(3) { background: #56c875; }
.browser-chrome p { margin: 0 auto; font-family: var(--mono); font-size: .55rem; }
.case__visual figcaption, .manager-frame figcaption { padding: .8rem 0 1.1rem; font-family: var(--mono); font-size: .52rem; letter-spacing: .04em; text-transform: uppercase; }
.case__story { padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: clamp(3.5rem, 6vw, 6rem); }
.case__statement { display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; }
.case__statement > p, .eyebrow { font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.case__statement h4 { max-width: 20ch; margin: 0; font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.case__facts { display: grid; grid-template-columns: repeat(3, 1fr); width: 75%; margin: clamp(2.5rem, 4vw, 4rem) 0 clamp(2.5rem, 4vw, 4rem) 25%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case__facts dl { margin: 0; padding: 2rem; border-right: 1px solid var(--line); }
.case__facts dl:last-child { border-right: 0; }
.case__facts dt { font-family: var(--serif); font-size: clamp(3.6rem, 6vw, 6.5rem); letter-spacing: -.05em; line-height: 1; }
.case__facts dd { margin: .6rem 0 0; color: var(--muted); font-family: var(--mono); font-size: .58rem; text-transform: uppercase; }
.case__decision { display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; }
.case__decision p:last-child { max-width: 41rem; margin: 0; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.2; }
.case__details { margin: clamp(2.5rem, 4vw, 4rem) 0 0 25%; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.case__details summary { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 0; cursor: pointer; list-style: none; font-size: .76rem; font-weight: 700; text-transform: uppercase; }
.case__details summary::-webkit-details-marker { display: none; }
.case__details summary i { position: relative; width: 1.5rem; height: 1.5rem; }
.case__details summary i::before, .case__details summary i::after { content: ""; position: absolute; top: 50%; left: 25%; width: 50%; height: 1px; background: currentColor; transition: transform .3s; }
.case__details summary i::after { transform: rotate(90deg); }
.case__details[open] summary i::after { transform: rotate(0); }
.case__details > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 2rem 0 3.5rem; }
.case__details section > p:first-child { font-family: var(--mono); font-size: .55rem; letter-spacing: .05em; text-transform: uppercase; }
.case__details h5 { min-height: 5rem; margin: 1.4rem 0; font-size: 1.3rem; letter-spacing: -.035em; line-height: 1.15; }
.case__details section > p:last-child { color: var(--muted); font-size: .8rem; line-height: 1.65; }
.case__links { display: flex; align-items: center; gap: 2rem; margin: 3rem 0 0 25%; }
.case__links a { padding-bottom: .3rem; border-bottom: 1px solid; font-size: .74rem; font-weight: 700; text-transform: uppercase; }
.case__links a span { margin-left: .4rem; }
.case__private { color: var(--muted); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }
.case__links p { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: .56rem; }

.case--moof .case__intro { color: #2d211c; background: #f3eee4; border-color: #cfc2b2; }
.case--moof .case__type, .case--moof .case__lede { color: #74675c; }
.moof-gallery { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .5rem; background: #2d211c; }
.moof-gallery figure { margin: 0; overflow: hidden; }
.moof-gallery img { height: 100%; object-fit: cover; object-position: top; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.moof-gallery figure:hover img { transform: scale(1.025); }
.moof-gallery__lead { grid-column: 2 / 4; aspect-ratio: 3 / 2; }
.moof-gallery__phone { grid-column: 1; grid-row: 1 / 3; }
.moof-gallery figure:nth-child(2), .moof-gallery figure:nth-child(4) { aspect-ratio: 3 / 2; }
.vertical-note { position: absolute; right: .9rem; bottom: .9rem; margin: 0; padding: .5rem; color: #2d211c; background: #f3eee4; font-family: var(--mono); font-size: .5rem; text-transform: uppercase; writing-mode: vertical-rl; }

.case--mysos .case__intro { color: #fff; background: #13297a; border-color: #2f47a3; }
.case--mysos .case__type, .case--mysos .case__lede { color: rgba(255,255,255,.7); }
.case--mysos .case__number { color: #34d27b; }
.mysos-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .56fr); gap: clamp(.75rem, 1.6vw, 1.5rem); padding: clamp(1.25rem, 5vw, 5rem); background: radial-gradient(circle at 80% 10%, #2a57d8, transparent 55%), linear-gradient(160deg, #102266, #0b1745); }
.mysos-showcase figure { margin: 0; overflow: hidden; border-radius: .65rem; box-shadow: 0 1.5rem 3.5rem rgba(3,8,30,.45); }
.mysos-showcase img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; }
.mysos-showcase__site { grid-column: 1 / 3; }
.mysos-showcase__phone { grid-column: 3; grid-row: 1 / 3; align-self: center; border: .4rem solid #0a0f24; border-radius: 1.6rem !important; }
.mysos-showcase__phone img { aspect-ratio: 1 / 2; }
.mysos-showcase__tool img, .mysos-showcase__stories img { aspect-ratio: 16 / 9; }
.mysos-showcase .browser-chrome { padding: .6rem .8rem; border-radius: 0; }

.case--manager .case__intro { color: var(--ink); background: var(--acid); border-color: var(--ink); }
.case--manager .case__type, .case--manager .case__lede { color: rgba(17,16,13,.65); }
.manager-frame { margin: 0; padding: clamp(1rem, 6vw, 6rem) clamp(1rem, 6vw, 6rem) 0; color: #f5f2e9; background: #1a1830; }
.manager-ui { display: grid; grid-template: 3.3rem minmax(36rem, 48rem) / 13rem 1fr 17rem; max-width: 92rem; margin: 0 auto; color: #211f2c; background: #f5f2ed; border: 1px solid #4f4a66; border-radius: .7rem .7rem 0 0; overflow: hidden; box-shadow: 0 2rem 5rem rgba(0,0,0,.36); }
.manager-ui header { grid-column: 1 / 4; display: flex; align-items: center; gap: 2rem; padding: 0 1.2rem; color: #f3f0e8; background: #242132; border-bottom: 1px solid #454056; font-size: .65rem; }
.manager-ui header > span { margin-left: auto; color: #b5e77c; font-family: var(--mono); font-size: .5rem; text-transform: uppercase; }
.manager-ui header > span::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .4rem; border-radius: 50%; background: #9ce654; }
.manager-ui header i { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: #242132; background: var(--acid); font-size: .5rem; font-style: normal; }
.manager-ui aside { display: flex; flex-direction: column; gap: .45rem; padding: 1.4rem .8rem; background: #ebe7df; border-right: 1px solid #d3cec4; }
.manager-ui aside > p, .manager-ui > section > p { margin: 0 .55rem .8rem; color: #8b8692; font-family: var(--mono); font-size: .48rem; text-transform: uppercase; }
.manager-ui aside a { display: flex; align-items: center; gap: .55rem; padding: .6rem; border-radius: .35rem; font-size: .59rem; }
.manager-ui aside a.active { background: #d9d4ca; }
.manager-ui aside a span { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; color: #f4f1e9; background: #292534; border-radius: .25rem; font-family: var(--serif); font-size: .8rem; }
.manager-ui aside a i { width: .4rem; height: .4rem; margin-left: auto; border-radius: 50%; background: #7dc841; }
.manager-ui aside small { padding: .6rem; color: #6e6977; font-size: .5rem; }
.manager-ui > main { padding: 1rem; overflow: hidden; }
.manager-ui__toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.manager-ui__toolbar p { display: grid; gap: .2rem; margin: 0; font-size: .65rem; }
.manager-ui__toolbar p span { color: #85808b; font-family: var(--mono); font-size: .45rem; }
.manager-ui__toolbar button { margin-left: auto; padding: .65rem .85rem; border: 0; border-radius: .25rem; color: #f3f0e8; background: #5e52c6; font-size: .52rem; }
.manager-ui__preview { position: relative; height: calc(100% - 3.2rem); overflow: hidden; background: #eee8dc; border: 1px solid #d0cac0; border-radius: .35rem; }
.manager-ui__preview img { position: absolute; inset: auto 0 0; height: 52%; object-fit: cover; }
.manager-ui__preview > div { position: relative; z-index: 1; display: grid; place-items: center; height: 51%; padding: 2rem; text-align: center; }
.manager-ui__preview small { color: #7a6c61; font-family: var(--mono); font-size: .42rem; }
.manager-ui__preview strong { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 3rem); font-weight: 400; letter-spacing: -.06em; line-height: .9; }
.manager-ui__preview button { position: absolute; z-index: 2; top: 31%; left: 57%; padding: .35rem .5rem; color: #fff; background: #665bd1; border: 0; border-radius: .2rem; font-size: .42rem; }
.manager-ui > section { padding: 1.4rem 1rem; background: #fff; border-left: 1px solid #d3cec4; }
.manager-ui label { display: grid; gap: .5rem; margin-bottom: 1.3rem; font-size: .52rem; font-weight: 700; }
.manager-ui textarea { width: 100%; min-height: 5rem; padding: .65rem; resize: none; color: #5e5864; background: #f7f5f1; border: 1px solid #d7d2c9; border-radius: .25rem; font-family: var(--serif); font-size: .86rem; }
.color-input { display: flex; align-items: center; padding: .55rem; color: #77727d; background: #f7f5f1; border: 1px solid #d7d2c9; font-family: var(--mono); font-size: .48rem; }
.color-input i { width: 1rem; height: 1rem; margin-left: auto; border-radius: 50%; background: #2d211c; }
.color-input--image i { width: 1.6rem; border-radius: .2rem; background: url("./assets/projects/moof-photo.jpg") center / cover; }
.range { position: relative; height: 2px; margin: .7rem 0; background: #d5d0c7; }
.range::before { content: ""; display: block; width: 63%; height: 100%; background: #685ccd; }
.range i { position: absolute; top: 50%; left: 63%; width: .7rem; height: .7rem; border-radius: 50%; background: #685ccd; transform: translate(-50%,-50%); }
.manager-ui__status { display: flex; gap: .65rem; margin-top: 2rem; padding: .75rem; background: #eff7e8; border-radius: .3rem; }
.manager-ui__status > i { width: .55rem; height: .55rem; margin-top: .15rem; border-radius: 50%; background: #72bd3d; }
.manager-ui__status p { display: grid; gap: .25rem; margin: 0; font-size: .5rem; }
.manager-ui__status span { color: #75806e; font-size: .43rem; }

.why { padding-top: clamp(7rem, 12vw, 12rem); padding-bottom: clamp(7rem, 12vw, 12rem); color: var(--paper); background: var(--ink); }
.why__head { display: grid; grid-template-columns: 3fr 1fr; align-items: end; gap: 3rem; }
.why__head p { max-width: 22rem; margin-bottom: .7rem; color: rgba(242,239,230,.6); font-size: .86rem; line-height: 1.6; }
.why__list { margin: clamp(2.5rem, 4vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(242,239,230,.3); }
.why__list li { display: grid; grid-template-columns: .3fr 1fr 1fr; gap: 2rem; align-items: start; padding: 2rem 0; border-bottom: 1px solid rgba(242,239,230,.3); }
.why__list span { font-family: var(--mono); font-size: .56rem; }
.why__list h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; line-height: 1; }
.why__list p { max-width: 28rem; margin: 0; color: rgba(242,239,230,.6); font-size: .82rem; line-height: 1.65; }

.capabilities { color: var(--ink); background: var(--acid); }
.capabilities__intro { padding-top: clamp(6rem, 10vw, 10rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.capabilities__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.capabilities__grid article { min-height: 26rem; padding: 1.5rem; border-right: 1px solid var(--ink); }
.capabilities__grid article:last-child { border-right: 0; }
.capabilities__grid span { font-family: var(--mono); font-size: .55rem; }
.capabilities__grid h3 { margin: 5rem 0 2rem; font-family: var(--serif); font-size: clamp(3rem, 5vw, 5rem); font-weight: 400; letter-spacing: -.06em; }
.capabilities__grid p { font-family: var(--mono); font-size: .62rem; line-height: 2; text-transform: uppercase; }

.people { padding-top: clamp(7rem, 12vw, 12rem); padding-bottom: clamp(7rem, 12vw, 12rem); }
.people__head { display: grid; grid-template-columns: 3fr 1fr; align-items: end; gap: 3rem; }
.people__head p { margin-bottom: .5rem; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.people__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 4vw, 4rem); }
.person__portrait { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 1.3rem; overflow: hidden; background: var(--paper-deep); }
.person__portrait span { position: relative; z-index: 2; font-family: var(--serif); font-size: clamp(7rem, 16vw, 16rem); font-style: italic; }
.person__portrait i { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--acid); }
.person__portrait--two { color: var(--paper); background: #242b25; }
.person__portrait--two i { width: 115%; border: 1px solid rgba(255,255,255,.5); background: transparent; }
.person__portrait--three { background: var(--coral); }
.person__portrait--three i { width: 12%; height: 80%; border-radius: 0; background: var(--paper); transform: rotate(35deg); }
.person > p { margin: 0 0 .5rem; font-family: var(--mono); font-size: .52rem; text-transform: uppercase; }
.person h3 { margin: 0 0 .4rem; font-size: 1.2rem; letter-spacing: -.04em; }
.person > span { color: var(--muted); font-size: .72rem; }

.contact { color: var(--paper); background: #242b25; }
.contact__top { display: grid; grid-template-columns: 1fr 1fr; padding-top: 3rem; }
.contact__note { max-width: 28rem; margin: 0; color: rgba(242,239,230,.72); font-size: .9rem; line-height: 1.6; }
.contact__cta { display: flex; align-items: end; justify-content: space-between; gap: 3rem; padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
.contact__cta h2 { margin: 0; font-size: clamp(4.5rem, 11vw, 12rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.02; }
.contact__cta h2 em { color: var(--acid); font-family: var(--serif); font-weight: 400; }
.contact__cta a { display: flex; justify-content: space-between; align-items: center; width: min(23rem, 100%); padding: 1.2rem 0; border-top: 1px solid; border-bottom: 1px solid; font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.contact__cta a i { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--ink); background: var(--acid); border-radius: 50%; font-style: normal; transition: transform .3s; }
.contact__cta a:hover i { transform: rotate(45deg); }
.contact__placeholder { margin: 0; padding-top: 1.2rem; padding-bottom: 1.2rem; color: rgba(242,239,230,.6); border-top: 1px solid rgba(242,239,230,.35); font-family: var(--mono); font-size: .53rem; text-transform: uppercase; }
.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding: 3rem var(--pad); color: var(--paper); background: var(--ink); }
.brand--footer { font-size: .8rem; }
.site-footer > p { justify-self: center; margin: 0; color: rgba(242,239,230,.6); font-family: var(--mono); font-size: .52rem; line-height: 1.6; text-align: center; text-transform: uppercase; }
.site-footer > div { justify-self: end; display: flex; gap: 1.5rem; font-family: var(--mono); font-size: .52rem; text-transform: uppercase; }

.js [data-reveal] { opacity: 0; transform: translateY(2rem); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-tilt] { transform-style: preserve-3d; transition: transform .35s ease; }

@keyframes pulse { 50% { opacity: .4; box-shadow: 0 0 0 .45rem rgba(200,255,61,0); } }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .availability { display: none; }
  .menu-toggle { justify-self: end; display: grid; grid-template-columns: auto 1.1rem; gap: .1rem .75rem; align-items: center; padding: .5rem 0; border: 0; background: transparent; font-family: var(--mono); font-size: .62rem; text-transform: uppercase; cursor: pointer; }
  .menu-toggle span { grid-row: 1 / 3; }
  .menu-toggle i { display: block; width: 1.1rem; height: 1px; background: currentColor; transition: transform .3s; }
  .menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(1.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-1.5px) rotate(-45deg); }
  .site-nav { position: absolute; top: 6.5rem; left: 0; display: none; width: 100%; padding: 1.5rem var(--pad) 2rem; color: var(--paper); background: var(--ink); border-bottom: 1px solid rgba(242,239,230,.24); }
  .site-nav.is-open { display: flex; }
  .hero__lead { grid-template-columns: 1fr; align-items: start; }
  .hero h1 { font-size: clamp(3.4rem, 10.5vw, 6.5rem); }
  .hero__aside { max-width: 30rem; }
  .hero-reel { display: flex; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .hero-reel::-webkit-scrollbar { display: none; }
  .hero-reel li { flex: 0 0 min(44vw, 24rem); scroll-snap-align: start; }
  .manifesto__copy { grid-template-columns: 1fr; }
  .manifesto__aside { max-width: 30rem; margin-left: 35%; }
  .section-head { grid-template-columns: 1fr 2fr; }
  .section-head > p:last-child { grid-column: 2; }
  .case__intro { grid-template-columns: .7fr 1.4fr; }
  .case__intro .case__lede { grid-column: 2; }
  .manager-ui { grid-template: 3.3rem minmax(31rem, 40rem) / 10rem 1fr; }
  .manager-ui header { grid-column: 1 / 3; }
  .manager-ui > section { display: none; }
  .why__head, .people__head { grid-template-columns: 1fr; }
  .why__head p, .people__head p { max-width: 28rem; margin-left: 35%; }
  .capabilities__grid { grid-template-columns: repeat(2, 1fr); }
  .capabilities__grid article { border-bottom: 1px solid var(--ink); }
  .capabilities__grid article:nth-child(2) { border-right: 0; }
  .contact__cta { display: grid; }
}

@media (max-width: 680px) {
  .pointer-light { display: none; }
  .site-header { min-height: 5rem; }
  .brand__descriptor { display: none; }
  .site-nav { top: 5rem; flex-direction: column; gap: 1rem; font-size: .9rem; }
  .hero { padding-top: 6.5rem; }
  .hero__meta { grid-template-columns: 1fr auto; }
  .hero__disciplines { display: none; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
  .hero h1 br { display: none; }
  .hero-reel li { flex-basis: 78vw; }
  .manifesto__aside, .why__head p, .people__head p { margin-left: 0; }
  .section-head { grid-template-columns: 1fr; }
  .section-head h2 { margin-top: 2rem; }
  .section-head > p:last-child { grid-column: auto; }
  .case__intro { grid-template-columns: 1fr; }
  .case__intro .case__lede { grid-column: auto; }
  .case__intro h3, .case__intro h1 { margin-top: 1.5rem; }
  .case__visual--screen { padding-left: .7rem; padding-right: .7rem; }
  .case__visual--screen img { min-height: 26rem; object-position: 53% top; }
  .case__statement, .case__decision { grid-template-columns: 1fr; }
  .case__facts { grid-template-columns: 1fr; width: 100%; margin-left: 0; }
  .case__facts dl { display: flex; align-items: baseline; gap: 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .case__facts dl:last-child { border-bottom: 0; }
  .case__details, .case__links { margin-left: 0; }
  .case__details > div { grid-template-columns: 1fr; }
  .case__details h5 { min-height: 0; }
  .case__links { align-items: flex-start; flex-direction: column; }
  .case__links p { margin-left: 0; }
  .moof-gallery { grid-template-columns: 1fr 1fr; }
  .moof-gallery__lead { grid-column: 1 / 3; }
  .moof-gallery__phone { grid-column: 1; grid-row: 2 / 4; }
  .moof-gallery figure:nth-child(2), .moof-gallery figure:nth-child(4) { grid-column: 2; aspect-ratio: auto; }
  .mysos-showcase { grid-template-columns: 1fr .75fr; }
  .mysos-showcase__site { grid-column: 1 / 3; }
  .mysos-showcase__phone { grid-column: 2; grid-row: 2 / 4; }
  .mysos-showcase__tool, .mysos-showcase__stories { grid-column: 1; }
  .manager-frame { padding-left: .7rem; padding-right: .7rem; }
  .manager-ui { grid-template: 2.8rem 31rem / 1fr; }
  .manager-ui header { grid-column: 1; }
  .manager-ui aside { display: none; }
  .why__list li { grid-template-columns: .2fr 1fr; }
  .why__list p { grid-column: 2; }
  .capabilities__grid { grid-template-columns: 1fr; }
  .capabilities__grid article { min-height: 20rem; border-right: 0; }
  .people__grid { grid-template-columns: 1fr; gap: 4rem; }
  .contact__top { grid-template-columns: 1fr; gap: 2rem; }
  .contact__cta h2 { font-size: 21vw; }
  .site-footer { grid-template-columns: 1fr auto; gap: 3rem; }
  .site-footer > p { justify-self: start; text-align: left; }
  .site-footer > div { grid-column: 1 / 3; justify-self: start; }
}

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

/* Shared finishing details and responsive reading rhythm. */
html { scroll-padding-top: 6rem; }
.site-header { position: sticky; background: rgba(17,16,13,.96); backdrop-filter: blur(16px); }
.hero { padding-top: clamp(2rem, 4vw, 4rem); }
.hero__lead { padding: 1rem 0; }
.hero__meta, .section-label { font-size: .7rem; }
.hero-reel { padding-top: 1rem; }
.reel-card__media { border: 1px solid rgba(242,239,230,.15); border-radius: .5rem; }
.reel-card__caption { padding-top: .35rem; }
.case__intro { align-items: center; }
.case__links { flex-wrap: wrap; }
.case__links a { line-height: 1.6; }
.case__facts dd, .case__type, .case__number, .case__private { font-size: .68rem; line-height: 1.6; }
.case__statement h4 { max-width: 30ch; }
.case__details section > p:last-child { font-size: .9rem; }
.case__details h5 { min-height: 0; }
.pointer-light { display: none; }
.ticker__track { width: 100%; }
.ticker__group { width: 100%; justify-content: space-evenly; padding: 0 var(--pad); }
.ticker__group[aria-hidden] { display: none; }
.ticker span { font-weight: 500; letter-spacing: .02em; }
@media (max-width: 980px) {
  .hero-reel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; margin: 0; padding: 1rem 0 0; overflow: visible; }
  .reel-card__caption small { flex-basis: 100%; margin-left: 0; }
  .ticker__group { flex-wrap: wrap; gap: 1rem 1.5rem; }
  .ticker i { display: none; }
}
@media (max-width: 680px) {
  .hero h1 { font-size: clamp(2.8rem, 11.5vw, 4.6rem); }
  .hero__meta { font-size: .6rem; }
  .hero__aside p { font-size: 1rem; }
  .reel-card__caption b { font-size: .85rem; }
  .reel-card__caption small { font-size: .56rem; }
  .case__facts dl { padding: 1.25rem 0; }
  .case__visual--screen img { min-height: 0; height: auto; }
  .case__intro { gap: 1rem; padding-top: 2rem; padding-bottom: 2rem; }
  .case__intro h3, .case__intro h1 { margin: 0; }
  .contact__cta h2 { font-size: 18vw; }
}
@media (max-width: 680px) {
  .hero h1 em { margin-left: .12em; }
}

/* Separate destinations, with a shared shell and a project index. */
[hidden] { display: none !important; }
#main { min-height: calc(100svh - 18rem); }
.site-nav a[aria-current="page"] { color: var(--acid); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; margin: 0; padding: 0 0 5rem; list-style: none; }
.work-grid .reel-card__caption { padding: .5rem 0; }
.work-grid .reel-card__caption b { font-size: 1.3rem; }
.work-grid .reel-card__caption i { color: var(--muted); }
.work-grid .reel-card__caption small { color: var(--muted); }
.work-grid .reel-card__caption::after { content: '↗'; margin-left: .5rem; }
.work-grid .reel-card__media { aspect-ratio: 16 / 10; }
.project-nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 1.4rem; padding-bottom: 1.4rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.project-nav a, .project-next a { font-size: .8rem; line-height: 1.5; }
.project-nav__back { flex-shrink: 0; font-weight: 700; }
.project-nav > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.project-nav > div a { padding: .55rem .85rem; border-radius: 2rem; color: var(--muted); }
.project-nav a[aria-current="page"] { color: var(--paper); background: var(--ink); }
.project-nav a:hover { text-decoration: underline; text-underline-offset: .25rem; }
.project-next { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 2rem; padding-bottom: 2rem; background: var(--paper-deep); }
.project-next a:last-child { font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 600; }
@media (max-width: 680px) {
  .work-grid { grid-template-columns: 1fr; gap: 2rem; }
  .project-nav { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .project-nav > div { gap: .2rem; }
  .project-nav > div a { padding: .5rem .6rem; font-size: .7rem; }
  .project-next { align-items: flex-start; flex-direction: column; }
}
.work-grid .reel-card__caption { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem .65rem; }
.work-grid .reel-card__caption small { grid-column: 2; margin: 0; }
.work-grid .reel-card__caption::after { grid-column: 3; grid-row: 1 / 3; align-self: center; }

/* One-page overview with a persistent, compact section dock. */
body:not(.project-page) { padding-bottom: 6rem; }
.floating-nav { position: fixed; z-index: 80; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .25rem; width: max-content; max-width: calc(100% - 1.5rem); padding: .45rem; border: 1px solid rgba(242,239,230,.2); border-radius: 3rem; color: var(--paper); background: rgba(24,25,21,.96); backdrop-filter: blur(20px); box-shadow: 0 .5rem 2rem rgba(0,0,0,.25); }
.floating-nav a { padding: .8rem 1.15rem; border-radius: 2rem; font-size: .8rem; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.floating-nav a:hover { background: rgba(255,255,255,.1); }
.floating-nav a[aria-current="location"] { color: var(--ink); background: var(--acid); }
.site-nav a[aria-current="location"] { color: var(--acid); }
.site-nav a[aria-current="location"]::after { transform: scaleX(1); }
.project-summary { max-width: 48ch; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.project-read { display: flex; align-items: center; gap: 1rem; width: fit-content; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; font-weight: 700; }
.work-grid .reel-card__caption::after { content: none; }
.work-grid .reel-card { gap: .65rem; }
.work > .section-head { padding-top: 2.5rem; padding-bottom: 3rem; }
.work > .section-head h2 { margin-top: 1.5rem; }
@media (max-width: 680px) {
  .floating-nav { bottom: max(.75rem, env(safe-area-inset-bottom)); gap: 0; padding: .3rem; }
  .floating-nav a { padding: .8rem .7rem; font-size: .7rem; }
  .floating-nav a span { display: none; }
}

/* Readable interface typography and one floating navigation. */
html { scroll-padding-top: 2rem; scroll-padding-bottom: 10rem; }
body, body:not(.project-page) { padding-bottom: 8rem; }
.site-header { position: relative; min-height: 6rem; grid-template-columns: 1fr auto; background: var(--ink); backdrop-filter: none; }
.brand__descriptor, .availability { font-size: .875rem; line-height: 1.5; }
.brand__letters { font-size: 2rem; }
.site-nav.floating-nav { position: fixed; inset: auto auto max(1.25rem, env(safe-area-inset-bottom)) 50%; transform: translateX(-50%); display: flex; flex-direction: row; justify-content: center; gap: .35rem; width: max-content; max-width: calc(100% - 2rem); padding: .5rem; border: 1px solid #5b5c51; border-radius: 3rem; background: #20221d; font-family: var(--sans); text-transform: none; }
.site-nav.floating-nav a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.4rem; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.site-nav.floating-nav a::after { display: none; }
.site-nav.floating-nav a[aria-current] { background: var(--acid); color: var(--ink); }
.section-label { font-family: var(--sans); font-size: clamp(1rem, 1.15vw, 1.2rem); font-weight: 600; line-height: 1.5; letter-spacing: .025em; }
.section-label span { width: 2.5rem; height: 2.5rem; flex-shrink: 0; font-size: .95rem; }
.hero__meta { font-size: .875rem; line-height: 1.6; color: #c4c2b9; }
.reel-card__caption small, .reel-card__caption i { font-size: .875rem; line-height: 1.5; }
.reel-card__caption small { white-space: normal; color: #c4c2b9; }
.reel-card__caption b { font-size: 1.125rem; }
.manifesto__aside, .section-head > p:last-child, .why__head p, .why__list p, .people__head p, .contact__note, .project-summary { font-size: 1.0625rem; line-height: 1.7; }
.why__head p, .why__list p { color: #ccc9c0; }
.why__list span, .capabilities__grid span, .person > p { font-size: .95rem; line-height: 1.5; }
.capabilities__grid p { font-family: var(--sans); font-size: 1.0625rem; text-transform: none; line-height: 1.85; }
.person > span, .project-read, .case__links a, .case__details summary, .contact__cta a { font-size: 1rem; line-height: 1.6; }
.case__facts dd, .case__type, .case__number, .case__private, .case__statement > p, .eyebrow, .case__details section > p:first-child, .case__links p { font-size: .9375rem; line-height: 1.6; }
.case__details section > p:last-child { font-size: 1rem; }
.case__visual figcaption, .manager-frame figcaption, .contact__placeholder, .site-footer > p, .site-footer > div { font-size: .875rem; line-height: 1.6; }
.project-nav a, .project-nav > div a, .project-next a { font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer > div { flex-wrap: wrap; }
@media (max-width: 980px) {
  .hero__meta { grid-template-columns: 1fr auto; }
  .hero__disciplines { display: none; }
  .site-header .availability { display: none; }
}
@media (max-width: 540px) {
  body, body:not(.project-page) { padding-bottom: 10rem; }
  .site-nav.floating-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(28rem, calc(100% - 1.5rem)); border-radius: 1.5rem; gap: .2rem; padding: .4rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .site-nav.floating-nav a { grid-column: span 2; padding: .6rem .3rem; font-size: 1rem; min-height: 44px; }
  .site-nav.floating-nav a:nth-last-child(-n+2) { grid-column: span 3; }
  .hero__meta { font-size: .8125rem; }
  .hero-reel { grid-template-columns: 1fr; }
  .reel-card__caption small { flex-basis: auto; }
  .section-head { gap: 1.25rem; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > div { grid-column: 1; gap: 1.2rem; }
}

/* The project rail grows naturally as new cards are added. */
.work-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.work-controls p { margin: 0; font-size: 1rem; line-height: 1.5; }
.work-controls p span { display: block; color: var(--muted); font-size: .875rem; }
.work-controls > div { display: flex; gap: .6rem; }
.work-controls button { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; font-size: 1.4rem; cursor: pointer; }
.work-controls button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.work-controls button:disabled { opacity: .35; cursor: default; }
.work-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2rem) / 2); gap: 2rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .4rem .25rem 1.5rem; margin: 0 -.25rem 3rem; scrollbar-width: thin; scrollbar-color: #858779 var(--paper-deep); }
.work-grid > li { min-width: 0; scroll-snap-align: start; }
.work-grid .reel-card { height: 100%; align-content: start; }
@media (max-width: 680px) {
  .work-grid { grid-auto-columns: 88%; gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .work-grid { scroll-behavior: auto; }
}

/* Services: editorial rows with real project evidence. */
.services { padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: clamp(4rem, 7vw, 7rem); background: #e8e7df; }
.services__head { display: grid; grid-template-columns: 1fr 1.8fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
.services__head .section-label { align-self: start; }
.services__head h2 { margin: 0; font-size: clamp(2.8rem, 5vw, 5.5rem); line-height: 1.05; letter-spacing: -.05em; font-weight: 500; }
.services__head h2 em { font-family: var(--serif); font-weight: 400; }
.services__head > p:last-child { margin: 0; color: #575a50; font-size: 1.0625rem; line-height: 1.65; }
.services__list { border-top: 1px solid #b5b7a8; }
.service { border-bottom: 1px solid #b5b7a8; }
.service summary { display: grid; grid-template-columns: 3rem 1.5fr 1fr 3rem; align-items: center; gap: 1.5rem; padding: 2rem 0; cursor: pointer; list-style: none; }
.service summary::-webkit-details-marker { display: none; }
.service__number { font-family: var(--mono); font-size: .9rem; color: #575a50; }
.service__title { font-size: clamp(1.4rem, 2.6vw, 2.75rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.service__description { color: #575a50; font-size: 1rem; line-height: 1.6; }
.service__toggle { position: relative; width: 44px; height: 44px; border: 1px solid #b5b7a8; border-radius: 50%; transition: background .2s; }
.service__toggle::before, .service__toggle::after { content: ''; position: absolute; width: 14px; height: 1px; top: 21px; left: 14px; background: var(--ink); }
.service__toggle::after { transform: rotate(90deg); }
.service[open] .service__toggle { background: var(--acid); border-color: transparent; }
.service[open] .service__toggle::after { transform: none; }
.service summary:hover .service__title { color: #526434; }
.service__body { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 0 4.5rem 2.5rem; }
.service__copy > p { max-width: 26ch; margin: 0 0 1.5rem; font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.4; }
.service__copy ul { display: flex; flex-wrap: wrap; gap: .65rem; padding: 0; margin: 0; list-style: none; }
.service__copy li { padding: .55rem .85rem; border: 1px solid #b5b7a8; border-radius: 2rem; font-size: .9rem; line-height: 1.4; }
.service__project { display: block; max-width: 30rem; justify-self: end; width: 100%; }
.service__project img { height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; border-radius: .5rem; }
.service__project > span { display: flex; align-items: center; justify-content: space-between; padding-top: .85rem; }
.service__project small, .service__project strong { display: block; }
.service__project small { color: #575a50; font-size: .875rem; margin-bottom: .2rem; }
.service__project strong { font-size: 1.1rem; font-weight: 600; }
@media (max-width: 980px) {
  .services__head { grid-template-columns: 1fr 2fr; }
  .services__head > p:last-child { grid-column: 2; }
  .service summary { grid-template-columns: 2rem 1fr 44px; gap: 1rem; }
  .service__description { display: none; }
  .service__body { padding-left: 3rem; padding-right: 0; gap: 2rem; }
}
@media (max-width: 600px) {
  .services__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .services__head > p:last-child { grid-column: 1; }
  .service summary { padding: 1.5rem 0; gap: .65rem; grid-template-columns: 1.5rem 1fr 44px; }
  .service__body { grid-template-columns: 1fr; padding: 0 0 2rem; gap: 1.5rem; }
  .service__project { max-width: none; }
}
.service__project--tool img, .service__project img[src$="manager-preview.svg"] { aspect-ratio: auto; object-fit: contain; }
.work-controls .work-playback { width: auto; height: auto; min-height: 44px; padding: .65rem 1rem; border-radius: 2rem; font-size: .9rem; white-space: nowrap; }
@media (max-width: 420px) { .work-controls { align-items: flex-start; flex-direction: column; } }
.work-grid { scrollbar-width: none; }
.work-grid::-webkit-scrollbar { display: none; }

/* A welcoming, direct route into a conversation. */
.contact--welcome { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(4rem, 7vw, 7rem); color: #f4f3eb; background: #26312b; }
.contact-welcome { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: start; margin-top: 3rem; }
.contact-welcome__intro h2 { margin: 0 0 1.75rem; font-size: clamp(2.8rem, 4.6vw, 5.5rem); line-height: 1.1; font-weight: 500; letter-spacing: -.045em; }
.contact-welcome__intro h2 em { color: var(--acid); font-family: var(--serif); font-weight: 400; }
.contact-welcome__intro > p { max-width: 40ch; margin: 0 0 1.75rem; color: #d3dbd4; font-size: 1.125rem; line-height: 1.75; }
.contact-reassurance { display: block; color: #c1cdc2; font-size: .95rem; line-height: 1.6; }
.contact-options { display: grid; gap: .85rem; }
.contact-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; border: 1px solid #657469; border-radius: .75rem; }
.contact-option > span:first-child { display: grid; gap: .5rem; }
.contact-option small { font-size: .95rem; line-height: 1.5; }
.contact-option strong { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.25; font-weight: 600; }
.contact-option > span > span { font-size: .9rem; line-height: 1.5; }
.contact-option--primary { color: #20291d; background: var(--acid); border-color: var(--acid); }
.contact-option__arrow { font-size: 1.75rem; }
a.contact-option { transition: transform .2s, border-color .2s; }
a.contact-option:hover { transform: translateY(-3px); border-color: var(--acid); }
.contact-option--soon { border-style: dashed; color: #c1cdc2; }
.contact-option--soon strong { font-size: 1.1rem; }
.contact-soon-label { max-width: 17ch; font-size: .875rem; line-height: 1.6; }
@media (max-width: 900px) { .contact-welcome { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .contact-option { padding: 1.1rem; } .contact-option--soon { align-items: start; flex-direction: column; } .contact-soon-label { max-width: none; } }
/* Continuous movement: no snap points or animated rewind at the loop boundary. */
.work-grid { scroll-snap-type: none; scroll-behavior: auto; }

/* One clear public destination per case study. */
.case__links { justify-content: space-between; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.case__links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .9rem 1.3rem; border: 0; border-radius: 2rem; color: var(--paper); background: var(--ink); text-transform: none; font-size: 1rem; }
.case__links a:hover { color: var(--ink); background: var(--acid); }
.case__links p { max-width: 30ch; margin: 0; line-height: 1.6; }

/* Compact section rhythm on phones. */
@media (max-width: 680px) {
  .why, .people { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .why__head, .people__head { gap: 1.25rem; }
  .why__head h2, .people__head h2 { margin-top: 1.5rem; }
  .why__head p, .people__head p { margin-top: 0; margin-bottom: 0; }
}

/* One section-heading layout everywhere: label on its own line, then the title with its note at the bottom right. */
.section-head, .services__head, .why__head, .people__head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: end; gap: 0 3rem; }
.section-head > .section-label, .services__head > .section-label { grid-column: 1 / -1; align-self: start; }
.section-head h2, .services__head h2, .why__head h2, .people__head h2 { grid-column: 1; margin: 5rem 0 0; }
.section-head > p:last-child, .services__head > p:last-child, .why__head p, .people__head p { grid-column: 2; max-width: 22rem; margin: 0 0 .7rem; }
.work > .section-head h2 { margin-top: 5rem; }
.services__head h2 { font-size: clamp(2.8rem, 5.5vw, 6rem); letter-spacing: -.055em; line-height: 1.04; }
@media (max-width: 980px) {
  .section-head, .services__head, .why__head, .people__head { grid-template-columns: 1fr; }
  .section-head > p:last-child, .services__head > p:last-child, .why__head p, .people__head p { grid-column: 1; max-width: 28rem; margin: 1.5rem 0 0 35%; }
}
@media (max-width: 680px) {
  .section-head, .services__head, .why__head, .people__head { gap: 0; }
  .section-head h2, .services__head h2, .why__head h2, .people__head h2, .work > .section-head h2 { margin-top: 1.5rem; }
  .section-head > p:last-child, .services__head > p:last-child, .why__head p, .people__head p { margin: 1.25rem 0 0; }
}

/* Services: short description sits under its title on the left; the open item shows its fuller statement instead. */
.service summary { grid-template-columns: 3rem minmax(0, 1fr) 44px; grid-template-rows: auto auto; column-gap: 1.5rem; row-gap: .4rem; }
.service__number { grid-column: 1; grid-row: 1; }
.service__title { grid-column: 2; grid-row: 1; }
.service__description { display: block; grid-column: 2; grid-row: 2; max-width: 48ch; }
.service__toggle { grid-column: 3; grid-row: 1 / 3; }
.service[open] .service__description { display: none; }
@media (max-width: 980px) {
  .service summary { grid-template-columns: 2rem minmax(0, 1fr) 44px; column-gap: 1rem; }
}
@media (max-width: 600px) {
  .service summary { grid-template-columns: 1.5rem minmax(0, 1fr) 44px; column-gap: .65rem; }
  .service__description { font-size: .95rem; }
}

/* Services: compact rows, and on wide screens the open item's picture sits beside the collapse button. */
.service summary { padding: 1.35rem 0; }
.service__title { font-size: clamp(1.3rem, 2vw, 2.1rem); }
.service__toggle { align-self: start; width: 40px; height: 40px; }
.service__toggle::before, .service__toggle::after { top: 19px; left: 13px; }
.service__copy > p { max-width: 30ch; margin-bottom: 1.1rem; font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.service__copy li { padding: .4rem .75rem; font-size: .82rem; }
.service__project > span { padding-top: .6rem; }
.service__project strong { font-size: 1rem; }
@media (min-width: 981px) {
  .service { --service-media: clamp(16rem, 24vw, 21rem); position: relative; }
  .service__body { display: block; min-height: calc(var(--service-media) / 2 + .25rem); padding: 0 calc(var(--service-media) + 40px + 5.5rem) 1.75rem 4.5rem; }
  .service__project img, .service__project--tool img, .service__project img[src$="manager-preview.svg"] { aspect-ratio: 2 / 1; background: #dcdbd2; }
  .service__project { position: absolute; top: 1.35rem; right: calc(40px + 1.5rem); width: var(--service-media); max-width: none; }
}

/* Services: states used while an item animates open or closed. */
.service.is-animating, .service.is-animating .service__body { overflow: hidden; }
.service.is-closing .service__description, .service.is-opening .service__description { display: block; overflow: hidden; }
.service__toggle, .service__toggle::after { transition: background .35s, border-color .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.service.is-closing .service__toggle { background: transparent; border-color: #b5b7a8; }
.service.is-closing .service__toggle::after { transform: rotate(90deg); }

/* Project pages: let the decisive move use the full text column with relaxed leading. */
.case__decision p:last-child { max-width: 62rem; line-height: 1.38; letter-spacing: -.005em; }

/* Project facts: a row of two figures splits the width evenly. */
@media (min-width: 681px) {
  .case__facts:has(> dl:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* Project pages have their own navigation, so they don't need room for the floating homepage menu. */
body.project-page { padding-bottom: 0; }

/* Project pages: the project bar stays pinned while reading, with larger, easier-to-read links. */
.project-page .case { overflow: visible; overflow-x: clip; }
.project-nav { position: sticky; top: 0; z-index: 40; padding-top: 1rem; padding-bottom: 1rem; background: rgba(242,239,230,.94); backdrop-filter: blur(12px); }
.project-nav a, .project-nav > div a { font-size: clamp(1.05rem, 1.25vw, 1.25rem); min-height: 48px; }
.project-nav > div { gap: .5rem; }
.project-nav > div a { padding: .6rem 1.1rem; }
@media (max-width: 680px) {
  .project-nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding-top: .6rem; padding-bottom: .6rem; }
  .project-nav a, .project-nav > div a { font-size: 1.05rem; min-height: 44px; }
  .project-nav > div { flex-wrap: nowrap; gap: .25rem; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .project-nav > div::-webkit-scrollbar { display: none; }
  .project-nav > div a { flex-shrink: 0; padding: .5rem .85rem; }
}
/* Project bar: full tabs on wider screens; on phones, Back plus a compact project switcher. */
.project-nav__back { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.project-switch { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 680px) {
  .project-nav { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .55rem; padding-bottom: .55rem; }
  .js .project-switch { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; min-height: 44px; padding: .4rem .6rem .4rem 1rem; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 2rem; font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
  .project-switch__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .project-switch small { flex-shrink: 0; color: var(--muted); font-family: var(--mono); font-size: .8rem; font-weight: 400; }
  .project-switch i { position: relative; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); }
  .project-switch i::before { content: ""; position: absolute; top: 42%; left: 50%; width: .4rem; height: .4rem; border-right: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper); transform: translate(-50%, -50%) rotate(45deg); transition: transform .25s; }
  .project-nav.is-open .project-switch i::before { top: 55%; transform: translate(-50%, -50%) rotate(-135deg); }
  .js .project-nav > .project-nav__tabs { display: none; }
  .js .project-nav.is-open > .project-nav__tabs { position: absolute; top: calc(100% + .4rem); right: var(--pad); display: flex; flex-direction: column; gap: .15rem; width: min(17rem, calc(100% - 2 * var(--pad))); padding: .4rem; overflow: visible; background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 1.25rem 2.5rem rgba(17,16,13,.18); animation: project-menu-in .2s ease-out; }
  .js .project-nav .project-nav__tabs a { justify-content: space-between; width: 100%; min-height: 48px; padding: .7rem 1rem; border-radius: .7rem; font-size: 1.05rem; }
  .js .project-nav .project-nav__tabs a[aria-current="page"]::after { content: "Viewing"; color: rgba(242,239,230,.7); font-family: var(--mono); font-size: .75rem; }
}
@keyframes project-menu-in { from { opacity: 0; transform: translateY(-.4rem); } }