:root { color-scheme: dark; --paper: #f0f0e8; --display: 'Tilt Warp', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 128px; }
body { margin: 0; background: #000; color: #fff; font-family: 'Inter', sans-serif; font-weight: 400; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 5px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #8b9fff; outline-offset: 6px; }
.container { width: min(1168px, calc(100% - 80px)); margin-inline: auto; }
.site-navigation { position: sticky; top: 0; z-index: 4; padding-block: 24px; background: #000; }
.introduction { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 32px; }
nav { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 20px; }
h1, h2, .role { font-family: var(--display); font-weight: 400; font-variation-settings: 'XROT' 0, 'YROT' 0; }
h1 { font-size: 150px; line-height: normal; }
.role { font-size: 30px; }
.header-portrait { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1126 / 732; margin-top: 100px; text-align: center; }
.header-portrait .portrait { position: absolute; z-index: -1; width: 56.84%; height: auto; aspect-ratio: 1; object-fit: cover; left: 21.58%; top: 12.98%; }
.header-portrait h1 { font-size: clamp(56px, 15.3vw, 223px); line-height: 1.26; white-space: nowrap; }
.header-portrait .role { font-size: clamp(14px, 2.56vw, 37.3px); line-height: 1.26; }
.intro-copy { max-width: 840px; font-size: 28px; line-height: normal; }
.actions { display: flex; align-items: center; gap: 28px; font-size: 24px; }
.button { display: inline-block; width: fit-content; border: 0; border-radius: 4px; padding: 16px 24px; font: inherit; cursor: pointer; transition: background-color .15s; }
.button-light { background: white; color: black; }
.button-light:hover { background: var(--paper); }
.packages { padding-block: 32px 96px; }
.section-intro { max-width: 820px; display: grid; gap: 20px; }
.section-intro h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.1; }
.section-intro > p:last-child { font-size: 22px; line-height: 1.5; color: #c6c6c0; }
.process { list-style: none; padding: 0; margin: 40px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.process li { border-top: 1px solid #555; padding-top: 18px; font-size: 18px; line-height: 1.5; color: #c6c6c0; }
.process span { display: block; margin-bottom: 10px; font-size: 14px; letter-spacing: .06em; color: white; }
.package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.package-card { border: 1px solid #454545; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.package-card .eyebrow, .creative-sprint .eyebrow { font-size: 14px; letter-spacing: .06em; }
.package-card h3, .creative-sprint h3 { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.15; margin: 0; }
.package-card > p:not(.eyebrow), .creative-sprint p:not(.eyebrow):not(.price) { font-size: 18px; line-height: 1.6; }
.package-card ul { padding-left: 20px; margin: 0 0 8px; font-size: 17px; line-height: 1.8; }
.package-footer { margin-top: auto; display: grid; gap: 20px; border-top: 1px solid #555; padding-top: 24px; }
.price { font-size: 23px; font-weight: 600; line-height: 1.4; }
.package-footer > a { font-size: 18px; text-decoration: underline; text-underline-offset: 5px; }
.package-featured { background: var(--paper); color: #000; border-color: var(--paper); }
.package-label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.package-badge { background: #000; color: #fff; border-radius: 20px; padding: 6px 10px; font-size: 12px; }
.creative-sprint { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; border-block: 1px solid #555; padding-block: 36px; margin-top: 40px; }
.creative-sprint > div:first-child { display: grid; gap: 18px; max-width: 700px; }
.sprint-action { display: grid; gap: 20px; }
.pricing-note { margin-top: 24px; color: #bdbdb6; font-size: 16px; line-height: 1.5; }
.work { display: flex; flex-direction: column; gap: 64px; padding-bottom: 64px; }
.project { display: grid; grid-template-columns: 480fr 648fr; gap: 40px; align-items: center; }
.artwork { position: relative; overflow: hidden; isolation: isolate; }
.artwork img { position: absolute; display: block; max-width: none; }
.voices { aspect-ratio: 480 / 506.243; border-radius: 26px; }
.voices img { width: 241.43%; height: 128.76%; left: -70.7%; top: -10.71%; }
.homegrown { aspect-ratio: 480 / 600.212; border-radius: 31px; }
.homegrown img { width: 100%; height: 100%; object-fit: cover; }
.awe { aspect-ratio: 480 / 620.529; border-radius: 16px; }
.awe img { width: 106.35%; height: 99.93%; left: -3.07%; top: 0; }
.project-copy { display: flex; flex-direction: column; gap: 20px; }
.project h2, .logo-grid h2 { font-size: 28px; }
.category { font-size: 18px; }
.project-headline { font-size: 28px; line-height: 1.45; }
.description { font-size: 20px; line-height: 1.45; }
.logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 56px; }
.logo-grid article { display: flex; flex-direction: column; gap: 16px; }
.logo-grid .artwork { width: 100%; aspect-ratio: 368 / 388.12; border-radius: 20px; }
.nomadic img { width: 100%; height: 146.78%; top: -17.88%; left: 0; }
.kenny img { width: 368.08%; height: 196.31%; top: -48.22%; left: -134.04%; }
.vinyl img { width: 214.64%; height: 114.5%; top: -7.25%; left: -57.32%; }
.about-contact { background: var(--paper); color: #000; color-scheme: light; padding-block: 80px; }
.about-content, .contact { display: flex; flex-direction: column; gap: 28px; }
.eyebrow { font-size: 20px; }
.about-content > h2 { font-size: 64px; }
.about-copy, .contact > p, .email-link { font-size: 28px; line-height: normal; }
.services { font-size: 22px; }
.contact h2 { font-size: 48px; }
form { display: flex; flex-direction: column; gap: 24px; }
label { display: flex; flex-direction: column; font-size: 20px; line-height: 1.7; border-bottom: 1px solid #73736b; padding-bottom: 24px; }
input, textarea { border: 0; border-radius: 0; background: transparent; color: #000; padding: 0; width: 100%; font: inherit; line-height: 1.7; }
input::placeholder, textarea::placeholder { color: #45453e; opacity: 1; }
textarea { resize: vertical; min-height: 34px; }
.button-dark { padding: 18px 28px; background: black; color: white; font-size: 28px; text-decoration: underline; text-underline-offset: 4px; }
.button-dark:hover { background: #30302b; }
.form-note { font-size: 16px; line-height: 1.5; }
.email-link { overflow-wrap: anywhere; }
.skip-link { position: absolute; top: 10px; left: 10px; padding: 12px; background: #fff; color: #000; transform: translateY(-200%); z-index: 5; }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 1000px) {
 h1 { font-size: clamp(76px, 11vw, 130px); }
 .project { gap: 28px; }
 .project h2, .logo-grid h2, .project-headline { font-size: 24px; }
 .about-content > h2 { font-size: 52px; }
}
@media (max-width: 700px) {
 .site-navigation { padding-block: 16px; }
 .packages { padding-block: 16px 56px; }
 .package-grid, .process, .creative-sprint { grid-template-columns: 1fr; }
 .package-card { padding: 24px; }
 .package-card h3, .creative-sprint h3 { font-size: 30px; }
 .section-intro > p:last-child { font-size: 19px; }
 nav { flex-wrap: wrap; }
 nav > a:first-child { flex-basis: 100%; }
 .container { width: calc(100% - 40px); }
 .introduction { padding-top: 24px; padding-bottom: 48px; gap: 24px; }
 .header-portrait { margin-top: 40px; min-height: 250px; }
 .header-portrait h1 { font-size: clamp(40px, 15vw, 105px); }
 .header-portrait .role { font-size: clamp(12px, 2.65vw, 19px); }
 nav { font-size: 14px; gap: 16px; min-height: 40px; }
 h1 { font-size: clamp(56px, 14vw, 96px); }
 .role { font-size: 24px; }
 .intro-copy, .about-copy, .contact > p, .email-link { font-size: 21px; line-height: 1.4; }
 .actions { flex-wrap: wrap; gap: 20px; font-size: 18px; }
 .button { padding: 14px 18px; }
 .project { grid-template-columns: 1fr; gap: 24px; }
 .project-copy { gap: 14px; }
 .work { gap: 48px; padding-bottom: 48px; }
 .logo-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 48px; }
 .about-contact { padding-block: 48px; }
 .about-content > h2 { font-size: 40px; }
 .contact h2 { font-size: 34px; }
 .eyebrow { font-size: 15px; }
 .services { font-size: 18px; line-height: 1.6; }
 label { font-size: 18px; }
 textarea { min-height: 92px; }
 .button-dark { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }

/* Work-first editorial layout */
figure { margin: 0; }
figcaption { margin-top: 16px; color: #bdbdb6; font-size: 14px; line-height: 1.6; }
h3, h4 { margin: 0; }
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; padding-block: 36px 20px; }
.hero-copy { display: grid; gap: 28px; }
.hero-copy .eyebrow { font-size: 12px; letter-spacing: .08em; }
.hero-copy h1 { font-size: clamp(42px, 4.8vw, 68px); line-height: 1.06; }
.hero-copy .intro-copy { font-size: 20px; line-height: 1.65; color: #c6c6c0; }
.hero-copy .actions { font-size: 16px; gap: 20px; flex-wrap: wrap; }
.hero-work img { width: 100%; display: block; border-radius: 20px; }
.hero-work figcaption { font-size: 12px; letter-spacing: .04em; }
.credibility { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; border-block: 1px solid #454545; padding-block: 28px; margin-top: 12px; }
.credibility .eyebrow { font-size: 12px; letter-spacing: .06em; }
.credibility > p:last-child { font-size: 19px; line-height: 1.65; color: #c6c6c0; }
.credibility a, .pricing-note a { text-decoration: underline; text-underline-offset: 4px; }
.case-study { border-top: 1px solid #454545; padding-top: 32px; scroll-margin-top: 24px; }
.case-heading { display: grid; gap: 16px; margin-bottom: 32px; }
.case-heading .eyebrow { font-size: 12px; letter-spacing: .06em; }
.case-heading h3 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; }
.case-deck { color: #c6c6c0; font-size: 23px; line-height: 1.5; }
.case-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.case-story { display: grid; gap: 26px; }
.case-story h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; font-weight: 500; }
.case-story p { font-size: 18px; line-height: 1.7; color: #c6c6c0; }
.case-outcome { border-left: 2px solid var(--paper); padding-left: 22px; }
.site-capture { width: 100%; height: auto; border: 1px solid #454545; border-radius: 12px; display: block; }
.about-section { padding-block: 72px; background: var(--paper); color: #000; }
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 64px; }
.about-portrait { width: 100%; height: auto; border-radius: 18px; }
.about-section .section-intro p:not(.eyebrow) { font-size: 19px; line-height: 1.7; color: #363630; }
.about-section .eyebrow { font-size: 13px; }
.working { padding-block: 80px; }
.working .process { grid-template-columns: repeat(5, 1fr); gap: 24px; }
.working .process li { font-size: 16px; }
.working .process span { font-size: 12px; }
.timing-note { max-width: 800px; font-size: 17px; line-height: 1.7; color: #c6c6c0; }
.package-grid { margin-top: 36px; }
.package-card .partner-example { font-size: 16px; }
.contact { max-width: 880px; }
.contact > p:not(.eyebrow) { max-width: 740px; font-size: 22px; line-height: 1.6; }
button:disabled { cursor: not-allowed; opacity: .55; }
footer { padding-block: 32px; display: flex; justify-content: space-between; gap: 24px; font-size: 13px; line-height: 1.6; }
footer p { color: #bdbdb6; }
@media (max-width: 1000px) {
 .hero-grid, .case-grid, .about-grid { gap: 32px; }
 .working .process { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
 .hero-grid, .case-grid, .about-grid, .credibility { grid-template-columns: 1fr; gap: 28px; }
 .hero-grid { padding-block: 20px 0; }
 .hero-copy h1 { font-size: clamp(40px, 10vw, 60px); }
 .hero-work { max-width: 440px; }
 .hero-copy .intro-copy { font-size: 19px; }
 .credibility { gap: 16px; }
 .case-deck { font-size: 21px; }
 .case-story p { font-size: 17px; }
 .working .process { grid-template-columns: 1fr; }
 .about-section, .working { padding-block: 48px; }
 .about-portrait { max-width: 360px; }
 .contact > p:not(.eyebrow) { font-size: 19px; }
 footer { flex-direction: column; }
}

/* Nostalgia / September 2026 — analog editorial campaign system */
:root { --paper:#F4E9D9; --display:'Arial Black','Tilt Warp',sans-serif; --rust:#B84A25; --lavender:#B99ACF; --acid:#E6C744; }
body { background:#24201E; color:var(--paper); }
body::after { content:""; position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.115; 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='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.container { width:min(1280px,calc(100% - 96px)); }
.site-navigation { background:#24201E; padding-block:15px; border-bottom:1px solid #f4e9d944; }
nav { min-height:32px; justify-content:flex-end; gap:38px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
nav > a:first-child { margin-right:auto; font-family:var(--display); font-size:20px; letter-spacing:-.07em; }
nav > a:last-child { border:1px solid var(--lavender); padding:10px 16px; color:var(--lavender); }
h1,h2,h3 { letter-spacing:-.065em; }
.eyebrow { font-family:'Courier New',monospace; font-size:12px; letter-spacing:.08em; line-height:1.5; }
.introduction { padding:0; gap:0; }
.hero-collage { min-height:790px; height:min(880px,calc(100svh - 70px)); position:relative; isolation:isolate; overflow:hidden; background:#7D321F; }
.hero-photo { position:absolute; z-index:-3; width:76%; height:115%; object-fit:cover; object-position:center 40%; right:-5%; top:-9%; filter:sepia(1) saturate(2) contrast(1.3) brightness(1.4); mix-blend-mode:luminosity; }
.light-leak { position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse at 87% 18%,#b99acf99,transparent 40%),radial-gradient(ellipse at 55% 95%,#d99528cc,transparent 50%),linear-gradient(90deg,#7d321f 0%,#b84a2544 50%,#7b3d9d44 100%); }
.hero-meta { position:absolute; top:28px; left:48px; right:48px; display:flex; justify-content:space-between; font:10px 'Courier New',monospace; letter-spacing:.1em; }
.hero-copy { position:relative; padding:102px 48px 0; gap:20px; z-index:2; }
.hero-copy h1 { font-family:var(--display); font-size:clamp(90px,10.5vw,164px); line-height:.81; letter-spacing:-.085em; font-weight:900; }
.hero-copy h1 span { color:var(--acid); }
.hero-copy .eyebrow { font:11px 'Courier New',monospace; margin-bottom:14px; }
.type-echo { position:absolute; top:50%; left:26%; color:transparent; -webkit-text-stroke:1px var(--lavender); font:900 clamp(90px,12vw,185px)/1 var(--display); letter-spacing:-.08em; transform:rotate(-8deg); z-index:1; white-space:nowrap; }
.hero-vertical { position:absolute; right:21px; top:120px; writing-mode:vertical-rl; font:900 17px 'Arial Narrow',Impact,sans-serif; letter-spacing:.06em; }
.orbit { position:absolute; border:1px solid #f4e9d988; border-radius:50%; pointer-events:none; z-index:-1; }
.orbit-one { width:730px; height:730px; top:-205px; right:-155px; }
.orbit-two { width:510px; height:510px; top:145px; right:125px; }
.hero-sticker { position:absolute; right:10%; top:47%; transform:rotate(8deg); background:var(--lavender); color:#24201E; padding:19px 23px; font:900 26px/.95 Impact,'Arial Narrow',sans-serif; box-shadow:4px 5px 0 #24201e44; }
.hero-sticker span { display:block; font:48px/.8 sans-serif; margin-top:15px; }
.hero-bottom { position:absolute; bottom:32px; left:48px; right:48px; display:flex; align-items:end; justify-content:space-between; gap:32px; z-index:2; }
.hero-bottom > p { max-width:385px; font-size:17px; line-height:1.55; }
.hero-index { font:10px/1.8 'Courier New',monospace; }
.button { border-radius:0; font-size:13px; text-transform:uppercase; letter-spacing:.05em; padding:18px 23px; }
.button-light { background:var(--acid); color:#24201e; }
.ticker { display:flex; justify-content:space-around; align-items:center; gap:35px; white-space:nowrap; overflow:hidden; background:var(--lavender); color:#24201e; padding:19px 0; font:900 21px Impact,'Arial Narrow',sans-serif; letter-spacing:.015em; border-block:1px solid #24201e; }
.ticker b { font-size:30px; font-weight:400; }
.credibility { padding-block:38px; margin-top:0; border-top:0; }
.credibility > p:last-child { font-size:16px; color:#ded1c2; max-width:780px; }
.work { padding-block:86px; gap:80px; }
.section-intro h2 { font-size:clamp(44px,6.5vw,92px); line-height:.97; }
.section-intro > p:last-child { font-size:18px; max-width:650px; color:#d0c3b5; }
.section-intro > .eyebrow { color:var(--lavender); }
.case-study { padding-top:25px; border-color:#f4e9d955; }
.case-heading { position:relative; gap:12px; }
.case-heading h3 { font-size:clamp(36px,5.2vw,72px); }
.case-heading .eyebrow { color:var(--acid); font-family:'Courier New',monospace; }
.case-deck { font-size:20px; color:var(--lavender); }
.case-grid { grid-template-columns:1.15fr 1fr; gap:70px; }
.case-grid figure { padding:12px; background:var(--paper); color:#24201e; transform:rotate(-2deg); margin:12px 0; }
.case-grid figcaption { color:#24201e; font:11px/1.6 'Courier New',monospace; }
.case-grid figcaption a { text-decoration:underline; }
.artwork,.homegrown,.voices,.site-capture { border-radius:0; }
.case-story h4 { color:var(--acid); font:12px 'Courier New',monospace; }
.case-story p { font-size:16px; line-height:1.75; color:#ded1c2; }
.case-outcome { border-color:var(--lavender); }
#voices .case-grid figure { transform:rotate(2deg); }
#voices .case-heading h3 { color:var(--lavender); }
.about-section { position:relative; overflow:hidden; background:radial-gradient(ellipse at 0 100%,#D9952866,transparent 65%),var(--paper); padding-block:100px; }
.about-grid { gap:90px; }
.about-portrait { border-radius:0; filter:sepia(.65) contrast(1.2); transform:rotate(-4deg); border:10px solid #b99acf; box-shadow:16px 16px 0 #b84a25; }
.about-section .eyebrow { color:#7D321F; }
.about-section .section-intro p:not(.eyebrow) { font-size:17px; }
.working { padding-block:90px; }
.process li { border-color:#b99acf88; }
.working .process span { color:var(--lavender); font-family:'Courier New',monospace; }
.packages { padding-bottom:90px; }
.package-grid { gap:0; border:1px solid #f4e9d944; }
.package-card { border:0; border-bottom:1px solid #f4e9d944; border-radius:0; padding:38px; background:linear-gradient(135deg,#7d321f22,transparent); }
.package-card:nth-child(odd) { border-right:1px solid #f4e9d944; }
.package-card h3,.creative-sprint h3 { font-size:38px; }
.package-card > p:not(.eyebrow),.creative-sprint p:not(.eyebrow):not(.price) { font-size:16px; }
.package-card ul { font-size:15px; }
.package-featured { background:var(--lavender); color:#24201e; }
.package-badge { border-radius:0; background:#24201e; color:var(--paper); transform:rotate(4deg); }
.package-footer { border-color:#8d7f78; }
.price { font-size:21px; }
.creative-sprint { border-color:var(--acid); }
.about-contact { background:radial-gradient(ellipse at 100% 0,#b99acf66,transparent 60%),var(--paper); padding-block:90px; }
.contact { max-width:1000px; }
.contact h2 { font-size:clamp(56px,8vw,110px); line-height:.95; }
.contact > .eyebrow { font:12px 'Courier New',monospace; }
.contact > p:not(.eyebrow) { font-size:19px; }
form { display:grid; grid-template-columns:1fr 1fr; gap:26px 38px; margin-top:20px; }
form label { font-size:13px; text-transform:uppercase; letter-spacing:.06em; padding-bottom:14px; }
form input,form textarea { font-size:17px; letter-spacing:0; text-transform:none; margin-top:12px; }
form label:has(textarea),.form-note { grid-column:1/-1; }
.button-dark { background:#24201e; font-size:14px; }
.email-link { font-size:24px; text-decoration:underline; }
.contact .actions { font-size:15px; }
footer > a { font-family:var(--display); font-size:20px; letter-spacing:-.06em; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline-color:#7B3D9D; }
@media(max-width:1000px) {
 .hero-collage { min-height:760px; }
 .hero-copy h1 { font-size:12vw; }
 .hero-sticker { right:9%; top:48%; font-size:23px; }
 .hero-bottom > p { max-width:320px; }
 .hero-index { display:none; }
 .case-grid,.about-grid { gap:35px; }
}
@media(max-width:700px) {
 .container { width:calc(100% - 40px); }
 .site-navigation { padding-block:12px; }
 nav { gap:16px; font-size:10px; }
 nav > a:first-child { flex-basis:100%; font-size:22px; }
 nav > a:last-child { padding:6px 10px; margin-left:auto; }
 .hero-collage { min-height:740px; height:calc(100svh - 110px); max-height:850px; }
 .hero-meta { left:20px; right:20px; top:20px; font-size:8px; }
 .hero-meta span:last-child { max-width:105px; text-align:right; }
 .hero-photo { width:140%; height:85%; right:-42%; top:4%; }
 .hero-copy { padding:110px 20px 0; }
 .hero-copy h1 { font-size:14.1vw; line-height:.93; }
 .hero-copy .eyebrow { font-size:9px; }
 .hero-vertical { right:9px; top:110px; font-size:12px; }
 .type-echo { top:43%; left:6%; font-size:17vw; }
 .hero-sticker { top:53%; right:12%; font-size:19px; padding:13px 16px; }
 .hero-sticker span { font-size:32px; }
 .hero-bottom { left:20px; right:20px; bottom:25px; align-items:start; flex-direction:column; gap:18px; }
 .hero-bottom > p { max-width:290px; font-size:15px; }
 .orbit-one { width:480px; height:480px; right:-220px; top:-110px; }
 .orbit-two { width:340px; height:340px; right:-60px; top:230px; }
 .ticker { justify-content:flex-start; font-size:17px; padding:12px 20px; gap:24px; }
 .credibility { padding-block:30px; }
 .work,.working { padding-block:55px; }
 .work { gap:50px; }
 .case-grid,.about-grid { grid-template-columns:1fr; gap:30px; }
 .case-grid figure { margin-inline:7px; }
 .case-heading h3 { font-size:39px; }
 .section-intro h2 { font-size:48px; }
 .about-section { padding-block:65px; }
 .about-portrait { width:85%; margin:10px auto 20px; }
 .package-card { padding:26px; }
 .package-card:nth-child(odd) { border-right:0; }
 .package-card h3 { font-size:32px; }
 .about-contact { padding-block:55px; }
 form { grid-template-columns:1fr; }
 form label { grid-column:1/-1; }
 .email-link { font-size:19px; }
}
/* Feather the source photograph into the color field, avoiding hard image edges. */
.hero-photo { mask-image:linear-gradient(to right,transparent,#000 18%); }
@media(max-width:700px) {
.hero-photo { top:0; height:100%; mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 82%,transparent); }
}

/* Give touch layouts a reading-first composition without overlapping hero copy. */
@media (max-width: 1100px) {
 .container { width:calc(100% - 64px); }
 nav { gap:24px; }
 nav a { min-height:44px; display:flex; align-items:center; }
 .hero-collage { height:auto; min-height:0; padding:32px; display:grid; gap:40px; }
 .hero-meta { position:static; font-size:10px; gap:24px; line-height:1.5; }
 .hero-copy { padding:24px 0 0; gap:20px; }
 .hero-copy h1 { font-size:clamp(64px,11.5vw,126px); line-height:1; }
 .hero-copy .eyebrow { font-size:12px; margin:0; }
 .hero-photo { width:85%; height:100%; top:0; right:-12%; opacity:.5; }
 .light-leak { background:linear-gradient(90deg,#542518ed,#54251888); }
 .type-echo,.hero-sticker,.hero-vertical,.orbit,.hero-index { display:none; }
 .hero-bottom { position:static; align-items:center; gap:32px; }
 .hero-bottom > p { max-width:440px; font-size:18px; line-height:1.65; }
 .hero-bottom .button { flex-shrink:0; }
 .credibility { grid-template-columns:1fr; gap:16px; }
 .credibility br { display:none; }
 .case-grid,.about-grid { grid-template-columns:1fr; gap:36px; }
 .case-grid figure,#voices .case-grid figure { transform:none; margin:0; width:100%; max-width:640px; }
 .case-story { max-width:700px; gap:28px; }
 .case-story p { font-size:17px; line-height:1.75; }
 .about-portrait { width:min(80%,400px); margin:12px auto 24px; }
 .section-intro h2 { font-size:clamp(38px,6vw,64px); line-height:1.08; }
 .about-section,.working,.about-contact { padding-block:64px; }
 .working .process { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
 .package-grid { grid-template-columns:1fr; }
 .package-card { padding:32px; }
 .package-card:nth-child(odd) { border-right:0; }
 .package-card h3 { font-size:34px; }
 .creative-sprint { grid-template-columns:1fr; gap:28px; }
 .contact h2 { font-size:clamp(38px,6.5vw,68px); line-height:1.08; }
 form { grid-template-columns:1fr; }
 form label { grid-column:1/-1; }
 body::after { opacity:.045; }
}
@media (max-width: 600px) {
 .container { width:calc(100% - 40px); }
 .site-navigation { position:static; padding-block:8px; }
 nav { display:grid; grid-template-columns:repeat(4,auto); gap:4px 12px; font-size:11px; }
 nav > a:first-child { grid-column:1/-1; font-size:22px; }
 nav > a:last-child { margin:0; padding:8px; justify-content:center; }
 .hero-collage { padding:24px 20px 32px; gap:28px; }
 .hero-meta span:last-child { display:none; }
 .hero-copy { padding:12px 0 0; }
 .hero-copy h1 { font-size:14vw; letter-spacing:-.075em; }
 .hero-copy .eyebrow { font-size:11px; }
 .hero-photo { width:130%; right:-45%; }
 .hero-bottom { flex-direction:column; align-items:flex-start; gap:24px; }
 .hero-bottom > p { max-width:36ch; font-size:17px; }
 .ticker { font-size:16px; padding-block:12px; }
 .work { padding-block:48px; gap:48px; }
 .case-heading h3 { font-size:clamp(30px,8vw,42px); line-height:1.12; }
 .case-deck { font-size:18px; line-height:1.6; }
 .case-grid { gap:28px; }
 .case-grid figure { padding:8px; }
 .case-grid figcaption { font-size:12px; }
 .working .process { grid-template-columns:1fr; }
 .package-card { padding:24px 20px; gap:20px; }
 .package-card h3,.creative-sprint h3 { font-size:30px; }
 .package-card ul { line-height:1.65; }
 .package-card li + li { margin-top:8px; }
 .price { font-size:21px; }
 .contact { gap:24px; }
 .contact h2 { font-size:clamp(34px,8.8vw,52px); }
 .email-link { font-size:18px; line-height:1.6; }
 footer { flex-direction:column; }
}

/* Show inquiry availability before visitors enter any details. */
.inquiry-notice { margin:0; padding:20px 24px; border:2px solid currentColor; font-size:18px; line-height:1.6; }
.inquiry-notice a { text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }

/* A shorter reading path on phones, with full details available on demand. */
.mobile-copy { display:none; }
.mobile-disclosure > summary { display:none; }
.about-details p + p { margin-top:20px; }
@media (max-width:600px) {
 html { scroll-padding-top:20px; }
 .desktop-copy,.hero-meta,.ticker,.credibility,.work > .section-intro > p:last-child,.packages > .section-intro > p:last-child { display:none; }
 .mobile-copy { display:inline; }
 .hero-collage { gap:24px; padding-top:20px; }
 .hero-copy { padding-top:0; }
 .hero-bottom > p { font-size:16px; max-width:30ch; }
 .introduction { padding-bottom:0; gap:0; }
 .section-intro { gap:14px; }
 .section-intro h2 { font-size:34px; }
 .case-heading { gap:12px; }
 .case-heading .eyebrow { font-size:10px; line-height:1.5; letter-spacing:.04em; }
 .case-heading h3 { font-size:28px; }
 .case-deck { font-size:16px; }
 .case-grid { gap:12px; }
 .case-grid figcaption { font-size:11px; line-height:1.5; }
 .mobile-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:12px 0; cursor:pointer; font-size:15px; font-weight:600; list-style:none; border-bottom:1px solid currentColor; }
 .mobile-disclosure > summary::-webkit-details-marker { display:none; }
 .mobile-disclosure > summary::after { content:'+'; font-size:22px; font-weight:400; }
 .mobile-disclosure[open] > summary::after { content:'−'; }
 .mobile-disclosure > summary:focus-visible { outline:3px solid #8b9fff; outline-offset:4px; }
 .mobile-disclosure[open] > summary { margin-bottom:20px; }
 .case-story p,.about-details p { font-size:16px; line-height:1.65; }
 .about-portrait { width:160px; margin:0 auto 12px; border-width:5px; box-shadow:8px 8px 0 #b84a25; transform:none; }
 .about-section,.working,.about-contact { padding-block:48px; }
 .about-grid { gap:24px; }
 .about-section .section-intro > p:not(.eyebrow) { font-size:16px; line-height:1.65; }
 .working .section-intro { margin-bottom:20px; }
 .working .section-intro > p:last-child { display:none; }
 .process { margin:20px 0; }
 .package-card { gap:16px; padding:24px 20px; }
 .package-card h3 { font-size:26px; }
 .package-card > p:not(.eyebrow) { font-size:16px; line-height:1.6; }
 .package-card ul { font-size:15px; }
 .partner-example { font-size:15px; line-height:1.6; margin-top:16px; }
 .package-footer { gap:12px; padding-top:16px; }
 .package-footer > a { min-height:44px; display:flex; align-items:center; font-size:15px; }
 .package-badge { transform:none; font-size:10px; }
 .creative-sprint { margin-top:24px; gap:20px; }
 .creative-sprint h3 { font-size:26px; }
 .creative-sprint p:not(.eyebrow):not(.price) { font-size:16px; }
 .pricing-note { font-size:13px; }
 .contact > p:not(.eyebrow) { font-size:17px; line-height:1.6; }
 #inquiry-form:not([action]),.contact > noscript { display:none; }
 .contact .email-link { font-size:16px; padding-block:12px; text-decoration:underline; }
 .contact .actions { gap:24px; font-size:15px; }
 .contact .actions a { display:flex; align-items:center; min-height:44px; }
 footer p { font-size:12px; }
}