/* Layout breakpoints: desktop is the default; 1100px and below is a narrow
   desktop/tablet; 800px and below is the single-column phone layout. */

@font-face{font-family:Oswald;src:url('fonts/oswald.ttf') format('truetype');font-style:normal;font-weight:200 700;font-display:swap}
@font-face{font-family:'Source Serif Pro';src:url('fonts/source-serif-pro.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Source Serif Pro';src:url('fonts/source-serif-pro-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('fonts/courier-prime.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#ddc3bb;--tape:#f7eae1;--ink:#561a1e;--red:#cb2a22;--rule:1px solid var(--ink);--serif:'Source Serif Pro',Georgia,serif;--display:Oswald,'Arial Narrow',sans-serif;--mono:'Courier Prime','Courier New',monospace}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:2rem}
/* overflow-wrap lets long words and enlarged text wrap instead of scrolling sideways. */
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--serif);font-size:1.25rem;line-height:1.4;-webkit-text-size-adjust:100%;overflow-wrap:anywhere}
.page{width:min(100% - 9rem,1260px);margin-inline:auto}
p,h1,h2,h3,ul{margin:0}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
main:focus{outline:none}
.skip-link{position:absolute;left:1rem;top:.5rem;z-index:10;padding:.5rem 1rem;background:var(--tape);transform:translateY(-200%)}
.skip-link:focus{transform:none}
h1{font-family:var(--display);font-weight:700;line-height:.99;letter-spacing:-.035em}
h2,h3{font-family:var(--display);font-weight:700;line-height:1.15}
h2{font-size:clamp(2.75rem,4.6vw,4rem);letter-spacing:-.02em}
h3{font-size:1.65rem}
.text-link{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--mono);font-size:1rem;line-height:1.6;min-height:44px}
.accent{color:var(--red)}
@media(max-width:1100px){.page{width:calc(100% - 5rem)}}
@media(max-width:800px){
 .page{width:calc(100% - 3rem)}
 h1{line-height:1.04}
 h3{font-size:1.55rem}
}
@media(max-width:380px){.page{width:calc(100% - 2.25rem)}}

/* ---------- Header ---------- */
.masthead{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.25rem 0 1rem;border-bottom:var(--rule)}
.identity{text-decoration:none;display:grid;flex-shrink:0;line-height:1.2;max-width:100%;min-width:0}
.identity-name{font-family:var(--display);font-weight:700;font-size:1.5rem;text-transform:uppercase}
.identity-description{font-style:italic;font-size:1.0625rem;margin-top:.25rem}
nav{display:flex;gap:clamp(1rem,2.5vw,2.5rem);flex-wrap:wrap;font-family:var(--mono);font-size:1rem;line-height:1.5}
nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
nav a:hover{text-decoration:underline}
@media(min-width:801px) and (max-height:760px){.masthead{padding-top:1rem;padding-bottom:.75rem}}
@media(max-width:800px){
 .masthead{align-items:flex-start;gap:1rem;flex-direction:column}
 nav{gap:1.5rem;font-size:.9375rem}
 .identity-name{font-size:1.35rem}
 .identity-description{font-size:1rem}
}
@media(max-width:380px){nav{gap:1rem;font-size:.875rem}}

