:root { --ink:#1a1a1a; --muted:#6e6e6a; --paper:#f4f3ef; --soft:#e8e7e2; --line:#c8c7c1; --red:#e3123f; --dark:#242421; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:16px; top:-60px; z-index:10; padding:10px 14px; background:var(--dark); color:#fff; font-size:13px; font-weight:700; transition:top .2s; }
.skip-link:focus { top:16px; }
.section-shell { width:min(1180px, calc(100% - 64px)); margin:0 auto; }
.site-header { width:min(1280px, calc(100% - 64px)); margin:0 auto; min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); }
.brand { font-size:15px; font-weight:700; letter-spacing:-.04em; }
.brand-mark { color:var(--red); margin-left:6px; font-size:19px; }
.nav-links { display:flex; gap:30px; margin-left:auto; color:#50504c; font-size:13px; }
.nav-links a:hover,.text-link:hover { color:var(--red); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:49px; padding:0 20px; font-size:13px; font-weight:700; letter-spacing:-.01em; border:1px solid var(--ink); transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-2px); }.button-red { background:var(--red); color:#fff; border-color:var(--red); }.button-small { min-height:38px; padding:0 14px; font-size:12px; }
.button:focus-visible,.text-link:focus-visible,.nav-links a:focus-visible,.brand:focus-visible,.site-footer a:focus-visible,.form-privacy a:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.hero { min-height:610px; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(240px,.75fr); align-items:center; padding:84px 0 108px; }
.eyebrow { margin:0 0 21px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1,h2 { margin-bottom:24px; font-weight:700; letter-spacing:-.075em; line-height:.98; } h1 { font-size:clamp(62px, 9vw, 124px); max-width:800px; } h2 { font-size:clamp(44px, 6vw, 76px); } em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.08em; }
.hero-lede { max-width:420px; color:#4e4e4a; font-size:18px; line-height:1.45; }.hero-actions { display:flex; align-items:center; gap:28px; margin-top:36px; }.text-link { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:5px; }.hero-note { align-self:end; justify-self:end; max-width:245px; color:var(--muted); font-family:Georgia,serif; font-size:20px; line-height:1.2; }.hero-note strong { color:var(--ink); font-weight:400; }.scribble-arrow { color:var(--red); display:block; font-family:Arial,sans-serif; font-size:54px; transform:rotate(15deg); margin-bottom:12px; }
.comparison-section { display:grid; grid-template-columns: .74fr 1.26fr; gap:90px; padding:96px 0 120px; border-top:1px solid var(--line); }.section-intro h2 { font-size:clamp(42px, 5vw, 66px); }.section-intro > p:last-child { max-width:350px; color:var(--muted); }.comparison-card { background:var(--dark); color:#fff; padding:34px 36px 18px; }.comparison-heading { display:flex; justify-content:space-between; align-items:start; gap:24px; border-bottom:1px solid #575753; padding-bottom:26px; }.comparison-heading p { margin:0; max-width:255px; font-size:13px; color:#d9d9d3; }.pill { color:#fff; border:1px solid #777; padding:6px 9px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }.table-row { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:18px 0; border-bottom:1px solid #464642; font-size:13px; color:#d1d1cb; }.table-head { color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }.table-row span:last-child { color:#fff; }
.proof-band { padding:0 0 116px; }.big-statement { max-width:850px; font-size:clamp(32px, 5vw, 64px); line-height:1.03; letter-spacing:-.065em; }.red-dot { color:var(--red); }.proof-grid { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }.proof-grid > div { min-height:150px; padding:24px 20px 0 0; border-right:1px solid var(--line); }.proof-grid > div:not(:first-child) { padding-left:24px; }.proof-grid > div:last-child { border-right:0; }.number { color:var(--red); font-size:11px; font-weight:700; }.proof-grid p { margin:25px 0 1px; font-weight:700; }.proof-grid small { color:var(--muted); font-size:12px; }
.case-study { display:grid; grid-template-columns:1fr 1fr; gap:90px; padding:90px 0 120px; border-top:1px solid var(--line); }.case-visual { min-height:530px; position:relative; overflow:hidden; background:#dddcd5; }.case-visual:before { content:''; position:absolute; width:150%; height:130px; left:-25%; bottom:75px; background:#b4b2a9; transform:rotate(-11deg); }.ceramic-plate,.ceramic-vase,.ceramic-cup { position:absolute; z-index:1; background:#f0eee7; border:2px solid #9b9990; }.ceramic-plate { width:310px; height:90px; border-radius:50%; bottom:96px; left:44px; transform:rotate(-11deg); }.ceramic-vase { width:120px; height:235px; border-radius:48% 48% 30% 30%; bottom:128px; left:210px; transform:rotate(8deg); }.ceramic-vase:before { content:''; position:absolute; width:55px; height:40px; left:30px; top:-22px; border-radius:50%; border:2px solid #9b9990; background:#e1dfd7; }.ceramic-cup { width:135px; height:105px; border-radius:10px 10px 45% 45%; bottom:111px; right:72px; transform:rotate(7deg); }.ceramic-cup:after { content:''; position:absolute; width:44px; height:48px; right:-36px; top:17px; border:2px solid #9b9990; border-left:0; border-radius:0 50% 50% 0; }.visual-label { position:absolute; z-index:2; top:24px; left:26px; font-family:Georgia,serif; font-size:21px; line-height:1.1; }.case-copy { align-self:center; }.case-copy > p:not(.eyebrow) { color:var(--muted); max-width:420px; }.case-detail { display:flex; gap:18px; border-top:1px solid var(--line); padding:17px 0; max-width:470px; }.case-detail span { color:var(--red); font-size:11px; font-weight:700; }.case-detail p { margin:0; color:#50504c; font-size:13px; }.case-detail strong { color:var(--ink); }
.reviews-section { padding:90px 0 120px; border-top:1px solid var(--line); }.reviews-heading { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:46px; }.reviews-heading h2 { margin-bottom:0; }.reviews-intro { max-width:310px; margin:0 0 6px; color:var(--muted); font-family:Georgia,serif; font-size:18px; line-height:1.3; }.review-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }.review-card { background:var(--dark); color:#fff; min-width:0; }.review-video { aspect-ratio:16 / 10; background:#111; overflow:hidden; }.review-video video { display:block; width:100%; height:100%; object-fit:cover; }
.review-video-derek video { object-position:center top; }.review-card-body { padding:24px 26px 27px; }.review-client { display:flex; align-items:center; gap:12px; min-height:34px; color:#f7f7f2; font-size:12px; font-weight:700; }.review-client img { width:34px; height:34px; object-fit:contain; background:#fff; padding:4px; }.review-card blockquote { margin:25px 0 24px; color:#fff; font-family:Georgia,serif; font-size:22px; line-height:1.17; letter-spacing:-.025em; }.review-context { margin:0 0 9px; color:#d1d1cb; font-size:11px; }.review-byline { margin:0; color:#a9aaa3; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.calculator-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; padding:90px 0 120px; border-top:1px solid var(--line); }.calculator-card { background:var(--soft); padding:36px; align-self:start; }.form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.form-grid label { position:relative; display:block; color:var(--muted); font-size:11px; font-weight:700; }.form-grid input { display:block; width:100%; margin-top:8px; border:0; border-bottom:1px solid var(--ink); background:transparent; padding:10px 0; color:var(--ink); font:500 22px Georgia,serif; outline:none; }.form-grid input:focus { border-bottom:2px solid var(--red); }.unit { position:absolute; right:0; top:1px; color:var(--ink); font:14px Georgia,serif; }.calculator-result { margin-top:46px; border-top:1px solid var(--ink); padding-top:22px; display:flex; flex-direction:column; }.calculator-result span { font-size:12px; font-weight:700; }.calculator-result strong { margin:7px 0; font-size:clamp(42px, 6vw, 70px); letter-spacing:-.07em; line-height:1; }.calculator-result small { color:var(--muted); font-size:11px; }.calculator-footnote { max-width:370px; margin:38px 0 0; color:#555550; font-family:Georgia,serif; font-size:17px; line-height:1.25; }
.closing-cta { padding:106px 0 120px; text-align:center; border-top:1px solid var(--line); }.closing-cta h2 { margin-left:auto; margin-right:auto; }.closing-lede { color:var(--muted); }.next-steps { max-width:430px; margin:28px auto 0; padding:18px 22px; background:var(--soft); text-align:left; font-size:12px; }.next-steps strong { font-size:11px; text-transform:uppercase; letter-spacing:.1em; }.next-steps ol { margin:10px 0 0; padding-left:20px; }.next-steps li + li { margin-top:4px; }.lead-form { display:grid; gap:8px; max-width:430px; margin:28px auto 0; text-align:left; }.lead-form label { color:var(--muted); font-size:11px; font-weight:700; margin-top:8px; }.lead-form input,.lead-form textarea { width:100%; border:0; border-bottom:1px solid var(--ink); background:transparent; padding:9px 0; color:var(--ink); font:inherit; outline:none; resize:vertical; }.lead-form input:focus,.lead-form textarea:focus { border-bottom:2px solid var(--red); }.lead-form .button { justify-self:center; margin-top:12px; }.form-status { min-height:20px; margin:8px 0 0; font-size:12px; text-align:center; }.form-status a,.form-privacy a,.noscript-note a { text-decoration:underline; }.form-status.error { color:var(--red); }.form-status.success { max-width:430px; margin:28px auto 0; font-size:18px; font-family:Georgia,serif; }.form-privacy,.noscript-note { color:var(--muted); font-size:11px; text-align:center; }.site-footer { border-top:1px solid var(--line); padding:24px 0 34px; display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }.site-footer a { color:var(--ink); }
@media (max-width:760px) { .section-shell,.site-header { width:min(100% - 36px, 1180px); }.site-header { min-height:72px; }.nav-links { display:none; }.site-header .button { display:inline-flex; min-height:34px; padding:0 10px; gap:8px; }.hero { display:block; padding:75px 0 100px; min-height:auto; }.hero-note { margin-top:70px; margin-left:35%; }.hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }.comparison-section,.case-study,.calculator-section { grid-template-columns:1fr; gap:45px; padding:72px 0 85px; }.comparison-card { padding:24px 18px 8px; }.comparison-heading { flex-direction:column; gap:17px; }.table-row { gap:14px; font-size:12px; }.proof-band { padding-bottom:80px; }.proof-grid { grid-template-columns:1fr; }.proof-grid > div,.proof-grid > div:not(:first-child) { padding:19px 0; min-height:0; border-right:0; border-bottom:1px solid var(--line); }.proof-grid > div:last-child { border-bottom:0; }.case-visual { min-height:390px; }.ceramic-vase { left:38%; }.ceramic-plate { left:5%; }.reviews-section { padding:72px 0 85px; }.reviews-heading { display:block; margin-bottom:34px; }.reviews-intro { margin-top:27px; }.review-grid { grid-template-columns:1fr; gap:16px; }.review-card blockquote { font-size:20px; }.calculator-card { padding:24px 18px; }.form-grid { grid-template-columns:1fr; gap:20px; }.site-footer { gap:12px; flex-wrap:wrap; }.site-footer span:first-child { width:100%; } }
.case-study-conversation { padding:90px 0 120px; border-top:1px solid var(--line); }
.case-study-conversation-heading { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:46px; }
.case-study-conversation-heading h2 { margin-bottom:0; }
.case-study-conversation-heading > p { max-width:310px; margin:0 0 6px; color:var(--muted); font-family:Georgia,serif; font-size:18px; line-height:1.3; }
.case-study-dialogue { max-width:760px; }
.case-study-dialogue .bubble { max-width:78%; padding:20px 24px; }
.case-study-dialogue .bubble.right { background:var(--dark); }
.conversation-separator { display:flex; align-items:center; gap:16px; margin:34px 0 18px; color:var(--red); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.conversation-separator:after { content:''; height:1px; flex:1; background:var(--line); }
.conversation-speaker { margin:0 0 10px; color:var(--red); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.bubble.right .conversation-speaker { color:#ff6b8b; }
.case-study-dialogue .quote { font-size:20px; line-height:1.22; }
.case-study-dialogue .quote:before { display:none; }
@media (max-width:760px) { .case-study-conversation { padding:72px 0 85px; }.case-study-conversation-heading { display:block; margin-bottom:34px; }.case-study-conversation-heading > p { margin-top:27px; }.case-study-dialogue .bubble { max-width:92%; padding:17px 19px; }.conversation-separator { margin-top:28px; line-height:1.35; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

/* Case-study cards */
.case-study-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.conversation-card { min-width:0; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 12px 30px rgba(26,26,26,.06); }
.conversation-card-header { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:baseline; padding:23px 22px 20px; border-bottom:1px solid var(--line); }
.conversation-card-header span { color:var(--red); font-size:11px; font-weight:800; letter-spacing:.1em; }
.conversation-card-header p { margin:0; font-size:14px; font-weight:800; line-height:1.2; }
.conversation-card-header small { grid-column:2; margin-top:3px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.conversation-block { padding:22px; }
.conversation-block + .conversation-block { border-top:1px solid var(--line); }
.conversation-block .conversation-speaker { margin:0 0 10px; font-size:9px; letter-spacing:.12em; }
.conversation-block .quote { margin:0; font-size:17px; line-height:1.28; }
.client-block { background:var(--paper); }
.client-block .conversation-speaker { color:var(--red); }
.agency-block { background:var(--dark); color:#fff; }
.agency-block .conversation-speaker { color:#ff6b8b; }
.agency-block .quote { color:#fff; }
.outcome-block { background:var(--soft); }
.outcome-block .conversation-speaker { color:var(--red); }
@media (max-width:1000px) { .case-study-grid { grid-template-columns:1fr; max-width:720px; } }