@import url('/fonts.css');

:root {
  --ink: #191b20;
  --muted: #62666e;
  --line: #e4e6e9;
  --paper: #ffffff;
  --wash: #f5f6f8;
  --accent: #962f44;
  --sans: 'DM Sans', Arial, sans-serif;
  --display: 'Manrope', 'DM Sans', Arial, sans-serif;
  --max: 1232px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 115px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 650; line-height: 1.18; }
h1, h2, h3, .personal-line { text-wrap: balance; }
em { font-style: normal; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
::selection { background: #f1d7de; color: #572133; }
.wrap { width: min(var(--max), calc(100% - 112px)); margin-inline: auto; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 99; background: var(--ink); color: white; padding: 12px 22px; }
.skip:focus { top: 15px; }
.eyebrow { font-size: .75rem; line-height: 1.6; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.muted { color: var(--muted); }
.arrow { display: inline-block; width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(20px); }
.header-inner { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 11px; flex-shrink: 0; }
.brand > img { width: 33px; height: 47px; object-fit: contain; }
.brand-lockup { display: flex; flex-direction: column; gap: 1px; font-family: var(--display); }
.brand-prefix { font-size: .8125rem; font-weight: 650; letter-spacing: .1em; line-height: 1.1; }
.brand-name { font-size: 1.875rem; font-weight: 800; letter-spacing: -.07em; line-height: 1.03; }
.brand-period { color: var(--accent); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; }
.nav > a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px; border-radius: 7px; transition: background .2s, color .2s; }
.nav > a:not(.contact-link)::after { content: ''; position: absolute; height: 2px; left: 15px; right: 15px; bottom: 7px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav .contact-link { gap: 12px; margin-left: 16px; border: 1px solid var(--line); border-radius: 7px; padding-inline: 17px; }
.nav .arrow { width: 16px; height: 16px; transition: transform .2s; }
.nav > a:focus-visible { background: var(--wash); }
.nav > a:focus-visible::after { transform: scaleX(1); }
.hero { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 40px; padding: 68px 0 48px; min-height: 640px; }
.hero-copy { padding-bottom: 12px; min-width: 0; }
.hero-copy .eyebrow { color: var(--muted); margin-bottom: 28px; }
.hero h1 { font-family: var(--display); font-size: clamp(3rem, 5.3vw, 4.8rem); font-weight: 650; line-height: 1.1; letter-spacing: -.055em; text-wrap: initial; }
.hero h1 em { color: var(--accent); font-weight: inherit; letter-spacing: inherit; }
.hero-intro { font-size: 1.125rem; line-height: 1.8; color: var(--muted); max-width: 465px; margin-top: 27px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; border: 1px solid var(--ink); border-radius: 7px; padding: 15px 22px; min-height: 52px; background: var(--ink); color: white; font-size: .875rem; font-weight: 500; transition: background .2s, transform .2s; }
.button .arrow { transition: transform .2s; }
.hero-experience { font-size: .8125rem; color: var(--muted); line-height: 1.6; padding: 0; cursor: text; }
.hero-experience strong { display: inline; color: var(--ink); font-size: inherit; font-weight: 600; }
.hero-art { position: relative; align-self: end; padding-top: 30px; min-width: 0; }
.portrait-stage { position: relative; height: 442px; display: flex; align-items: end; justify-content: center; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.portrait-disc { position: absolute; z-index: -1; width: 315px; height: 315px; border-radius: 50%; background: #f1f2f4; top: 50px; left: 50%; transform: translateX(-50%); }
.brand-portrait { width: 440px; height: 440px; object-fit: contain; max-width: 100%; }
.portrait-label { position: absolute; top: 8px; right: 0; font-size: .75rem; letter-spacing: .13em; writing-mode: vertical-rl; color: var(--muted); }
.portrait-note { display: flex; justify-content: space-between; gap: 16px; font-size: .75rem; color: var(--muted); padding-top: 14px; }
.domain-strip { display: flex; justify-content: space-between; align-items: center; gap: 30px; border-block: 1px solid var(--line); padding: 24px 0; }
.domain-strip > p { font-size: .875rem; color: var(--muted); line-height: 1.7; }
.domain-strip strong { font-weight: 550; color: var(--ink); }
.domain-strip > div { display: flex; flex-wrap: wrap; gap: 28px; font-size: .875rem; }
.domain-strip a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; }
.work { padding-top: 100px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 42px; }
.section-heading .eyebrow { margin-bottom: 21px; }
.section-heading h2 { font-size: clamp(2.2rem, 3.8vw, 3rem); font-weight: 600; line-height: 1.17; letter-spacing: -.05em; }
.section-heading h2 em { color: var(--muted); }
.section-heading > p { font-size: 1rem; line-height: 1.8; color: var(--muted); max-width: 320px; padding-bottom: 4px; }
/* Each project is one continuous surface. The source screens stay unaltered. */
.project { --project-tone: #156e70; display: grid; grid-template-columns: .92fr 1.18fr; align-items: stretch; gap: 0; position: relative; overflow: hidden; border: 1px solid #e1e9e8; border-radius: 16px; background: #f1f6f6; margin-bottom: 28px; min-height: 455px; }
.project-meta { position: relative; z-index: 2; min-width: 0; padding: 40px 10px 40px 40px; }
.project-topline { display: flex; align-items: start; gap: 13px; margin-bottom: 27px; font-size: .875rem; }
.project-number { font-size: .75rem; font-weight: 600; color: var(--project-tone); padding-top: 2px; }
.project-topline p { font-weight: 650; line-height: 1.4; }
.project-topline p span { display: block; color: var(--muted); font-weight: 400; font-size: .75rem; margin-top: 4px; }
.project h3 { font-size: clamp(1.8rem, 2.65vw, 2.4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.17; margin-bottom: 20px; }
.project-description { color: var(--muted); font-size: 1rem; line-height: 1.8; max-width: 370px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 26px; }
.tag { font-size: .75rem; border: 1px solid #d5dfdf; border-radius: 5px; padding: 5px 9px; color: #4b6061; line-height: 1.5; }
.text-link { display: inline-flex; align-items: center; gap: 22px; min-height: 40px; padding: 3px 0 5px; border-bottom: 1px solid currentColor; font-size: .875rem; font-weight: 550; transition: color .2s; }
.text-link .arrow { width: 18px; height: 18px; transition: transform .2s; }
.project-image-link { display: block; position: relative; min-width: 0; align-self: stretch; border-radius: 0 16px 16px 0; }
.project-image-link:focus-visible { outline-offset: -6px; }
.project-visual { position: relative; display: flex; align-items: center; width: 100%; height: 100%; min-height: 455px; padding: 56px 0 65px 35px; overflow: hidden; }
.project-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 30%, #b4d3d57a, transparent 68%); pointer-events: none; }
.screen-frame { position: relative; z-index: 1; width: 108%; flex-shrink: 0; border: 1px solid #cad7d7; border-radius: 9px; background: #fff; overflow: hidden; box-shadow: 0 28px 40px -21px #173f4540, 0 4px 10px #20393b0a; transform: perspective(1500px) rotateY(-5deg) rotateZ(-1deg); transform-origin: center left; transition: transform .5s cubic-bezier(.2,.6,.2,1), box-shadow .5s; }
.screen-chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; padding: 7px 12px; border-bottom: 1px solid #e3e8e8; background: #fcfdfd; color: #646e72; font-size: .75rem; line-height: 1.4; }
.window-dots { display: flex; gap: 4px; }
.window-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #c2cacd; }
.window-mark { font-size: .75rem; }
.screen-frame img { width: 100%; height: auto; }
.visual-caption { position: absolute; bottom: 24px; left: 35px; font-size: .75rem; font-weight: 550; color: #456061; z-index: 2; }
.visual-caption > span { font-weight: 400; margin-left: 9px; }
.view-circle { position: absolute; bottom: 20px; right: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: white; border: 1px solid #d5dfe0; color: var(--ink); z-index: 3; transition: background .2s, color .2s; }
.view-circle .arrow { width: 18px; height: 18px; }
.project-finance { --project-tone: #344961; background: #f0f3f7; border-color: #e0e5eb; }
.project-finance .tag { border-color: #d4dce5; color: #536174; }
.project-visual.finance::before { background: radial-gradient(ellipse at 95% 30%, #bccbdc80, transparent 73%); }
.finance .screen-frame { width: 94%; max-width: 510px; margin-inline: auto; border-color: #cfd8e2; transform: perspective(1500px) rotateY(-5deg) rotateZ(1deg); }
.finance .visual-caption { color: #536174; }
.project-moonsjob { --project-tone: #ffffff; background: #ce2940; border-color: #ce2940; color: white; }
.project-moonsjob .project-meta { padding-right: 20px; }
.project-moonsjob .project-topline p span, .project-moonsjob .project-description { color: #ffffff; }
.project-moonsjob .tag { border-color: #ffacb761; color: white; }
.project-visual.moonsjob { padding: 0; min-height: 480px; }
.project-visual.moonsjob::before { display: none; }
.project-visual.moonsjob > img { position: absolute; width: 110%; max-width: none; height: 125%; object-fit: cover; object-position: 50% 45%; right: -4%; top: -12%; mask-image: linear-gradient(to right, transparent, #000 18%, #000 100%); transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.moonsjob .visual-caption { color: white; background: #75172de8; border: 1px solid #f993a360; border-radius: 5px; padding: 6px 10px; bottom: 23px; }
.project-moonsjob .view-circle { border-color: white; }
.expertise { padding: 86px 0 88px; }
.expertise .section-heading { margin-bottom: 40px; }
.expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 44px; }
.expertise-grid article { display: flex; flex-direction: column; align-items: start; padding: 0 0 0 18px; border-left: 2px solid #e8d8dc; border-top: 0; }
.expertise-index { display: block; font-size: .75rem; color: var(--accent); font-weight: 550; margin-bottom: 17px; }
.expertise-grid h3 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.4; margin-bottom: 13px; }
.expertise-grid p { font-size: 1rem; line-height: 1.8; color: var(--muted); margin-bottom: 15px; }
.expertise-grid a { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 500; min-height: 40px; margin-top: auto; }
.expertise-grid .arrow { width: 16px; height: 16px; transition: transform .2s; }
.about { display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; border-block: 1px solid var(--line); padding: 80px 0; }
.personal-line { font-family: var(--display); font-size: 2.65rem; font-weight: 600; line-height: 1.2; letter-spacing: -.05em; margin-top: 35px; }
.personal-line em { color: var(--accent); }
.about-brand { margin-top: 33px; }
.about-brand > img { width: 37px; height: 52px; }
.about-brand .brand-name { font-size: 2rem; }
.about-copy h2 { font-size: 1.8rem; letter-spacing: -.035em; line-height: 1.35; margin-bottom: 24px; }
.about-copy > p { font-size: 1rem; color: var(--muted); line-height: 1.85; margin-bottom: 17px; }
.about-copy strong { font-weight: 600; color: var(--ink); }
.toolkit { border-top: 1px solid var(--line); padding-top: 20px; margin: 24px 0; }
.toolkit > span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 8px; }
.toolkit p { font-size: .875rem; }
.pitch { padding: 80px 0 88px; }
.pitch-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 38px; }
.pitch-type { font-size: .75rem; border: 1px solid var(--line); padding: 5px 11px; border-radius: 5px; color: var(--muted); }
.pitch-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 75px; align-items: start; }
.pitch h2 { font-size: 2.75rem; font-weight: 600; letter-spacing: -.05em; margin-bottom: 24px; line-height: 1.18; }
.pitch h2 em { color: var(--accent); }
.pitch-grid > div > p { font-size: 1rem; line-height: 1.85; color: var(--muted); max-width: 505px; }
.pitch-grid .pitch-detail { font-size: .875rem; margin: 21px 0 25px; color: var(--ink); }
.deck-outline { border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; background: #fafafb; }
.deck-outline-top { padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.deck-outline-top > span { color: var(--accent); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.deck-outline-top > p { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.035em; line-height: 1.4; font-weight: 650; margin-top: 7px; }
.deck-item { border-bottom: 1px solid var(--line); }
.deck-slide { display: flex; align-items: center; gap: 18px; min-height: 100px; padding: 21px 0; cursor: pointer; list-style: none; }
.deck-slide::-webkit-details-marker { display: none; }
.deck-number { color: var(--accent); font-size: .75rem; font-weight: 500; align-self: flex-start; margin-top: 5px; }
.deck-slide-copy { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.deck-slide-copy strong { font-family: var(--display); font-size: 1.25rem; font-weight: 650; letter-spacing: -.035em; line-height: 1.3; }
.deck-slide-copy > span { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.deck-step { display: grid; place-items: center; border: 1px solid #d9dde2; width: 29px; height: 29px; font-size: 1.125rem; font-weight: 400; line-height: 1; border-radius: 50%; flex-shrink: 0; transition: transform .2s, background .2s; }
.deck-item[open] .deck-step { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: white; }
.deck-answer { padding: 0 0 22px 33px; }
.deck-answer p { color: var(--muted); font-size: .9375rem; line-height: 1.8; }
.deck-answer .deck-takeaway { color: var(--ink); font-weight: 500; margin-top: 12px; }
.deck-outline .deck-caption { font-size: .75rem; color: var(--muted); padding-top: 18px; line-height: 1.7; }
.site-footer { border-top: 1px solid var(--line); background: #fafafb; }
.footer-main { display: flex; align-items: start; justify-content: space-between; gap: 60px; padding: 64px 0; }
.footer-message .eyebrow { color: var(--muted); margin-bottom: 23px; }
.footer-message h2 { font-size: clamp(2.2rem, 4.1vw, 3.4rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.2; margin-bottom: 28px; }
.footer-message h2 em { color: var(--accent); }
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin-bottom: 22px; }
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row label { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.form-row input, .form-row textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; resize: vertical; transition: border-color .2s; }
.form-row input:focus-visible, .form-row textarea:focus-visible { outline: none; border-color: var(--accent); }
.form-row input:user-invalid, .form-row textarea:user-invalid { border-color: #c94f4f; }
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form .button { align-self: flex-start; }
.contact-form .button:disabled { opacity: .6; cursor: progress; }
.form-status { font-size: .8125rem; min-height: 20px; }
.form-status[data-state="error"] { color: #c94f4f; }
.form-status[data-state="success"] { color: var(--ink); font-weight: 500; }
.footer-brand { display: flex; flex-direction: column; align-items: start; gap: 20px; }
.footer-brand p { font-size: .875rem; font-weight: 500; }
.footer-brand p span { display: block; font-size: .8125rem; color: var(--muted); font-weight: 400; margin-top: 3px; }
.domain-link { display: inline-flex; align-items: center; gap: 14px; min-height: 40px; font-size: .8125rem; color: var(--muted); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding: 20px 0 24px; font-size: .8125rem; color: var(--muted); }
.socials { display: flex; flex-wrap: wrap; gap: 20px; font-size: .875rem; }
.socials a, .back-top { display: inline-flex; align-items: center; min-height: 44px; }
/* Case studies */
.case-top{padding:31px 0 35px}.back-link{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:45px}.back-link .arrow{transform:rotate(180deg);width:15px;height:15px}.back-link:hover{color:var(--accent)}.case-heading-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:60px;align-items:end}.case-title{font-family:var(--display);font-weight:600;font-size:clamp(52px,5.8vw,82px);line-height:1.02;letter-spacing:-2px;margin-top:22px}.case-summary{font-size:17px;color:var(--muted);line-height:1.8;max-width:365px;padding-bottom:7px}.case-facts{display:grid;grid-template-columns:.8fr 1.2fr 1.2fr;gap:35px;border-top:1px solid var(--line);padding-top:25px;margin-top:40px;margin-bottom:0}.case-facts dt{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.case-facts dd{margin:0;font-size:14px;line-height:1.8}.contribution{display:grid;grid-template-columns:.8fr 2.4fr;gap:35px;margin-top:26px;border-top:1px solid var(--line);padding-top:21px}.contribution>span{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding-top:4px}.contribution p{font-size:16px;color:var(--muted);line-height:1.8;max-width:750px}.case-banner{height:500px;padding:38px 10%;display:flex;align-items:center;justify-content:center;background:#f0f3f2;border:1px solid #e3e7e4;border-radius:4px;overflow:hidden}.case-banner img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 17px 20px #00000014)}.case-banner.finance{background:#f3f2ed;padding:40px 13%;border-color:#e8e6de}.case-banner.moonsjob{padding:0;border-color:#e6d5d8}.case-banner.moonsjob img{object-fit:cover;object-position:50% 32%;filter:none}.case-body{display:grid;grid-template-columns:185px minmax(0,1fr);gap:80px;padding-top:65px}.case-toc{position:sticky;top:115px;height:max-content}.case-toc>p{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:22px}.case-toc a{display:block;padding:9px 0 9px 16px;border-left:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.65}.case-toc a.active,.case-toc a:hover{border-color:var(--accent);color:var(--accent)}.case-section{padding-bottom:65px}.case-section+.case-section{border-top:1px solid var(--line);padding-top:45px}.case-section .eyebrow{font-size:12px;color:var(--accent);margin-bottom:20px}.case-section h2{font-family:var(--display);font-size:44px;font-weight:600;letter-spacing:-.8px;line-height:1.14;margin-bottom:25px}.case-section h3{font-size:20px;letter-spacing:-.5px;line-height:1.4;margin-bottom:13px}.case-section p{font-size:16px;line-height:1.9;color:var(--muted);margin-bottom:18px}.case-section p:last-child{margin-bottom:0}.case-section strong{font-weight:550;color:var(--ink)}.callout{border-left:2px solid var(--accent);padding:20px 27px;margin-top:28px;background:#faf7f8}.callout p{font-family:var(--display);font-size:27px;line-height:1.4;color:#62313a}.problem-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:35px}.problem-list article{border-top:1px solid #b8b8b3;padding-top:19px}.problem-list h3{font-size:17px;line-height:1.4;margin-bottom:11px}.problem-list p{font-size:14px;line-height:1.85}.decision{display:grid;grid-template-columns:36px 1fr;gap:16px;margin-top:34px}.decision-index{color:var(--accent);font-size:12px;padding-top:5px}.decision p{font-size:16px}.decision .tradeoff{font-size:13px;border-top:1px solid var(--line);margin-top:15px;padding-top:14px;line-height:1.85}.flow{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:28px 0}.flow-step{border:1px solid var(--line);padding:23px;border-radius:3px}.flow-step>span{display:block;font-size:12px;color:var(--accent);margin-bottom:15px}.flow-step h3{font-size:18px;margin-bottom:10px}.flow-step p{font-size:14px;line-height:1.85}.example{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:28px 32px;border:1px solid var(--line);margin:28px 0 12px;border-radius:4px}.example>div+div{border-left:1px solid var(--line);padding-left:32px}.example .caption{display:block;font-size:13px;color:var(--muted)}.example .number{font-family:var(--display);font-size:78px;letter-spacing:-2px;line-height:1.15;display:block;margin:7px 0}.example .after{color:var(--accent)}.example-note{font-size:12px!important;line-height:1.8!important}.image-panel{background:#f5f5f3;padding:22px;margin-top:28px;border-radius:4px}.image-panel figure{margin:0}.gallery-image{position:relative;display:block;overflow:hidden;cursor:zoom-in}.image-panel img{width:100%;object-fit:contain;border-radius:2px;transition:transform .35s}.image-panel img:hover{transform:scale(1.012)}.image-panel figcaption{font-size:12px;color:var(--muted);line-height:1.8;margin-top:15px}.image-expand{position:absolute;right:12px;bottom:12px;background:#fff;padding:7px 12px;border:1px solid var(--line);border-radius:30px;box-shadow:0 2px 8px #00000008;font-size:12px;color:var(--ink)}.full-size{color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-left:5px}.screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.screen-grid .image-panel{padding:14px;margin-top:18px}.screen-grid .image-expand{display:none}.outcome-list{padding:0;list-style:none;margin:28px 0}.outcome-list li{border-top:1px solid var(--line);padding:16px 0 16px 28px;position:relative;color:var(--muted);font-size:16px;line-height:1.8}.outcome-list li:before{content:'✓';position:absolute;left:0;color:var(--accent)}.table-scroll{overflow-x:auto;margin:28px 0 10px}table{border-collapse:collapse;min-width:570px;width:100%;font-size:14px;line-height:1.85;text-align:left}caption{text-align:left;font-size:12px;color:var(--muted);padding:0 0 17px}th,td{border-bottom:1px solid var(--line);padding:17px 17px 17px 0;vertical-align:top}thead th{font-size:12px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;border-top:1px solid var(--line);padding-top:14px;padding-bottom:14px}tbody th{font-weight:500;width:25%}td{color:var(--muted)}.case-next{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding:36px 0 50px}.case-next h2{font-family:var(--display);font-size:39px;font-weight:600;letter-spacing:-.5px;margin-top:15px}.case-next .round{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);transition:background .2s}.case-next:hover .round{background:var(--ink);color:white}.reading-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;background:var(--accent);pointer-events:none}.error-page{padding:90px 0;min-height:60vh}.error-page h1{font-family:var(--display);font-size:70px;font-weight:600;margin-top:20px}.error-page>p{color:var(--muted);margin-bottom:22px}
/* Full-size screen viewer */
.lightbox{padding:0;border:0;border-radius:6px;width:min(1280px,calc(100% - 40px));max-width:none;max-height:94dvh;background:white;box-shadow:0 20px 100px #0003;color:var(--ink)}.lightbox::backdrop{background:#181818bb;backdrop-filter:blur(6px)}.lightbox-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 22px;border-bottom:1px solid var(--line)}.lightbox-toolbar>div{display:flex;align-items:center;gap:12px}.lightbox button,.lightbox-toolbar a{font-size:13px;background:white;color:var(--ink);border:1px solid var(--line);border-radius:30px;padding:8px 13px;line-height:1.4}.lightbox button:hover{border-color:var(--ink)}.lightbox-count{font-size:12px;color:var(--muted)}.lightbox-scroll{overflow:auto;max-height:calc(90dvh - 142px);min-height:150px;padding:22px;background:#f4f4f2}.lightbox-image{max-width:100%;max-height:calc(90dvh - 190px);width:auto;height:auto;object-fit:contain;margin:0 auto}.lightbox.native-size .lightbox-image{max-width:none;max-height:none}.lightbox.native-size .lightbox-scroll{justify-content:start}.lightbox-bottom{display:flex;align-items:center;gap:22px;justify-content:space-between;padding:15px 22px}.lightbox-caption{font-size:12px;line-height:1.6;color:var(--muted);text-align:center;max-width:700px}.lightbox-bottom button{white-space:nowrap}body.viewer-open{overflow:hidden}
/* Keep the same typography and interaction language through the case studies. */
.case-title { font-weight: 600; font-size: clamp(2.9rem, 4.6vw, 4.3rem); letter-spacing: -.05em; line-height: 1.14; }
.case-section h2 { font-weight: 600; font-size: 2.3rem; letter-spacing: -.045em; line-height: 1.24; }
.case-next h2 { font-size: 2rem; letter-spacing: -.035em; }
.callout p { font-family: var(--sans); font-size: 1.35rem; font-weight: 500; line-height: 1.65; }
.case-banner { border-radius: 12px; }
.example .number { font-weight: 550; font-variant-numeric: tabular-nums; }
.case-body > div, .case-heading-grid > div, .about > div, .pitch-grid > div { min-width: 0; }
.lightbox button, .lightbox-toolbar a { min-height: 44px; }
.lightbox-toolbar a { display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) {
  .nav > a:not(.contact-link):hover { background: #f5f5f7; color: var(--accent); }
  .nav > a:not(.contact-link):hover::after { transform: scaleX(1); }
  .nav .contact-link:hover { background: var(--ink); border-color: var(--ink); color: white; }
  .nav .contact-link:hover .arrow { transform: translate(2px,-2px); }
  .button:hover { background: var(--accent); border-color: var(--accent); }
  .button:hover .arrow { transform: translateX(3px); }
  .text-link:hover, .expertise-grid a:hover, .socials a:hover, .back-top:hover { color: var(--accent); }
  .text-link:hover .arrow, .expertise-grid a:hover .arrow { transform: translateX(3px); }
  .domain-strip a:hover { color: var(--accent); text-decoration: underline; }
  .project h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .project-image-link:hover .screen-frame { transform: perspective(1500px) rotateY(0) rotateZ(0) translateY(-4px); box-shadow: 0 33px 40px -21px #173f454a; }
  .project-image-link:hover .view-circle { background: var(--ink); border-color: var(--ink); color: white; }
  .project-image-link:hover .moonsjob > img { transform: scale(1.035); }
  .project-moonsjob .text-link:hover { color: white; }
  .deck-slide:hover .deck-slide-copy strong { color: var(--accent); }
  .deck-slide:hover .deck-step { border-color: var(--ink); }
}
@media (min-width: 1600px) {
  .wrap { width: min(1340px, calc(100% - 140px)); }
  .hero { min-height: 690px; }
  .hero h1 { font-size: 5.4rem; }
  .portrait-stage { height: 480px; }
  .brand-portrait { width: 480px; height: 480px; }
  .portrait-disc { width: 350px; height: 350px; }
  .project { min-height: 490px; }
  .project-visual { min-height: 490px; }
}
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 72px); }
  .hero { gap: 24px; min-height: 550px; padding-top: 51px; grid-template-columns: 1.25fr 1fr; }
  .hero h1 { font-size: clamp(2.8rem,5.1vw,3.7rem); }
  .hero-intro { font-size: 1.0625rem; }
  .portrait-stage { height: 370px; }
  .brand-portrait { height: 370px; }
  .portrait-disc { width: 265px; height: 265px; top: 45px; }
  .project { grid-template-columns: 1fr 1.15fr; }
  .project-meta { padding: 30px 9px 32px 28px; }
  .project h3 { font-size: 1.875rem; }
  .project-visual { padding-left: 25px; }
  .visual-caption { left: 25px; }
  .visual-caption > span { display: none; }
  .expertise-grid { gap: 35px 27px; }
  .about { gap: 55px; }
  .personal-line { font-size: 2.2rem; }
  .pitch-grid { gap: 45px; }
  .pitch h2 { font-size: 2.3rem; }
  .case-body { grid-template-columns: 155px minmax(0,1fr); gap: 40px; }
  .case-banner { height: 430px; }
  .case-heading-grid { gap: 40px; }
  .case-section h2 { font-size: 2.1rem; }
  .problem-list { gap: 18px; }
  .case-toc a { font-size: .8125rem; }
  .case-facts, .contribution { gap: 25px; }
}
@media (max-width: 820px) {
  .wrap { width: calc(100% - 48px); }
  .header-inner { min-height: 88px; }
  .nav { gap: 2px; }
  .nav > a { padding-inline: 10px; }
  .nav > a:not(.contact-link)::after { left: 10px; right: 10px; }
  .nav .contact-link { margin-left: 6px; padding-inline: 12px; }
  .hero { grid-template-columns: 1.3fr 1fr; gap: 16px; padding: 45px 0 36px; min-height: 510px; }
  .hero h1 { font-size: clamp(2.5rem,5.1vw,3.2rem); }
  .hero-intro { font-size: 1rem; margin-top: 22px; }
  .hero-copy .eyebrow { letter-spacing: .055em; margin-bottom: 23px; }
  .hero-actions { margin-top: 25px; }
  .portrait-stage { height: 330px; }
  .brand-portrait { height: 330px; }
  .portrait-disc { width: 225px; height: 225px; }
  .portrait-note { flex-direction: column; gap: 1px; }
  .portrait-label { letter-spacing: .07em; }
  .domain-strip { gap: 20px; }
  .domain-strip > div { gap: 8px 17px; }
  .domain-strip > p { font-size: .8125rem; }
  .section-heading { gap: 25px; align-items: start; }
  .section-heading h2 { font-size: 2.15rem; }
  .section-heading > p { max-width: 245px; padding-top: 42px; }
  .work { padding-top: 72px; }
  .project { grid-template-columns: 1fr; margin-bottom: 25px; }
  .project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; padding: 30px 30px 0; }
  .project-topline { grid-column: 1 / -1; margin-bottom: 22px; }
  .project h3 { grid-column: 1; font-size: 2rem; }
  .project-description { grid-column: 2; grid-row: 2 / 4; }
  .tags { grid-column: 1; margin-top: 0; margin-bottom: 18px; }
  .project-meta > .text-link { grid-column: 1 / -1; justify-self: start; }
  .project-image-link { margin-top: 5px; border-radius: 0 0 16px 16px; }
  .project-visual { min-height: 0; height: 395px; padding: 35px 42px 60px; align-items: start; }
  .screen-frame, .finance .screen-frame { width: 100%; max-width: 590px; margin: 0 auto; transform: none; }
  .project-visual::before { background: radial-gradient(ellipse at 50% 70%, #c3dcdc90, transparent 75%); }
  .visual-caption { left: 30px; bottom: 22px; }
  .project-finance .project-visual { height: 410px; }
  .finance .screen-frame { max-width: 510px; }
  .project-moonsjob .project-meta { padding-right: 30px; }
  .project-visual.moonsjob { min-height: 0; height: 380px; margin-top: 15px; }
  .project-visual.moonsjob > img { height: 140%; width: 100%; right: 0; top: -15%; object-position: 50% 42%; mask-image: linear-gradient(to bottom, transparent, #000 15%, #000); }
  .expertise { padding: 55px 0 65px; }
  .expertise-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .about { gap: 35px; padding: 62px 0; }
  .personal-line { font-size: 2rem; }
  .about-copy h2 { font-size: 1.6rem; }
  .pitch { padding: 64px 0; }
  .pitch-grid { gap: 30px; }
  .pitch h2 { font-size: 2rem; }
  .deck-outline { padding: 21px; }
  .deck-slide { gap: 12px; }
  .deck-answer { padding-left: 27px; }
  .footer-main { gap: 35px; padding: 52px 0; }
  .footer-message h2 { font-size: 2.4rem; }
  .footer-brand { gap: 14px; }
  .footer-bottom { flex-wrap: wrap; }
  .back-top { margin-left: auto; }
  .case-heading-grid { grid-template-columns: 1fr; gap: 23px; }
  .case-title { font-size: 3.5rem; }
  .case-summary { max-width: 570px; font-size: 1rem; }
  .case-body { grid-template-columns: 1fr; gap: 0; padding-top: 28px; }
  .case-toc { position: relative; top: auto; display: flex; gap: 22px; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--line); padding: 0 0 13px; margin-bottom: 33px; }
  .case-toc > p { display: none; }
  .case-toc a { border: 0; padding: 10px 0; font-size: .875rem; }
  .case-section { padding-bottom: 48px; }
  .case-section + .case-section { padding-top: 34px; }
  .case-banner { height: 400px; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .case-facts > div:last-child { grid-column: 1 / -1; }
  .contribution { grid-template-columns: 1fr; gap: 8px; }
  .contribution > span { padding: 0; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 136px; }
  .wrap { width: calc(100% - 40px); }
  .header-inner { min-height: 85px; flex-wrap: wrap; justify-content: space-between; gap: 0; padding: 15px 0 9px; }
  .brand > img { width: 27px; height: 39px; }
  .brand { gap: 9px; }
  .brand-prefix { font-size: .75rem; }
  .brand-name { font-size: 1.625rem; }
  .nav { width: 100%; justify-content: space-between; gap: 6px; margin-top: 7px; font-size: .875rem; }
  .nav > a { min-height: 44px; padding: 8px 9px; }
  .nav > a:first-child { padding-left: 0; }
  .nav > a:first-child::after { left: 0; }
  .nav .contact-link { min-height: 44px; margin-left: auto; padding: 6px 10px; gap: 9px; }
  .nav .arrow { width: 14px; height: 14px; }
  .hero { grid-template-columns: 1fr; padding: 39px 0 28px; min-height: 0; gap: 18px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(2.1rem,10.6vw,3.65rem); line-height: 1.13; letter-spacing: -.055em; }
  .hero-copy .eyebrow { margin-bottom: 23px; letter-spacing: .08em; }
  .hero-intro { font-size: 1rem; max-width: 440px; margin-top: 24px; }
  .hero-actions { margin-top: 25px; gap: 12px; }
  .button { font-size: .875rem; padding: 14px 21px; gap: 24px; }
  .hero-experience { font-size: .8125rem; }
  .hero-art { width: min(360px,100%); margin: 0 auto; padding-top: 24px; }
  .portrait-stage { height: 320px; }
  .brand-portrait { height: 330px; width: 330px; }
  .portrait-disc { width: 240px; height: 240px; top: 40px; }
  .portrait-label { top: 14px; right: 0; }
  .portrait-note { flex-direction: row; gap: 12px; }
  .domain-strip { align-items: start; flex-direction: column; gap: 9px; padding: 20px 0 15px; }
  .domain-strip > p br { display: none; }
  .domain-strip strong { margin-left: 3px; }
  .domain-strip > div { gap: 0 20px; font-size: .875rem; }
  .domain-strip a { min-height: 36px; }
  .work { padding-top: 55px; }
  .section-heading { flex-direction: column; align-items: start; gap: 21px; margin-bottom: 29px; }
  .section-heading .eyebrow { margin-bottom: 17px; }
  .section-heading h2 { font-size: clamp(1.9rem,7.8vw,2.45rem); line-height: 1.2; letter-spacing: -.05em; }
  .section-heading > p { padding: 0; max-width: 410px; font-size: 1rem; }
  .project { border-radius: 12px; margin-bottom: 22px; }
  .project-meta { display: block; padding: 26px 23px 0; }
  .project-topline { margin-bottom: 22px; }
  .project h3 { font-size: 1.9rem; line-height: 1.2; margin-bottom: 17px; }
  .project-description { font-size: 1rem; max-width: 100%; }
  .tags { margin: 20px 0; gap: 7px; }
  .project-meta > .text-link { font-size: .875rem; }
  .project-image-link { border-radius: 0 0 12px 12px; }
  .project-visual { height: 290px; padding: 30px 0 60px 23px; }
  .screen-frame { width: 108%; }
  .screen-chrome { font-size: .75rem; min-height: 28px; padding: 5px 10px; }
  .visual-caption { left: 23px; bottom: 22px; }
  .view-circle { bottom: 17px; right: 18px; width: 38px; height: 38px; }
  .project-finance .project-visual { height: 305px; padding-right: 18px; }
  .finance .screen-frame { width: 100%; }
  .project-moonsjob .project-meta { padding-right: 23px; }
  .project-visual.moonsjob { height: 310px; margin-top: 10px; }
  .project-visual.moonsjob > img { height: 150%; top: -20%; object-position: 50% 42%; }
  .expertise { padding: 40px 0 55px; }
  .expertise .section-heading { margin-bottom: 31px; }
  .expertise-grid { grid-template-columns: 1fr; gap: 30px; }
  .expertise-grid article { padding-left: 17px; }
  .expertise-index { margin-bottom: 12px; }
  .expertise-grid h3 { font-size: 1.1875rem; margin-bottom: 11px; }
  .expertise-grid p { margin-bottom: 9px; }
  .about { grid-template-columns: 1fr; gap: 38px; padding: 53px 0; }
  .personal-line { font-size: clamp(2rem,8vw,2.5rem); line-height: 1.22; margin-top: 27px; }
  .about-brand { margin-top: 27px; }
  .about-brand > img { width: 33px; height: 47px; }
  .about-brand .brand-name { font-size: 1.875rem; }
  .about-copy h2 { font-size: 1.6rem; }
  .pitch { padding: 53px 0 55px; }
  .pitch-heading { align-items: start; gap: 15px; margin-bottom: 28px; flex-wrap: wrap; }
  .pitch-type { white-space: nowrap; }
  .pitch-heading .eyebrow { padding-top: 5px; }
  .pitch-grid { grid-template-columns: 1fr; gap: 32px; }
  .pitch h2 { font-size: clamp(1.9rem,7.8vw,2.4rem); margin-bottom: 23px; }
  .deck-outline { padding: 23px; }
  .deck-slide { gap: 17px; }
  .deck-answer { padding-left: 30px; }
  .footer-main { flex-direction: column; align-items: start; gap: 39px; padding: 46px 0 32px; }
  .footer-message h2 { font-size: clamp(1.9rem,7.7vw,2.5rem); margin-bottom: 24px; }
  .footer-brand { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; align-items: center; }
  .footer-brand .brand { grid-column: 1; }
  .footer-brand > p { grid-column: 2; font-size: .8125rem; }
  .footer-brand > p span { font-size: .75rem; }
  .footer-brand .domain-link { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: start; gap: 7px; padding: 19px 0 22px; }
  .socials { gap: 8px 20px; font-size: .875rem; }
  .back-top { margin: 0; }
  .case-top { padding-top: 24px; padding-bottom: 29px; }
  .back-link { margin-bottom: 30px; min-height: 40px; font-size: .875rem; }
  .case-title { font-size: 2.65rem; line-height: 1.16; letter-spacing: -.045em; margin-top: 18px; }
  .case-summary { font-size: 1rem; }
  .case-facts { margin-top: 26px; padding-top: 21px; gap: 21px; }
  .case-facts dd { font-size: .875rem; }
  .contribution { margin-top: 23px; padding-top: 19px; }
  .contribution p { font-size: 1rem; }
  .case-banner { height: 280px; padding: 25px 5%; }
  .case-banner.finance { padding: 26px 8%; }
  .case-banner.moonsjob { padding: 0; }
  .case-section { padding-bottom: 41px; }
  .case-section + .case-section { padding-top: 31px; }
  .case-section .eyebrow { margin-bottom: 16px; }
  .case-section h2 { font-size: 1.8rem; letter-spacing: -.035em; margin-bottom: 21px; line-height: 1.3; }
  .case-section h3 { font-size: 1.1875rem; }
  .case-section p { font-size: 1rem; line-height: 1.85; }
  .callout { padding: 18px 21px; margin-top: 24px; }
  .callout p { font-size: 1.1875rem; line-height: 1.6; }
  .problem-list { grid-template-columns: 1fr; gap: 23px; margin-top: 27px; }
  .problem-list article { padding-top: 16px; }
  .problem-list h3 { font-size: 1.125rem; }
  .decision { grid-template-columns: 23px 1fr; gap: 11px; margin-top: 26px; }
  .decision .tradeoff { font-size: .875rem; }
  .flow { gap: 12px; margin: 24px 0; }
  .flow-step { padding: 20px 16px; }
  .flow-step h3 { font-size: 1.0625rem; }
  .flow-step p { font-size: .875rem; line-height: 1.8; }
  .example { padding: 23px; gap: 19px; }
  .example > div + div { padding-left: 22px; }
  .example .number { font-size: 3.5rem; }
  .example .caption { font-size: .75rem; }
  .image-panel { padding: 12px; margin-top: 23px; }
  .image-expand { padding: 6px 10px; bottom: 8px; right: 8px; }
  .screen-grid { grid-template-columns: 1fr; gap: 0; }
  .screen-grid .image-expand { display: block; }
  .table-scroll { margin-top: 25px; }
  .case-next { padding: 28px 0 37px; gap: 20px; }
  .case-next h2 { font-size: 1.55rem; margin-top: 12px; }
  .case-next .round { width: 42px; height: 42px; }
  .lightbox { width: calc(100% - 16px); max-height: 95dvh; border-radius: 5px; }
  .lightbox-toolbar { padding: 12px; gap: 10px; }
  .lightbox-toolbar > div { gap: 7px; }
  .lightbox-toolbar a { display: none; }
  .lightbox button { font-size: .75rem; padding: 8px 11px; }
  .lightbox-scroll { padding: 12px; max-height: calc(95dvh - 145px); }
  .lightbox-image { max-height: calc(95dvh - 180px); }
  .lightbox-bottom { gap: 12px; padding: 12px; }
  .lightbox-caption { font-size: .75rem; line-height: 1.5; }
  .error-page h1 { font-size: 2.8rem; }
}
@media (max-width: 370px) {
  .wrap { width: calc(100% - 32px); }
  .nav { gap: 1px; font-size: .8125rem; }
  .nav > a { padding-inline: 8px; }
  .hero-art { width: 100%; }
  .portrait-stage { height: 295px; }
  .brand-portrait { height: 305px; }
  .portrait-disc { width: 218px; height: 218px; }
  .portrait-note { flex-direction: column; gap: 0; }
  .project-meta, .project-moonsjob .project-meta { padding-inline: 20px; }
  .project h3 { font-size: 1.7rem; }
  .project-visual { height: 255px; padding-left: 20px; }
  .project-finance .project-visual { height: 265px; }
  .project-visual.moonsjob { height: 275px; }
  .project-number { padding-top: 1px; }
  .tags { gap: 6px; }
  .tag { font-size: .75rem; padding: 4px 7px; }
  .flow { grid-template-columns: 1fr; }
  .deck-outline { padding: 19px; }
  .deck-slide { gap: 12px; }
  .deck-slide-copy strong { font-size: 1.1875rem; }
  .footer-brand { gap: 14px; }
  .socials { gap: 8px 15px; }
  .case-title { font-size: 2.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Refinement: expressive hierarchy, a shared neutral project surface, and real destinations. */
.brand > img:first-child { width: 32px; height: 46px; }
.brand > img.brand-wordmark { width: 190px; height: 40px; object-fit: contain; }
.brand { gap: 10px; }
.hero h1 > span { display: block; font-weight: 500; }
.hero h1 em { display: block; margin-top: .18em; font-weight: 700; }
.personal-line > span { display: block; font-weight: 400; }
.personal-line em { display: block; margin-top: .3em; font-weight: 700; }
.project, .project-finance, .project-moonsjob { --project-tone: #62666e; background: #f3f4f5; border-color: #e1e4e7; color: var(--ink); }
.project .project-topline p span, .project .project-description { color: var(--muted); }
.project .tag { border-color: #d9dde1; color: #555e68; }
.project .project-visual::before, .project-visual.finance::before { background: radial-gradient(ellipse at 90% 40%, #dce0e680, transparent 70%); }
.project-visual.moonsjob > img { filter: grayscale(1); }
.project .visual-caption { color: #555e68; background: #f3f4f5ed; border: 1px solid #d9dde1; border-radius: 5px; padding: 6px 10px; }
.project .view-circle { border-color: #d9dde1; }
.tool-list, .skill-list { padding: 0; margin: 0; list-style: none; }
.tool-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-list li { font-size: .875rem; padding: 6px 11px; border: 1px solid var(--line); border-radius: 5px; background: #fafafb; }
.skill-list { display: grid; gap: 9px; }
.skill-list li { font-size: .9375rem; color: var(--muted); padding-left: 18px; position: relative; }
.skill-list li::before { content: ''; position: absolute; left: 0; top: .75em; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.toolkit > span { margin-bottom: 13px; }
.approach-page { padding-top: 30px; }
.approach-hero { max-width: 920px; padding: 10px 0 54px; }
.approach-hero h1 { font-size: clamp(2.3rem,4.8vw,4.5rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.16; margin: 22px 0 27px; }
.approach-intro { max-width: 740px; font-size: 1.125rem; color: var(--muted); line-height: 1.85; }
.approach-question { margin-top: 34px; padding-left: 22px; border-left: 3px solid var(--accent); }
.approach-question > span { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.approach-question > p { font-family: var(--display); font-size: 1.4rem; font-weight: 600; line-height: 1.6; letter-spacing: -.025em; }
.approach-method { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; padding: 42px 0 52px; border-top: 1px solid var(--line); }
.approach-method h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.4; margin: 17px 0 15px; }
.approach-method p, .approach-example-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.85; color: var(--muted); }
.approach-example { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: center; padding: 48px 0; border-top: 1px solid var(--line); }
.approach-example h2 { font-size: 2rem; letter-spacing: -.04em; margin: 20px 0; }
.approach-example .text-link { margin-top: 20px; }
.approach-example .image-panel { margin: 0; }
.approach-example .image-panel img { max-height: 430px; object-fit: contain; }
.approach-review { padding-top: 42px; border-top: 1px solid var(--line); }
.approach-takeaway { padding: 32px; background: #f3f4f5; border-radius: 8px; margin-bottom: 55px; }
.approach-takeaway > p:last-child { font-family: var(--display); font-size: clamp(1.25rem,2.4vw,1.9rem); letter-spacing: -.035em; font-weight: 600; line-height: 1.5; max-width: 950px; margin-top: 15px; }
@media (min-width: 821px) and (min-height: 560px) {
 .about { align-items: start; }
 .about-note, .footer-brand { position: sticky; top: 126px; align-self: start; }
}
@media (hover: hover) and (pointer: fine) {
 .project-moonsjob .text-link:hover { color: var(--accent); }
}
@media (max-width: 820px) {
 .about-note { position: static; }
 .brand > img.brand-wordmark { width: 165px; height: 35px; }
 .approach-method { gap: 24px; }
 .approach-example { gap: 30px; }
}
@media (max-width: 600px) {
 .brand > img:first-child { width: 28px; height: 40px; }
 .brand > img.brand-wordmark { width: 165px; height: 35px; }
 .footer-brand { grid-template-columns: 1fr; }
 .footer-brand > p, .footer-brand .domain-link { grid-column: 1; }
 .hero h1 em { margin-top: .2em; }
 .personal-line em { margin-top: .28em; }
 .approach-page { padding-top: 20px; }
 .approach-hero { padding-bottom: 35px; }
 .approach-hero h1 { font-size: 2.25rem; margin-top: 18px; }
 .approach-intro { font-size: 1rem; }
 .approach-question > p { font-size: 1.2rem; }
 .approach-method, .approach-example { grid-template-columns: 1fr; gap: 30px; padding: 32px 0; }
 .approach-method h2 { margin-top: 12px; }
 .approach-example h2 { font-size: 1.75rem; }
 .approach-takeaway { padding: 24px; margin-bottom: 35px; }
}