/* ---------- Hero ---------- */
.hero{padding:1.25rem 0 4rem}
.hero-art{position:relative;isolation:isolate}
.headline-line{display:block;width:max-content;max-width:100%}
.line-3{color:var(--red);font-size:1.82em;line-height:.98;margin-top:.02em;letter-spacing:-.045em}
.annotations{list-style:none;padding:0;margin:0;font-family:var(--mono);line-height:1.25}
.scrap{z-index:1;width:max-content;box-shadow:0 1px 0 #561a1e0d;background:var(--tape)}
.scrap-1{transform:rotate(-3deg)}
.scrap-2{transform:rotate(4deg)}
.scrap-3{transform:rotate(-4deg)}
.scrap-4{transform:rotate(3deg)}
.scrap-5{transform:rotate(-2deg)}
.hero-intro{max-width:65rem;margin-top:.875rem;font-size:clamp(1.125rem,1.65vw,1.5rem);line-height:1.4}
.hero-statement{font-style:italic;margin-top:.35rem}
.hero-intro .text-link{margin-top:.65rem;max-width:100%}
/* Desktop collage: the headline size drives the collage width and every note's
   position, so the composition scales as one piece with the screen. */
@media(min-width:801px){
 .hero-art{--desktop-headline:min(8.42vw,7.59rem,15.3vh);padding-bottom:1rem;width:min(100%,calc(var(--desktop-headline)*9.5));font-size:var(--desktop-headline)}
 h1{font-size:var(--desktop-headline)}
 .annotations{font-size:clamp(.8125rem,.13em,1.125rem)}
 .scrap{position:absolute;padding:.3em .65em}
 .scrap-1{left:calc(var(--desktop-headline)*5.35);top:calc(var(--desktop-headline)*1.1)}
 .scrap-2{left:calc(var(--desktop-headline)*5.45);top:calc(var(--desktop-headline)*2.05)}
 .scrap-3{left:calc(var(--desktop-headline)*3.85);top:calc(var(--desktop-headline)*3.05)}
 .scrap-4{left:calc(var(--desktop-headline)*1.15);bottom:0}
 .scrap-5{left:calc(var(--desktop-headline)*4.75);top:calc(var(--desktop-headline)*3.7)}
}
@media(min-width:801px) and (max-width:1100px){
 .hero-art{width:min(100%,calc(var(--desktop-headline)*9))}
 .annotations{font-size:clamp(.8125rem,.12em,1rem)}
 .scrap-1{left:calc(var(--desktop-headline)*5.25);top:calc(var(--desktop-headline)*.85)}
 .scrap-2{left:calc(var(--desktop-headline)*5.3);top:calc(var(--desktop-headline)*1.85)}
 .scrap-5{left:calc(var(--desktop-headline)*4.5);top:calc(var(--desktop-headline)*3.55)}
}
/* Phone: the notes become a wrapped row of scraps under the headline. */
@media(max-width:800px){
 .hero{padding:2rem 0 3rem}
 .hero-art{--hero-size:min(clamp(3.75rem,12.7vw,7rem),17vw)}
 h1{font-size:var(--hero-size)}
 .line-3{line-height:1.03;margin-top:.035em}
 .annotations{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem .5rem;margin-top:1.25rem;font-size:.875rem;max-width:36rem}
 .scrap{max-width:100%;padding:.3em .55em}
 .scrap:nth-child(even){margin-left:.5rem}
 .hero-intro{margin-top:1.5rem;font-size:1.25rem}
 .hero-statement{font-size:1.375rem;margin-top:.6rem}
 .hero-intro .text-link{margin-top:1.3rem}
}
@media(max-width:360px){.hero-art{--hero-size:min(clamp(3.125rem,15.8vw,3.5rem),17vw)}}

/* ---------- What I fix + Working together ---------- */
.offerings{padding:2.75rem 0 0;border-top:var(--rule)}
#what-i-fix{padding-bottom:3rem}
.fix-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem clamp(2rem,7vw,6rem);margin-top:1.75rem;max-width:72rem}
.fix p{margin-top:.35rem}
#working-together{border-top:var(--rule);padding:3rem 0 3.5rem}
.services-intro{font-style:italic;font-size:1.375rem;line-height:1.45;max-width:53ch;margin-top:1.25rem}
.service-groups{margin-top:2.5rem}
.service-group+.service-group{margin-top:2.5rem}
.service-group-title{font-family:var(--mono);font-size:1.0625rem;font-weight:400;letter-spacing:.06em;padding-bottom:.75rem;border-bottom:var(--rule)}
.service-offering{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2rem,5vw,5rem);padding:2rem 0}
.service-offering>*{min-width:0}
.service-offering+.service-offering{border-top:1px solid #561a1e40}
.offering-heading h4{font-family:var(--display);font-size:clamp(2rem,3vw,2.75rem);font-weight:700;line-height:1.15;margin:0}
.offering-price{font-family:var(--display);font-size:1.375rem;font-weight:700;line-height:1.4;margin-top:.7rem}
.offering-copy{font-size:1.1875rem;line-height:1.5;max-width:60ch}
.offering-copy>p+p{margin-top:.8rem}
.deliverables strong{font-weight:400;font-style:italic}
.service-qualifier{font-size:1.0625rem;line-height:1.45}
.offering-cta{margin-top:1rem}
.booking-links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.services-closing{font-style:italic;font-size:1.375rem;max-width:55ch;margin-top:1rem;line-height:1.45}
@media(max-width:800px){
 .offerings{padding-top:2.25rem}
 #what-i-fix{padding-bottom:2.5rem}
 .fix-list{gap:1.4rem 2rem}
 .fix h3{font-size:1.4rem}
 .fix p{font-size:1.125rem;line-height:1.4}
 #working-together{padding:2.5rem 0 3rem}
 .services-intro,.services-closing{font-size:1.25rem}
 .service-groups{margin-top:2rem}
 .service-group+.service-group{margin-top:1.75rem}
 .service-offering{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.5rem 0}
 .offering-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;justify-content:space-between}
 .offering-heading h4{font-size:2rem}
 .offering-price{margin-top:0;font-size:1.25rem}
 .offering-copy{font-size:1.125rem;line-height:1.45}
 .service-qualifier{font-size:1rem}
}
@media(max-width:540px){
 .fix-list{grid-template-columns:1fr;gap:1rem}
 .fix h3{font-size:1.5rem}
 .offering-heading{display:block}
 .offering-price{margin-top:.35rem}
}

