@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap");
:root { --blue: #e7eef2; --rust: #932b15; --line: #932b1540; --serif: 'Instrument Serif',Georgia,serif; --mono: 'DM Mono',monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0px; background: var(--blue); color: var(--rust); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: currentcolor solid 2px; outline-offset: 7px; }
header { padding: 30px 4.5%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wordmark { font-family: var(--serif); font-size: 32px; line-height: 1; }
.wordmark span { display: block; font: 9px var(--mono); letter-spacing: 2px; margin-top: 9px; }
nav { display: flex; gap: 40px; font: 12px var(--mono); }
nav a:hover, .text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.eyebrow { font: 11px var(--mono); letter-spacing: 1.6px; }
h1, h2, h3, p { margin-top: 0px; }
h1, h2, h3 { font-weight: 400; font-family: var(--serif); }
.hero { padding: 60px 4.5% 85px; }
.hero > .eyebrow { text-align: center; }
h1 { text-align: center; font-size: clamp(80px, 11.7vw, 178px); line-height: 0.88; letter-spacing: -5px; margin: 35px 0px 40px; }
em { font-weight: 400; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: auto; }
.hero-bottom p { font-size: 13px; line-height: 1.7; margin: 0px; }
.round-link { height: 54px; width: 54px; border: 1px solid var(--rust); border-radius: 50%; display: grid; place-items: center; font-size: 25px; }
.script { font-family: var(--serif); font-style: italic; transform: rotate(-8deg); font-size: 30px !important; line-height: 1.1 !important; }
.hero-collage { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8%; align-items: center; max-width: 1120px; margin: 65px auto 0px; }
.hero-photo { display: block; max-width: 300px; transform: rotate(-5deg); }
.hero-photo img { width: 100%; height: 300px; object-fit: cover; display: block; }
.hero-photo span { font: 9px var(--mono); display: block; margin-top: 15px; }
.hero-photo.second { transform: rotate(6deg); margin-top: 40px; }
.hero-photo.second img { height: 235px; }
.hero-note { font: 12px/1.6 var(--mono); text-align: center; }
.asterisk { font-size: 100px; display: block; margin-top: 10px; line-height: 1.2; }
.work { padding: 75px 5% 90px; border-top: 1px solid var(--line); }
.section-top { display: flex; align-items: end; justify-content: space-between; }
.section-top p:last-child { font: 12px/1.6 var(--mono); }
h2 { font-size: clamp(60px, 7vw, 102px); line-height: 0.95; letter-spacing: -2px; margin: 20px 0px 35px; }
.filters { display: flex; gap: 20px; border-top: 1px solid var(--line); padding: 20px 0px 35px; flex-wrap: wrap; }
.filters button { border: 0px; background: none; padding: 8px 0px; font: 11px var(--mono); opacity: 0.65; }
.filters button.active { opacity: 1; border-bottom: 1px solid var(--rust); }
.projects { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 8%; }
.project:nth-child(2n) { margin-top: 95px; }
.project button { display: block; text-align: left; width: 100%; padding: 0px; border: 0px; background: none; }
.project .cover { height: 420px; overflow: hidden; position: relative; background: rgb(213, 214, 202); }
.cover img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.5s; }
.project button:hover img { transform: scale(1.04); }
.project .meta { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; display: flex; justify-content: space-between; margin: 19px 0px 10px; gap: 12px; line-height: 1.5; }
.project h3 { font-size: 42px; line-height: 1; margin-bottom: 10px; display: flex; justify-content: space-between; }
.project h3 span { font: 27px var(--mono); }
.project .roles { font-size: 12px; line-height: 1.7; max-width: 90%; margin: 0px; }
.cover.graphic { padding: 35px; display: flex; flex-direction: column; justify-content: space-between; }
.graphic .label { font: 11px var(--mono); }
.graphic .big { font: 80px/.9 var(--serif); letter-spacing: -3px; }
.graphic .big em { display: block; }
.graphic .graphic-bottom { font: 12px var(--mono); }
.graphic.durex { background: rgb(25, 60, 113); color: rgb(233, 240, 255); }
.graphic.tax { background: rgb(201, 219, 156); color: rgb(41, 56, 43); }
.graphic.voice { background: rgb(240, 210, 179); color: rgb(147, 43, 21); }
.graphic.veet { background: rgb(229, 195, 202); color: rgb(122, 33, 55); }
.graphic.milk { background: rgb(147, 43, 21); color: rgb(231, 238, 242); }
.badge { position: absolute; bottom: 20px; left: 20px; background: var(--blue); color: var(--rust); padding: 11px 13px; font: 10px var(--mono); }
.footnote { font: 10px/1.7 var(--mono); margin: 60px 0px 0px; max-width: 720px; }
.about { background: var(--rust); color: var(--blue); padding: 100px 7%; display: grid; grid-template-columns: 1fr 2fr; gap: 55px 10%; }
.about-mark { font: 150px var(--serif); position: relative; align-self: center; transform: rotate(-10deg); }
.about-mark span { font-size: 120px; display: block; margin-left: 60px; }
.about-copy h2 { font-size: 84px; }
.about-copy p { font-size: 15px; line-height: 1.8; max-width: 620px; }
.about-copy .intro { font: 29px/1.2 var(--serif); }
.about-copy .eyebrow { font: 10px var(--mono); }
.about-copy { align-self: center; transform: translateY(-70px); }
.text-link { font: 10px var(--mono); display: inline-block; margin-top: 15px; }
.skills { grid-column: 2; }
.skills .script { display: inline-block; margin-bottom: 24px; font-size: 40px !important; }
.skills p { font: 13px/1.9 var(--mono); }
.skills small { font: 9px var(--mono); letter-spacing: 1px; }
.studio { text-align: center; padding: 100px 5%; border-bottom: 1px solid var(--line); }
.studio h2 { font-size: clamp(65px, 10vw, 135px); }
.studio p { line-height: 1.8; font-size: 14px; }
.studio a { display: inline-block; margin-top: 20px; border-bottom: 1px solid; padding-bottom: 8px; font: 11px var(--mono); }
footer { padding: 48px 5% 20px; }
footer h2 { font-size: clamp(56px, 9vw, 128px); line-height: 0.9; letter-spacing: -3px; }
.contact-links { display: flex; gap: 26px; margin: 28px 0px 40px; font: 11px var(--mono); }
.contact-links a { border-bottom: 0; padding-bottom: 0; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; font: 9px var(--mono); gap: 20px; }
dialog { border: 0px; background: var(--blue); color: var(--rust); width: min(850px, 94vw); max-height: 90vh; padding: 65px 55px 45px; }
dialog::backdrop { background: rgba(40, 21, 14, 0.85); backdrop-filter: blur(7px); }
.close { position: absolute; right: 25px; top: 20px; border: 0px; background: none; font: 12px var(--mono); }
dialog h2 { font-size: 65px; }
dialog p { line-height: 1.8; font-size: 15px; }
dialog .detail-roles { font: 11px/1.8 var(--mono); border-top: 1px solid var(--line); padding-top: 20px; }
dialog .watch { display: flex; justify-content: space-between; gap: 20px; padding: 19px 0px; border-bottom: 1px solid var(--line); font-size: 14px; }
dialog .watch:hover { text-decoration: underline; }
dialog .watch small { font: 10px/1.5 var(--mono); text-align: right; }
dialog img { width: 100%; max-height: 340px; object-fit: cover; margin-bottom: 25px; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
@media (min-width: 1500px) {
  main, header { max-width: 1800px; margin: auto; }
}
@media (max-width: 700px) {
  header { padding: 22px 6%; }
  .wordmark { font-size: 25px; }
  nav { gap: 18px; font-size: 10px; }
  nav a:nth-child(2) { display: none; }
  .hero { padding: 45px 6% 65px; }
  h1 { font-size: 83px; letter-spacing: -3px; }
  .hero-bottom { gap: 20px; }
  .hero-bottom p { font-size: 11px; }
  .hero-bottom .script { display: none; }
  .round-link { flex-shrink: 0; }
  .hero-collage { gap: 22px; grid-template-columns: 1fr 1fr; margin-top: 45px; }
  .hero-photo img { height: 235px; }
  .hero-photo.second img { height: 180px; }
  .hero-note { display: none; }
  .hero-photo span { font-size: 8px; line-height: 1.5; }
  .work { padding: 60px 6%; }
  .section-top { display: block; }
  .section-top > p { margin-bottom: 25px; }
  .filters { gap: 18px; }
  .projects { grid-template-columns: 1fr; gap: 45px; }
  .project:nth-child(2n) { margin-top: 0px; }
  .project .cover { height: 380px; }
  .project h3 { font-size: 39px; }
  .about { display: block; padding: 65px 7%; }
  .about-mark { display: none; }
  .about-copy h2 { font-size: 65px; }
  .about-copy { transform: none; }
  .skills { margin-top: 50px; }
  .studio { padding: 70px 6%; }
  .contact-links { flex-direction: column; align-items: start; gap: 14px; margin: 22px 0 30px; }
  .footer-bottom { flex-wrap: wrap; font-size: 8px; padding-top: 16px; }
  footer { padding: 40px 6% 18px; }
  dialog { padding: 60px 25px 35px; }
  dialog h2 { font-size: 49px; }
  dialog .watch { align-items: start; }
  h2 { letter-spacing: -1px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
.bio-film { align-self: start; margin-top: 100px; transform: rotate(-4deg); }
.video-wrap { position: relative; }
.bio-film video { width: 100%; display: block; background: rgb(49, 27, 22); aspect-ratio: 4 / 5; object-fit: cover; }
.bio-film .script { margin: 30px 0px 20px; font-size: 38px !important; }
.bio-film .eyebrow { font-size: 8px; }
.video-wrap button { position: absolute; inset: 0px; border: 0px; background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.467)); color: white; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; font: 10px var(--mono); }
.video-wrap button span { width: 65px; height: 65px; border: 1px solid white; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: rgba(255, 255, 255, 0.125); backdrop-filter: blur(3px); }
@media (max-width: 700px) {
  .bio-film { max-width: 280px; margin: 0px auto 65px; }
  .about-copy { margin-top: 40px; }
}
.campaign-results { margin-top: 25px; border-top: 1px solid var(--line); padding-top: 22px; }
.campaign-results > .eyebrow { font: 9px var(--mono); letter-spacing: 1px; }
.campaign-results dl { margin: 20px 0px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campaign-results dl > div { display: flex; flex-direction: column-reverse; justify-content: end; }
.campaign-results dl > div:last-child { grid-column: 1 / -1; }
.campaign-results dt { font: 10px/1.5 var(--mono); margin-top: 5px; }
.campaign-results dd { margin: 0px; font: 38px/1 var(--serif); }
.campaign-results .results-source { font: 10px/1.7 var(--mono); margin: 0px; max-width: 500px; }
.results-source a { text-decoration: underline; text-underline-offset: 3px; }
dialog .campaign-results dl { grid-template-columns: 1fr 1fr 1.4fr; }
dialog .campaign-results dl > div:last-child { grid-column: auto; }
@media (max-width: 700px) {
  dialog .campaign-results dl { grid-template-columns: 1fr 1fr; }
  dialog .campaign-results dl > div:last-child { grid-column: 1 / -1; }
}
.project .cover:has(img[src="assets/roadtrip.png"]) { height: auto; background: transparent; }
.project .cover img[src="assets/roadtrip.png"] { height: auto; object-fit: contain; }
.project button:hover img[src="assets/roadtrip.png"] { transform: none; }
dialog img[src="assets/roadtrip.png"] { max-height: 520px; object-fit: contain; }
.campaign-results dl, dialog .campaign-results dl { grid-template-columns: 1fr 1fr; }
.campaign-results dl > div:last-child, dialog .campaign-results dl > div:last-child { grid-column: auto; }
.roadtrip-watch { display: inline-block; margin-top: 22px; border-bottom: 1px solid; padding-bottom: 7px; font: 11px var(--mono); }
.bio-film { transform: none; margin-top: 95px; }
.bio-portrait { display: block; width: 100%; height: auto; transform: rotate(-4deg); }
.bio-film .video-wrap { width: 57%; margin: -55px -12px 0px auto; transform: rotate(6deg); border: 5px solid var(--blue); box-shadow: rgba(69, 21, 9, 0.19) 0px 8px 25px; }
.bio-film .video-wrap button { font-size: 8px; gap: 10px; }
.bio-film .video-wrap button span { width: 45px; height: 45px; font-size: 15px; }
.bio-film .script { margin-top: 25px; }
.bio-film .eyebrow { display: block; margin-top: 10px; }
@media (max-width: 700px) {
  .bio-film { max-width: 300px; margin: 10px auto 60px; }
  .bio-film .video-wrap { margin-top: -45px; margin-right: -5px; }
}
.project .cover:has(img[src="assets/le9-playbook.png"]) { height: auto; aspect-ratio: 16 / 9; }
.project .cover img[src="assets/le9-playbook.png"] { height: auto; object-fit: contain; }
.project button:hover img[src="assets/le9-playbook.png"] { transform: none; }
dialog img[src="assets/le9-playbook.png"] { max-height: none; height: auto; object-fit: contain; }
.hero-photo.second img[src="assets/le9-playbook.png"] { height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.project .cover:has(img[src="assets/le9-night-vibe.gif"]) { height: 520px; background: rgb(23, 23, 19); }
.project .cover img[src="assets/le9-night-vibe.gif"] { object-fit: contain; }
.project button:hover img[src="assets/le9-night-vibe.gif"] { transform: none; }
dialog img[src="assets/le9-night-vibe.gif"] { max-height: 480px; object-fit: contain; background: rgb(23, 23, 19); }
.hero-photo.second img[src="assets/le9-night-vibe.gif"] { height: 300px; object-fit: contain; background: rgb(23, 23, 19); }
.reference-group { margin-top: 32px; }
.reference-group h3 { font-size: 36px; margin-bottom: 8px; }
@media (max-width: 700px) {
  .project .cover:has(img[src="assets/le9-night-vibe.gif"]) { height: 460px; }
  .hero-photo.second img[src="assets/le9-night-vibe.gif"] { height: 235px; }
}
.project-brand { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin: 0px 0px 18px; }
.project .project-brand h3 { font: 500 15px/1.5 var(--mono); letter-spacing: 0.5px; margin: 0px; }
.project-brand > span { font: 10px var(--mono); flex-shrink: 0; }
.project .roles { display: flex; justify-content: space-between; gap: 20px; max-width: none; font-size: 15px; line-height: 1.65; margin-top: 18px; font-weight: 500; }
.project-arrow { font-size: 23px; flex-shrink: 0; }
dialog h2.detail-brand { font: 500 25px/1.3 var(--mono); letter-spacing: 0px; margin: 0px 0px 16px; }
dialog .detail-role-lead { font-size: 17px; line-height: 1.6; margin-bottom: 28px; font-weight: 500; }
@media (max-width: 700px) {
  .project .project-brand h3 { font-size: 13px; }
  .project .roles { font-size: 14px; }
  dialog h2.detail-brand { font-size: 21px; }
}
.about { background: var(--blue); color: var(--rust); padding: 35px 7% 0px; grid-template-columns: minmax(260px, 0.9fr) minmax(0px, 1.35fr); gap: 35px 10%; align-items: start; }
.about-masthead { grid-column: 1 / -1; text-align: center; }
.about-masthead .eyebrow { font-size: 9px; }
.about-masthead h1 { font-size: clamp(65px, 10.7vw, 160px); line-height: 0.95; letter-spacing: -4px; margin: 20px 0px 35px; }
.about .bio-film { width: 100%; max-width: 380px; margin: 25px auto 50px; }
.about .bio-portrait { width: 88%; margin: 0px auto; transform: rotate(-3deg); }
.about .bio-film .video-wrap { width: 42%; margin: -90px 0px 0px auto; }
.about .bio-film .script { margin: 20px 0px 12px; font-size: 30px !important; }
.about .bio-film > .eyebrow { font-size: 8px; }
.about-copy { padding-top: 0px; }
.about-copy h2 { font: 400 30px/1.2 var(--mono); letter-spacing: 0px; margin: 18px 0px 22px; }
.about-copy .intro { font: 400 38px/1.12 var(--serif); margin-bottom: 22px; }
.about-copy p { font-size: 13px; line-height: 1.8; max-width: 590px; }
.about-copy > .eyebrow { font-size: 9px; }
.about-copy .text-link { font-size: 9px; }
.work-jump { display: block; width: max-content; border-bottom: 1px solid; margin-top: 25px; padding-bottom: 7px; font: 12px var(--mono); }
.about .skills { grid-column: 1 / -1; margin: 10px -8.15% 0px; padding: 55px 10%; background: var(--rust); color: var(--blue); display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 20px 50px; }
.skills .script { margin: 0px; font-size: 48px !important; }
.skills p { font: 12px/2 var(--mono); margin: 0px; columns: 2; column-gap: 30px; }
.skills small { grid-column: 2; }
.work { border-top: 0px; padding-top: 90px; }
footer { background: var(--rust); color: var(--blue); }
footer .footer-bottom { border-color: rgba(231, 238, 242, 0.333); }
@media (max-width: 700px) {
  header { padding: 20px 6%; }
  .about { display: grid; grid-template-columns: 1fr; padding: 30px 7% 0px; gap: 25px; }
  .about-masthead h1 { font-size: clamp(50px, 11vw, 76px); letter-spacing: -2px; margin: 20px 0px 10px; }
  .about .about-copy { grid-row: 2; margin: 0px; }
  .about-copy h2 { font-size: 23px; }
  .about-copy .intro { font-size: 32px; }
  .about-copy p { font-size: 13px; }
  .about .bio-film { grid-row: 3; max-width: 300px; margin: 15px auto 25px; }
  .about .skills { grid-row: 4; display: block; margin-top: 0px; padding: 45px 10%; }
  .skills .script { display: block; margin-bottom: 28px; }
  .skills p { columns: 1; }
  .skills small { display: block; margin-top: 25px; }
  .work { padding-top: 60px; }
}
.wordmark img { display: block; width: 105px; height: 64px; }
.bio-gif { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.studio-cover-label { position: absolute; inset: 0px; z-index: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; background: rgba(40, 24, 14, 0.4); color: white; font: 70px/.85 var(--serif); pointer-events: none; }
.studio-cover-label i { font-size: 45px; display: inline; }
.studio-cover-label > span { font: 9px var(--mono); letter-spacing: 1px; margin-top: 26px; }
.brand-section { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 28px; }
.brand-section h3 { font: 22px var(--serif); margin-bottom: 14px; }
.brand-section img { object-fit: contain; max-height: 420px; }
.brand-section .campaign-results { margin-bottom: 24px; }
@media (max-width: 700px) {
  .wordmark img { width: 83px; height: 51px; }
}
.project .cover:has(.studio-gif) { height: auto; aspect-ratio: 4 / 5; overflow: visible; background: transparent; margin-top: 20px; }
.project .cover:has(.studio-gif) > img:not(.studio-gif) { display: block; width: 100%; height: auto; object-fit: contain; transform: none; }
.project .cover .studio-gif { position: absolute; z-index: 2; right: -12px; top: -20px; width: 34%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transform: rotate(7deg); border: 5px solid var(--blue); box-shadow: rgba(40, 24, 14, 0.25) 0px 8px 25px; }
.project button:hover .studio-gif { transform: rotate(7deg); }
dialog img[src="assets/milk-matches.png"] { object-fit: contain; max-height: 420px; background: rgb(41, 42, 34); }
@media (max-width: 700px) {
  .project .cover .studio-gif { right: -6px; border-width: 4px; }
}
.bio-studio-callout { grid-column: 1; display: block; width: min(100%, 300px); margin: -20px auto 25px; padding: 0; border: 0; }
.bio-studio-art { display: block; position: relative; width: 100%; margin: 0; }
.bio-studio-art .studio-logo { width: 100%; height: auto; display: block; }
.bio-studio-art .studio-motion { position: absolute; width: 48%; height: auto; top: -10px; right: -17px; transform: rotate(8deg); border: 3px solid var(--blue); box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px; }
.about-copy .bio-studio-callout p { font-size: 11px; line-height: 1.7; margin-bottom: 8px; }
.about-copy .bio-studio-callout .eyebrow { font: 8px var(--mono); letter-spacing: 1px; }
.bio-studio-callout .text-link { font-size: 8px; margin-top: 5px; }
.studio-credit { font: 10px var(--mono); margin: 16px 0px 8px; letter-spacing: 0.5px; }
.punim-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.punim-gallery img { width: 100%; height: 140px; object-fit: cover; display: block; margin: 0px; }
.punim-gallery a:hover { opacity: 0.8; }
.gallery-credit { font: 9px/1.7 var(--mono); margin: 12px 0px 0px; }
dialog .punim-gallery { grid-template-columns: 1fr 1fr; }
dialog .punim-gallery img { height: auto; max-height: none; }
dialog .gallery-credit { font: 10px/1.7 var(--mono); }
@media (max-width: 700px) {
  .bio-studio-callout { width: min(100%, 300px); margin: -18px auto 22px; }
  .punim-gallery { grid-template-columns: 1fr 1fr; }
  .punim-gallery img { height: 210px; }
}
/* Featured Le 9e work and clickable TaxAct phone preview. */
.le9-project { margin-top: 0 !important; }

.project .taxact-link { display: block; width: 100%; text-align: left; }
.project .phone-stage { height: 540px; display: grid; place-items: center; background: #ced8d9; overflow: visible; }
.phone-frame { position: relative; width: 240px; height: 480px; padding: 8px; border-radius: 37px; background: #191b1a; box-shadow: 0 18px 35px #24302c35, inset 0 0 0 2px #747b78; transform: rotate(-3deg); transition: transform .3s; }
.phone-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 29px; }
.phone-island { position: absolute; z-index: 1; left: 50%; top: 16px; transform: translateX(-50%); width: 70px; height: 19px; border-radius: 18px; background: #141615; }
.phone-watch { position: absolute; left: 20px; right: 20px; bottom: 27px; padding: 12px 5px; border: 1px solid #fff6; border-radius: 20px; background: #20251ed9; color: white; font: 9px var(--mono); text-align: center; }
.taxact-link:hover .phone-frame { transform: rotate(0deg) translateY(-5px); }
@media(max-width:700px) { .le9-project .cover:has(img[src="assets/le9-night-vibe.gif"]) { height: 460px; } .project .phone-stage { height: 510px; } }

.punim-portfolio-link { display: inline-block; margin-top: 20px; padding-bottom: 7px; border-bottom: 1px solid currentColor; font: 11px var(--mono); }
.punim-portfolio-link:hover { opacity: .75; }

/* Three full-length looping previews for the featured Le 9e project. */
.le9-project { grid-column: 1 / -1; }
.project.le9-project .cover.le9-previews, dialog .le9-previews { height: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; background: transparent; overflow: visible; }
.le9-previews figure { min-width: 0; margin: 0; }
.project .le9-previews img, dialog .le9-previews img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 9 / 16; object-fit: cover; margin: 0; background: #171713; }
.project button:hover .le9-previews img { transform: none; }
.le9-previews figcaption { font: 10px/1.5 var(--mono); margin-top: 12px; letter-spacing: .5px; }
dialog .le9-previews { margin-bottom: 28px; }
@media(max-width:700px) { .project.le9-project .cover.le9-previews, dialog .le9-previews { gap: 8px; } .le9-previews figcaption { font-size: 8px; letter-spacing: 0; margin-top: 8px; } }

/* Brand-by-brand case studies: story at left, work gallery at right. */
#projects.projects { display: block; }
#projects > .brand-case { display: grid; grid-template-columns: minmax(240px,.85fr) minmax(0,2.15fr); gap: 48px; margin: 0; padding: 65px 0; border-top: 1px solid var(--line); }
.brand-label { line-height: 1.7; letter-spacing: .6px; font-size: 11px; margin-bottom: 22px; }
.project .brand-story h3 { display: block; font: 42px/1.03 var(--serif); letter-spacing: -1px; margin: 0 0 22px; }
.brand-description { font-size: 13px; line-height: 1.85; margin-bottom: 25px; }
.brand-role-label { font: 9px var(--mono); margin: 30px 0 9px; letter-spacing: 1px; }
.brand-role { font: 11px/1.9 var(--mono); margin-bottom: 18px; }
.project .brand-detail { display: inline-block; width: auto; background: none; border: none; border-bottom: 1px solid currentColor; padding: 5px 0; font: 10px var(--mono); }
.brand-results { margin: 30px 0; display: grid; gap: 22px; }
.brand-results dd { margin: 0 0 5px; font: italic 49px/1 var(--serif); }
.brand-results dt { font: 10px/1.5 var(--mono); }
.brand-media { min-width: 0; }
.brand-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.brand-track::-webkit-scrollbar { display: none; }
.brand-slide { min-width: 0; flex: 0 0 calc((100% - 16px) / 2); scroll-snap-align: start; }
[data-per-page="3"] .brand-slide { flex-basis: calc((100% - 32px) / 3); }
[data-per-page="1"] .brand-slide { flex-basis: 100%; }
.slide-picture { width: 100%; height: 490px; background: #d8dfdf; }
.slide-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-per-page="3"] .slide-picture { height: auto; aspect-ratio: 9/16; }
.brand-slide.landscape .slide-picture img { object-fit: contain; }
.slide-caption { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font: 10px/1.6 var(--mono); }
.slide-graphic { height: 490px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; background: #193c71; color: #e9f0ff; }
.slide-graphic > span:not(.eyebrow) { font: 49px/.98 var(--serif); overflow-wrap: anywhere; }
.slide-graphic small { font: 10px/1.7 var(--mono); }
.slide-graphic.veet { background: #e5c3ca; color: #7a2137; }
.slide-graphic.voice { background: #f0d2b3; color: var(--rust); }
.slide-graphic.home { background: #d7dcc3; color: #354331; }
.brand-gallery-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; }
.gallery-controls { display: flex; align-items: center; gap: 10px; }
.project .gallery-controls button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; font-size: 17px; }
.gallery-controls button:disabled { opacity: .3; cursor: default; }
.gallery-count { font: 10px var(--mono); margin-left: 5px; }
.brand-outbound { font-size: 28px; line-height: 1; padding: 0 3px; }
.brand-track .phone-stage { min-height: 490px; display: grid; place-items: center; background: #ced8d9; }
.brand-track .phone-frame { height: 440px; width: 220px; }
.brand-track .phone-frame img { width: 100%; height: 100%; object-fit: cover; }
@media(max-width:1000px) and (min-width:701px) { #projects > .brand-case { grid-template-columns: minmax(210px,.9fr) minmax(0,1.7fr); gap: 30px; } .slide-picture,.slide-graphic { height: 390px; } .slide-graphic { padding: 22px; } .slide-graphic > span:not(.eyebrow) { font-size: 38px; } }
@media(max-width:700px) { #projects > .brand-case { display: block; padding: 42px 0; } .brand-story { margin-bottom: 30px; } .project .brand-story h3 { font-size: 42px; } .brand-results { grid-template-columns: repeat(2,minmax(0,1fr)); } .brand-slide { flex-basis: 80%; } [data-per-page="3"] .brand-slide { flex-basis: calc((100% - 16px) / 3); } .brand-track { gap: 8px; } .slide-picture,.slide-graphic { height: 410px; } [data-per-page="3"] .slide-caption { font-size: 8px; } .slide-graphic > span:not(.eyebrow) { font-size: 46px; } }

/* Le 9e production credits and Caroline Vreeland collaboration. */
.brand-track .le9-gif { margin: 0; }
.gif-contribution { font: 10px/1.7 var(--mono); margin: 8px 0 0; }
.inline-work-link { text-decoration: underline; text-underline-offset: 3px; }
.caroline-feature { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }
.caroline-feature h4 { margin: 14px 0 25px; font: 38px/1.1 var(--serif); font-weight: 400; }
.caroline-credit { max-width: 540px; }
.caroline-credit > p:not(.brand-role-label) { font: 11px/1.9 var(--mono); margin-bottom: 15px; }
.caroline-credit .caroline-description { font: 13px/1.8 'DM Sans',sans-serif !important; }
.instagram-fallback { font: 10px var(--mono); display: inline-block; border-bottom: 1px solid; padding-bottom: 6px; }
@media(max-width:700px) { .gif-contribution { font-size: 8px; line-height: 1.7; } .caroline-feature h4 { font-size: 32px; } }

/* Consistent case-study information order, following the supplied reference. */
.brand-story .brand-label { font: 600 22px/1.25 'DM Sans',sans-serif; letter-spacing: .1px; margin-bottom: 15px; }
.project .brand-story h3 { font-size: 43px; line-height: 1.05; margin-bottom: 17px; }
.brand-scope { font: 13px/1.65 'DM Sans',sans-serif; margin: 0 0 28px; color: var(--rust); }
.brand-description { font-size: 14px; line-height: 1.85; }
.brand-story .brand-role { font: 600 11px/1.8 'DM Sans',sans-serif; text-transform: uppercase; letter-spacing: .25px; margin: 30px 0 0; }
.brand-results { margin: 35px 0; }
.brand-results dd { font-size: 58px; }
.brand-results dt { font: 12px/1.6 'DM Sans',sans-serif; }
.caroline-feature .instagram-fallback { margin-top: 18px; }
@media(max-width:700px) { .brand-story .brand-label { font-size: 23px; } .project .brand-story h3 { font-size: 40px; } .brand-scope { font-size: 14px; } .brand-description { font-size: 14px; } .brand-results { grid-template-columns: 1fr; } }

/* Client marks above the consistent project information column. */
.client-logo-wrap { min-height: 66px; display: flex; align-items: center; margin-bottom: 20px; }
.client-logo-wrap .client-logo { display: block; width: auto; max-width: 235px; height: auto; max-height: 64px; object-fit: contain; object-position: left center; }
.client-logo-wrap .logo-le9 { width: 132px; filter: brightness(0); }
.client-logo-wrap .logo-sloomoo { width: 220px; filter: brightness(0); }
.client-logo-wrap .logo-3m { width: 220px; }
.client-logo-wrap .logo-punim { width: 145px; max-height: none; }
.client-logo-wrap .logo-avya { width: 230px; height: 98px; max-height: none; background-image: url('assets/logos/avya.jpg'); background-size: 250% auto; background-position: center; }
.brand-story .brand-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Campaign information stays in view while its media scrolls down the page. */
#projects > .brand-case { align-items: start; }
.brand-story { position: sticky; top: 28px; align-self: start; }
.brand-media .brand-track { display: flex; flex-direction: column; gap: 32px; overflow: visible; scroll-snap-type: none; }
.brand-media .brand-track .brand-slide { flex: none; width: 100%; }
.brand-media .slide-picture { height: auto; max-height: none; background: transparent; }
.brand-media .slide-picture img { height: auto; max-height: 760px; width: 100%; object-fit: contain; }
.brand-media .slide-graphic { height: 440px; }
.brand-media[data-per-page="3"] .brand-track { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.brand-media[data-per-page="3"] .slide-picture img { aspect-ratio: 9/16; height: auto; object-fit: cover; }
.brand-gallery-footer { justify-content: flex-end; }
.brand-gallery-footer:empty { display: none; }
@media(max-width:700px) { .brand-story { position: static; } .brand-media .brand-track { gap: 24px; } .brand-media[data-per-page="3"] .brand-track { gap: 8px; } .brand-media .slide-graphic { height: 400px; } }
@media(prefers-reduced-motion:no-preference) { .brand-story { scroll-margin-top: 28px; } }

/* Skills live with the portrait; work begins directly with the first brand. */
.about .bio-film .skills { display: block; position: static; margin: 34px 0 0; padding: 0; background: transparent; color: inherit; }
.about .bio-film .skills .script { display: block; font-size: 31px !important; margin: 0 0 20px; transform: none; }
.about .bio-film .skills p { font: 10px/2 var(--mono); columns: 1; margin: 0; }
.about .bio-film .skills small { display: block; font: 9px/1.8 var(--mono); letter-spacing: .7px; margin-top: 20px; }
#work.work { padding-top: 0; }
@media(max-width:700px) { .about .bio-film .skills { margin: 30px 0 0; padding: 0; } }

.about-masthead h1 { max-width: 1200px; margin: 24px auto 45px; font-size: clamp(48px,7.3vw,112px); line-height: 1.02; letter-spacing: -2px; text-wrap: balance; }
@media(max-width:700px) { .about-masthead h1 { font-size: clamp(43px,9vw,64px); letter-spacing: -1.5px; margin-bottom: 20px; } }

.wordmark img.personal-starburst-logo { width: 178px; height: auto; }
header { padding-top: 14px; padding-bottom: 14px; }
@media(max-width:700px) { .wordmark img.personal-starburst-logo { width: 132px; height: auto; } header { padding-top: 12px; padding-bottom: 12px; } }

/* Minimal serif name mark, in the site's rust and pale-blue palette. */
.wordmark .minimal-name-logo { display: block; margin: 0; color: var(--rust); font-family: var(--serif); font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -1.8px; white-space: nowrap; }
header { min-height: 100px; padding-top: 22px; padding-bottom: 22px; }
@media(max-width:700px) { .wordmark .minimal-name-logo { font-size: 31px; letter-spacing: -1.3px; } header { min-height: 82px; padding-top: 20px; padding-bottom: 20px; } }
@media(max-width:380px) { .wordmark .minimal-name-logo { font-size: 27px; } nav { gap: 12px; } }

.wordmark img.handwritten-name-logo { display: block; width: 240px; height: auto; }
@media(max-width:700px) { .wordmark img.handwritten-name-logo { width: 185px; height: auto; } }
@media(max-width:380px) { .wordmark img.handwritten-name-logo { width: 160px; } }

.about-masthead h1 { margin-bottom: 25px; }
.hero-tagline { max-width: 630px; margin: 0 auto 38px; font: 17px/1.65 'DM Sans',sans-serif; text-wrap: balance; }
@media(max-width:700px) { .hero-tagline { font-size: 14px; line-height: 1.7; margin-bottom: 20px; } }


.caroline-gallery { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: start; }
.caroline-gallery a { display: block; overflow: hidden; background: #ded8cc; }
.caroline-gallery img { width: 100%; aspect-ratio: 9 / 16; height: auto; display: block; object-fit: cover; }
@media(max-width:700px) { .caroline-gallery { gap: 8px; } }

#brand-4 .client-logo-wrap { margin-bottom: 18px; }
#brand-4 .brand-refresh-tag { margin: 0 0 25px; font: 12px/1.4 'DM Sans',sans-serif; color: var(--rust); }
.caroline-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }


#projects > .brand-case .client-logo-wrap { margin-bottom: 4px; }
#projects > .brand-case .brand-story .brand-role { margin: 8px 0 18px; }


#brand-2 .client-logo-wrap { min-height: 74px; margin-bottom: 4px; }
#brand-2 .client-logo-wrap .logo-hh-roadtrip { width: min(100%, 180px); height: auto; max-width: 100%; max-height: none; object-fit: contain; }
#brand-2 .brand-story .brand-role { margin-top: 8px; }


/* Paired Home Hardware roadtrip stills with distinct Instagram links. */
#brand-2 .roadtrip-social-pair { display: grid; grid-template-columns: repeat(2,minmax(0,270px)); justify-content: start; gap: 16px; width: 100%; }
#brand-2 .roadtrip-social-card { min-width: 0; margin: 0; }
#brand-2 .roadtrip-social-image { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
#brand-2 .roadtrip-social-link { display: inline-block; margin-top: 10px; color: inherit; font: 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
#brand-2 .roadtrip-social-link:hover { opacity: .62; }

/* Keep the Home Hardware campaign cover compact in the scrolling gallery. */
#brand-2 .brand-slide.landscape .slide-picture img { width: auto; max-width: 100%; max-height: 480px; height: auto; margin-inline: auto; }


/* Landing page concept: full-bleed portrait, compact navigation and role ticker. */
header.landing-header { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 0; border-bottom: 0; background: var(--blue); }
.landing-header .wordmark { display: block; }
.landing-header .wordmark img.handwritten-name-logo { width: 190px; height: auto; }
.landing-header nav { width: 100%; justify-content: center; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing-header nav a { flex: 1; max-width: 260px; padding: 13px 12px 12px; text-align: center; border-right: 1px solid var(--line); font-size: 10px; letter-spacing: .08em; }
.landing-header nav a[href="#contact"] { text-decoration: underline; text-underline-offset: .18em; }
.landing-header nav a:first-child { border-left: 1px solid var(--line); }
.landing-hero { position: relative; min-height: min(76vh, 790px); height: min(76vh, 790px); overflow: hidden; display: grid; place-items: center; isolation: isolate; background: #515140; color: #f5f2e9; }
.landing-hero-image, .landing-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-hero-image { z-index: -2; object-fit: cover; object-position: 50% 40%; }
.landing-hero-shade { z-index: -1; background: linear-gradient(180deg, rgba(25,25,20,.1) 0%, rgba(25,25,20,.08) 35%, rgba(25,25,20,.5) 100%); }
.landing-hero-copy { width: min(94%, 1500px); text-align: center; padding: 25px 0 45px; }
.landing-kicker { margin: 0; font: 10px/1.4 var(--mono); letter-spacing: .16em; }
.landing-kicker span { padding: 0 8px; }
.landing-hero-copy h1 { margin: 25px 0 18px; color: #f5f2e9; font: 600 clamp(62px, 13.2vw, 184px)/.79 "DM Sans", sans-serif; letter-spacing: -.085em; text-align: center; }
.landing-role { margin: 0; font: 15px/1.5 var(--mono); letter-spacing: .03em; }
.landing-scroll { position: absolute; bottom: 24px; left: 4.5%; font: 9px var(--mono); letter-spacing: .12em; }
.landing-scroll span { margin-left: 8px; font-size: 15px; }
.landing-marquee { overflow: hidden; padding: 13px 0 12px; background: var(--rust); color: var(--blue); white-space: nowrap; }
.landing-marquee-track { display: flex; width: max-content; animation: landing-marquee-scroll 34s linear infinite; }
.landing-marquee-track span { flex: none; padding-right: 22px; font: 600 20px/1.2 "DM Sans", sans-serif; letter-spacing: -.02em; }
.landing-marquee-track i { margin: 0 18px; font-style: normal; font-size: .72em; }
@keyframes landing-marquee-scroll { to { transform: translateX(-50%); } }
.about-masthead { display: none; }
#about.about { padding-top: 65px; }
@media(max-width:700px) {
  header.landing-header { gap: 7px; padding-top: 7px; }
  .landing-header .wordmark img.handwritten-name-logo { width: 155px; }
  .landing-header nav a { padding: 12px 5px 11px; font-size: 8px; }
  .landing-hero { height: 72svh; min-height: 500px; max-height: 680px; }
  .landing-hero-image { object-position: 53% 40%; }
  .landing-hero-copy { width: 96%; padding-top: 0; }
  .landing-kicker { font-size: 8px; letter-spacing: .1em; }
  .landing-hero-copy h1 { margin: 24px 0 16px; font-size: clamp(58px, 13vw, 92px); letter-spacing: -.08em; }
  .landing-role { font-size: 11px; }
  .landing-scroll { bottom: 18px; left: 6%; font-size: 8px; }
  .landing-marquee { padding: 11px 0 10px; }
  .landing-marquee-track span { font-size: 15px; }
  #about.about { padding-top: 36px; }
}
@media(prefers-reduced-motion:reduce) { .landing-marquee-track { animation: none; } }
@media(max-width:700px) { .about .about-copy { grid-row: 1; } .about .bio-film { grid-row: 2; } }

/* Brand palette update: chartreuse, parcel, oxblood, chambray, black fig and capers. */
:root {
  --chartreuse: #BFB065;
  --parcel: #E5E3DA;
  --oxblood: #5A1D22;
  --chambray: #A9C0CB;
  --black-fig: #29100C;
  --capers: #53461C;
  --blue: var(--parcel);
  --rust: var(--oxblood);
  --line: #53461C40;
}
body { background: var(--parcel); color: var(--black-fig); }
header { border-color: var(--line); }
.landing-header { background: var(--parcel); }
.landing-header nav { color: var(--oxblood); border-color: var(--line); }
.landing-header nav a { border-color: var(--line); }
.landing-header nav a:hover { background: var(--chambray); color: var(--black-fig); text-decoration: none; }
.landing-hero { background: var(--capers); color: var(--parcel); }
.landing-hero-shade { background: linear-gradient(180deg, rgba(41,16,12,.12) 0%, rgba(41,16,12,.08) 35%, rgba(41,16,12,.56) 100%); }
.landing-hero-copy h1 { color: var(--parcel); }
.landing-scroll { color: var(--parcel); }
.landing-marquee { background: var(--chartreuse); color: var(--black-fig); }
#about.about { background: var(--parcel); color: var(--oxblood); }
.about .skills { background: var(--oxblood); color: var(--parcel); }
.about-copy p, .brand-description { color: var(--black-fig); }
.brand-role, .brand-results dd { color: var(--oxblood); }
.brand-results dt, .brand-label { color: var(--capers); }
.text-link, .work-jump, .brand-gallery-footer a { color: var(--oxblood); }
.text-link:hover, .work-jump:hover, .brand-gallery-footer a:hover { color: var(--capers); }
.project .cover, .slide-picture { background-color: var(--chambray); }
.dialog, dialog { background: var(--parcel); color: var(--black-fig); }
dialog::backdrop { background: rgba(41,16,12,.88); }
footer { background: var(--oxblood); color: var(--parcel); }
footer .footer-bottom { border-color: rgba(229,227,218,.42); }
::selection { background: var(--chartreuse); color: var(--black-fig); }

/* Minimal initials and a single right-aligned contact link. */
header.landing-header { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; padding: 10px 4.5%; }
.landing-header .lm-wordmark { display: block; margin: 0; line-height: 1; }
.landing-header .lm-wordmark span { display: block; margin: 0; color: var(--oxblood); font: 600 48px/.85 "Caveat", cursive; letter-spacing: -.09em; transform: rotate(-5deg); }
.landing-header nav { width: auto; flex: none; justify-content: flex-end; gap: 0; border: 0; margin: 0; }
.landing-header nav a { display: block; flex: none; max-width: none; padding: 10px 0 10px 14px; border: 0; color: var(--oxblood); font-size: 10px; letter-spacing: .1em; }
.landing-header nav a:first-child { border-left: 0; }
.landing-header nav a:hover { background: transparent; color: var(--capers); text-decoration: underline; text-underline-offset: 5px; }
.landing-hero-copy h1 { margin-top: 0; }
@media(max-width:700px) {
  header.landing-header { flex-direction: row; padding: 8px 6%; }
  .landing-header .lm-wordmark span { font-size: 42px; }
  .landing-header nav { width: auto; justify-content: flex-end; }
  .landing-header nav a { padding: 10px 0 10px 12px; font-size: 9px; }
}
.landing-hero-copy h1 { transform: translateY(38px); }
.landing-role { transform: translateY(28px); }
.landing-header nav { gap: 20px; }
.landing-header nav a { padding: 10px 0; }
@media(max-width:700px) { .landing-hero-copy h1 { transform: translateY(28px); } .landing-role { transform: translateY(20px); } .landing-header nav { gap: 14px; } }

/* Milk & Matches gets its own full-width studio feature. */
.studio-section { background: var(--oxblood); color: var(--parcel); padding: clamp(56px, 8vw, 110px) 7%; }
.studio-section-inner { width: min(100%, 1240px); margin: 0 auto; display: grid; grid-template-columns: minmax(220px, .78fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 8vw, 112px); }
.studio-section-art { display: block; position: relative; width: min(100%, 300px); margin: 0 auto; }
.studio-section-art .studio-logo { display: block; width: 100%; height: auto; }
.studio-section-art .studio-motion { position: absolute; width: 48%; height: auto; top: -9%; right: -10%; transform: rotate(8deg); border: 4px solid var(--parcel); box-shadow: 0 10px 28px rgba(41,16,12,.28); }

.studio-section-copy .eyebrow { font: 9px var(--mono); letter-spacing: 1.4px; color: var(--chartreuse); margin: 0 0 16px; }
.studio-section-copy h2 { color: var(--parcel); font: 400 clamp(38px, 5vw, 64px)/1.05 var(--serif); margin: 0 0 20px; }
.studio-section-copy > p:not(.eyebrow) { max-width: 590px; color: var(--parcel); font-size: 14px; line-height: 1.8; }
.studio-section-link { display: inline-block; margin-top: 18px; padding-bottom: 7px; border-bottom: 1px solid rgba(229,227,218,.7); color: var(--parcel); font: 10px var(--mono); letter-spacing: .06em; }
.studio-section-link:hover { color: var(--chartreuse); border-color: var(--chartreuse); }
@media (max-width: 700px) { .studio-section { padding: 58px 8% 64px; } .studio-section-inner { grid-template-columns: 1fr; gap: 42px; } .studio-section-art { width: min(66%, 250px); } .studio-section-copy h2 { font-size: 44px; } .studio-section-copy > p:not(.eyebrow) { font-size: 13px; } }

/* Three square tiles bring the quote, portrait and skills together. */
.about .bio-film { max-width: 380px; margin: 45px auto 50px; }
.about .bio-film .video-wrap { width: 88%; margin: 0 auto; transform: rotate(-3deg); border: 5px solid var(--parcel); box-shadow: 0 8px 25px rgba(41,16,12,.18); }
.what-i-bring-section { padding: clamp(38px, 5vw, 64px) 7%; background: var(--parcel); color: var(--black-fig); }
.what-i-bring-grid { width: min(100%, 900px); margin: 0 auto; display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.what-card { min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--oxblood); border-radius: 14px; }
.quote-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px, 3vw, 42px); text-align: center; background: var(--chambray); color: var(--black-fig); text-decoration: none; }
.quote-card blockquote { margin: 0; font: 600 clamp(22px, 2.7vw, 36px)/1.08 var(--serif); }
.quote-byline { margin-top: 24px; font: 9px var(--mono); letter-spacing: .08em; }
.quote-source { margin-top: 10px; font: 8px var(--mono); letter-spacing: .08em; color: var(--oxblood); }
.quote-card:hover .quote-source { text-decoration: underline; text-underline-offset: 4px; }
.portrait-card { position: relative; background: var(--capers); }
.portrait-card .portrait-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.portrait-card .portrait-corner-gif { position: absolute; right: 14px; bottom: 14px; display: block; width: 34%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 4px solid var(--parcel); border-radius: 8px; box-shadow: 0 5px 16px rgba(41,16,12,.24); transform: rotate(3deg); }
.skills-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 40px); background: var(--chartreuse); color: var(--black-fig); }
.skills-card h2 { display: inline-block; margin: 0 0 16px; color: var(--oxblood); font: 600 clamp(34px, 4vw, 46px)/.9 "Caveat", cursive; letter-spacing: .01em; transform: rotate(-4deg); }
.skills-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font: 500 clamp(9px, 1vw, 12px)/1.35 var(--mono); text-transform: uppercase; }
.skills-languages { margin: 17px 0 0; padding-top: 12px; border-top: 1px solid rgba(41,16,12,.35); font: 8px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 700px) { .about .bio-film { max-width: 320px; margin: 10px auto 45px; } .about .bio-film .video-wrap { width: 88%; } .what-i-bring-section { padding: 48px 8%; } .what-i-bring-grid { max-width: 420px; grid-template-columns: 1fr; gap: 18px; } .what-card { aspect-ratio: 1; } .quote-card blockquote { font-size: 34px; } .skills-card { padding: 30px 34px; } .skills-card h2 { font-size: 40px; } .skills-card ul { gap: 9px; font-size: 12px; } .skills-languages { font-size: 9px; } }
.about-copy .bio-quote { position: relative; max-width: 550px; margin: 27px 0 0; padding: 17px 22px 18px; border: 0; background: rgba(229,227,218,.72); color: var(--oxblood); font: 600 clamp(17px, 2vw, 23px)/1.2 var(--serif); }
.what-i-bring-section .what-card { min-height: 0; }
@media (max-width: 700px) { .what-i-bring-grid { max-width: 420px; grid-template-columns: 1fr; gap: 18px; } .portrait-card { aspect-ratio: 1; } .skills-card { aspect-ratio: auto; min-height: 330px; } }

/* Feature the portrait in the bio, with its motion inset in the corner. */
.about .bio-film { overflow: visible; }
.about .bio-photo-wrap { position: relative; width: 88%; aspect-ratio: 4 / 5; margin: 0 auto; overflow: visible; transform: rotate(-3deg); border: 5px solid var(--parcel); background: var(--black-fig); box-shadow: 0 8px 25px rgba(41,16,12,.18); }
.about .bio-photo-main { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about .bio-photo-inset { position: static; display: block; width: 80%; aspect-ratio: 4 / 5; object-fit: cover; margin: 22px auto 0; border: 5px solid var(--parcel); box-shadow: 0 10px 28px rgba(41,16,12,.22); transform: rotate(3deg); }
.about .bio-photo-roles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 15px; width: 88%; margin: 30px auto 0; padding: 0; list-style: none; color: var(--oxblood); font: 500 9px/1.5 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.what-i-bring-section { padding: clamp(28px, 4vw, 48px) 7%; }
.what-i-bring-grid { width: min(100%, 900px); display: block; }
.what-i-bring-grid .skills-card { aspect-ratio: auto; display: grid; grid-template-columns: minmax(150px,.55fr) 1fr; align-items: center; gap: 12px 28px; padding: clamp(22px, 3vw, 34px) clamp(24px, 4vw, 48px); }
.what-i-bring-grid .skills-card h2 { margin: 0; font-size: clamp(34px, 4vw, 46px); }
.what-i-bring-grid .skills-card ul { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px 18px; font-size: clamp(9px, .95vw, 11px); }
@media (max-width: 700px) {
  .about .bio-film { max-width: 320px; margin: 10px auto 45px; }
  .about .bio-photo-wrap { width: 82%; }
  .about .bio-photo-inset { width: 80%; margin-top: 18px; }
  .about .bio-photo-roles { width: 88%; gap: 9px 12px; font-size: 8px; }
  .what-i-bring-section { padding: 30px 8%; }
  .what-i-bring-grid .skills-card { display: block; min-height: 0; padding: 26px 28px 30px; }
  .what-i-bring-grid .skills-card h2 { margin: 0 0 20px; }
  .what-i-bring-grid .skills-card ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 14px; font-size: 10px; }
}

/* Align project-role labels with the small, letter-spaced studio eyebrow. */
#projects > .brand-case .brand-story .brand-role { font: 9px/1.7 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; }

/* Compact, swipeable PUNiM photo gallery. */
#brand-0 .brand-media .brand-track { display: flex; flex-direction: row; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; cursor: grab; -webkit-overflow-scrolling: touch; }
#brand-0 .brand-media .brand-track::-webkit-scrollbar { display: none; }
#brand-0 .brand-media .brand-slide { flex: 0 0 min(42%, 270px); width: auto; margin: 0; scroll-snap-align: start; }
#brand-0 .brand-media .slide-picture { width: 100%; height: auto; aspect-ratio: 4 / 5; overflow: hidden; background: var(--chambray); }
#brand-0 .brand-media .slide-picture img { display: block; width: 100%; height: 100%; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; }
#brand-0 .brand-gallery-footer { justify-content: space-between; padding-top: 12px; }
#brand-0 .brand-outbound { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
#brand-0 .brand-outbound-label { font: 9px/1.3 var(--mono); white-space: nowrap; }
@media (max-width:700px) { #brand-0 .brand-media .brand-track { gap: 10px; } #brand-0 .brand-media .brand-slide { flex-basis: 68%; max-width: 250px; } }

@media(max-width:700px) { #brand-2 .roadtrip-social-pair { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } }


/* Give the Home Hardware logo, story, role and results consistent breathing room. */
#brand-2 .brand-story { display: flex; flex-direction: column; gap: 18px; }
#brand-2 .client-logo-wrap, #brand-2 .brand-description, #brand-2 .brand-role, #brand-2 .brand-results { margin: 0; }
#brand-2 .brand-results { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; }
#brand-2 .brand-results dd { font-size: 30px; }
#brand-2 .brand-results dt { font-size: 10px; line-height: 1.4; }


/* Durex launch case study: clear story spacing and a swipeable work gallery. */
#brand-3 .brand-story { display: flex; flex-direction: column; gap: 18px; }
#brand-3 .brand-results { display: grid; grid-template-columns: 1fr; gap: 8px; }
#brand-3 .brand-results dd { font-size: 30px; }
#brand-3 .brand-results dt { font: 10px/1.4 'DM Sans',sans-serif; }
#projects > #brand-3 .client-logo-wrap, #brand-3 .brand-description, #projects > #brand-3 .brand-role, #brand-3 .brand-results { margin: 0; }
#brand-3 .brand-media .brand-track { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; cursor: grab; -webkit-overflow-scrolling: touch; }
#brand-3 .brand-media .brand-track::-webkit-scrollbar { display: none; }
#brand-3 .brand-media .brand-slide { flex: 0 0 min(100%,270px); width: auto; scroll-snap-align: start; }
#brand-3 .brand-media .slide-graphic { height: auto; aspect-ratio: 9 / 13; padding: clamp(18px,2.5vw,30px); }
#brand-3 .brand-media .slide-graphic > span:not(.eyebrow) { font-size: clamp(30px,4.2vw,49px); }
#brand-3 .brand-gallery-footer { justify-content: space-between; padding-top: 16px; }
@media(max-width:700px) {
  #brand-3 .brand-media .brand-track { gap: 10px; }
  #brand-3 .brand-media .brand-slide { flex-basis: 68%; max-width: 270px; }
  #brand-3 .brand-media .slide-graphic { aspect-ratio: 9 / 13; }
}

#brand-3 .durex-photo-slide { margin: 0; }
#brand-3 .durex-photo-slide .slide-picture { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--black-fig); }
#brand-3 .durex-photo-slide .slide-picture img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
#brand-3 .durex-photo-caption { flex-direction: column; align-items: flex-start; gap: 5px; }
#brand-3 .durex-photo-caption a { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Unify visible outbound project-link labels with the PUNiM gallery label. */
#projects .slide-caption,
#projects .roadtrip-social-link,
#projects .instagram-fallback,
#projects .brand-outbound-label {
  font: 9px/1.3 var(--mono);
  letter-spacing: normal;
  text-transform: none;
}


/* Match the TaxAct case study card and result scale to the Durex presentation. */
#brand-5 .brand-story { display: flex; flex-direction: column; gap: 18px; }
#projects > #brand-5 .client-logo-wrap, #brand-5 .brand-description, #projects > #brand-5 .brand-role, #brand-5 .brand-results { margin: 0; }
#brand-5 .brand-results { display: grid; grid-template-columns: 1fr; gap: 8px; }
#brand-5 .brand-results dd { font-size: 30px; }
#brand-5 .brand-results dt { font: 10px/1.4 'DM Sans',sans-serif; }
#brand-5 .brand-media .brand-track { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; cursor: grab; -webkit-overflow-scrolling: touch; }
#brand-5 .brand-media .brand-track::-webkit-scrollbar { display: none; }
#brand-5 .brand-media .brand-slide { flex: 0 0 min(100%,270px); width: auto; scroll-snap-align: start; }
#brand-5 .taxact-photo-slide { margin: 0; }
#brand-5 .taxact-photo-slide .slide-picture { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--black-fig); }
#brand-5 .taxact-photo-slide .slide-picture img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
#brand-5 .taxact-photo-caption { flex-direction: column; align-items: flex-start; gap: 5px; }
#brand-5 .taxact-photo-caption a { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:700px) { #brand-5 .brand-media .brand-track { gap: 10px; } #brand-5 .brand-media .brand-slide { flex-basis: 68%; max-width: 270px; } }


/* Veet work gallery uses the compact portrait thumbnail size used in the portfolio. */
#brand-6 .brand-media .brand-track { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; cursor: grab; -webkit-overflow-scrolling: touch; }
#brand-6 .brand-media .brand-track::-webkit-scrollbar { display: none; }
#brand-6 .brand-media .brand-slide { flex: 0 0 min(100%,270px); width: auto; scroll-snap-align: start; }
#brand-6 .brand-media .slide-graphic { height: auto; aspect-ratio: 9 / 13; padding: clamp(18px,2.5vw,30px); }
#brand-6 .brand-media .slide-graphic > span:not(.eyebrow) { font-size: clamp(30px,4.2vw,49px); }
#brand-6 .veet-gif-slide { margin: 0; }
#brand-6 .veet-gif-slide .slide-picture { width: 100%; aspect-ratio: 9 / 13; overflow: hidden; background: var(--black-fig); }
#brand-6 .veet-gif-slide .slide-picture img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
#brand-6 .veet-gif-caption { flex-direction: column; align-items: flex-start; gap: 5px; }
#brand-6 .veet-gif-caption a { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:700px) { #brand-6 .brand-media .brand-track { gap: 10px; } #brand-6 .brand-media .brand-slide { flex-basis: 68%; max-width: 250px; } }

.studio-section-copy > p.studio-role { max-width: 620px; color: var(--parcel); font: 600 11px/1.8 "DM Sans",sans-serif; text-transform: uppercase; letter-spacing: .25px; margin: 24px 0 0; }

#projects > #brand-3 .client-logo-wrap { margin-bottom: 14px; }
#projects > #brand-6 .client-logo-wrap { margin-bottom: 30px; }
#brand-7 .three-m-video-slide .slide-picture { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black-fig); }
#brand-7 .three-m-video-slide .slide-picture img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
#brand-7 .three-m-video-slide .slide-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; }
#brand-6 .brand-gallery-footer { justify-content: flex-start; padding-top: 16px; }
#projects > #brand-7 .client-logo-wrap { margin-bottom: 20px; }
#brand-5 .brand-description { margin-top: -4px; }

/* Sloomoo video card matches the compact Home Hardware gallery footprint. */
#brand-8 .brand-media .brand-track { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
#brand-8 .brand-media .brand-track::-webkit-scrollbar { display: none; }
#brand-8 .brand-media .brand-slide { flex: 0 0 270px; width: 270px; scroll-snap-align: start; }
#brand-8 .sloomoo-video-slide { margin: 0; }
#brand-8 .sloomoo-video-slide .slide-picture { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--black-fig); }
#brand-8 .sloomoo-video-slide video { display: block; width: 100%; height: 100%; object-fit: contain; }
@media(max-width:700px) { #brand-8 .brand-media .brand-track { gap: 10px; } #brand-8 .brand-media .brand-slide { flex-basis: calc((100% - 10px) / 2); width: auto; max-width: 270px; } }
#brand-4 .caroline-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
@media(max-width:700px) { #brand-4 .caroline-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; } }
#projects > #brand-8 .client-logo-wrap { margin-bottom: 24px; }

#brand-0 .gallery-credit { margin: 0; color: var(--oxblood); font: 9px/1.7 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; }

/* Le 9e gallery combines restaurant work and Caroline Vreeland content in one arrow-controlled track. */
#brand-4 .brand-media .brand-track { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; cursor: grab; -webkit-overflow-scrolling: touch; }
#brand-4 .brand-media .brand-track::-webkit-scrollbar { display: none; }
#brand-4 .brand-media .brand-slide { flex: 0 0 min(calc((100% - 32px) / 3),270px); width: auto; scroll-snap-align: start; }
#brand-4 .caroline-gallery-slide { display: block; overflow: hidden; }
#brand-4 .caroline-gallery-slide .slide-picture { width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: var(--black-fig); }
#brand-4 .caroline-gallery-slide .slide-picture img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
#brand-4 .brand-gallery-footer { justify-content: flex-start; padding-top: 16px; }
@media(max-width:700px) { #brand-4 .brand-media .brand-track { gap: 8px; } #brand-4 .brand-media .brand-slide { flex-basis: calc((100% - 16px) / 3); } }

/* Keep all five Le 9e gallery items on one consistent carousel grid. */
#brand-4 .brand-media .brand-slide { flex: 0 0 calc((100% - 32px) / 3); width: calc((100% - 32px) / 3); max-width: none; min-width: 0; margin: 0; box-sizing: border-box; }
#brand-4 .brand-media .slide-picture { width: 100%; height: auto; aspect-ratio: 9 / 16; overflow: hidden; background: var(--black-fig); }
#brand-4 .brand-media .slide-picture img { display: block; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
@media(max-width:700px) { #brand-4 .brand-media .brand-track { gap: 8px; } #brand-4 .brand-media .brand-slide { flex-basis: calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); } }

/* Keep the skills panel compact and clearly separate from the bio portrait. */
#what-i-bring.what-i-bring-section { padding: 26px 7% 34px; }
#what-i-bring .what-i-bring-grid { width: min(100%, 700px); }
#what-i-bring .skills-card { grid-template-columns: minmax(130px,.48fr) 1fr; gap: 10px 24px; padding: 22px 30px; border-radius: 12px; }
#what-i-bring .skills-card h2 { font-size: clamp(30px, 3.5vw, 40px); }
#what-i-bring .skills-card ul { gap: 8px 14px; font-size: clamp(8px, .85vw, 10px); }
@media(max-width:700px) {
  #what-i-bring.what-i-bring-section { padding: 22px 8% 28px; }
  #what-i-bring .what-i-bring-grid { width: min(100%, 420px); }
  #what-i-bring .skills-card { padding: 22px 24px 25px; }
  #what-i-bring .skills-card h2 { font-size: 32px; }
  #what-i-bring .skills-card ul { font-size: 9px; }
}
.about .bio-photo-roles { grid-auto-rows: minmax(2.8em,auto); gap: 10px 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(81,29,34,.32); }
.about .bio-photo-roles li { min-height: 2.8em; line-height: 1.4; }
@media(max-width:700px) { .about .bio-photo-roles { gap: 9px 12px; padding-top: 18px; } }
.about .bio-photo-inset { width: 80%; }
.about-copy .bio-photo-roles { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 5px; width: auto; margin: 68px 0 26px; padding: 22px 0 0; border-top: 1px solid rgba(81,29,34,.32); color: inherit; font: 500 clamp(13px,1.3vw,16px)/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.about-copy .bio-photo-roles li { display: block; min-height: 0; line-height: inherit; }
.about-copy .bio-photo-roles li:not(:last-child)::after { content: none; }
@media(max-width:700px) { .about .bio-photo-inset { width: 80%; } .about-copy .bio-photo-roles { margin-top: 38px; font-size: 11px; line-height: 1.3; gap: 2px; } }

/* Home Hardware always-on case study uses the same gallery spacing as the other brands. */
.client-logo-wrap .logo-hh-always-on { width: 112px; max-width: 112px; max-height: 122px; }
#brand-9 .client-logo-wrap { min-height: 122px; margin-bottom: 4px; }
#brand-9 .client-logo-wrap .logo-hh-always-on { margin-left: -18px; }
#brand-9 .brand-media .slide-picture img { object-fit: cover; }
#brand-9 .brand-media[data-per-page="2"] .brand-track { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#brand-9 .brand-media[data-per-page="2"] .brand-slide { min-width: 0; width: auto; }
#brand-9 .brand-media[data-per-page="2"] .slide-picture { aspect-ratio: 9/16; }
@media(max-width:700px) { #brand-9 .brand-media[data-per-page="2"] .brand-track { gap: 8px; } }

/* Center the bio copy and lift it slightly within its column. */
#about .about-copy { grid-column: 2; grid-row: 1; align-self: start; margin-top: 45px; transform: none; text-align: center; }
#about .about-copy h2 { margin-top: 0; }
#about .about-copy p { margin-left: auto; margin-right: auto; }
#about .about-copy a[href="https://www.instagram.com/milknmatches/"] { text-decoration: underline; text-underline-offset: 0.18em; }
#about .about-copy .bio-photo-roles { justify-items: center; }
@media(max-width:700px) { #about .about-copy { grid-column: auto; grid-row: 1; margin-top: 0; transform: none; text-align: center; } #about .about-copy .bio-photo-roles { margin-top: 44px; } }

/* Make outbound links recognizable throughout the portfolio. */
a[href^="https://"], a[href^="http://"], a[href^="mailto:"] { text-decoration: underline; text-underline-offset: .18em; }

/* Make project role labels easier to read across every case study. */
#projects > .brand-case .brand-story .brand-role { font: 500 12px/1.65 var(--mono); letter-spacing: 1.1px; }
@media(max-width:700px) { #projects > .brand-case .brand-story .brand-role { font-size: 10.5px; line-height: 1.6; } }