:root {
  color-scheme:light;
  --ink:#202020;
  --body:#454545;
  --muted:#626262;
  --blue:#2548c8;
  --blue-dark:#1d36a0;
  --tint:#eaf0ff;
  --green:#0d8c15;
  --green-light:#e5f4e3;
  --line:#dedede;
  --box:#f3f3f3;
  --wrap:1120px;
  --radius:12px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
  color:var(--ink);
  background:#fff;
}
*,*::before,*::after { box-sizing:border-box }
body { margin:0; line-height:1.6; background:#fff }
body.modal-open { overflow:hidden }
img { display:block; max-width:100% }
a { color:var(--ink); text-underline-offset:3px }
button,select { font:inherit }
button { cursor:pointer }
svg { width:20px; height:20px; flex-shrink:0 }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px }
h1,h2,h3,h4,p,figure,dl,dd { margin:0 }
h1,h2,h3 { line-height:1.18; letter-spacing:-.035em }
p { color:var(--body) }
[hidden] { display:none!important }
[id] { scroll-margin-top:84px }
.wrap { width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto }
.skip { position:fixed; z-index:20; left:12px; top:12px; padding:8px 14px; background:#fff; transform:translateY(-150%) }
.skip:focus { transform:none }
.top { position:sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid var(--line) }
.nav { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; white-space:nowrap }
.brand strong { font-size:19px; letter-spacing:-.05em }
.brand-role { font-size:12px; color:var(--muted); font-weight:600; border-left:1px solid var(--line); padding-left:8px }
.brand-icon { width:32px; height:32px; border-radius:8px; background:var(--blue); color:#fff; display:grid; place-items:center }
.brand-icon svg { width:18px; height:18px }
nav { display:flex; align-items:center; gap:22px }
nav a { font-size:13px; font-weight:600; text-decoration:none; color:var(--body); white-space:nowrap }
nav a:hover { color:var(--blue) }
nav a.current { color:var(--ink); text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:6px }
.menu-toggle { display:none }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:42px; padding:10px 15px; border:1px solid transparent; border-radius:7px; font-size:13px; line-height:1.25; font-weight:700; text-decoration:none; transition:background-color .15s,border-color .15s }
.button svg { width:16px; height:16px }
.primary { background:var(--blue); border-color:var(--blue); color:#fff }
.primary:hover { background:var(--blue-dark); border-color:var(--blue-dark); color:#fff }
.secondary { background:#fff; border-color:var(--line); color:var(--ink) }
.secondary:hover { background:var(--tint); border-color:var(--blue) }
.actions { display:flex; flex-wrap:wrap; gap:10px }
.top-cta { min-height:36px; padding:8px 12px; font-size:12px }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:10px; line-height:1.5; font-weight:800; letter-spacing:.1em }
.eyebrow i,.art-caption i { width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0 }
.hero { border-bottom:1px solid var(--line) }
.hero-layout { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:40px; padding-block:42px 32px }
.hero h1 { font-size:clamp(38px,4.5vw,54px); line-height:1.07; letter-spacing:-.055em; font-weight:770; margin:13px 0 16px }
.hero h1 span { color:var(--blue) }
.hero-copy p { font-size:16px; line-height:1.7; max-width:54ch }
.hero-copy .actions { margin-top:20px }
.hero-art { min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--box); overflow:hidden }
.art-kicker,.art-caption { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 13px; font-weight:650 }
.art-kicker { border-bottom:1px solid var(--line); font-size:9px; letter-spacing:.08em; color:var(--muted) }
.art-kicker span,.art-caption span,.art-caption a { display:inline-flex; align-items:center; gap:6px }
.art-kicker svg,.art-caption svg { width:14px; height:14px }
.art-stage { position:relative; height:252px; overflow:hidden; background-image:radial-gradient(#dedede 1px,transparent 1px); background-size:14px 14px }
.hero-email { position:absolute; width:44%; max-width:210px; border:4px solid #fff; border-radius:8px 8px 0 0; background:#fff; box-shadow:0 8px 22px #00000025; overflow:hidden }
.hero-email img { width:100% }
.hero-email.first { left:10%; top:28px; transform:rotate(-6deg) }
.hero-email.second { right:10%; top:22px; transform:rotate(6deg) }
.art-caption { border-top:1px solid var(--line); font-size:11px; color:var(--muted) }
.art-caption a { text-decoration:none }
.trust { display:flex; flex-wrap:wrap; align-items:center; gap:8px 28px; border-top:1px solid var(--line); padding-block:13px; font-size:12px; font-weight:600 }
.trust span { display:inline-flex; align-items:center; gap:6px }
.trust svg { width:16px; height:16px; color:var(--green) }
.section,.contact-section { padding:42px 0 }
.section-head { max-width:760px; margin-bottom:22px }
.section-head h2 { margin-top:7px; font-size:clamp(29px,3.3vw,37px); font-weight:750; letter-spacing:-.045em }
.section-head p { font-size:15px; line-height:1.65; margin-top:9px; max-width:69ch }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:10px; background:var(--box); overflow:hidden }
.metric { min-width:0; padding:15px 17px }
.metric + .metric { border-left:1px solid var(--line) }
.metric strong { display:block; font-size:clamp(26px,2.8vw,32px); line-height:1.2; letter-spacing:-.045em; color:var(--ink); margin-bottom:5px; overflow-wrap:anywhere }
.metric h3 { font-size:13px; line-height:1.4; letter-spacing:0 }
.metric p { font-size:11px; line-height:1.5; margin-top:5px; color:var(--muted) }
.period { display:flex; align-items:flex-start; gap:6px; font-size:11px; color:var(--muted); margin-top:9px }
.period svg { width:14px; height:14px; margin-top:2px }
.selected,.process,.contact-section { border-top:1px solid #ededed }
.projects { display:grid; gap:18px }
.project-card { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center; gap:20px; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; min-width:0 }
.project-info { min-width:0 }
.project-label { font-size:9px; font-weight:750; letter-spacing:.09em; color:var(--muted) }
.project-info>h3 { font-size:clamp(24px,2.6vw,29px); margin:7px 0 9px; letter-spacing:-.04em }
.project-summary { font-size:13px; line-height:1.7 }
.pills { display:flex; flex-wrap:wrap; gap:5px; padding:0; margin:11px 0 0; list-style:none }
.pills li { padding:3px 7px; border:1px solid #e6e6e6; border-radius:5px; background:var(--box); color:var(--body); font-size:10px; line-height:1.5; font-weight:550 }
.project-info .button { margin-top:13px; min-height:36px; padding:8px 12px; font-size:12px }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; min-width:0 }
.gallery.two-up { grid-template-columns:repeat(2,minmax(0,1fr)) }
.gallery-tile { display:flex; flex-direction:column; min-width:0; padding:0; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:left; color:var(--ink); overflow:hidden }
.gallery-tile:hover { border-color:var(--blue) }
.shot { position:relative; display:flex; justify-content:center; align-items:flex-start; width:100%; height:180px; padding:10px 10px 0; background:var(--box); overflow:hidden }
.shot>img { width:100%; border-radius:2px; box-shadow:0 2px 8px #00000016; transition:transform .15s }
.gallery-tile:hover .shot>img { transform:translateY(-3px) }
.expand { position:absolute; right:6px; top:6px; display:grid; place-items:center; width:25px; height:25px; border-radius:5px; background:#fff; color:var(--blue); box-shadow:0 1px 6px #00000018 }
.expand svg { width:13px; height:13px }
.shot-meta { display:block; padding:8px; line-height:1.35 }
.shot-meta strong,.shot-meta small { display:block; overflow-wrap:anywhere }
.shot-meta strong { font-size:11px; font-weight:650 }
.shot-meta small { font-size:10px; color:var(--muted); margin-top:3px }
.portfolio-placeholder { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; border:1px dashed var(--line); border-radius:8px; background:var(--box); text-align:center }
.portfolio-placeholder>strong { font-size:22px; letter-spacing:-.03em }
.portfolio-placeholder p { font-size:12px }
.client-report { grid-column:1/-1; min-width:0; border-top:1px solid var(--line); padding-top:17px }
.report-heading,.delivery-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap }
.report-heading { margin-bottom:12px }
.report-heading h3,.delivery-header h3 { font-size:20px; letter-spacing:-.025em; line-height:1.25 }
.report-period,.delivery-header p { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5 }
.client-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px }
.report-stat { min-width:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--box) }
.report-stat-top { display:flex; flex-wrap:wrap; align-items:center; gap:5px; align-content:flex-start }
.report-stat-top>strong { font-size:clamp(21px,2.1vw,24px); line-height:1.25; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.report-stat h4 { font-size:11px; line-height:1.5; font-weight:550; color:var(--body); letter-spacing:0; margin-top:7px }
.report-trend { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:13px; background:var(--green-light); color:var(--ink); font-size:10px; line-height:1.4; font-weight:550; white-space:nowrap; font-variant-numeric:tabular-nums }
.report-trend svg { width:12px; height:12px; color:var(--green) }
.report-trend.is-down { background:#fff; border:1px solid var(--line) }
.report-trend.is-down svg { color:var(--ink) }
.deliverability-panel { display:grid; grid-template-columns:215px minmax(0,1fr); gap:8px 24px; padding:17px 19px; margin-top:13px; border:1px solid var(--line); border-radius:10px; background:var(--box) }
.delivery-header { grid-column:1/-1 }
.delivery-overview { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0; padding:0; text-align:center }
.delivery-gauge { position:relative; width:142px; height:132px; flex-shrink:0 }
.delivery-gauge svg { width:142px; height:132px; overflow:visible }
.gauge-track,.gauge-score { fill:none; stroke-width:11; stroke-linecap:round }
.gauge-track { stroke:var(--line) }
.gauge-score { stroke:var(--green); stroke-dasharray:var(--score) 100 }
.delivery-gauge strong { position:absolute; top:41px; left:0; width:100%; font-size:38px; line-height:1.2; letter-spacing:-.04em; color:var(--ink); text-align:center }
.delivery-gauge>small { position:absolute; top:88px; left:0; width:100%; font-size:10px; color:var(--muted); text-align:center }
.delivery-summary p { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; font-size:12px; line-height:1.5 }
.delivery-summary p + p { margin-top:5px }
.delivery-summary p:first-child { font-weight:650 }
.delivery-table-scroll { min-width:0; overflow-x:auto; align-self:center }
.delivery-table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; line-height:1.5 }
.delivery-table th,.delivery-table td { vertical-align:middle; padding:8px 9px; border-bottom:1px solid var(--line) }
.delivery-table thead th { font-size:11px; color:var(--muted); font-weight:550 }
.delivery-table tbody th { color:var(--ink); font-weight:550; width:39% }
.delivery-table td { color:var(--body); font-variant-numeric:tabular-nums }
.delivery-table th:first-child { padding-left:0 }
.delivery-table th:last-child,.delivery-table td:last-child { padding-right:0; text-align:right }
.delivery-table tr:last-child th,.delivery-table tr:last-child td { border-bottom:0 }
.services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.services-grid article,.steps li { padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--box); min-width:0 }
.service-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:var(--green-light); color:var(--green) }
.service-icon svg { width:19px; height:19px }
.services-grid h3 { font-size:17px; line-height:1.3; margin:11px 0 7px; letter-spacing:-.025em }
.services-grid p,.steps p { font-size:13px; line-height:1.7 }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0; margin:0; list-style:none }
.steps span { font-size:14px; line-height:1.5; color:var(--blue); font-weight:750 }
.steps h3 { font-size:16px; margin:8px 0 7px }
.about-layout { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); align-items:center; gap:38px }
.portrait { border:1px solid var(--line); border-radius:var(--radius); background:var(--box); overflow:hidden }
.portrait img { width:100%; height:250px; object-fit:contain; object-position:center bottom }
.portrait figcaption { display:grid; padding:10px 14px; border-top:1px solid var(--line); background:#fff; font-size:14px; line-height:1.5 }
.portrait small { font-size:11px; color:var(--muted) }
.about-layout .section-head { margin-bottom:12px }
.bio p { font-size:14px; line-height:1.75 }
.bio p + p { margin-top:9px }
.bio + .button { margin-top:17px }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:36px }
.contact-layout .section-head { margin-bottom:18px }
.contact-card { padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--box) }
.contact-card h3 { font-size:20px; letter-spacing:-.025em }
.contact-card ul { padding-left:19px; margin:11px 0 0; color:var(--body); font-size:14px }
.contact-card li + li { margin-top:7px }
footer { border-top:1px solid var(--line) }
.footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-block:18px; font-size:12px; color:var(--muted) }
.footer>a:last-child { display:inline-flex; align-items:center; gap:5px; text-decoration:none }
.footer>a:last-child svg { width:15px; height:15px }
dialog { width:min(770px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--line); border-radius:13px; color:var(--ink); overflow:hidden; box-shadow:0 12px 46px #00000052 }
dialog[open] { display:flex; flex-direction:column }
dialog::backdrop { background:#000000a8 }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 16px }
.dialog-head h2 { font-size:21px }
.dialog-head p { font-size:12px; margin-top:4px }
.close,.menu-toggle { padding:7px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); align-items:center; justify-content:center }
.close { display:grid; flex-shrink:0 }
.view-switch { display:flex; gap:5px; padding:0 16px 10px }
.view-switch button { display:flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font-size:12px }
.view-switch button[aria-pressed=true] { background:var(--tint); border-color:var(--blue) }
.view-switch svg { width:15px; height:15px }
.dialog-body { padding:14px; background:var(--box); overflow:auto; overscroll-behavior:contain }
#preview-content { width:min(100%,590px); margin:auto; background:#fff; box-shadow:0 2px 15px #00000021 }
#preview-content img { width:100% }
#preview-content.mobile { width:min(100%,320px) }
@media (max-width:1000px) {
  .nav { gap:12px }
  nav { gap:14px }
  .top-cta { padding-inline:10px }
  .hero-layout { gap:28px }
  .hero h1 { font-size:clamp(38px,5vw,49px) }
  .art-stage { height:230px }
  .project-card { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:17px; padding:18px }
  .shot { height:165px; padding:8px 8px 0 }
  .deliverability-panel { grid-template-columns:175px minmax(0,1fr); gap:8px 18px }
}
@media (max-width:820px) {
  .top-cta { display:none }
  .hero-copy p { font-size:15px }
  .hero-layout { gap:24px }
  .art-stage { height:215px }
  .art-caption { font-size:10px }
  .project-card { grid-template-columns:minmax(0,1fr) }
  .shot { height:220px; padding:12px 12% 0 }
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .about-layout,.contact-layout { gap:26px }
}
@media (max-width:640px) {
  .wrap { width:calc(100% - 32px) }
  [id] { scroll-margin-top:76px }
  .nav { min-height:60px }
  .menu-toggle { display:inline-flex }
  nav { display:none; position:absolute; inset:60px 0 auto; padding:8px 16px 13px; border-bottom:1px solid var(--line); background:#fff; box-shadow:0 8px 14px #0000000d }
  nav.open { display:grid; gap:0 }
  nav a { padding:9px 10px; font-size:14px; border-radius:6px }
  nav a.current { background:var(--tint) }
  .hero-layout,.about-layout,.contact-layout { grid-template-columns:minmax(0,1fr) }
  .hero-layout { padding-block:28px 24px; gap:22px }
  .hero h1 { font-size:clamp(35px,8.3vw,45px); margin:11px 0 14px }
  .hero-copy p { font-size:15px }
  .hero-copy .actions { margin-top:17px }
  .art-stage { height:clamp(185px,50vw,240px) }
  .hero-email.first { top:24px }
  .hero-email.second { top:20px }
  .art-caption { font-size:11px }
  .trust { gap:6px 16px; font-size:11px; padding-block:11px }
  .section,.contact-section { padding-block:30px }
  .section-head { margin-bottom:18px }
  .section-head h2 { font-size:29px }
  .section-head p { font-size:14px; margin-top:8px }
  .overview { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .metric { padding:13px }
  .metric strong { font-size:28px }
  .metric h3 { font-size:12px }
  .metric:nth-child(3) { border-left:0 }
  .metric:nth-child(n+3) { border-top:1px solid var(--line) }
  .projects { gap:14px }
  .project-card { padding:15px; gap:16px }
  .project-info>h3 { font-size:25px }
  .gallery { gap:7px }
  .shot { height:clamp(125px,36vw,205px); padding:7px 6px 0 }
  .expand { right:5px; top:5px; width:24px; height:24px }
  .shot-meta { padding:7px 5px }
  .shot-meta strong { font-size:11px }
  .shot-meta small { font-size:10px }
  .client-report { padding-top:15px }
  .report-heading h3,.delivery-header h3 { font-size:19px }
  .client-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
  .report-stat { padding:11px }
  .report-stat-top>strong { font-size:23px }
  .report-stat h4 { margin-top:5px }
  .deliverability-panel { grid-template-columns:minmax(0,1fr); padding:14px; gap:10px; margin-top:12px }
  .delivery-overview { flex-direction:row; justify-content:flex-start; gap:14px; text-align:left }
  .delivery-gauge { width:112px; height:106px }
  .delivery-gauge svg { width:112px; height:106px }
  .delivery-gauge strong { top:34px; font-size:30px }
  .delivery-gauge>small { top:70px; font-size:9px }
  .delivery-summary p { justify-content:flex-start; font-size:11px }
  .delivery-table { font-size:11px }
  .delivery-table th,.delivery-table td { padding:8px 5px }
  .delivery-table thead th { font-size:10px }
  .services-grid,.steps { gap:10px }
  .services-grid article,.steps li { padding:15px }
  .services-grid h3 { font-size:16px }
  .services-grid p,.steps p { font-size:13px }
  .steps h3 { font-size:16px }
  .portrait { max-width:360px }
  .portrait img { height:220px }
  .about-layout { gap:20px }
  .contact-layout { gap:19px }
  .contact-card { padding:17px }
  .footer { padding-block:16px; gap:12px }
  .footer>span { order:2; width:100% }
}
@media (max-width:390px) {
  .hero h1 { font-size:35px }
  .services-grid { grid-template-columns:1fr }
  .brand-role { font-size:11px }
  .button { padding-inline:12px }
  .delivery-overview { gap:8px }
  .delivery-gauge { width:100px; height:100px }
  .delivery-gauge svg { width:100px; height:100px }
  .delivery-gauge strong { top:30px; font-size:28px }
  .delivery-gauge>small { top:64px }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important }
}

/* Separate original screenshots arranged as a floating reporting collage. */
.report-evidence-head { margin:28px 0 16px }
.report-evidence-head h3 { font-size:20px }
.report-evidence-head p { margin-top:5px; font-size:13px }
.career-context { font-size:11px; color:var(--muted); margin-top:7px }
.report-collage { position:relative; aspect-ratio:1.65; margin:24px 0 12px; isolation:isolate }
.collage-shot { position:absolute; display:block; padding:0; border:0; border-radius:0; background:#fff; box-shadow:0 5px 35px #23344915; transition:transform .18s,box-shadow .18s; text-align:left }
.collage-shot img { width:100%; height:auto }
.collage-shot:hover,.collage-shot:focus-visible { z-index:10; transform:translateY(-4px); box-shadow:0 8px 35px #23344926 }
.collage-shot .expand { opacity:0; transition:opacity .15s }
.collage-shot:hover .expand,.collage-shot:focus-visible .expand { opacity:1 }
.collage-shot-1 { left:0; top:51%; width:25%; z-index:3 }
.collage-shot-2 { left:48%; top:57%; width:35%; z-index:2 }
.collage-shot-3 { left:48%; top:23%; width:34%; z-index:2 }
.collage-shot-4 { left:1%; top:2%; width:22% }
.collage-shot-5 { left:12%; top:20%; width:34%; z-index:1 }
.collage-shot-6 { left:35%; top:86%; width:20%; z-index:4 }
.collage-shot-7 { right:0; top:3%; width:20% }
.collage-shot-8 { right:0; top:81%; width:27%; z-index:3 }
.collage-shot-9 { right:0; top:38%; width:20%; z-index:3 }
.collage-shot-10 { left:39%; top:3%; width:25% }
.collage-shot-11 { left:29%; top:75%; width:13%; z-index:4 }
.evidence-note { margin-top:13px; font-size:11px; line-height:1.6; max-width:100ch; color:var(--muted) }
.art-stage { height:290px }
.hero-email.first { left:9%; top:34px }
.hero-email.second { right:8%; top:28px }
.floating-report { position:absolute; z-index:2; border:4px solid #fff; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 5px 18px #00000020 }
.floating-report img { width:100% }
.floating-report.revenue { width:62%; right:10px; bottom:15px; transform:rotate(-3deg) }
.floating-report.engagement { width:43%; left:10px; top:10px; transform:rotate(-4deg) }
@media(max-width:820px) { .art-stage { height:270px } }
@media(max-width:640px) {
 .report-collage { aspect-ratio:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:22px 15px; margin:25px 0 }
 .collage-shot { position:relative; top:auto; left:auto; right:auto; width:100%; }
 .collage-shot-1,.collage-shot-5 { grid-row:span 2 }
 .art-stage { height:260px } .art-caption { font-size:9px }
}
@media(prefers-reduced-motion:reduce) { .collage-shot { transition:none } }

.trust { column-gap:20px; row-gap:8px }
.trust .trust-upwork { margin-left:auto; flex-shrink:0 }
.trust-upwork img { width:260px; height:auto; max-width:100% }
@media(max-width:1000px) { .trust .trust-upwork { margin-left:0 } }

/* Final rhythm, alignment, and restrained interaction polish. */
#performance .overview .metric strong { color:var(--green); font-variant-numeric:tabular-nums }
.metric { padding-block:18px }
.project-info>h3 { margin-top:0; text-wrap:balance }
.project-summary { max-width:55ch }
.project-card { gap:22px }
.shot-meta { flex:1; min-height:59px }
.section-head h2,.contact-card h3 { text-wrap:balance }
.trust-upwork img { width:285px }
.trust { padding-block:12px }
.services-grid article { display:flex; flex-direction:column; align-items:flex-start }
.services-grid h3 { max-width:24ch }
.art-caption>span { line-height:1.4 }
.button { transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s }
.button svg { transition:transform .18s }
.gallery-tile { transition:border-color .2s,box-shadow .2s,transform .2s }
.services-grid article,.steps li { transition:border-color .2s,box-shadow .2s,transform .2s }
@media(hover:hover) {
 .button:hover { transform:translateY(-2px); box-shadow:0 4px 12px #0000000d }
 .button:hover svg { transform:translateX(2px) }
 .gallery-tile:hover { transform:translateY(-3px); box-shadow:0 5px 15px #0000000b }
 .services-grid article:hover,.steps li:hover { transform:translateY(-3px); border-color:#c8c8c8; box-shadow:0 5px 16px #00000008 }
}
@media(prefers-reduced-motion:no-preference) {
 html { scroll-behavior:smooth }
 dialog[open] { animation:preview-enter .4s cubic-bezier(.22,1,.36,1) }
 dialog[open]::backdrop { animation:backdrop-enter .3s ease-out }
 @keyframes preview-enter { from { opacity:0; translate:0 8px } to { opacity:1; translate:0 0 } }
 @keyframes backdrop-enter { from { opacity:0 } to { opacity:1 } }
}
@media(max-width:640px) {
 .metric { padding:14px }
 .project-card { gap:17px }
 .shot-meta { min-height:64px }
 .trust { gap:9px 16px }
 .trust .trust-upwork { flex-basis:100% }
 .trust-upwork img { width:275px }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto }
 *,*::before,*::after { animation:none!important; transition:none!important }
 .button:hover,.gallery-tile:hover,.services-grid article:hover,.steps li:hover,.collage-shot:hover { transform:none }
}
.count-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }

.portrait img { height:auto; aspect-ratio:1; object-fit:cover; object-position:center }


/* Hero showcase: give the creative and reporting their own readable space. */
.hero-art { background:#fff; box-shadow:0 6px 24px #20202006 }
.hero-art .art-kicker { padding:12px 15px; font-size:9px; background:#fff; letter-spacing:.06em }
.hero-art .art-count { font-size:8px; color:var(--muted); font-weight:550 }
.hero-art .art-stage { height:365px; background:var(--box); background-image:none }
.hero-art .hero-email { top:18px; width:43%; max-width:none; height:231px; padding:0; border:1px solid #d8d8d8; border-radius:8px; text-align:left; color:var(--ink); box-shadow:0 5px 13px #00000010; transition:transform .3s ease,box-shadow .3s ease }
.hero-art .hero-email.first { left:5%; transform:rotate(-2deg) }
.hero-art .hero-email.second { right:5%; transform:rotate(2deg) }
.hero-email-label { display:flex; align-items:center; justify-content:space-between; gap:4px; background:#fff; padding:8px; font-size:9px; font-weight:650; white-space:nowrap }
.hero-email-label svg { width:12px; height:12px; color:var(--muted) }
.hero-email-crop { display:block; height:calc(100% - 30px); overflow:hidden }
.hero-email-crop img { width:100%; border-radius:0 }
.hero-art .floating-report { bottom:22px; top:auto; border:3px solid #fff; border-radius:6px; box-shadow:0 4px 14px #00000010; transform:none }
.hero-art .floating-report.revenue { width:56%; right:auto; left:4% }
.hero-art .floating-report.engagement { width:33%; left:auto; right:4%; bottom:29px }
.hero-art .art-caption { padding:11px 14px; font-size:10px; background:#fff }
.hero-art .art-caption a { white-space:nowrap; font-weight:650 }
@media(hover:hover) {
 .hero-art .hero-email:hover { transform:translateY(-3px); box-shadow:0 8px 19px #0000001a }
}
@media(max-width:1000px) {
 .hero-email-label { font-size:8px; padding:7px 6px }
 .hero-art .art-kicker { font-size:8px; padding-inline:10px }
 .hero-art .art-count { display:none }
 .hero-art .art-stage { height:330px }
 .hero-art .hero-email { height:210px }
 .hero-art .art-caption { font-size:9px; padding-inline:10px }
}
@media(max-width:640px) {
 .hero-art .art-stage { height:340px }
 .hero-art .hero-email { height:218px }
 .hero-art .art-kicker { font-size:9px; padding:11px 12px }
 .hero-email-label { font-size:9px }
 .hero-art .art-caption { font-size:10px; padding:10px 12px }
}
@media(max-width:390px) { .hero-email-label { font-size:8px } .hero-art .art-stage { height:315px } .hero-art .hero-email { height:206px } }
@media(prefers-reduced-motion:reduce) { .hero-art .hero-email:hover { transform:none } }