/* ---------- Work examples ---------- */
.work-header{padding:3rem 0 3.5rem}
.work-header h2{font-size:clamp(3rem,5.5vw,5rem)}
.work-header p{font-size:1.5rem;margin-top:1rem}
.case-label{font-family:var(--mono);font-size:1rem;font-weight:400;line-height:1.3;display:table;background:var(--tape);padding:.35rem .7rem;max-width:100%;transform:rotate(-1deg);margin-bottom:1.75rem}
.case-copy{font-size:1.3125rem;line-height:1.5}
.case-copy p+p{margin-top:1.1rem}
.result{font-style:italic;font-size:1.375rem;line-height:1.4;margin-top:1.5rem;max-width:65ch}
.metric{font-family:var(--display);font-weight:700;line-height:1.1;display:flex;align-items:baseline;gap:.1em;flex-wrap:wrap;letter-spacing:-.04em}
.metric-value{font-size:clamp(5rem,10.3vw,9.4rem);white-space:nowrap}
.metric-unit{font-size:clamp(2rem,3.5vw,3.25rem);letter-spacing:-.025em}
.metric-caption{font-family:var(--mono);font-size:1rem;line-height:1.4;margin-top:.7rem;min-height:2.8em}
.footnote{font-family:var(--mono);font-size:.9375rem;line-height:1.45;margin-top:1.5rem}
@media(max-width:1100px){
 .metric-value{font-size:10vw}
 .metric-unit{font-size:3.3vw}
}
@media(max-width:800px){
 .work-header{padding:2.5rem 0 2rem}
 .work-header h2{font-size:clamp(2.5rem,7.8vw,4rem)}
 .work-header p{font-size:1.25rem}
 .case-label{font-size:.9375rem;margin-bottom:1.5rem}
 .case-copy{font-size:1.1875rem}
 .result{font-size:1.25rem}
 .metric-value{font-size:min(clamp(5.75rem,22vw,9.5rem),23vw)}
 .metric-unit{font-size:clamp(2rem,7vw,3.5rem)}
 .metric-caption{min-height:0;margin-top:.5rem}
}
@media(max-width:380px){
 .case-label{font-size:.85rem}
 .metric-value{font-size:min(21vw,9.5rem)}
}

/* Matching: struck-through "before" over the red "after". */
.matching{padding-bottom:4rem}
.matching-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.matching-layout>*{min-width:0}
.turnaround{font-family:var(--display);font-weight:700;font-size:clamp(4rem,8.5vw,8.25rem);line-height:1.1;letter-spacing:-.035em;padding-top:.1em}
.before{position:relative;display:table;white-space:nowrap}
.before::after{content:'';position:absolute;left:0;right:0;top:53%;height:.055em;background:var(--red)}
.after{display:block;color:var(--red);white-space:nowrap;margin-top:.2em;font-size:1.06em}
@media(max-width:1100px){
 .matching-layout{grid-template-columns:.9fr 1.1fr;gap:2rem}
 .turnaround{font-size:8.6vw}
}
@media(max-width:800px){
 .matching{padding-bottom:3rem}
 .matching-layout{grid-template-columns:minmax(0,1fr)}
 .turnaround{font-size:min(clamp(3.8rem,15vw,7rem),18vw);max-width:100%;padding:0}
 .after{margin-left:auto;width:max-content;margin-top:.25em;max-width:100%}
}

