:root {
  --paper: #f4eee8;
  --paper-light: #fbf8f4;
  --ink: #292321;
  --muted: #766a64;
  --taupe: #9d8778;
  --rose: #d9aaa2;
  --line: rgba(41, 35, 33, .18);
  --serif: "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, "Century Gothic", Arial, sans-serif;
  --script: "Segoe Script", "Brush Script MT", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--paper); overflow-x: hidden; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
::selection { color: var(--paper-light); background: var(--ink); }

.noise { position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: .16; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 110; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--rose); transform: scaleX(0); transform-origin: left; }
.section-pad { padding-left: clamp(24px, 6vw, 96px); padding-right: clamp(24px, 6vw, 96px); }

.site-header { position: fixed; z-index: 90; top: 18px; left: 28px; right: 28px; min-height: 66px; padding: 10px 12px 10px 22px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.45); border-radius: 100px; background: rgba(249,245,240,.72); backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(48,36,30,.06); transition: transform .35s, background .35s; }
.site-header.scrolled { background: rgba(249,245,240,.92); }
.wordmark { display: flex; gap: 6px; align-items: baseline; font-family: var(--serif); font-size: 18px; letter-spacing: -.02em; }
.wordmark span:last-child { font-style: italic; color: var(--taupe); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 42px); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.site-nav > a:not(.nav-cta) { position: relative; }
.site-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .3s; }
.site-nav > a:hover::after { right: 0; }
.nav-cta { padding: 16px 22px; color: #fff; border-radius: 100px; background: var(--ink); }
.nav-cta span { margin-left: 9px; }
.menu-toggle { display: none; border: 0; background: none; cursor: pointer; }

.hero { position: relative; min-height: 100svh; padding-top: 132px; padding-bottom: 70px; display: grid; grid-template-columns: minmax(0, .98fr) minmax(430px, 1.02fr); align-items: center; gap: clamp(24px, 3.2vw, 58px); overflow: hidden; background: radial-gradient(circle at 82% 22%, rgba(217,170,162,.2), transparent 29%), linear-gradient(135deg, #f6f0ea, #efe3db); }
.hero::before { content: ""; position: absolute; width: 42vw; height: 42vw; max-width: 680px; max-height: 680px; border: 1px solid rgba(157,135,120,.16); border-radius: 50%; right: -21vw; top: -22vw; }
.hero-copy { position: relative; z-index: 2; max-width: 850px; }
.eyebrow { display: flex; gap: 12px; align-items: center; margin: 0 0 26px; color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 36px; height: 1px; background: currentColor; }
.eyebrow.light { color: rgba(255,255,255,.65); }
.hero h1, .manifesto h2, .projects-head h2, .detail-copy h2, .expertise h2, .about h2, .more-work h2, .contact h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; line-height: .9; }
.hero h1 { font-size: clamp(58px, 6.65vw, 108px); }
h2 em, h1 em, h1 i { font-weight: 400; color: var(--taupe); }
h1 em { font-family: var(--script); font-size: .8em; }
h1 i { font-style: italic; }
.hero-intro { max-width: 650px; margin: 36px 0 0 4px; color: var(--muted); font-family: var(--serif); font-size: clamp(19px, 1.65vw, 27px); line-height: 1.45; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; gap: 28px; padding: 18px 24px; border-radius: 100px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: transform .25s, box-shadow .25s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(41,35,33,.16); }
.button-dark { color: #fff; background: var(--ink); }
.text-link { padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.text-link span { margin-left: 10px; }
.hero-visual { position: relative; min-height: min(62vw, 700px); display: flex; align-items: center; justify-content: flex-end; }
.portrait-window { position: relative; z-index: 2; width: min(44vw, 650px); aspect-ratio: 1.02; margin: 0; overflow: hidden; border-radius: 4px 4px 4px clamp(90px, 11vw, 180px); box-shadow: 0 28px 80px rgba(73,52,42,.13); background: #ded1c8; }
.portrait-window::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(45,34,29,.04), transparent 35%); }
.portrait-window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.portrait-window figcaption { position: absolute; z-index: 2; left: clamp(22px,3vw,42px); right: clamp(22px,3vw,42px); bottom: 22px; display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; color: rgba(255,255,255,.88); border-top: 1px solid rgba(255,255,255,.58); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.hero-note { position: absolute; z-index: 3; top: 12%; left: -18px; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: rgba(255,255,255,.84); backdrop-filter: blur(12px); border-radius: 3px; box-shadow: 0 12px 36px rgba(53,38,32,.08); }
.hero-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.hero-note strong { color: var(--ink); }
.note-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #80906a; box-shadow: 0 0 0 5px rgba(128,144,106,.12); }
.hero-index { position: absolute; left: clamp(24px,6vw,96px); right: clamp(24px,6vw,96px); bottom: 23px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }

.ticker { overflow: hidden; padding: 24px 0; color: #fff; background: var(--ink); }
.ticker-track { display: flex; align-items: center; width: max-content; animation: ticker 28s linear infinite; }
.ticker span { padding: 0 35px; font-family: var(--serif); font-size: clamp(20px,2.2vw,34px); font-style: italic; }
.ticker i { color: var(--rose); font-style: normal; font-size: 12px; }
@keyframes ticker { to { transform: translateX(-50%); } }

.manifesto { padding-top: 150px; padding-bottom: 170px; background: var(--paper-light); }
.section-kicker { display: flex; align-items: center; gap: 18px; margin-bottom: 60px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.section-kicker span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; }
.section-kicker p { margin: 0; }
.section-kicker.light { color: rgba(255,255,255,.62); }
.section-kicker.light span { border-color: rgba(255,255,255,.2); }
.manifesto-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 8vw; align-items: end; }
.manifesto h2, .projects-head h2, .detail-copy h2, .expertise h2, .about h2, .more-work h2 { font-size: clamp(55px,7vw,112px); }
.manifesto h2 em, .projects-head h2 em, .detail-copy h2 em, .expertise h2 em, .about h2 em, .more-work h2 em, .contact h2 em { font-family: var(--script); font-size: .72em; }
.manifesto-copy { padding-left: 3vw; border-left: 1px solid var(--line); }
.manifesto-copy p { color: var(--muted); line-height: 1.7; }
.manifesto-copy .lead, .lead { color: var(--ink); font-family: var(--serif); font-size: clamp(23px,2vw,32px); line-height: 1.4; }

.projects { padding-top: 140px; padding-bottom: 140px; }
.projects-head { display: grid; grid-template-columns: .7fr 1.3fr .65fr; gap: 4vw; align-items: end; margin-bottom: 58px; }
.projects-head .section-kicker { align-self: start; margin: 0; }
.projects-head > p { margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.project-stack { display: grid; gap: 28px; }
.project-card { position: sticky; top: 102px; height: min(640px, calc(100svh - 122px)); min-height: 560px; display: grid; grid-template-columns: .72fr 1.28fr; overflow: hidden; isolation: isolate; border-radius: 30px; box-shadow: 0 24px 80px rgba(41,35,33,.14); }
.project-card:nth-child(2) { top: 116px; }
.project-card:nth-child(3) { top: 130px; }
.project-card:nth-child(4) { top: 144px; }
.project-media { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.75,.2,1); }
.project-card:hover .project-media img { transform: scale(1.018); }
.project-content { position: relative; z-index: 2; min-width: 0; padding: clamp(34px,4vw,66px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.project-dark { color: #f8f3ee; background: #332c29; }
.project-dark .project-media { background: #e8dfd3; }
.project-sand { grid-template-columns: 1.28fr .72fr; color: var(--ink); background: #d8c7b8; }
.project-sand .project-media { background: #eee4d8; }
.project-blesser { grid-template-columns: .72fr 1.28fr; color: #f7f7fb; background: #22225d; }
.project-blesser .project-content { background: linear-gradient(155deg,#252763 0%,#1c1e50 72%,#171844 100%); }
.project-blesser .project-content h3 { font-size: clamp(52px,5.4vw,86px); line-height: .83; }
.project-blesser .project-content h3 em { display: block; margin-top: .08em; color: #ef2736; }
.project-blesser .project-copy > p:last-child { color: rgba(255,255,255,.82); }
.project-blesser .project-services { border-color: rgba(255,255,255,.25); }
.blesser-showcase { position: relative; display: block; overflow: hidden; background: radial-gradient(circle at 88% 10%,rgba(239,39,54,.17),transparent 25%),radial-gradient(circle at 9% 82%,rgba(83,91,186,.22),transparent 30%),linear-gradient(145deg,#171949 0%,#101238 62%,#0c0e2f 100%); }
.blesser-showcase::before { display: none; }
.blesser-showcase::after { content: ""; position: absolute; z-index: 1; left: 7%; right: 7%; bottom: 6%; height: 24%; background: radial-gradient(ellipse at center,rgba(0,0,0,.42) 0%,rgba(0,0,0,.2) 34%,transparent 72%); transform: scaleY(.5); }
.blesser-grid { position: absolute; z-index: 1; inset: 0; opacity: .42; background-image: linear-gradient(90deg,transparent 9%,rgba(255,255,255,.06) 9.1%,transparent 9.2%,transparent 90%,rgba(255,255,255,.06) 90.1%,transparent 90.2%),linear-gradient(transparent 12%,rgba(255,255,255,.06) 12.1%,transparent 12.2%,transparent 88%,rgba(255,255,255,.06) 88.1%,transparent 88.2%); }
.blesser-caption { position: absolute; z-index: 8; color: rgba(255,255,255,.48); font-size: 7px; letter-spacing: .19em; text-transform: uppercase; }
.blesser-caption-top { top: 30px; left: 32px; }
.blesser-caption-bottom { right: 31px; bottom: 27px; }
.blesser-desktop { position: absolute; z-index: 5; top: 18%; left: 18%; width: 65%; height: 50%; border: 7px solid #171927; border-bottom-width: 11px; border-radius: 12px 12px 7px 7px; background: #fff; box-shadow: 0 32px 65px rgba(0,0,0,.48); }
.blesser-device-bar { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 11px; color: #777b8d; background: #fff; font-size: 6px; letter-spacing: .08em; }
.blesser-device-bar i { width: 5px; height: 5px; border-radius: 50%; background: #d5d8df; }
.blesser-device-bar span { margin-left: 8px; }
.blesser-screen { position: relative; height: calc(100% - 28px); overflow: hidden; color: #fff; background: #27275f; }
.project-media .blesser-screen-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.76) contrast(1.03); }
.blesser-screen-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(30,30,85,.91) 0%,rgba(37,37,91,.7) 48%,rgba(37,37,91,.08) 100%); }
.project-media .blesser-screen-logo { position: absolute; z-index: 2; top: 14px; left: 18px; width: 96px; height: auto; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.12)); }
.blesser-screen-copy { position: absolute; z-index: 2; left: 7%; bottom: 12%; width: 68%; }
.blesser-screen-copy small { display: block; margin-bottom: 9px; font-size: 5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.blesser-screen-copy strong { display: block; max-width: 390px; font-family: var(--sans); font-size: clamp(21px,2.35vw,37px); line-height: .92; letter-spacing: -.055em; }
.blesser-screen-copy > span { display: inline-block; margin-top: 13px; padding: 8px 11px; border-radius: 5px; color: #fff; background: #ef2736; font-size: 6px; font-weight: 700; }
.blesser-laptop-base { position: absolute; top: calc(100% + 11px); left: 50%; width: 112%; height: 14px; border-radius: 2px 2px 16px 16px; background: linear-gradient(180deg,#e9ebef,#969ca8 56%,#666d78); box-shadow: 0 9px 18px rgba(0,0,0,.38); transform: translateX(-50%); }
.blesser-laptop-base::after { content: ""; position: absolute; top: 0; left: 43%; width: 14%; height: 4px; border-radius: 0 0 5px 5px; background: #717784; }
.blesser-tablet { position: absolute; z-index: 3; top: 11%; left: 4.5%; width: 27%; height: 58%; padding: 9px; border: 6px solid #151722; border-radius: 18px; background: #fff; box-shadow: 0 28px 58px rgba(0,0,0,.42); transform: rotate(-2deg); }
.blesser-tablet-camera { position: absolute; z-index: 2; top: 4px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #0f1035; transform: translateX(-50%); }
.blesser-tablet-page { height: 100%; overflow: hidden; padding: 14px 10px 10px; color: #27275f; background: #f7f9fc; }
.project-media .blesser-tablet-logo { display: block; width: 62%; height: auto; margin-bottom: 15px; object-fit: contain; }
.blesser-tablet-page > small { display: block; margin-bottom: 5px; color: #ef2736; font-size: 4px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.blesser-tablet-page > strong { display: block; font-family: var(--sans); font-size: clamp(12px,1.45vw,22px); line-height: .96; letter-spacing: -.04em; }
.blesser-tablet-grid { display: grid; gap: 7px; margin-top: 13px; }
.blesser-tablet-grid figure { position: relative; height: 70px; margin: 0; overflow: hidden; border-radius: 6px; }
.project-media .blesser-tablet-grid img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(.78); }
.blesser-tablet-grid figcaption { position: absolute; left: 7px; bottom: 6px; color: #fff; font-size: 5px; font-weight: 700; }
.blesser-mobile { position: absolute; z-index: 6; right: 5.5%; bottom: 9%; width: 18%; height: 43%; overflow: hidden; padding: 25px 9px 10px; border: 5px solid #151722; border-radius: 25px; color: #25255f; background: #f7f8fb; box-shadow: 0 26px 56px rgba(0,0,0,.48); transform: rotate(1.5deg); }
.blesser-mobile-notch { position: absolute; top: 6px; left: 50%; width: 32%; height: 7px; border-radius: 9px; background: #181943; transform: translateX(-50%); }
.project-media .blesser-mobile > img { display: block; width: 72%; height: auto; margin: 0 auto 12px; object-fit: contain; }
.blesser-mobile > small { display: block; margin-bottom: 5px; color: #ef2736; font-size: 4px; font-weight: 800; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.blesser-mobile > strong { display: block; font-family: var(--sans); font-size: clamp(9px,1vw,15px); line-height: 1.02; text-align: center; letter-spacing: -.03em; }
.blesser-mobile-card { position: relative; height: 30%; margin-top: 10px; overflow: hidden; border-radius: 7px; background: #20205b; }
.project-media .blesser-mobile-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(.8); }
.blesser-mobile-card span { position: absolute; left: 7px; bottom: 6px; color: #fff; font-size: 5px; font-weight: 700; }
.blesser-mobile-cta { display: block; margin-top: 9px; padding: 7px 4px; border-radius: 4px; color: #fff; background: #ef2736; font-size: 4px; font-weight: 700; text-align: center; }
.project-blesser .blesser-showcase { display: grid; place-items: center; background: #0b1020; }
.project-blesser .blesser-showcase::before,
.project-blesser .blesser-showcase::after { display: none; }
.project-blesser .blesser-showcase > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.project-rose { color: var(--ink); background: #c79b91; }
.project-rose .project-media { background: #c79b91; }
.project-blue { grid-template-columns: .72fr 1.28fr; color: #f8f5f0; background: #12151b; }
.project-blue .project-media { background: #101216; }
.project-blue .project-content h3 em { color: #4778ff; }
.project-meta { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .68; }
.project-live-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity .25s; }
.project-live-link:hover { opacity: .58; }
.project-type { margin: 0 0 13px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .68; }
.project-content h3 { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(58px,6vw,94px); font-weight: 400; line-height: .78; letter-spacing: -.06em; }
.project-content h3 em { font-weight: 400; color: inherit; }
.project-dark .project-content h3 em { color: #d7aaa2; }
.project-copy > p:last-child { max-width: 390px; margin: 0; font-family: var(--serif); font-size: clamp(18px,1.45vw,23px); line-height: 1.42; opacity: .82; }
.project-services { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid currentColor; }
.project-services span { padding: 8px 11px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }

.detail-story { padding-top: 170px; padding-bottom: 150px; background: #e8ddd3; }
.case-head { display: grid; grid-template-columns: .52fr 1.48fr; gap: 6vw; align-items: start; margin-bottom: 72px; }
.case-head .section-kicker { margin: 4px 0 0; }
.detail-copy > .lead { max-width: 760px; margin: 36px 0 0; }
.case-board { display: grid; grid-template-columns: 1.42fr .58fr; min-height: 650px; overflow: hidden; color: #f8f3ee; background: #312a27; border-radius: 32px; box-shadow: 0 28px 90px rgba(54,39,33,.16); }
.detail-visual { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #d8c8bb; }
.detail-visual img { width: 100%; height: 100%; object-fit: cover; }
.detail-visual figcaption { position: absolute; left: 26px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 11px 15px; color: var(--ink); background: rgba(248,243,238,.88); border: 1px solid rgba(41,35,33,.12); backdrop-filter: blur(10px); }
.detail-visual figcaption span { font-family: var(--serif); font-style: italic; color: var(--taupe); }
.detail-visual figcaption p { margin: 0; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.case-summary { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(38px,4.5vw,72px); }
.case-label, .step-label { margin: 0; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .58; }
.case-statement { margin: 0; font-family: var(--serif); font-size: clamp(27px,2.5vw,42px); line-height: 1.22; }
.case-facts { border-top: 1px solid rgba(255,255,255,.22); }
.case-facts > div { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.case-facts span { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; opacity: .48; }
.case-facts p { margin: 0; font-size: 11px; line-height: 1.45; }
.story-steps { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 72px; border-top: 1px solid var(--line); }
.story-steps article { position: relative; padding: 30px 3.6vw 0 0; }
.story-steps article + article { padding-left: 3.6vw; border-left: 1px solid var(--line); }
.story-steps article > span { display: block; margin-bottom: 54px; color: var(--taupe); font-family: var(--serif); font-size: 22px; font-style: italic; }
.story-steps h3 { margin: 12px 0 18px; font-family: var(--serif); font-size: clamp(25px,2.2vw,36px); font-weight: 400; line-height: 1.08; }
.story-steps article > p:last-child { max-width: 380px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.expertise { padding-top: 150px; padding-bottom: 150px; color: #f7f1ec; background: var(--ink); }
.expertise-title-row { display: grid; grid-template-columns: 1.2fr .5fr; gap: 7vw; align-items: end; margin-bottom: 80px; }
.expertise-title-row p { color: rgba(255,255,255,.55); line-height: 1.7; }
.expertise h2 em { color: var(--rose); }
.expertise-list { border-top: 1px solid rgba(255,255,255,.2); }
.expertise-list article { position: relative; display: grid; grid-template-columns: 80px 1fr 1fr 50px; align-items: center; gap: 25px; padding: 34px 6px; border-bottom: 1px solid rgba(255,255,255,.2); transition: padding .35s, background .35s; }
.expertise-list article:hover { padding-left: 22px; padding-right: 22px; background: rgba(255,255,255,.04); }
.expertise-list span { color: var(--rose); font-family: var(--serif); font-style: italic; }
.expertise-list h3 { margin: 0; font-family: var(--serif); font-size: clamp(25px,3vw,44px); font-weight: 400; }
.expertise-list p { margin: 0; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.6; }
.expertise-list i { color: var(--rose); font-size: 25px; font-style: normal; }

.about { min-height: 100vh; padding-top: 120px; padding-bottom: 120px; display: grid; grid-template-columns: minmax(330px,.82fr) minmax(0,1.18fr); gap: clamp(48px,5.5vw,88px); align-items: center; }
.about-visual { position: relative; overflow: hidden; height: min(680px,72vh); border-radius: 190px 20px 20px 20px; background: #e9ded6; box-shadow: 0 24px 70px rgba(61,45,38,.12); }
.about-visual .about-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.about-visual .about-working { position: absolute; z-index: 2; right: 18px; bottom: 70px; width: 45%; height: 31%; object-fit: cover; object-position: center; border: 5px solid var(--paper); border-radius: 72px 12px 12px 12px; box-shadow: 0 16px 42px rgba(41,35,33,.18); }
.about-visual span { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 20px; padding: 18px; border-radius: 100px; color: #fff; background: rgba(41,35,33,.72); backdrop-filter: blur(10px); text-align: center; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.about-copy > .lead { margin: 34px 0 22px; }
.about-copy > p:not(.lead) { max-width: 670px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.about-facts { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 42px; border-top: 1px solid var(--line); }
.about-facts div { padding: 22px 15px 0 0; }
.about-facts span { display: block; margin-bottom: 10px; color: var(--taupe); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.about-facts p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.4; }

.more-work { position: relative; z-index: 1; isolation: isolate; margin-top: 74px; padding-top: clamp(84px,8vw,112px); padding-bottom: 135px; background: #e9ddd4; }
.more-work::before { content: ""; position: absolute; z-index: 0; left: -10%; top: -74px; width: 120%; height: 96px; border-top: 1px solid rgba(41,35,33,.13); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #e9ddd4; pointer-events: none; }
.more-work-spinning-text {
  position: absolute;
  z-index: 3;
  top: -61px;
  right: clamp(28px,7vw,112px);
  width: 122px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #f7f0e9;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(41,35,33,.14), 0 18px 42px rgba(41,35,33,.2);
  pointer-events: none;
}
.more-work-spinning-text svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: more-work-spin 16s linear infinite;
}
.more-work-spinning-text path { fill: none; }
.more-work-spinning-text text {
  fill: currentColor;
  font-family: var(--sans);
  font-size: 6.2px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.more-work-spinning-text > span {
  position: absolute;
  inset: 50% auto auto 50%;
  color: var(--rose);
  font-size: 16px;
  transform: translate(-50%,-50%);
}
@keyframes more-work-spin { to { transform: rotate(360deg); } }
.more-work > * { position: relative; z-index: 1; }
.more-work > .more-work-spinning-text { position: absolute; z-index: 3; }
.more-work-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(48px,8vw,130px); align-items: end; margin-bottom: 80px; }
.more-work-head h2 { font-size: clamp(54px,6.6vw,106px); }
.more-work-intro { max-width: 520px; padding-bottom: 8px; }
.more-work-intro > p { margin: 0; color: var(--muted); font-family: var(--serif); font-size: clamp(20px,1.75vw,28px); line-height: 1.45; }
.more-work-toggle { display: none; }
.js .more-work-toggle {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 54px;
  gap: clamp(20px,3vw,46px);
  align-items: center;
  width: min(100%,1080px);
  margin: clamp(42px,5vw,72px) auto 0;
  padding: 16px 16px 16px clamp(24px,3vw,42px);
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 18px 44px rgba(41,35,33,.16);
  text-align: left;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.js .more-work-toggle:hover { transform: translateY(-3px); box-shadow: 0 24px 58px rgba(41,35,33,.22); }
.js .more-work-toggle:focus-visible { outline: 2px solid #a8585d; outline-offset: 5px; }
.more-work-toggle-copy { display: grid; gap: 5px; }
.more-work-toggle-copy small,
.more-work-toggle-brands { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.more-work-toggle-copy small { color: rgba(255,255,255,.52); }
.more-work-toggle-copy strong { font-family: var(--serif); font-size: clamp(19px,1.7vw,26px); font-weight: 400; letter-spacing: -.02em; }
.more-work-toggle-brands { color: rgba(255,255,255,.64); white-space: nowrap; }
.more-work-toggle-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--rose);
}
.more-work-toggle-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.more-work-toggle[aria-expanded="true"] .more-work-toggle-icon svg { transform: rotate(180deg); }
.more-work-panel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.more-work-panel-inner {
  width: 100%;
  padding-top: clamp(54px,6vw,88px);
}
.js .more-work-panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: height .95s cubic-bezier(.76,0,.24,1), opacity .45s ease, visibility 0s linear .95s;
}
.js .more-work-panel.is-open {
  opacity: 1;
  visibility: visible;
  transition: height .95s cubic-bezier(.76,0,.24,1), opacity .45s ease, visibility 0s linear 0s;
}
.js .more-work-panel.is-settled { overflow: visible; }
.js .more-work { transition: padding-bottom .55s ease; }
.js .more-work:not(.is-expanded) { padding-bottom: 74px; }
.js .more-work + .more-work-exit::before { background: #e9ddd4; border-bottom-color: rgba(41,35,33,.12); }
.js .more-work.is-transition-docked + .more-work-exit::before { background: #dda9a3; border-bottom-color: rgba(255,255,255,.24); }
.js .more-work:not(.is-expanded) .work-motion-bar.is-pinned { position: relative; top: auto; left: auto; width: auto; }
.work-gallery { display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px; align-items: start; }
.work-project { min-width: 0; }
.work-project-muskel { position: relative; }
.work-project-muskel::after { content: ""; position: absolute; z-index: 3; top: 0; right: -20px; width: 20px; height: 650px; background: #e9ddd4; pointer-events: none; }
.work-project-luna { padding-top: 105px; }
.work-project-media { position: relative; overflow: hidden; contain: paint; height: 650px; border-radius: 22px; background: var(--paper-light); }
.work-project-luna .work-project-media { height: 545px; }
.work-project-media img { position: absolute; top: 0; max-width: none; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.work-project:hover .work-project-media img { transform: scale(1.025); }
.work-project-muskel .work-project-media img { left: 0; width: 310%; object-position: left center; }
.work-project-luna .work-project-media img { right: 0; width: 300%; object-position: right center; }
.work-project-copy { display: flex; justify-content: space-between; gap: 28px; padding: 22px 4px 0; border-top: 1px solid rgba(74,57,50,.18); }
.work-project-copy span, .work-index-label { color: var(--taupe); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.work-project-copy h3 { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(28px,3vw,47px); font-weight: 400; letter-spacing: -.04em; }
.work-project-copy > p { max-width: 220px; margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.work-index { display: grid; grid-template-columns: .42fr 1fr; gap: clamp(40px,8vw,130px); margin-top: 105px; padding-top: 28px; border-top: 1px solid rgba(74,57,50,.22); }
.work-index-label { margin: 7px 0 0; }
.work-index-list > div { display: grid; grid-template-columns: 38px 1fr minmax(220px,.7fr); gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(74,57,50,.16); }
.work-index-list span { color: var(--taupe); font-size: 9px; }
.work-index-list h3 { margin: 0; font-family: var(--serif); font-size: clamp(25px,2.5vw,39px); font-weight: 400; letter-spacing: -.035em; }
.work-index-list p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; letter-spacing: .08em; text-align: right; text-transform: uppercase; }

/* Editorial mockup showcase */
.legacy-work-gallery, .work-index { display: none; }
.more-work-head { margin-bottom: 38px; }
.work-motion-anchor { height: 35px; margin-bottom: 34px; }
.work-motion-bar { position: relative; z-index: 35; display: grid; grid-template-columns: auto minmax(120px,1fr) auto; gap: 18px; align-items: center; margin: 0; padding: 12px 16px; border: 1px solid rgba(74,57,50,.12); border-radius: 999px; background: rgba(239,229,221,.82); box-shadow: 0 10px 30px rgba(68,48,40,.06); backdrop-filter: blur(14px); }
.work-motion-bar.is-pinned { position: fixed; top: 94px; left: var(--work-bar-left); width: var(--work-bar-width); margin: 0; }
.work-motion-bar > span { color: var(--taupe); font-size: 7px; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.work-motion-track { position: relative; height: 1px; background: rgba(74,57,50,.18); }
.work-motion-track i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--work-scroll,0)); transform-origin: left center; }
.work-motion-track b { position: absolute; top: 50%; left: calc(var(--work-scroll,0) * 100%); width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(74,57,50,.08); transform: translate(-50%,-50%); }
.work-motion-count strong { color: var(--ink); font-weight: 500; transition: color .3s ease; }
.more-work[data-work-active="2"] .work-motion-track i, .more-work[data-work-active="2"] .work-motion-track b { background: #9f4549; }
.more-work[data-work-active="2"] .work-motion-count strong { color: #9f4549; }
.work-showcase { display: grid; gap: clamp(110px, 13vw, 190px); }
.work-case { display: grid; grid-template-columns: minmax(210px,.62fr) minmax(0,1.55fr); gap: clamp(42px,6vw,92px); align-items: center; }
.work-case-luna { grid-template-columns: minmax(0,1.55fr) minmax(210px,.62fr); }
.work-case-copy { position: relative; z-index: 4; }
.work-number { display: block; margin-bottom: 28px; color: var(--taupe); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.work-case-copy h3 { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(48px,5.6vw,84px); font-weight: 400; letter-spacing: -.055em; line-height: .93; }
.work-case-copy > p { margin: 0; color: var(--muted); font-family: var(--serif); font-size: clamp(17px,1.45vw,22px); line-height: 1.5; }
.work-case-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.work-case-copy li { padding: 9px 12px 8px; border: 1px solid rgba(74,57,50,.2); border-radius: 999px; font-size: 7px; letter-spacing: .13em; text-transform: uppercase; }
.work-stage { position: relative; min-width: 0; overflow: hidden; border-radius: 28px; box-shadow: 0 30px 70px rgba(52,39,34,.13); }
.asset-crop { position: relative; overflow: hidden; width: 100%; }
.asset-crop img { position: absolute; max-width: none; height: auto; }

.muscle-stage { min-height: 610px; background: radial-gradient(circle at 13% 88%,rgba(91,112,190,.5) 0,transparent 34%),radial-gradient(circle at 88% 10%,rgba(67,91,177,.42) 0,transparent 32%),linear-gradient(145deg,#111d50 0%,#24367e 100%); }
.muscle-stage::before { content: ""; position: absolute; width: 310px; height: 310px; right: -120px; bottom: -125px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.mock-browser { position: absolute; z-index: 1; top: 50px; right: 30px; width: 82%; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: transparent; box-shadow: 0 26px 58px rgba(5,10,34,.38); transform: translate3d(0,var(--main-y,0),0) rotate(1deg); will-change: transform; }
.mock-browser-bar { display: none; }
.mock-browser-bar i { width: 5px; height: 5px; border-radius: 50%; background: #c8beb7; }
.mock-browser-bar span { margin-left: 7px; }
.crop-muskel-banner { aspect-ratio: 2.114 / 1; border-radius: 11px; }
.crop-muskel-banner img { width: 337.84%; left: -19.14%; top: -151%; }
.mock-social { position: absolute; z-index: 3; bottom: 40px; left: 34px; width: 29%; padding: 0; border: 1px solid rgba(255,255,255,.17); border-radius: 10px; background: transparent; box-shadow: 0 22px 44px rgba(4,9,31,.38); transform: translate3d(0,var(--detail-a-y,0),0) rotate(-3deg); will-change: transform; }
.crop-muskel-social { aspect-ratio: 1 / 1; border-radius: 9px; }
.crop-muskel-social img { width: 688%; left: -39%; top: -48%; }
.mock-social > span { position: absolute; left: 4px; top: calc(100% + 10px); display: block; color: rgba(255,255,255,.7); font-size: 6px; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.mock-product-card { position: absolute; z-index: 4; right: 28px; bottom: 28px; width: 35%; padding: 0; border: 1px solid rgba(255,255,255,.17); border-radius: 11px; background: transparent; box-shadow: 0 24px 46px rgba(4,9,31,.4); transform: translate3d(0,var(--detail-b-y,0),0) rotate(3deg); will-change: transform; }
.mock-product-card::after { content: "Product / 02"; position: absolute; right: 4px; top: calc(100% + 10px); color: rgba(255,255,255,.7); font-size: 6px; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.crop-muskel-product { aspect-ratio: 1.08 / 1; border-radius: 10px; }
.crop-muskel-product img { width: 681.8%; left: -140.45%; top: -255.5%; }
.muscle-mark { display: none; }
.muscle-mark small { display: block; margin-bottom: 5px; font-size: 6px; letter-spacing: .18em; text-transform: uppercase; }
.muscle-mark strong { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.muscle-mark strong span { font-style: italic; }

.luna-stage { min-height: 570px; background: linear-gradient(145deg,#d5a19b 0%,#e7c1b8 55%,#f1d8d0 100%); }
.luna-stage::before { content: "LUNA / THERM"; position: absolute; right: -34px; bottom: 23px; color: rgba(255,255,255,.22); font-family: var(--serif); font-size: clamp(50px,7vw,100px); letter-spacing: -.05em; white-space: nowrap; }
.luna-sheet { position: absolute; background: #fbf6f1; box-shadow: 0 28px 55px rgba(105,56,54,.2); }
.luna-sheet-main { z-index: 2; top: 52px; left: 58px; width: 53%; height: 440px; padding: 28px; transform: translate3d(0,var(--main-y,0),0) rotate(-4deg); will-change: transform; }
.crop-luna-logo { aspect-ratio: 1.65 / 1; margin-top: 72px; }
.crop-luna-logo img { width: 471.7%; left: -340.25%; top: -57.5%; }
.luna-sheet-main > span { position: absolute; left: 28px; bottom: 24px; color: #9f7773; font-size: 7px; letter-spacing: .16em; text-transform: uppercase; }
.luna-sheet-small { z-index: 1; top: 88px; right: 36px; width: 40%; height: 265px; padding: 36px 24px; color: #8f4447; transform: translate3d(0,var(--detail-a-y,0),0) rotate(7deg); will-change: transform; }
.luna-sheet-small p { margin: 0; font-family: var(--sans); font-size: clamp(34px,4vw,58px); font-weight: 700; letter-spacing: -.07em; text-transform: uppercase; }
.luna-sheet-small em { display: block; margin: -9px 0 32px 32px; font-family: var(--script); font-size: clamp(32px,3.5vw,50px); }
.luna-sheet-small small { display: block; padding-top: 14px; border-top: 1px solid rgba(143,68,71,.2); font-size: 6px; letter-spacing: .15em; text-transform: uppercase; }
.luna-symbol { position: absolute; z-index: 4; right: 46px; bottom: 46px; width: 150px; height: 150px; overflow: hidden; padding: 10px; border-radius: 50%; background: #9f4549; box-shadow: 0 22px 42px rgba(105,56,54,.25); transform: translate3d(0,var(--detail-b-y,0),0) rotate(8deg); will-change: transform; }
.crop-luna-symbol { height: 100%; border-radius: 50%; }
.crop-luna-symbol img { width: 789.5%; left: -602.6%; top: -192.6%; }
.luna-swatches { position: absolute; z-index: 5; left: 34px; bottom: 26px; display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-radius: 999px; background: rgba(251,246,241,.92); box-shadow: 0 14px 28px rgba(105,56,54,.16); }
.luna-swatches i { width: 17px; height: 17px; border-radius: 50%; background: #f1c7c6; }
.luna-swatches i:nth-child(2) { background: #a1484b; }
.luna-swatches i:nth-child(3) { background: #f8f1eb; border: 1px solid rgba(105,56,54,.13); }
.luna-swatches span { margin-left: 5px; color: #8c6b67; font-size: 6px; letter-spacing: .13em; text-transform: uppercase; }

/* Scroll-velocity brand galleries */
.work-motion-anchor { display: none; }
.velocity-stage { display: flex; align-items: center; min-height: 455px; }
.velocity-stage > :not(.brand-velocity-row) { display: none; }
.brand-velocity-row { overflow: hidden; width: 100%; padding: 48px 0; }
.brand-velocity-track { display: flex; width: max-content; will-change: transform; }
.brand-velocity-group { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(14px,1.5vw,22px); padding-right: clamp(14px,1.5vw,22px); }
.brand-velocity-card { position: relative; flex: 0 0 auto; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.05); box-shadow: 0 22px 48px rgba(4,9,31,.27); transform: translateZ(0); }
.brand-velocity-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-velocity-card > .asset-crop { width: 100%; height: 100%; }
.brand-velocity-card figcaption { position: absolute; z-index: 3; left: 12px; bottom: 11px; padding: 7px 9px; border-radius: 999px; color: rgba(255,255,255,.88); background: rgba(7,13,39,.62); backdrop-filter: blur(8px); font-size: 6px; letter-spacing: .15em; text-transform: uppercase; }
.velocity-card-photo { width: clamp(310px,31vw,480px); aspect-ratio: 1.5 / 1; }
.velocity-card-wide { width: clamp(350px,37vw,570px); aspect-ratio: 2.114 / 1; }
.velocity-card-square { width: clamp(245px,23vw,355px); aspect-ratio: 1 / 1; }
.velocity-card-product { width: clamp(275px,27vw,410px); aspect-ratio: 1.08 / 1; }
.luna-stage .brand-velocity-card { border-color: rgba(126,68,66,.1); background: #fbf6f1; box-shadow: 0 22px 48px rgba(105,56,54,.16); }
.luna-stage .brand-velocity-card figcaption { color: #765552; background: rgba(251,246,241,.82); }
.velocity-card-logo { width: clamp(320px,33vw,500px); aspect-ratio: 1.65 / 1; }
.velocity-card-symbol { width: clamp(245px,23vw,350px); aspect-ratio: 1 / 1; background: #9f4549 !important; }
.velocity-card-symbol .crop-luna-symbol { border-radius: 0; }
.velocity-card-typography { width: clamp(285px,27vw,410px); aspect-ratio: 1.25 / 1; padding: clamp(30px,3vw,48px); color: #8f4447; background: #fbf6f1 !important; }
.velocity-card-typography > p { margin: 0; font-size: clamp(38px,4vw,64px); font-weight: 700; letter-spacing: -.07em; line-height: .8; text-transform: uppercase; }
.velocity-card-typography > em { display: block; margin-left: 35px; font-family: var(--script); font-size: clamp(38px,4vw,62px); line-height: 1; }
.velocity-card-typography > small { position: absolute; left: clamp(30px,3vw,48px); right: clamp(30px,3vw,48px); bottom: 36px; padding-top: 12px; border-top: 1px solid rgba(143,68,71,.18); font-size: 6px; letter-spacing: .16em; text-transform: uppercase; }
.velocity-card-typography figcaption { display: none; }

.more-work { padding-bottom: 0; }

.more-work-exit {
  position: relative;
  z-index: 3;
  height: 0;
  pointer-events: none;
}
.more-work-exit::before {
  content: "";
  position: absolute;
  left: calc(50% - 60vw);
  top: -22px;
  width: 120vw;
  height: 100px;
  border-bottom: 1px solid rgba(255,255,255,.24);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: #dda9a3;
  transition: background-color .45s ease, border-color .45s ease;
}

.brand-bridge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 86vh;
  padding-top: clamp(180px, 18vw, 270px);
  padding-bottom: clamp(110px, 11vw, 175px);
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 24%, rgba(221,169,163,.2), transparent 28%),
    linear-gradient(180deg, #f7f0e9 0%, #f1e7de 100%);
}
.brand-bridge::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -7vw;
  bottom: -26vw;
  width: min(58vw, 780px);
  aspect-ratio: 1;
  border: 1px solid rgba(51,43,40,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255,255,255,.12), 0 0 0 140px rgba(51,43,40,.035);
  pointer-events: none;
}
.brand-bridge-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  justify-items: center;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  gap: clamp(38px,5vw,72px);
  align-items: start;
}
.brand-bridge .section-kicker { justify-self: center; margin: 8px 0 0; }
.brand-bridge-title { width: 100%; text-align: center; }
.brand-bridge-title .eyebrow { justify-content: center; margin-bottom: 28px; }
.brand-bridge-title h2 { max-width: 980px; margin: 0 auto; font-size: clamp(62px,7.7vw,124px); line-height: .88; letter-spacing: -.055em; }
.brand-bridge-title h2 em { display: inline-block; color: #a8585d; font-weight: 400; }
.brand-bridge-copy { width: min(100%,760px); padding-top: 0; text-align: center; }
.brand-bridge-copy > p:first-child { max-width: 700px; margin: 0 auto; font-family: var(--serif); font-size: clamp(19px,1.65vw,27px); line-height: 1.48; }
.brand-bridge-note { max-width: 620px; margin: 28px auto 0; padding-top: 24px; border-top: 1px solid rgba(51,43,40,.18); color: rgba(51,43,40,.62); font-size: 11px; line-height: 1.7; letter-spacing: .03em; }
.brand-capabilities {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  width: min(100%,1080px);
  margin-top: clamp(8px,2vw,28px);
  border-top: 1px solid rgba(51,43,40,.24);
  border-bottom: 1px solid rgba(51,43,40,.24);
}
.brand-capabilities article {
  position: relative;
  min-height: 174px;
  padding: clamp(26px,3vw,42px) clamp(24px,3.5vw,54px) clamp(28px,3.4vw,48px) 0;
}
.brand-capabilities article:nth-child(odd) { border-right: 1px solid rgba(51,43,40,.18); }
.brand-capabilities article:nth-child(even) { padding-left: clamp(24px,3.5vw,54px); padding-right: 0; }
.brand-capabilities article:nth-child(-n+2) { border-bottom: 1px solid rgba(51,43,40,.18); }
.brand-capability-head { display: flex; gap: 18px; align-items: baseline; }
.brand-capability-head span { color: #a8585d; font-family: var(--serif); font-size: 12px; }
.brand-capability-head h3 { margin: 0; font-size: clamp(18px,1.55vw,25px); font-weight: 500; letter-spacing: -.02em; }
.brand-capabilities article > p { max-width: 520px; margin: 22px 0 0 30px; color: rgba(51,43,40,.66); font-size: 10px; line-height: 1.7; letter-spacing: .1em; text-transform: uppercase; }

.contact { min-height: 85vh; padding-top: 150px; padding-bottom: 42px; display: flex; flex-direction: column; justify-content: center; color: #f9f4ef; background: var(--ink); }
.contact h2 { max-width: 1100px; font-size: clamp(60px,9vw,145px); }
.contact h2 em { color: var(--rose); }
.contact-mail { display: flex; align-items: center; justify-content: space-between; margin-top: 70px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); font-family: var(--serif); font-size: clamp(24px,4vw,58px); }
.contact-mail span { color: var(--rose); transition: transform .3s; }
.contact-mail:hover span { transform: translate(7px,-7px); }
.contact-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 70px; color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.contact-bottom a { transition: color .25s ease; }
.contact-bottom a:hover { color: var(--rose); }

/* Legal pages */
.legal-page { min-height: 100vh; color: var(--ink); background: #f3ebe5; }
.legal-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: min(100% - 48px, 1320px); min-height: 68px; margin: 22px auto 0; padding: 0 26px; border: 1px solid rgba(41,35,33,.12); border-radius: 999px; background: rgba(248,243,239,.86); backdrop-filter: blur(18px); }
.legal-back { display: inline-flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.legal-back span { color: var(--rose); font-size: 15px; transition: transform .25s ease; }
.legal-back:hover span { transform: translate(4px,-4px); }
.legal-main { width: min(100% - 48px, 1320px); margin: 0 auto; padding: clamp(100px,12vw,170px) 0 clamp(90px,10vw,140px); }
.legal-title { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); align-items: end; gap: 50px; padding-bottom: clamp(56px,7vw,90px); border-bottom: 1px solid rgba(41,35,33,.18); }
.legal-title .eyebrow { grid-column: 1 / -1; }
.legal-title h1 { margin: 0; font-family: var(--serif); font-size: clamp(72px,11vw,172px); font-weight: 400; line-height: .78; letter-spacing: -.055em; }
.legal-title h1 span { color: var(--rose); }
.legal-title > p:last-child { max-width: 400px; margin: 0 0 8px auto; color: var(--muted); font-family: var(--serif); font-size: clamp(18px,1.55vw,24px); line-height: 1.5; }
.legal-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1px; margin-top: clamp(44px,6vw,80px); border: 1px solid rgba(41,35,33,.16); background: rgba(41,35,33,.16); }
.legal-card { min-width: 0; padding: clamp(34px,5vw,70px); background: #f6efea; }
.legal-card-primary { background: var(--ink); color: #f6efea; }
.legal-number { margin: 0 0 clamp(45px,7vw,90px); color: var(--rose); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.legal-card h2 { margin: 0 0 clamp(55px,7vw,96px); font-family: var(--serif); font-size: clamp(42px,5.4vw,82px); font-weight: 400; line-height: .9; letter-spacing: -.04em; }
.legal-details { margin: 0; }
.legal-details div { display: grid; grid-template-columns: minmax(110px,.68fr) minmax(0,1.32fr); gap: 26px; padding: 21px 0; border-top: 1px solid rgba(41,35,33,.17); }
.legal-card-primary .legal-details div { border-color: rgba(255,255,255,.18); }
.legal-details dt { color: var(--muted); font-size: 8px; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.legal-card-primary .legal-details dt { color: rgba(255,255,255,.48); }
.legal-details dd { min-width: 0; margin: 0; font-family: var(--serif); font-size: clamp(16px,1.35vw,21px); line-height: 1.45; overflow-wrap: anywhere; }
.legal-details dd a { text-decoration: underline; text-decoration-color: rgba(41,35,33,.28); text-underline-offset: 5px; }
.legal-placeholder { color: #a15e60; font-style: italic; }
.legal-card-primary .legal-placeholder { color: #efb5b2; }
.legal-launch-note { display: grid; grid-template-columns: 54px 1fr; gap: 22px; align-items: center; max-width: 760px; margin: clamp(50px,7vw,90px) 0 0 auto; padding: 24px 28px; border: 1px solid rgba(161,94,96,.34); background: rgba(255,255,255,.32); }
.legal-launch-note > span { display: grid; width: 54px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #f7efea; background: #a15e60; font-family: var(--serif); font-size: 22px; }
.legal-launch-note p { margin: 0; }
.legal-launch-note div p:first-child { margin-bottom: 7px; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.legal-launch-note div p:last-child { color: var(--muted); font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.legal-footer { display: flex; justify-content: space-between; gap: 20px; width: min(100% - 48px, 1320px); margin: 0 auto; padding: 25px 0 32px; border-top: 1px solid rgba(41,35,33,.16); color: var(--muted); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.legal-footer p { margin: 0; }
.legal-footer div { display: flex; gap: 26px; }
.legal-footer a { transition: color .25s ease; }
.legal-footer a:hover { color: var(--rose); }

.policy-title h1 { font-size: clamp(64px,9.6vw,150px); }
.policy-intro { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(180px,.7fr); gap: 50px; align-items: end; padding: clamp(48px,6vw,82px) 0; border-bottom: 1px solid rgba(41,35,33,.18); }
.policy-intro > p:first-child { max-width: 810px; margin: 0; font-family: var(--serif); font-size: clamp(21px,2.3vw,34px); line-height: 1.45; }
.policy-version { justify-self: end; margin: 0; color: var(--muted); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.policy-list { border-bottom: 1px solid rgba(41,35,33,.17); }
.policy-section { display: grid; grid-template-columns: minmax(170px,.32fr) minmax(0,.68fr); gap: clamp(35px,8vw,130px); padding: clamp(55px,8vw,110px) 0; border-top: 1px solid rgba(41,35,33,.17); }
.policy-section:first-child { border-top: 0; }
.policy-section .legal-number { margin: 4px 0 0; }
.policy-copy { max-width: 790px; }
.policy-copy h2 { margin: 0 0 32px; font-family: var(--serif); font-size: clamp(34px,4.2vw,64px); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.policy-copy p { margin: 0 0 20px; color: var(--muted); font-family: var(--serif); font-size: clamp(17px,1.42vw,21px); line-height: 1.65; }
.policy-copy address { padding: 28px 0 0; border-top: 1px solid rgba(41,35,33,.17); font-family: var(--serif); font-size: clamp(18px,1.55vw,23px); font-style: normal; line-height: 1.65; }
.policy-copy address strong { font-size: 1.18em; font-weight: 400; }
.policy-copy a { text-decoration: underline; text-decoration-color: rgba(41,35,33,.28); text-underline-offset: 5px; }
.policy-section-dark { position: relative; width: calc(100% + clamp(48px,8vw,120px)); margin-left: calc(clamp(24px,4vw,60px) * -1); padding-right: clamp(24px,4vw,60px); padding-left: clamp(24px,4vw,60px); color: #f6efea; background: var(--ink); }
.policy-section-dark .policy-copy p { color: rgba(255,255,255,.65); }
.policy-section-dark .policy-copy strong { color: #f6efea; }
.policy-section-dark .legal-placeholder { color: #efb5b2; }
.policy-section-rights { border-top-color: rgba(161,94,96,.35); }

/* Thank-you page */
.thank-main { min-height: calc(100svh - 152px); display: grid; align-content: center; }
.thank-title { grid-template-columns: minmax(0,1.18fr) minmax(280px,.82fr); }
.thank-title h1 { max-width: 900px; font-size: clamp(64px,9.2vw,146px); }
.thank-copy { max-width: 520px; margin-left: auto; padding-left: clamp(24px,4vw,56px); border-left: 1px solid rgba(41,35,33,.18); }
.thank-copy > p { margin: 0 0 34px; color: var(--muted); font-family: var(--serif); font-size: clamp(19px,1.65vw,25px); line-height: 1.55; }
.thank-next { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(41,35,33,.16); }
.thank-next span { color: #a15e60; font-family: var(--serif); font-size: 12px; }
.thank-next p { margin: 0; font-size: 10px; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; }
.thank-actions { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 42px; }
.thank-actions .button { color: #fff; background: var(--ink); }
.thank-actions .text-link { align-self: center; }

@media (max-width: 760px) {
  .legal-header { width: calc(100% - 24px); min-height: 60px; margin-top: 10px; padding: 0 16px; }
  .legal-back { font-size: 0; }
  .legal-back span { font-size: 17px; }
  .legal-main { width: calc(100% - 40px); padding-top: 90px; }
  .legal-title { grid-template-columns: 1fr; gap: 28px; }
  .legal-title .eyebrow { grid-column: auto; }
  .legal-title h1 { font-size: clamp(66px,22vw,105px); }
  .legal-title > p:last-child { margin: 0; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-card { padding: 34px 24px 40px; }
  .legal-number { margin-bottom: 48px; }
  .legal-details div { grid-template-columns: 1fr; gap: 8px; }
  .legal-launch-note { grid-template-columns: 42px 1fr; padding: 20px; }
  .legal-launch-note > span { width: 42px; }
  .legal-footer { width: calc(100% - 40px); }
  .legal-footer div { flex-wrap: wrap; justify-content: flex-end; gap: 10px 20px; }
  .policy-title h1 { font-size: clamp(52px,18vw,84px); }
  .policy-intro { grid-template-columns: 1fr; gap: 25px; }
  .policy-version { justify-self: start; }
  .policy-section { grid-template-columns: 1fr; gap: 35px; }
  .policy-section-dark { width: calc(100% + 40px); margin-left: -20px; padding-right: 20px; padding-left: 20px; }
  .thank-main { align-content: start; min-height: 0; }
  .thank-title { grid-template-columns: 1fr; }
  .thank-title h1 { font-size: clamp(58px,18vw,88px); }
  .thank-copy { margin: 12px 0 0; padding: 34px 0 0; border-top: 1px solid rgba(41,35,33,.18); border-left: 0; }
}

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .85s ease, transform .85s cubic-bezier(.22,1,.36,1); }
[data-reveal][data-delay="1"] { transition-delay: .14s; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .site-header { left: 16px; right: 16px; }
  .menu-toggle { position: relative; z-index: 3; display: grid; grid-template-columns: auto 18px; column-gap: 10px; align-items: center; padding: 10px; color: var(--ink); }
  .menu-toggle span { grid-row: 1 / 3; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
  .menu-toggle i { display: block; width: 18px; height: 1px; background: currentColor; transition: transform .3s; }
  .menu-open .menu-toggle i:first-of-type { transform: translateY(2px) rotate(45deg); }
  .menu-open .menu-toggle i:last-of-type { transform: translateY(-2px) rotate(-45deg); }
  .site-nav { position: fixed; inset: -18px -16px auto; min-height: 100svh; padding: 120px 30px 40px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; background: var(--paper-light); transform: translateY(-110%); transition: transform .55s cubic-bezier(.76,0,.24,1); }
  .menu-open .site-nav { transform: none; }
  .site-nav > a { padding: 18px 8px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 38px; letter-spacing: -.03em; text-transform: none; }
  .nav-cta { margin-top: 25px; color: #fff; border: 0; border-radius: 12px; background: var(--ink); text-align: center; }
  .hero { grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); gap: 22px; padding-top: 118px; }
  .hero-copy { max-width: 620px; }
  .hero h1 { font-size: clamp(50px, 6.45vw, 64px); }
  .hero-intro { margin-top: 28px; font-size: 18px; }
  .hero-actions { gap: 20px; margin-top: 28px; }
  .hero-visual { min-height: 560px; }
  .portrait-window { width: 100%; max-width: 450px; aspect-ratio: .84; border-bottom-left-radius: 110px; }
  .hero-note { top: 10%; left: -12px; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .about { min-height: auto; padding-top: 110px; padding-bottom: 110px; grid-template-columns: minmax(300px,.88fr) minmax(0,1.12fr); gap: clamp(34px,4.5vw,54px); }
  .projects-head { grid-template-columns: 1fr 1.3fr; }
  .projects-head > p { grid-column: 2; }
  .projects-head { margin-bottom: 42px; }
  .project-card, .project-card:nth-child(2), .project-card:nth-child(3), .project-card:nth-child(4), .project-sand, .project-blue { position: relative; top: 0; height: auto; min-height: 0; max-height: none; grid-template-columns: 1fr; }
  .project-content { min-height: 390px; padding: 40px; gap: 28px; }
  .project-content h3 { margin-bottom: 18px; font-size: clamp(58px,9vw,82px); }
  .project-copy > p:last-child { max-width: 540px; font-size: 20px; line-height: 1.42; }
  .project-services { padding-top: 16px; }
  .project-media { aspect-ratio: 1.5; }
  .project-sand .project-media { order: 2; }
  .case-head { grid-template-columns: 1fr; gap: 30px; }
  .case-board { grid-template-columns: 1fr; }
  .detail-visual { aspect-ratio: 1.5; }
  .case-summary { min-height: 420px; }
  .expertise-title-row { grid-template-columns: 1fr .65fr; }
  .about-visual { width: 100%; height: min(590px,70vh); border-radius: 150px 18px 18px 18px; }
  .more-work-head { grid-template-columns: 1fr .85fr; gap: 50px; }
  .work-project-media { height: 560px; }
  .work-project-luna { padding-top: 80px; }
  .work-project-luna .work-project-media { height: 480px; }
}

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; gap: 52px; }
  .about-copy { order: -1; }
  .about-visual { max-width: 620px; height: 580px; }
}

@media (max-width: 680px) {
  .section-pad { padding-left: 20px; padding-right: 20px; }
  .site-header { top: 10px; min-height: 58px; padding-left: 16px; }
  .wordmark { flex-direction: column; gap: 0; font-size: 14px; line-height: .92; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 115px; padding-bottom: 45px; }
  .hero h1 { font-size: clamp(50px,15.2vw,76px); line-height: .92; }
  .hero-intro { margin-top: 28px; font-size: 19px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-visual { min-height: 430px; margin-top: 24px; }
  .portrait-window { width: 100%; max-width: none; aspect-ratio: 1.04; border-bottom-left-radius: 90px; }
  .portrait-window figcaption { left: 20px; right: 20px; bottom: 17px; font-size: 7px; }
  .hero-note { top: 9%; left: -5px; }
  .hero-index { display: none; }
  .ticker { padding: 17px 0; }
  .ticker span { padding: 0 22px; }
  .manifesto, .projects, .detail-story, .expertise, .about, .more-work { padding-top: 95px; padding-bottom: 95px; }
  .section-kicker { margin-bottom: 36px; }
  .manifesto-grid { gap: 42px; }
  .manifesto h2, .projects-head h2, .detail-copy h2, .expertise h2, .about h2, .more-work h2 { font-size: clamp(50px,14vw,76px); }
  .manifesto-copy { padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .projects-head { display: block; margin-bottom: 48px; }
  .projects-head h2 { margin-bottom: 25px; }
  .project-stack { gap: 20px; }
  .project-card, .project-card:nth-child(2), .project-card:nth-child(3), .project-card:nth-child(4), .project-sand, .project-blue { position: relative; top: 0; height: auto; min-height: 0; max-height: none; grid-template-columns: 1fr; border-radius: 20px; }
  .project-media { min-height: 0; aspect-ratio: 1.5; }
  .project-media img { height: 100%; }
  .project-sand .project-media { order: 2; }
  .project-content { min-height: 0; padding: 30px 24px 28px; gap: 34px; }
  .project-content h3 { font-size: 56px; }
  .project-copy > p:last-child { font-size: 19px; }
  .case-head { margin-bottom: 42px; }
  .case-board { border-radius: 20px; }
  .case-summary { min-height: 0; padding: 34px 24px; }
  .story-steps { grid-template-columns: 1fr; margin-top: 52px; }
  .story-steps article, .story-steps article + article { padding: 26px 0 30px; border-left: 0; border-bottom: 1px solid var(--line); }
  .story-steps article > span { margin-bottom: 34px; }
  .expertise-title-row { grid-template-columns: 1fr; margin-bottom: 50px; }
  .expertise-list article { grid-template-columns: 42px 1fr 24px; gap: 14px; padding: 26px 0; }
  .expertise-list p { grid-column: 2 / 4; }
  .expertise-list i { grid-column: 3; grid-row: 1; }
  .about { gap: 48px; }
  .about-visual { height: 500px; border-radius: 110px 14px 14px 14px; }
  .about-facts { grid-template-columns: 1fr; }
  .about-facts div { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .more-work-head { grid-template-columns: 1fr; gap: 34px; margin-bottom: 52px; }
  .work-gallery { grid-template-columns: 1fr; gap: 62px; }
  .work-project-luna { padding-top: 0; }
  .work-project-media, .work-project-luna .work-project-media { height: 470px; }
  .work-project-muskel::after { display: none; }
  .work-project-copy { align-items: flex-start; flex-direction: column; gap: 8px; }
  .work-project-copy > p { max-width: none; margin-top: 0; text-align: left; }
  .work-index { grid-template-columns: 1fr; gap: 28px; margin-top: 80px; }
  .work-index-list > div { grid-template-columns: 30px 1fr; gap: 12px; }
  .work-index-list p { grid-column: 2; text-align: left; }
  .contact { min-height: 100svh; }
  .contact h2 { font-size: clamp(50px,15vw,80px); }
  .contact-mail { margin-top: 50px; font-size: 22px; }
  .contact-bottom { flex-direction: column; gap: 10px; }
  .contact-bottom p { margin: 0; }
}

@media (max-width: 980px) {
  .work-case { grid-template-columns: minmax(185px,.58fr) minmax(0,1.42fr); gap: 34px; }
  .work-case-luna { grid-template-columns: minmax(0,1.42fr) minmax(185px,.58fr); }
  .muscle-stage { min-height: 530px; }
  .luna-stage { min-height: 520px; }
  .velocity-stage { min-height: 430px; }
  .mock-browser { top: 45px; right: 25px; }
  .mock-social { left: 24px; bottom: 28px; }
  .mock-product-card { right: 22px; }
  .luna-sheet-main { top: 44px; left: 40px; height: 400px; }
  .luna-sheet-small { right: 24px; }
  .luna-symbol { right: 30px; bottom: 35px; width: 130px; height: 130px; }
}

@media (max-width: 820px) {
  .work-showcase { gap: 105px; }
  .work-case, .work-case-luna { grid-template-columns: 1fr; gap: 40px; }
  .work-case-luna .work-case-copy { order: -1; }
  .work-case-copy { max-width: 620px; }
  .work-stage { min-height: 600px; }
  .work-stage.velocity-stage { min-height: 420px; }
}

@media (max-width: 680px) {
  .work-showcase { gap: 90px; }
  .work-motion-anchor { height: 34px; margin-bottom: 28px; }
  .work-motion-bar { grid-template-columns: minmax(90px,1fr) auto; padding: 11px 14px; }
  .work-motion-bar.is-pinned { top: 78px; }
  .work-motion-bar > span:first-child { display: none; }
  .work-case-copy h3 { font-size: 58px; }
  .work-case-copy > p { font-size: 18px; }
  .work-stage { min-height: 460px; border-radius: 20px; }
  .work-stage.velocity-stage { min-height: 360px; }
  .brand-velocity-row { padding: 34px 0; }
  .mock-browser { top: 36px; right: 18px; width: 86%; }
  .mock-social { left: 16px; bottom: 22px; width: 37%; }
  .mock-product-card { right: 15px; bottom: -8px; width: 42%; }
  .muscle-mark { display: none; }
  .luna-sheet-main { top: 38px; left: 22px; width: 59%; height: 350px; padding: 19px; }
  .crop-luna-logo { margin-top: 65px; }
  .luna-sheet-small { top: 70px; right: 18px; width: 43%; height: 225px; padding: 28px 17px; }
  .luna-sheet-small em { margin-bottom: 22px; }
  .luna-symbol { right: 22px; bottom: 30px; width: 105px; height: 105px; }
  .luna-swatches { left: 18px; bottom: 18px; }
}

/* Unified two-brand velocity composition */
.work-showcase { gap: 12px; }
.work-case, .work-case-luna { grid-template-columns: 1fr; gap: 34px; }
.work-case-luna .work-case-copy { order: 0; }
.work-case-copy { max-width: none; }
.work-case-muskel .work-case-copy,
.work-case-luna .work-case-copy { display: grid; grid-template-columns: minmax(380px,.95fr) minmax(320px,1fr); column-gap: clamp(48px,7vw,110px); align-items: center; }
.work-case-muskel .work-number { grid-column: 1; grid-row: 1; }
.work-case-muskel .work-case-copy h3 { grid-column: 1; grid-row: 2 / 4; align-self: start; }
.work-case-muskel .work-case-copy > p { grid-column: 2; grid-row: 2; }
.work-case-muskel .work-case-copy ul { grid-column: 2; grid-row: 3; }
.work-case-luna .work-number { grid-column: 2; grid-row: 1; }
.work-case-luna .work-case-copy h3 { grid-column: 2; grid-row: 2 / 4; align-self: start; }
.work-case-luna .work-case-copy > p { grid-column: 1; grid-row: 2; }
.work-case-luna .work-case-copy ul { grid-column: 1; grid-row: 3; }
.work-collapse-control {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: clamp(42px,5vw,72px) auto 0;
  padding: 0;
  border: 0;
  color: #713d41;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.work-collapse-control span {
  font-size: 8px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.work-collapse-control svg {
  width: 42px;
  height: 42px;
  padding: 11px;
  border: 1px solid rgba(111,57,61,.34);
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .35s ease;
}
.work-collapse-control:hover svg { transform: translateY(-4px); background: rgba(255,244,238,.24); }
.work-collapse-control:focus-visible { outline: 2px solid #713d41; outline-offset: 7px; border-radius: 999px; }
.work-case-muskel .velocity-stage { border-radius: 28px 28px 9px 9px; }
.work-case-luna .velocity-stage { border-radius: 9px 9px 28px 28px; }

/* Full-bleed widescreen velocity rows */
.work-showcase { gap: 0; }
.work-case, .work-case-luna { gap: 44px; }
.work-stage.velocity-stage { width: 100vw; min-height: 390px; margin-left: calc(50% - 50vw); border-radius: 0; box-shadow: none; }
.work-case-muskel .velocity-stage { background: #1d3272; }
.work-case-luna .velocity-stage { background: #dda9a3; }
.velocity-stage::before { display: none; }
.brand-velocity-row { padding: 34px 0; }
.brand-velocity-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.brand-velocity-card figcaption,
.luna-stage .brand-velocity-card figcaption { left: 13px; bottom: 12px; padding: 0 0 0 8px; border-left: 1px solid currentColor; border-radius: 0; color: rgba(255,255,255,.88); background: transparent; backdrop-filter: none; text-shadow: 0 1px 8px rgba(0,0,0,.42); }
.luna-stage .brand-velocity-card figcaption { color: #704744; text-shadow: 0 1px 8px rgba(255,255,255,.55); }
.velocity-card-photo { width: clamp(390px,42vw,660px); aspect-ratio: 16 / 9; }
.velocity-card-wide { width: clamp(420px,46vw,720px); aspect-ratio: 16 / 9; }
.velocity-card-square { width: clamp(360px,38vw,590px); aspect-ratio: 16 / 9; }
.velocity-card-product { width: clamp(380px,40vw,630px); aspect-ratio: 16 / 9; }
.velocity-card-logo { width: clamp(390px,42vw,660px); aspect-ratio: 16 / 9; }
.velocity-card-symbol { width: clamp(360px,38vw,590px); aspect-ratio: 16 / 9; }
.velocity-card-typography { width: clamp(380px,40vw,630px); aspect-ratio: 16 / 9; padding: 0; }
.brand-velocity-card .crop-muskel-banner img { width: 402%; left: -33.5%; top: -151%; }
.brand-velocity-card .crop-muskel-social img { width: 402%; left: -22.8%; top: -47.6%; }
.brand-velocity-card .crop-muskel-product img { width: 402%; left: -41.6%; top: -255.5%; }
.brand-velocity-card .crop-luna-logo img { width: 437%; left: -309%; top: -57.5%; }
.brand-velocity-card .crop-luna-symbol img { width: 444%; left: -325%; top: -192.6%; }

/* Brand-owned copy stages */
.work-case,
.work-case-luna { gap: 0; }
.work-case-muskel { position: relative; margin-top: 78px; background: #1d3272; }
.work-case-muskel::before { content: ""; position: absolute; z-index: 1; left: calc(50% - 60vw); top: -78px; width: 120vw; height: 100px; border-top: 1px solid rgba(255,255,255,.24); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #1d3272; pointer-events: none; }
.work-case-copy {
  width: 100vw;
  min-height: 350px;
  margin-left: calc(50% - 50vw);
  padding: clamp(58px,7vw,96px) clamp(24px,6vw,96px);
  overflow: hidden;
  isolation: isolate;
}
.work-case-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(280px,34vw,560px);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .09;
  pointer-events: none;
}
.work-case-copy > * { position: relative; z-index: 1; }
.work-case-muskel .work-case-copy {
  color: #f7f8ff;
  background: #1d3272;
}
.work-case-muskel .work-case-copy::before { right: -9vw; bottom: -68%; }
.work-case-muskel .work-number { color: rgba(240,244,255,.58); }
.work-case-muskel .work-case-copy > p { color: rgba(247,248,255,.78); }
.work-case-muskel .work-case-copy li { border-color: rgba(255,255,255,.27); color: rgba(255,255,255,.84); }
.work-case-luna .work-case-copy {
  color: #6f393d;
  background: #dda9a3;
}
.work-case-luna { background: #dda9a3; }
.work-case-luna .work-case-copy::before { left: -10vw; top: -78%; }
.work-case-luna .work-number { color: rgba(111,57,61,.62); }
.work-case-luna .work-case-copy > p { color: rgba(90,48,51,.82); }
.work-case-luna .work-case-copy li { border-color: rgba(111,57,61,.28); color: #713d41; }

.brand-lockup { display: flex; align-items: center; gap: clamp(16px,2vw,28px); }
.brand-lockup .brand-lockup-icon { flex: 0 0 auto; display: grid; place-items: center; }
.brand-lockup svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-lockup-type { display: block; line-height: .72; }
.brand-lockup b,
.brand-lockup em { display: block; font-weight: 400; }
.brand-lockup-muskel { position: relative; justify-self: start; width: max-content; max-width: 100%; padding: 42px 42px 40px 30px; gap: 12px; font-size: clamp(72px,7.4vw,118px) !important; }
.brand-lockup-muskel .muscle-orbit { position: absolute; z-index: -1; inset: -1px -8px -2px -10px; width: calc(100% + 18px); height: calc(100% + 3px); }
.brand-lockup-muskel .muscle-orbit path { fill: none; stroke: #ff6b70; stroke-width: 2.7; stroke-linecap: round; }
.brand-lockup-muskel .brand-lockup-icon { width: clamp(72px,6vw,94px); }
.brand-lockup-muskel .muscle-heart { fill: #ff5d62; stroke: none; }
.brand-lockup-muskel .muscle-pulse { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-lockup-muskel b { color: #fff; font-family: Georgia,var(--serif); font-size: .76em; letter-spacing: -.045em; }
.brand-lockup-muskel em { margin: -.04em 0 0 .62em; color: #fff; font-family: var(--script); font-size: .56em; line-height: .86; transform: rotate(-3deg) scaleX(1.06); transform-origin: left center; }
.brand-lockup-luna { gap: clamp(14px,1.7vw,24px); }
.brand-lockup-luna { justify-self: end; width: max-content; max-width: 100%; min-height: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: clamp(76px,7.5vw,120px) !important; }
.brand-lockup-luna .brand-lockup-icon { width: clamp(124px,10vw,166px); height: clamp(92px,7.5vw,124px); }
.brand-lockup-luna .brand-lockup-icon path { fill: none; stroke: #97474b; stroke-width: 6.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-lockup-luna .brand-lockup-icon img { width: 100%; height: 100%; object-fit: contain; filter: contrast(1.18) saturate(.9); }
.brand-lockup-luna .brand-lockup-type { position: relative; min-width: 245px; padding-bottom: .12em; }
.brand-lockup-luna b { color: #fff3ed; font-family: "Arial Black",var(--sans); font-size: .7em; font-weight: 800; letter-spacing: -.075em; text-shadow: 0 1px 0 rgba(111,57,61,.08); text-transform: uppercase; }
.brand-lockup-luna em { position: relative; z-index: 2; margin: -.2em 0 0 .36em; color: #71383d; font-family: var(--script); font-size: .59em; line-height: .88; transform: rotate(-4deg) scaleX(1.12); transform-origin: left center; }

@media (max-width: 860px) {
  .work-case-muskel .work-case-copy,
  .work-case-luna .work-case-copy { display: block; }
  .work-case-copy h3 { margin-bottom: 22px; }
  .work-case-copy ul { margin-top: 24px; }
  .brand-lockup { margin-bottom: 30px; }
}

@media (max-width: 680px) {
  .work-showcase { gap: 8px; }
  .work-case, .work-case-luna { gap: 0; }
  .work-case-muskel .work-case-copy,
  .work-case-luna .work-case-copy { display: block; }
  .work-case-copy h3 { margin-bottom: 22px; }
  .work-case-copy ul { margin-top: 24px; }
  .work-case-copy { min-height: 0; padding-top: 52px; padding-bottom: 56px; }
  .brand-lockup { margin-bottom: 28px; }
  .work-collapse-control { display: flex; width: max-content; margin: 42px auto 0; }
  .work-case-muskel { margin-top: 52px; }
  .work-case-muskel::before { top: -52px; height: 68px; }
  .brand-lockup-muskel { max-width: 340px; padding: 30px 25px 29px 20px; font-size: 66px !important; }
  .brand-lockup-muskel .brand-lockup-icon { width: 58px; }
  .brand-lockup-luna { width: 100%; max-width: 350px; padding: 0; font-size: 66px !important; }
  .brand-lockup-luna .brand-lockup-icon { width: 86px; height: 66px; }
  .brand-lockup-luna .brand-lockup-type { min-width: 0; }
  .work-case-muskel .velocity-stage { border-radius: 20px 20px 7px 7px; }
  .work-case-luna .velocity-stage { border-radius: 7px 7px 20px 20px; }
}

@media (max-width: 680px) {
  .work-showcase { gap: 0; }
  .work-case, .work-case-luna { gap: 0; }
  .work-stage.velocity-stage { min-height: 280px; border-radius: 0; }
  .brand-velocity-row { padding: 24px 0; }
  .velocity-card-photo { width: 340px; }
  .velocity-card-wide { width: 370px; }
  .velocity-card-square { width: 320px; }
  .velocity-card-product { width: 340px; }
  .velocity-card-logo { width: 350px; }
  .velocity-card-symbol { width: 320px; }
  .velocity-card-typography { width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .work-motion-track i { transform: scaleX(1); }
  .work-motion-track b { left: 100%; }
}

/* Portfolio evidence, case depth and motion */
.project-proof { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; align-items: baseline; padding-top: 16px; border-top: 1px solid currentColor; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.project-proof > span { opacity: .55; }
.project-proof strong { font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.project-proof a, .project-proof small { grid-column: 2; width: max-content; color: inherit; font-size: 8px; letter-spacing: .12em; opacity: .66; }
.project-proof a { padding-bottom: 3px; border-bottom: 1px solid currentColor; transition: opacity .25s; }
.project-proof a:hover { opacity: 1; }
.project-content { gap: 18px; }
.project-services { margin-top: auto; }
.project-flow-mini { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; border-radius: 4px; color: #fff; background: rgba(70,45,40,.28); font-size: 7px; letter-spacing: .11em; text-transform: uppercase; }
.project-flow-mini i { font-style: normal; opacity: .46; }

.case-outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 72px; background: var(--line); border: 1px solid var(--line); }
.case-outcome p { margin: 0; padding: 28px clamp(24px,3vw,44px); color: var(--muted); background: #efe6de; font-family: var(--serif); font-size: clamp(18px,1.7vw,25px); line-height: 1.45; }
.case-outcome span { display: block; margin-bottom: 12px; color: var(--taupe); font-family: var(--sans); font-size: 8px; letter-spacing: .17em; text-transform: uppercase; }

.commerce-study { padding-top: 150px; padding-bottom: 150px; background: #f7efe9; }
.commerce-head { display: grid; grid-template-columns: .52fr 1.48fr; gap: 6vw; align-items: start; }
.commerce-head .section-kicker { margin-top: 5px; }
.commerce-study h2, .motion-case h2, .process h2 { margin: 0; font-family: var(--serif); font-size: clamp(55px,7vw,112px); font-weight: 400; letter-spacing: -.055em; line-height: .9; }
.commerce-study h2 em, .motion-case h2 em, .process h2 em { color: var(--taupe); font-family: var(--script); font-size: .72em; font-weight: 400; }
.commerce-head .lead { max-width: 800px; margin: 34px 0 0; }
.commerce-status { display: grid; grid-template-columns: .75fr 1.25fr 1fr; margin: 72px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.commerce-status > div { padding: 22px 24px 22px 0; }
.commerce-status > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.commerce-status span, .motion-case-facts span { display: block; margin-bottom: 9px; color: var(--taupe); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.commerce-status strong { font-family: var(--serif); font-size: 16px; font-weight: 400; line-height: 1.4; }
.commerce-board { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; min-height: 620px; }
.commerce-board figure { position: relative; min-width: 0; margin: 0; overflow: hidden; border-radius: 26px; background: #dfc9bf; }
.commerce-board img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.75,.2,1); }
.commerce-board figure:hover img { transform: scale(1.015); }
.commerce-board figcaption { position: absolute; left: 18px; bottom: 18px; padding: 10px 13px; color: #fff; background: rgba(43,31,27,.62); backdrop-filter: blur(10px); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.commerce-flow { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 22px 0 72px; padding: 24px clamp(22px,3vw,42px); color: #fff; background: #a87368; border-radius: 100px; }
.commerce-flow span { font-family: var(--serif); font-size: clamp(16px,1.6vw,24px); }
.commerce-flow i { font-style: normal; opacity: .45; }
.commerce-decisions, .motion-case-decisions { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.commerce-decisions article, .motion-case-decisions article { padding: 28px 3.5vw 0 0; }
.commerce-decisions article + article, .motion-case-decisions article + article { padding-left: 3.5vw; border-left: 1px solid var(--line); }
.commerce-decisions span, .motion-case-decisions span { color: var(--taupe); font-family: var(--serif); font-size: 21px; font-style: italic; }
.commerce-decisions h3, .motion-case-decisions h3 { margin: 32px 0 14px; font-family: var(--serif); font-size: clamp(24px,2.1vw,34px); font-weight: 400; line-height: 1.08; }
.commerce-decisions p, .motion-case-decisions p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.motion-case { padding-top: 145px; padding-bottom: 145px; color: #edf3ff; background: radial-gradient(circle at 80% 8%,rgba(55,105,255,.26),transparent 30%),#080c14; }
.motion-case-copy { display: grid; grid-template-columns: .45fr 1.12fr .78fr; gap: 5vw; align-items: start; margin-bottom: 70px; }
.motion-case-copy .section-kicker { margin-top: 5px; }
.motion-case h2 em { color: #6f98ff; }
.motion-case-copy > .lead { margin: 6px 0 0; color: rgba(237,243,255,.7); }
.motion-case-facts { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.motion-case-facts > div { padding: 22px 24px 0 0; }
.motion-case-facts > div + div { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.16); }
.motion-case-facts span { color: #7598ee; }
.motion-case-facts p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.45; }
.motion-film, .brand-motion-film { position: relative; margin: 0; overflow: hidden; background: #070b12; }
.motion-film { width: calc(100% + clamp(48px,12vw,192px)); margin-left: calc(clamp(24px,6vw,96px) * -1); aspect-ratio: 16 / 7.5; }
.motion-film video, .brand-motion-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.motion-film::after, .brand-motion-film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,transparent 58%,rgba(3,7,14,.64)); }
.motion-film figcaption, .brand-motion-film figcaption { position: absolute; z-index: 2; left: clamp(22px,5vw,76px); right: clamp(22px,5vw,76px); bottom: clamp(20px,3vw,42px); display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.5); color: #fff; }
.motion-film figcaption span, .brand-motion-film figcaption span { font-family: var(--serif); font-size: 18px; }
.motion-film figcaption p, .brand-motion-film figcaption p { margin: 0; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.motion-film figcaption small, .brand-motion-film figcaption small { opacity: .62; font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }
.motion-case-decisions { margin-top: 70px; border-color: rgba(255,255,255,.18); }
.motion-case-decisions article + article { border-color: rgba(255,255,255,.18); }
.motion-case-decisions span { color: #6f98ff; }
.motion-case-decisions p { color: rgba(237,243,255,.6); }

.process { padding-top: 145px; padding-bottom: 145px; background: #ded0c5; }
.process-head { display: grid; grid-template-columns: .48fr 1.12fr .55fr; gap: 5vw; align-items: end; margin-bottom: 72px; }
.process-head .section-kicker { align-self: start; margin: 4px 0 0; }
.process-head > p { margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.process-list { border-top: 1px solid rgba(41,35,33,.25); }
.process-list article { display: grid; grid-template-columns: 80px 1fr .45fr; gap: 28px; align-items: center; padding: 30px 8px; border-bottom: 1px solid rgba(41,35,33,.25); transition: padding .35s,background .35s; }
.process-list article:hover { padding-left: 20px; padding-right: 20px; background: rgba(255,255,255,.18); }
.process-list article > span { color: var(--taupe); font-family: var(--serif); font-size: 20px; font-style: italic; }
.process-list article p { margin: 0 0 7px; color: var(--taupe); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.process-list h3 { margin: 0; font-family: var(--serif); font-size: clamp(25px,2.6vw,40px); font-weight: 400; line-height: 1.1; }
.process-list small { color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

.brand-motion-film { width: 100vw; margin: 0 calc(50% - 50vw); aspect-ratio: 16 / 6.4; }
.work-case-muskel { overflow: visible; }
.work-case-muskel .brand-motion-film { color: #fff; background: #123c83; }
.contact-context { display: grid; grid-template-columns: 1fr .65fr .9fr; gap: 30px; margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.contact-context > p { max-width: 520px; margin: 0; color: rgba(255,255,255,.66); font-family: var(--serif); font-size: clamp(18px,1.7vw,25px); }
.contact-context span { display: block; margin-bottom: 9px; color: var(--rose); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.contact-context strong { display: block; max-width: 320px; font-size: 11px; font-weight: 400; line-height: 1.6; }
.contact-links { display: flex; justify-content: flex-end; margin-top: 18px; }
.contact-links a { padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.contact-links span { margin-left: 8px; color: var(--rose); }

[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 1; transform: translateY(18px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .commerce-head, .motion-case-copy, .process-head { grid-template-columns: 1fr; }
  .commerce-head .section-kicker, .motion-case-copy .section-kicker, .process-head .section-kicker { margin-bottom: 18px; }
  .motion-case-facts { grid-column: auto; }
  .commerce-board { min-height: 520px; }
  .motion-film { aspect-ratio: 16 / 9; }
  .process-head > p { max-width: 600px; }
}

@media (max-width: 680px) {
  .commerce-study, .motion-case, .process { padding-top: 95px; padding-bottom: 95px; }
  .commerce-study h2, .motion-case h2, .process h2 { font-size: clamp(50px,14vw,76px); }
  .project-proof { grid-template-columns: 1fr; }
  .project-proof a, .project-proof small { grid-column: 1; }
  .project-flow-mini { overflow-x: auto; justify-content: flex-start; }
  .project-flow-mini span { white-space: nowrap; }
  .case-outcome, .commerce-status, .commerce-board, .commerce-decisions, .motion-case-facts, .motion-case-decisions, .contact-context { grid-template-columns: 1fr; }
  .commerce-status > div, .commerce-status > div + div, .motion-case-facts > div, .motion-case-facts > div + div { padding: 17px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .commerce-board { min-height: 0; }
  .commerce-board figure { min-height: 360px; border-radius: 18px; }
  .commerce-detail { min-height: 440px !important; }
  .commerce-flow { overflow-x: auto; justify-content: flex-start; border-radius: 18px; }
  .commerce-flow span { white-space: nowrap; }
  .commerce-decisions article, .commerce-decisions article + article, .motion-case-decisions article, .motion-case-decisions article + article { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .motion-case-facts > div + div, .motion-case-decisions article + article { border-color: rgba(255,255,255,.18); }
  .motion-film, .brand-motion-film { aspect-ratio: 4 / 5; }
  .motion-film figcaption, .brand-motion-film figcaption { grid-template-columns: 1fr; gap: 7px; }
  .process-list article { grid-template-columns: 42px 1fr; gap: 16px; }
  .process-list small { grid-column: 2; }
  .contact-context { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .more-work-panel,
  .js .more-work-panel.is-open,
  .js .more-work-toggle,
  .more-work-toggle-icon svg { transition: none; }
}

@media (max-width: 680px) {
  .more-work { margin-top: 48px; }
  .more-work::before { top: -48px; height: 64px; }
  .more-work-spinning-text {
    top: -48px;
    right: 20px;
    width: 96px;
  }
  .more-work-spinning-text text { font-size: 6.3px; }
  .more-work-spinning-text > span { font-size: 14px; }
  .js .more-work-toggle { grid-template-columns: minmax(0,1fr) 46px; gap: 14px; padding: 12px 12px 12px 22px; }
  .more-work-toggle-brands { display: none; }
  .more-work-toggle-icon { width: 46px; height: 46px; }
  .more-work-toggle-copy strong { font-size: 19px; }
  .more-work-panel-inner { padding-top: 50px; }
}

@media (max-width: 980px) {
  .brand-bridge-inner { max-width: 860px; }
}

@media (max-width: 680px) {
  .more-work { padding-bottom: 0; }
  .js .more-work:not(.is-expanded) { padding-bottom: 68px; }
  .more-work-exit::before { top: -16px; height: 68px; }
  .brand-bridge { min-height: 0; padding-top: 140px; padding-bottom: 100px; }
  .brand-bridge::after { right: -42vw; bottom: -10vw; width: 110vw; }
  .brand-bridge-inner { gap: 34px; }
  .brand-bridge .section-kicker { margin: 0 0 4px; }
  .brand-bridge-title h2 { font-size: clamp(54px,15vw,76px); }
  .brand-bridge-copy { padding-top: 0; }
  .brand-bridge-copy > p:first-child { font-size: 20px; }
  .brand-bridge-note { margin-top: 22px; }
  .brand-capabilities { grid-template-columns: 1fr; margin-top: 12px; }
  .brand-capabilities article,
  .brand-capabilities article:nth-child(even),
  .brand-capabilities article:nth-child(odd) {
    min-height: 0;
    padding: 26px 0 28px;
    border-right: 0;
    border-bottom: 1px solid rgba(51,43,40,.18);
  }
  .brand-capabilities article:last-child { border-bottom: 0; }
  .brand-capabilities article > p { margin-top: 14px; }
}

/* Contact form */
.contact {
  display: block;
  min-height: 0;
  padding-top: clamp(120px, 12vw, 190px);
  padding-bottom: 42px;
}
.contact-heading {
  display: grid;
  grid-template-columns: minmax(180px,.42fr) minmax(0,1.58fr);
  gap: clamp(36px,6vw,100px);
  align-items: start;
}
.contact-heading .eyebrow { margin-top: 14px; }
.contact-heading h2 { max-width: 1120px; margin: 0; font-size: clamp(62px,7.1vw,116px); line-height: .92; letter-spacing: -.05em; }
.contact-heading h2 em { display: inline-block; font-size: .9em; }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(250px,.65fr) minmax(520px,1.35fr);
  gap: clamp(60px,8vw,138px);
  margin-top: clamp(92px,10vw,150px);
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.24);
}
.contact-intro > p { max-width: 430px; margin: 0 0 48px; color: rgba(255,255,255,.7); font-family: var(--serif); font-size: clamp(19px,1.7vw,27px); line-height: 1.48; }
.contact-context { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; border: 0; }
.contact-context > div { padding-top: 13px; border-top: 1px solid rgba(255,255,255,.14); }
.contact-context span { margin-bottom: 8px; }
.contact-context strong { color: rgba(255,255,255,.76); font-weight: 400; }
.contact-mail { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 52px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); font-family: var(--serif); font-size: clamp(20px,2vw,30px); }
.contact-links { justify-content: flex-start; margin-top: 22px; }
.contact-form { min-width: 0; }
.contact-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,62px); }
.contact-form label { display: block; min-width: 0; margin-bottom: 34px; }
.contact-form label > span { display: block; margin-bottom: 13px; color: var(--rose); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 0 0 15px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  border-radius: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font: 400 clamp(18px,1.55vw,25px)/1.4 var(--serif);
  transition: border-color .3s ease;
}
.contact-form textarea { min-height: 122px; resize: vertical; }
.contact-form select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg,transparent 50%,var(--rose) 50%),linear-gradient(135deg,var(--rose) 50%,transparent 50%); background-position: calc(100% - 7px) 11px,calc(100% - 2px) 11px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
.contact-form select option { color: var(--ink); background: #f5eee8; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,.38); opacity: 1; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--rose); }
.contact-message { margin-top: 10px; }
.contact-form .contact-privacy { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; margin: -5px 0 34px; cursor: pointer; }
.contact-privacy input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact-form .contact-privacy > span { display: block; width: 22px; height: 22px; margin: 0; border: 1px solid rgba(255,255,255,.34); transition: border-color .2s ease, background .2s ease; }
.contact-form .contact-privacy > span::after { content: ""; display: block; width: 10px; height: 6px; margin: 6px 0 0 5px; border-bottom: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); opacity: 0; transform: rotate(-45deg) translateY(-1px); transition: opacity .2s ease; }
.contact-privacy input:checked + span { border-color: var(--rose); background: var(--rose); }
.contact-privacy input:checked + span::after { opacity: 1; }
.contact-privacy input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 4px; }
.contact-privacy small { color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.65; }
.contact-privacy a { color: #fff; text-decoration: underline; text-decoration-color: rgba(217,170,162,.72); text-underline-offset: 4px; }
.contact-form-action { display: flex; gap: 30px; align-items: center; justify-content: space-between; margin-top: 12px; }
.contact-form-action > div { max-width: 360px; }
.contact-form-action > div > p { margin: 0; color: rgba(255,255,255,.42); font-size: 9px; line-height: 1.6; }
.contact-form-status { min-height: 18px; margin-top: 10px !important; color: rgba(255,255,255,.72) !important; }
.contact-form-status.is-success { color: #b8d6c1 !important; }
.contact-form-status.is-error { color: #f0b7b2 !important; }
.contact-form button { display: inline-flex; gap: 24px; align-items: center; justify-content: center; min-width: 220px; padding: 20px 24px; border: 0; border-radius: 999px; color: var(--ink); background: var(--rose); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform .3s ease,background .3s ease; }
.contact-form button span { font-size: 15px; }
.contact-form button [data-contact-label] { font-size: inherit; }
.contact-form button:hover { transform: translateY(-3px); background: #e6c4c0; }
.contact-form button:disabled { cursor: wait; opacity: .72; transform: none; }
.contact-bottom { margin-top: clamp(100px,12vw,170px); }

@media (max-width: 980px) {
  .contact-heading { grid-template-columns: 1fr; gap: 32px; }
  .contact-heading .eyebrow { margin-top: 0; }
  .contact-layout { grid-template-columns: minmax(220px,.58fr) minmax(440px,1.42fr); gap: 50px; }
}

@media (max-width: 680px) {
  .contact { padding-top: 100px; }
  .contact-heading h2 { font-size: clamp(52px,14.4vw,72px); }
  .contact-heading h2 em { font-size: .78em; line-height: 1; }
  .contact-layout { grid-template-columns: 1fr; gap: 72px; margin-top: 78px; }
  .contact-intro > p { font-size: 20px; }
  .contact-mail { font-size: 21px; }
  .contact-form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form label { margin-bottom: 30px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size: 20px; }
  .contact-form-action { align-items: stretch; flex-direction: column; gap: 24px; }
  .contact-form-action > div { order: 2; }
  .contact-form button { width: 100%; }
  .contact-bottom { margin-top: 100px; }
}

/* Visual design archive */
.graphic-archive {
  overflow: hidden;
  padding-top: 140px;
  padding-bottom: 140px;
  color: #f5efe9;
  background:
    radial-gradient(circle at 14% 4%,rgba(190,111,116,.18),transparent 34%),
    radial-gradient(circle at 88% 88%,rgba(91,114,184,.15),transparent 32%),
    #171515;
}
.graphic-archive-head {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(48px,8vw,130px);
  align-items: end;
  margin-bottom: 72px;
}
.graphic-archive .section-kicker { color: rgba(255,255,255,.68); }
.graphic-archive .section-kicker span { color: #d79ba0; }
.graphic-archive h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(55px,7vw,112px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .9;
}
.graphic-archive h2 em {
  color: #d79ba0;
  font-family: var(--script);
  font-size: .72em;
  font-weight: 400;
}
.graphic-archive-intro { max-width: 520px; padding-bottom: 8px; }
.graphic-archive-intro p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-family: var(--serif);
  font-size: clamp(20px,1.75vw,28px);
  line-height: 1.45;
}
.graphic-archive-intro span {
  display: block;
  margin-top: 28px;
  color: rgba(255,255,255,.38);
  font-size: 7px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.graphic-archive-stage {
  position: relative;
  width: min(1180px,100%);
  height: min(720px,72vw);
  min-height: 580px;
  margin: 0 auto;
  overflow: hidden;
  perspective: 1100px;
}
.graphic-streams {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(12px,1.6vw,24px);
  width: calc(100% - 110px);
  height: calc(100% + 170px);
  margin: -84px auto 0;
  transform: translateX(14px) rotateX(5deg) rotateY(-9deg) rotateZ(2.2deg);
  transform-style: preserve-3d;
}
.graphic-stream { min-width: 0; overflow: hidden; }
.graphic-stream-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  animation: graphic-stream-up var(--stream-duration,36s) linear infinite;
}
.graphic-stream-reverse .graphic-stream-track { animation-name: graphic-stream-down; }
.graphic-stream-group {
  display: grid;
  gap: clamp(12px,1.6vw,24px);
  flex: 0 0 auto;
  padding-bottom: clamp(12px,1.6vw,24px);
}
.graphic-stream:hover .graphic-stream-track,
.graphic-stream:focus-within .graphic-stream-track { animation-play-state: paused; }
.graphic-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #fff;
  background: #242020;
  box-shadow: 0 22px 54px rgba(0,0,0,.34);
  cursor: zoom-in;
  text-align: left;
  transform: translateZ(0);
}
.graphic-card-tall { aspect-ratio: 4 / 4.7; }
.graphic-card-wide { aspect-ratio: 16 / 10; }
.graphic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 48%,rgba(4,4,5,.84));
  opacity: .82;
  transition: opacity .35s ease;
}
.graphic-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s cubic-bezier(.22,1,.36,1),filter .45s ease;
}
.graphic-card > span {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 15px;
  left: 16px;
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
}
.graphic-card b { font-family: var(--serif); font-size: clamp(14px,1.25vw,19px); font-weight: 400; }
.graphic-card small { opacity: .62; font-size: 6px; letter-spacing: .14em; text-transform: uppercase; }
.graphic-card:hover img,
.graphic-card:focus-visible img { filter: saturate(1.05) contrast(1.03); transform: scale(1.045); }
.graphic-card:hover::after,
.graphic-card:focus-visible::after { opacity: 1; }
.graphic-card:focus-visible { outline: 2px solid #e1a8ac; outline-offset: -2px; }
.graphic-archive-fade {
  position: absolute;
  z-index: 5;
  right: 0;
  left: 0;
  height: 18%;
  pointer-events: none;
}
.graphic-archive-fade-top { top: 0; background: linear-gradient(#171515,transparent); }
.graphic-archive-fade-bottom { bottom: 0; background: linear-gradient(transparent,#171515); }
@keyframes graphic-stream-up { to { transform: translateY(-50%); } }
@keyframes graphic-stream-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.graphic-dialog {
  width: min(1180px,calc(100% - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: #f2e9e2;
  box-shadow: 0 40px 120px rgba(0,0,0,.52);
}
.graphic-dialog::backdrop {
  background: rgba(12,10,10,.78);
  backdrop-filter: blur(12px);
}
.graphic-dialog-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); min-height: min(720px,calc(100dvh - 48px)); }
.graphic-dialog-media { min-height: 0; margin: 0; overflow: hidden; background: #121111; }
.graphic-dialog-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.graphic-dialog-copy { align-self: end; padding: clamp(34px,4vw,66px); }
.graphic-dialog-copy > span { color: var(--taupe); font-size: 7px; letter-spacing: .16em; text-transform: uppercase; }
.graphic-dialog-copy h3 { margin: 18px 0 24px; font-family: var(--serif); font-size: clamp(34px,3.5vw,56px); font-weight: 400; letter-spacing: -.045em; line-height: .95; }
.graphic-dialog-copy > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.graphic-dialog-copy dl { display: grid; gap: 16px; margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.graphic-dialog-copy dl div { display: grid; grid-template-columns: 85px 1fr; gap: 15px; }
.graphic-dialog-copy dt { color: var(--taupe); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }
.graphic-dialog-copy dd { margin: 0; font-family: var(--serif); font-size: 14px; }
.graphic-dialog-close {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(12,10,10,.46);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font: 300 28px/1 var(--sans);
}
.graphic-dialog-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.has-graphic-dialog { overflow: hidden; }

@media (max-width: 900px) {
  .graphic-archive { padding-top: 100px; padding-bottom: 100px; }
  .graphic-archive-head { grid-template-columns: 1fr; gap: 34px; margin-bottom: 54px; }
  .graphic-archive-stage { width: calc(100% + 48px); height: auto; min-height: 0; margin-left: -24px; overflow-x: auto; perspective: none; scrollbar-width: none; }
  .graphic-archive-stage::-webkit-scrollbar { display: none; }
  .graphic-streams {
    display: flex;
    gap: 14px;
    width: max-content;
    height: auto;
    margin: 0;
    padding: 0 24px 18px;
    transform: none;
  }
  .graphic-stream,
  .graphic-stream-track,
  .graphic-stream-group { display: contents; }
  .graphic-stream-group[aria-hidden="true"] { display: none; }
  .graphic-card,
  .graphic-card-tall,
  .graphic-card-wide { flex: 0 0 min(72vw,390px); width: min(72vw,390px); aspect-ratio: 4 / 3; border-radius: 5px; }
  .graphic-card > span { right: 14px; bottom: 13px; left: 14px; }
  .graphic-archive-fade { display: none; }
  .graphic-dialog { overflow-y: auto; }
  .graphic-dialog-layout { grid-template-columns: 1fr; }
  .graphic-dialog-media { min-height: 52dvh; }
}

@media (max-width: 600px) {
  .graphic-archive h2 { font-size: clamp(50px,14vw,72px); }
  .graphic-archive-intro span { display: none; }
  .graphic-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .graphic-dialog-layout { min-height: auto; }
  .graphic-dialog-media { min-height: 45dvh; }
  .graphic-dialog-copy { padding: 32px 24px 38px; }
  .graphic-dialog-copy dl div { grid-template-columns: 1fr; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .graphic-stream-track { animation: none; }
  .graphic-stream-group[aria-hidden="true"] { display: none; }
  .graphic-card img { transition: none; }
}