/* Reference-inspired theme. Adjust these colors to restyle the site. */
:root { --blue: #4e4e4e; --ink: #232323; --muted: #6c6c6c; --line: #e8e8e8; --soft: #f8f8f8; }
body { font-size: 16px; }
.section { padding-block: 85px; }
h2 { font-size: clamp(30px, 3vw, 40px); font-weight: 750; }
.section-label { font-size: 12px; letter-spacing: 2px; font-weight: 600; }
.button:hover { background: #3d3d3d; }
.section-heading { margin-bottom: 40px; }
.expertise-bg .section-heading, .centered { display: block; text-align: center; }
.expertise-bg .section-heading > p { max-width: 650px; margin: 20px auto 0; font-size: 16px; }
.centered p { margin: 20px 0 0; }
.about { grid-template-columns: .85fr 1.4fr; gap: 75px; align-items: center; }
.about-photo { padding: 15px; background: #f6f6f6; border: 1px solid #ececec; border-radius: 5px; box-shadow: 0 15px 40px #1717170a; }
.about-photo img { width: 100%; height: auto; display: block; border-radius: 3px; }
.about-photo > span { display: block; text-align: center; font-size: 9px; letter-spacing: 1px; color: #727272; padding-top: 15px; }
.about h2 { margin-bottom: 15px; }
.about h2 em { font-style: normal; color: var(--blue); }
.about .section-label { color: var(--muted); }
.about-subtitle { font-size: 12px; letter-spacing: 1px; margin-bottom: 23px; }
.about p { font-size: 16px; }
.about-facts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 15px; border-top: 1px solid var(--line); padding-block: 22px; margin-top: 25px; }
.about-facts span, .about-facts strong { display: block; }
.about-facts span { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.about-facts strong { font-size: 13px; font-weight: 500; }
.market-strip { background: white; border-top: 0; }
.market-strip > .wrap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; padding-block: 34px; }
.market-strip .logo-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.market-strip img { display: block; width: 100%; max-width: 120px; height: 35px; object-fit: contain; }
.market-strip .logo-item.target img { width: 34px; }
.market-strip .logo-item span { font-size: 10px; color: #6c6c6c; letter-spacing: .5px; }
.expertise-grid { gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.expertise-grid article { background: white; border: 1px solid #eeeeee; border-radius: 5px; padding: 28px 23px; box-shadow: 0 8px 26px #14141404; }
.skill-icon { color: var(--blue); background: #f7f7f7; border: 0; margin-bottom: 25px; width: 46px; height: 46px; font-size: 26px; }
.expertise-grid p { font-size: 16px; }
.expertise-grid ul { font-size: 14px; line-height: 1.8; }
.expertise-grid li + li { margin-top: 8px; }
.expertise-grid h3 { font-size: 18px; }
.amazon-card { background: #f9f9f9; border-color: var(--line); }
.tag { background: #f4f4f4; color: #3f3f3f; }
.amazon-card .market-logo { width: 145px; height: 45px; object-fit: contain; margin: 30px 0 10px; }
.amazon-card h3 { font-size: 25px; margin: 10px 0 15px; }
.mini-label { font-size: 11px; }
.other-markets p { font-size: 14px; }
.project-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.project { background: white; border: 1px solid var(--line); border-radius: 5px; padding: 5px 25px; }
.project:last-child { border: 1px solid var(--line); }
.project summary { flex-wrap: wrap; gap: 14px; padding-block: 25px; }
.project-number { width: 22px; color: var(--blue); }
.project h3 { font-size: 24px; }
.project-status { order: 4; width: 100%; font-size: 10px; margin-left: 36px; }
.project-markets { order: 3; width: 100%; padding-left: 36px; font-size: 14px; line-height: 1.7; color: #595959; }
.project h3 { min-width: 0; overflow-wrap: anywhere; }
.project-toggle { width: 29px; height: 29px; font-size: 20px; }
.project-body { padding: 0 0 15px 36px; font-size: 16px; }
.tools-section { align-items: start; }
.tool-list > div { padding: 16px 0; }
.tool-list p { font-size: 14px; }
.process-bg { background: #121212; }
.process-bg .section-label { color: #909090; }
.process-grid article { border-color: #363636; }
.process-grid article > span { color: #949494; }
.process-grid p { font-size: 16px; color: #bababa; }
.experience-bg { background: #fafafa; }
.timeline { max-width: 960px; margin: auto; }
.timeline-item { display: grid; grid-template-columns: 1fr 2.4fr; gap: 45px; padding-block: 35px; border-bottom: 1px solid var(--line); }
.timeline-item:first-child { padding-top: 0; }
.job-meta > span { font-size: 13px; color: #3e3e3e; }
.job-meta h3 { font-size: 18px; margin: 10px 0 8px; }
.job-meta p { font-size: 13px; }
.job-body { border-left: 2px solid #dedede; padding-left: 28px; }
.current .job-body { border-left-color: var(--blue); }
.job-body h3 { font-size: 22px; margin-bottom: 12px; }
.current-badge { display: inline-block; color: #3d3d3d; background: #ececec; padding: 4px 10px; font-size: 10px; letter-spacing: 1px; margin-bottom: 8px; border-radius: 3px; }
.job-body ul { padding-left: 18px; color: var(--muted); margin-block: 8px 0; }
.job-body li { font-size: 16px; margin-bottom: 8px; }
.education-note { max-width: 960px; margin: 35px auto 0; padding: 28px 30px; background: white; border: 1px solid var(--line); border-radius: 5px; }
.education-note > span { font-size: 11px; letter-spacing: 1px; color: var(--blue); }
.education-note h3 { margin: 10px 0 6px; }
.education-note p { font-size: 14px; margin: 0; }
.contact { background: #0f0f0f; }
.contact h2 span { color: #747474; }
.contact .section-label { color: #8c8c8c; }
.contact p { color: #bdbdbd; }
.light { background: var(--blue); color: white; }
.light:hover { background: #3d3d3d; }
.contact .text-link { color: white; }
footer { border-color: #343434; }
footer > span, footer > a:last-child { color: #b6b6b6; }
@media(max-width:1000px) {
  header { padding-inline: 32px; }
  nav { gap: 17px; }
  .about { gap: 35px; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { gap: 35px; }
}
@media(max-width:720px) {
  .section { padding-block: 58px; }
  header { padding: 20px 24px; }
  .about { grid-template-columns: 1fr; gap: 35px; }
  .about-photo { max-width: 330px; margin: auto; }
  .about-facts { grid-template-columns: 1fr; }
  .market-strip > .wrap { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
  .market-strip img { height: 29px; max-width: 110px; }
  .market-strip .logo-item.target img { width: 29px; }
  .project-list { grid-template-columns: 1fr; }
  .project-status { margin-left: 36px; }
  .timeline-item { grid-template-columns: 1fr; gap: 12px; padding-block: 27px; }
  .job-meta p { margin-bottom: 0; }
  .job-body { padding-left: 20px; }
  .job-body h3 { font-size: 20px; }
  .education-note { padding: 24px; }
}
@media(max-width:430px) {
  .expertise-grid, .process-grid { grid-template-columns: 1fr; }
  .expertise-grid article { padding: 25px; }
  .hero-intro h1 { font-size: 36px; letter-spacing: -1.4px; }
}

/* Name prominence and neutral finish */
.personal-name { display:block; font-family:Manrope,Arial,sans-serif; font-size:clamp(32px,3.7vw,52px); font-weight:800; line-height:1.2; letter-spacing:-1px; margin-top:10px; }
.name-intro { font-size:12px; color:#bbb; }
.wordmark { font-size:38px; font-weight:800; }
.about h2 em { display:block; font-size:1.35em; font-weight:800; }
.hero .eyebrow { margin-bottom:24px; }
.hero h1 { font-size:clamp(30px,3vw,42px); }
.project-body h4 { margin:20px 0 8px; color:#333; }
.project-body ul { padding-left:20px; color:#666; }
.project-body li { margin-bottom:10px; }
#contact-action .button { font-size:18px; font-weight:800; }
@media(max-width:430px) { .hero-intro h1 { font-size:30px; } .wordmark { font-size:32px; } .project-body { padding-left:0; } }

/* Equal logo rows keep every marketplace on the same horizontal centerline. */
.market-strip .logo-item { display:grid; grid-template-rows:48px 18px; align-items:center; justify-items:center; align-content:start; gap:6px; }
.market-strip .logo-item img { grid-row:1; align-self:center; margin:0; }
.market-strip .logo-item span { grid-row:2; line-height:18px; }
.zonhack-section { background:#f1f1f1; }
.zonhack-section .wrap { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.zonhack-section p { max-width:650px; margin:0; }
.zonhack-section .button { flex-shrink:0; }
#contact-action p { margin-top:18px; }
@media(max-width:720px) { .zonhack-section .wrap { flex-direction:column; align-items:flex-start; gap:25px; } }
.contact-links { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:24px; }
.contact-links a { color:#e4e4e4; text-decoration:underline; text-underline-offset:4px; font-size:16px; }
.contact-links a:hover { color:white; }
.whatsapp-links { display:flex; flex-wrap:wrap; gap:8px; color:#aaa; }
/* Clear button affordances and dedicated long-form stories. */
a:not(.skip), button.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #777; border-radius:28px; padding:11px 18px; text-decoration:none; font-size:14px; font-weight:650; line-height:1.5; cursor:pointer; }
a.wordmark { font-size:34px; font-weight:800; }
nav { flex-wrap:wrap; gap:8px; }
.hero-socials { flex-wrap:wrap; gap:12px; }
.hero .scroll-cue { position:relative; margin:20px 4%; }
.button, button.button { background:#4e4e4e; color:#fff; font-family:inherit; }
a:hover, button.button:hover { background:#666; color:#fff; }
a:focus-visible,button:focus-visible { outline:3px solid #999; outline-offset:4px; }
.hero h1 span { color:#a3a3a3; }
.zonhack-logo { display:inline-block; width:236px; height:auto; vertical-align:middle; margin:12px 0; }
.contact-links a { text-decoration:none; color:white; }
.contact-grid h2 { font-size:clamp(30px,3.4vw,46px); line-height:1.2; }
dialog { border:1px solid #777; border-radius:16px; padding:32px; width:min(520px,90vw); background:#f8f8f8; color:#222; }
dialog::backdrop { background:#0009; }
.contact dialog p { color:#555; }
.email-options { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.case-page h1 { font-size:clamp(36px,5vw,66px); line-height:1.12; max-width:900px; margin:20px 0; }
.case-page .section-label strong { display:block; font-size:28px; letter-spacing:0; margin-top:15px; }
.case-intro { max-width:720px; }
.category-nav { display:flex; flex-wrap:wrap; margin:36px 0 60px; gap:10px; }
.category-nav .button { font-size:14px; }
.case-story { border-top:1px solid #ccc; padding:54px 0; scroll-margin-top:25px; }
.case-story h2 { max-width:850px; margin:14px 0 30px; }
.case-story h3 { font-size:20px; margin:24px 0 12px; }
.case-story p,.case-story li { font-size:16px; line-height:1.85; color:#505050; }
.case-story ul { padding-left:22px; }
.case-story li { margin:0 0 12px; }
.story-columns { display:grid; grid-template-columns:1.2fr 1fr; gap:50px; margin-bottom:28px; }
@media(max-width:900px) { header { flex-wrap:wrap; gap:15px; } header nav { display:flex; width:100%; flex-wrap:wrap; } header nav a { padding:8px 12px; } }
@media(max-width:720px) { .story-columns { grid-template-columns:1fr; gap:8px; } .category-nav { display:flex; } .contact-grid { grid-template-columns:1fr; gap:25px; } .zonhack-logo { max-width:100%; } }
.journey-copy { max-width:1020px; margin:25px 0 32px; }
.journey-copy p { font-size:17px; line-height:2; margin-bottom:22px; }
a.journey-link { display:inline; padding:3px 9px; border-radius:7px; font-size:inherit; font-weight:700; background:#e8e8e8; color:#333; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
a.journey-link:hover { background:#444; color:white; }
.work-name { display:block; font-size:32px; font-weight:800; margin:18px 0; }
.work-page h1 { font-size:clamp(34px,4.6vw,60px); line-height:1.15; }
.work-intro { max-width:820px; font-size:17px; line-height:1.8; margin-bottom:42px; }
.work-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; margin-bottom:36px; }
.work-card { padding:30px; background:#f8f8f8; border:1px solid #ddd; border-radius:12px; scroll-margin-top:24px; }
.work-card h2 { font-size:28px; line-height:1.25; margin-bottom:18px; }
.work-card p { font-size:16px; line-height:1.8; }
.work-card summary { display:inline-flex; border-radius:28px; padding:10px 18px; background:#4e4e4e; color:white; cursor:pointer; font-weight:650; list-style:none; }
.work-card summary::-webkit-details-marker { display:none; }
.work-card summary:hover { background:#333; }
.open-label { display:none; }
details[open] .open-label { display:inline; }
details[open] .closed-label { display:none; }
.full-story { margin-top:26px; border-top:1px solid #ddd; }
.full-story h3 { margin:24px 0 12px; font-size:20px; }
.full-story .story-columns { display:block; }
.full-story li { margin-bottom:10px; color:#555; line-height:1.8; }
.full-story ul { padding-left:20px; }
@media(max-width:760px) { .work-cards { grid-template-columns:1fr; } .work-card { padding:24px; } }
/* Final alignment and compact contact controls. */
.portrait-caption { width:100%; margin-left:0; margin-top:0; box-sizing:border-box; border-left:0; border-radius:0 0 10px 10px; }
.portrait-frame { border-radius:50% 50% 0 0; }
.hero .actions { align-items:center; gap:16px; flex-wrap:wrap; }
.hero .actions > a { min-height:46px; padding:11px 20px; margin:0; line-height:22px; border:1px solid #777; }
.hero .actions .hero-talk { background:transparent; }
.zonhack-section .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 40px; align-items:start; }
.zonhack-section .wrap > div { display:contents; }
.zonhack-section .section-label { grid-column:1 / -1; margin-bottom:20px; }
.zonhack-section h2 { grid-column:1; grid-row:2; display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:0; }
.zonhack-section .zonhack-logo { width:236px; height:auto; margin:0; }
.zonhack-section .wrap > .button { grid-column:2; grid-row:2; align-self:center; }
.zonhack-section p { grid-column:1 / -1; margin-top:24px; }
.contact-button-grid { display:grid; grid-template-columns:max-content max-content; gap:12px; justify-content:start; }
#contact-action .contact-button-grid > .button { padding:9px 14px; font-size:14px; font-weight:600; min-height:40px; margin:0; gap:5px; }
@media(max-width:720px) { .zonhack-section .wrap { grid-template-columns:1fr; gap:20px; } .zonhack-section .section-label { margin:0; } .zonhack-section .wrap > .button { grid-column:1; grid-row:3; justify-self:start; } .zonhack-section p { grid-row:4; margin:0; } }
@media(max-width:380px) { #contact-action .contact-button-grid > .button { font-size:12px; padding:8px 10px; } .contact-button-grid { gap:8px; } }
/* One clean silhouette for the portrait and its caption. */
.portrait-stage .portrait-frame { box-shadow:none; width:100%; margin:0; }
.portrait-stage .portrait-caption { box-shadow:none; width:100%; margin:0; }
/* Align the Amazon wordmark optically with the other marketplace names. */
.market-strip .logo-item.amazon img { transform:translateY(8px); }
@media(max-width:720px) { .market-strip .logo-item.amazon img { transform:translateY(6px); } }

/* Combined introduction and selected results. */
.about-results { align-items:center; row-gap:40px; }
.about-results .about-photo { max-width:340px; justify-self:center; }
.selected-results { grid-column:1 / -1; }
.selected-results > h3 { font-size:24px; margin-bottom:24px; }
.results-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
a.result-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:24px; border:1px solid #ddd; border-radius:12px; background:#f7f7f7; color:#292929; text-align:left; gap:8px; }
a.result-card:hover { background:#eaeaea; color:#111; border-color:#888; }
.result-card strong { font-size:clamp(28px,3vw,40px); font-weight:800; line-height:1.2; white-space:nowrap; }
.result-card > span { font-size:15px; line-height:1.5; }
.result-card small { font-size:14px; color:#555; }
.result-card .result-link { margin-top:auto; padding-top:14px; font-weight:700; }
.results-note { font-size:14px; color:#666; margin:18px 0 24px; }
.work-journey { margin:35px 0 45px; }
.work-journey h2 { font-size:28px; }
@media(max-width:1000px) { .results-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:440px) { .results-grid { grid-template-columns:1fr; } }

/* Shared page alignment and responsive results. */
.wrap.about-results { max-width:1240px; width:100%; padding-inline:48px; grid-template-columns:.85fr 1.4fr; gap:48px 75px; }
.about-results .about-photo { width:100%; max-width:none; justify-self:stretch; }
.about-results > .selected-results { max-width:none; width:100%; min-width:0; grid-column:1 / -1; }
.about-results .results-grid { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.about-results a.result-card { min-width:0; min-height:235px; padding:28px; gap:10px; }
.about-results .result-card strong { font-size:clamp(28px,3vw,40px); letter-spacing:-1px; }
.about-results .result-card .result-link { white-space:nowrap; padding-top:20px; }
@media(max-width:1000px) { .wrap.about-results { column-gap:35px; } .about-results .results-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .wrap.about-results { padding-inline:24px; grid-template-columns:1fr; row-gap:32px; } .about-results .about-photo { max-width:360px; justify-self:center; } .about-results a.result-card { padding:22px; } }
@media(max-width:540px) { .about-results .results-grid { grid-template-columns:1fr; gap:16px; } .about-results a.result-card { min-height:210px; } }