/* Meetings + reporting: side-by-side pair split by a rule. */
.paired-cases{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule)}
.paired-cases article{padding:2.5rem 0 3rem;min-width:0}
.paired-cases article:first-child{padding-right:clamp(2rem,4.5vw,4rem)}
.paired-cases article:last-child{padding-left:clamp(2rem,4.5vw,4rem);border-left:var(--rule)}
.paired-cases .metric{min-height:clamp(5.5rem,11.33vw,10.34rem)}
.case-stat{margin-bottom:1.7rem}
/* The longer money figure is set smaller so both numbers carry equal weight. */
.reporting-case .metric-value{font-size:clamp(4.25rem,8.65vw,7.85rem)}
.reporting-case .metric-unit{font-size:clamp(1.75rem,2.8vw,2.65rem)}
@media(max-width:800px){
 .paired-cases{grid-template-columns:1fr}
 .paired-cases article:first-child{padding:2.5rem 0}
 .paired-cases article:last-child{border-left:0;border-top:var(--rule);padding:2.5rem 0}
 .paired-cases .metric{min-height:0}
 .reporting-case .metric-value{font-size:min(clamp(4rem,18vw,8rem),22vw)}
 .reporting-case .metric-unit{font-size:clamp(1.75rem,6vw,3rem)}
}

/* Production: two copy + figure rows. */
.production{padding:4rem 0 4.5rem}
.production-layout{display:grid;gap:.75rem}
.production-example{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:clamp(2rem,5vw,4rem);align-items:start}
.production-example>*{min-width:0}
.production-copy{font-size:1.3125rem;line-height:1.5}
.production-stat .metric{display:block;line-height:1}
.production-stat .metric-value{font-size:clamp(5rem,9.6vw,8.75rem);display:block}
.production-stat .metric-unit{font-family:var(--mono);font-size:1rem;display:block;text-align:right;letter-spacing:0;margin-top:0;color:var(--ink)}
.production .result{margin-top:.75rem}
@media(max-width:1100px){
 .production-example{column-gap:2rem}
 .production-stat .metric-value{font-size:9.5vw}
}
@media(max-width:800px){
 .production{padding:3rem 0 3.5rem}
 .production-layout{gap:1.75rem}
 .production-example{grid-template-columns:minmax(0,1fr);gap:.75rem}
 .production-copy{font-size:1.1875rem}
 .production-stat{grid-row:1;justify-self:start;max-width:100%}
 .production-stat .metric-value{font-size:min(clamp(5.75rem,23vw,9rem),25vw)}
 .production-stat .metric-unit{padding-right:1rem}
}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:1.5rem clamp(2rem,5vw,5rem);padding:2.75rem 0 3rem;border-top:var(--rule)}
.contact>*{min-width:0}
.contact h2{grid-column:1;grid-row:1;align-self:start;font-size:clamp(2.75rem,4.4vw,4rem);max-width:13ch}
.contact-invitation{grid-column:2;grid-row:1 / 3;max-width:38rem;align-self:start;font-size:1.3125rem;line-height:1.45;padding-top:.25rem}
.inquiry-link{display:inline-block;font-family:var(--mono);font-size:1.125rem;line-height:1.5;margin-top:1.25rem;padding:.5rem 0;min-height:44px;text-decoration-thickness:2px}
.contact-details{grid-column:1;grid-row:2;align-self:start;display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem 1.5rem;font-size:1.125rem}
.contact-details>a{min-height:44px}
@media(max-width:800px){
 .contact{display:block;padding:2.5rem 0}
 .contact h2{font-size:clamp(2.75rem,8vw,4rem);max-width:20ch}
 .contact-invitation{margin-top:1.25rem;font-size:1.1875rem}
 .inquiry-link{font-size:1rem}
 .contact-details{margin-top:1.5rem}
}

/* ---------- Footer ---------- */
.site-footer{padding:1.25rem 0 2rem;border-top:var(--rule);font-family:var(--mono);font-size:.875rem;line-height:1.5}
.legal-links{margin-top:.75rem;gap:1.5rem;font-size:1rem}
.legal-links a{min-height:44px;text-decoration:underline}

/* ---------- Privacy and Terms pages ---------- */
.legal-page{max-width:48rem;padding:2.5rem 0 3rem;font-size:1.1875rem;line-height:1.55}
.legal-page h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.15;letter-spacing:-.02em}
.legal-updated{font-family:var(--mono);font-size:1rem;line-height:1.5;margin-top:1.25rem}
.legal-page section{margin-top:2rem}
.legal-page h2{font-size:1.875rem;line-height:1.2;margin-bottom:.75rem}
.legal-page p+p{margin-top:.75rem}
.legal-page ul{margin-top:.75rem;padding-left:1.5rem}
.legal-page li+li{margin-top:.5rem}