/* Sam Pura — paper, purple, and a little noise.
   The original content/layout sheets remain intact; this is the visual system. */
:root {
  color-scheme: light;
  --bg: #fcf9f2;
  --surface: #eee5fa;
  --surface-2: #fffdf8;
  --ink: #38244e;
  --ink-dim: #594e63;
  --muted: #635670;
  --violet: #713dc3;
  --violet-bright: #713dc3;
  --violet-dim: #d2bcec;
  --line: #d9cce2;
  --display: 'Fraunces', Georgia, serif;
  --body: 'DM Sans', sans-serif;
  --mono: 'DM Sans', sans-serif;
  --hand: 'Caveat', cursive;
  --wrap: 1280px;
}
html { scroll-padding-top: 110px; }
/* width/height attributes are presentational hints; this keeps them doing
   their CLS job without overriding the layout's own crops */
img { height: auto; }
body { font-size: 17px; line-height: 1.65; }
::selection { background: #d7b7f6; color: #38244e; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 5px; }
.wrap { width: calc(100% - 112px); max-width: var(--wrap); padding-left: 0; padding-right: 0; }
.wrap .wrap { width: 100%; }
main { overflow: clip; }
section[id] { scroll-margin-top: 96px; }
h1,h2,h3 { text-transform: none; font-weight: 800; font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -.055em; line-height: 1.07; text-wrap: pretty; }
h1 { font-size: clamp(48px, 5.6vw, 80px); color: var(--violet); }
h2 { font-size: clamp(36px, 4.2vw, 58px); }
h3 { font-size: clamp(25px, 2.4vw, 33px); letter-spacing: -.035em; line-height: 1.14; }
p.lede { font-size: 19px; line-height: 1.65; }
p { max-width: 700px; }
.eyebrow, .section-eyebrow, .cs-hero .cs-eyebrow { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--violet); text-transform: uppercase; }
.eyebrow { margin-bottom: 22px; gap: 11px; }
.eyebrow::before { width: 9px; height: 9px; border-radius: 50%; background: var(--violet); flex-shrink: 0; }
.stat-source { font-size: 11px; letter-spacing: .015em; opacity: 1; }
.section, .section.medium { padding: 96px 0; }
.section.tight { padding: 66px 0; }
.section-alt { background: var(--surface); }
/* with lilac used sparingly, neighbouring paper sections need a seam */
.section:not(.section-alt):not(.statement) + .section:not(.section-alt):not(.statement) > .wrap { border-top: 1px solid var(--line); padding-top: 82px; }
.section:not(.section-alt):not(.statement) + .section:not(.section-alt):not(.statement) { padding-top: 14px; }
.meter-progress { height: 3px; background: var(--violet); }
header.site-header { background: rgba(252,249,242,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-inner { max-width: none; padding: 20px 0; width: calc(100% - 112px); max-width: var(--wrap); min-height: 92px; }
.logo { font-family: var(--display); color: var(--violet); text-transform: none; font-size: 38px; font-weight: 800; letter-spacing: -.065em; line-height: 1; transform: rotate(-4deg); }
nav.primary-nav { gap: 32px; }
nav.primary-nav a { font-family: var(--body); text-transform: none; font-size: 14px; font-weight: 600; letter-spacing: 0; padding-bottom: 0; color: var(--ink); }
nav.primary-nav a:hover { color: var(--violet); }
nav.primary-nav a.active::after { bottom: -8px; height: 2px; transform: rotate(-2deg); }
nav.primary-nav a.nav-cta, nav.primary-nav a.nav-cta.send { border: 1.5px solid var(--violet); background: var(--violet); border-radius: 100px; padding: 10px 23px; color: #fffdf8; }
nav.primary-nav a.nav-cta:hover, nav.primary-nav a.nav-cta.send:hover { background: var(--ink); border-color: var(--ink); }
.nav-toggle { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--violet); }
.btn { padding: 15px 26px; font-family: var(--body); font-size: 14px; font-weight: 700; letter-spacing: -.015em; text-transform: none; border: 1.5px solid var(--violet); border-radius: 100px; color: var(--violet); background: transparent; line-height: 1.5; text-align: center; justify-content: center; box-shadow: none; }
.btn.solid { color: #fffdf8; background: var(--violet); font-weight: 700; box-shadow: 3px 4px 0 #d6c0ec; }
.btn:hover { color: #fffdf8; background: var(--violet); transform: translateY(-3px) rotate(-1deg); }
.btn.solid:hover { background: #5f2ba9; box-shadow: 5px 6px 0 #d6c0ec; }
.text-link { font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--violet); border-bottom-color: #b59bce; line-height: 1.5; }
.hero, .mentor-hero { position: relative; grid-template-columns: 1.15fr 1fr; gap: 64px; padding: 66px 0 90px; align-items: center; }
.hero h1 { margin: 0 0 24px; }
.hero > div:first-child { min-width: 0; }
.hero .eyebrow { margin-bottom: 24px; }
.hero .lede { max-width: 540px; }
.hero-note { display: block; font-family: var(--hand); font-size: 33px; letter-spacing: -.02em; color: var(--ink); line-height: 1.3; margin-bottom: 13px; transform: rotate(-3deg); transform-origin: left center; }
.ink-underline { text-decoration: underline; text-decoration-color: #c8abe8; text-decoration-thickness: 5px; text-underline-offset: 7px; }
.hero-photo { position: relative; padding: 11px 11px 32px; background: #eee1fd; transform: rotate(3deg); border: 1px solid #b899d9; box-shadow: 12px 14px 0 #d8c1ef; margin: 20px 12px 20px 6px; }
.hero .hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border-radius: 2px; box-shadow: none; filter: none; }
.photo-star { position: absolute; width: 86px; height: 55px; top: -26px; right: -10px; background: url('images/panda-mark.png') center/contain no-repeat; pointer-events: none; }
.fader-rail { height: 35px; gap: 4px; }
.fader-rail .bar { background: var(--violet); width: 4px; }
.page-index .hero > div:first-child > div[style] { gap: 25px !important; margin-top: 28px !important; }
.page-index .hero > div:first-child > .stat-source { font-family: var(--hand); font-size: 21px; color: var(--ink-dim); margin-top: 19px !important; letter-spacing: 0; }
/* A shelf of records: the artwork gets its own uninterrupted space. */
#work { border-top: 1px solid #d2bce7; border-bottom: 1px solid #d2bce7; }
.record-wall { gap: 34px 22px; }
.record { aspect-ratio: auto; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
.record img { aspect-ratio: 1; height: auto; border: 0; border-radius: 2px; box-shadow: 0 6px 18px -8px rgba(56,36,78,.35); transition: transform .25s ease, box-shadow .25s ease; }
.record:hover img { transform: translateY(-5px); box-shadow: 0 16px 30px -12px rgba(56,36,78,.45); }
.record .r-meta { position: static; padding: 18px 0 0; background: none; }
.record .r-artist { font-family: var(--display); font-size: 22px; font-weight: 800; text-transform: none; letter-spacing: -.045em; line-height: 1.12; color: var(--ink); }
.record .r-album { margin-top: 6px; font-size: 14px; color: var(--ink-dim); }
.record .r-role { font-size: 10px; line-height: 1.6; letter-spacing: .035em; color: #736080; }
.record .r-proof { top: 10px; left: 10px; max-width: calc(100% - 20px); font-size: 9px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; color: #fffdf8; background: var(--violet); border: none; padding: 5px 10px; border-radius: 100px; transform: none; box-shadow: 0 2px 8px -2px rgba(56,36,78,.5); }
.wall-stats { border-top: 1px solid #ccb7e0; margin-top: 54px; padding-top: 38px; }
.wall-stats .n { font-size: clamp(36px,4vw,54px); letter-spacing: -.055em; }
.wall-stats .l { font-size: 11px; letter-spacing: .07em; color: #6f5b7d; }
/* A loose typographic poster, without inventing any new copy. */
.statement { position: relative; padding: 104px 0; background: #f8f1dc; }
.statement .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; }
.statement .lines h2 { font-size: clamp(43px,5.7vw,80px); line-height: 1.12; color: var(--violet); letter-spacing: -.055em; }
.statement .lines h2 span { display: inline; margin: 0; }
.statement .lines h2 span:nth-child(2n) { color: #a178c5; }
.statement .lines h2 span.accent { display: inline-block; font-family: var(--hand); letter-spacing: -.04em; font-size: 1.06em; transform: rotate(-3deg); color: var(--ink); border-bottom: 3px solid #c49de6; margin-top: 5px; }
.statement .formula { display: block; border: 0; margin: 0 0 18px; padding: 45px 0 0; position: relative; }
.statement .formula::before { content: ''; width: 92px; height: 58px; display: block; background: url('images/panda-mark.png') center/contain no-repeat; margin-bottom: 28px; transform: rotate(-5deg); opacity: .92; }
.formula h3 { font-size: 36px; margin-bottom: 20px; }
.formula p { font-size: 17px; }
.steps { gap: 34px; margin-top: 48px; }
.step { border-top: 1px solid #c7b0dc; padding-top: 26px; }
.step .s-num { font-family: var(--hand); font-size: 72px; color: var(--violet); -webkit-text-stroke: 0; transform: rotate(-7deg); transform-origin: left center; }
.step h3 { margin: 18px 0 15px; font-size: 28px; }
.step p { font-size: 16px; }
.range { max-width: none; }
.range-list { font-size: 12px; font-weight: 600; letter-spacing: .075em; }
/* Photographs above paper captions, across the entire case-study system. */
.cs-grid, .ob-cs.three { gap: 30px; }
.cs-card, .ob-cs.three .cs-card, .judgment { min-height: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); display: flex; justify-content: flex-start; overflow: hidden; box-shadow: 0 4px 0 #e7dced; }
.cs-card .cs-bg, .judgment .j-bg { position: relative; inset: auto; flex: 0 0 auto; width: 100%; aspect-ratio: 4/3; background-size: cover; opacity: 1; }
.cs-card:hover .cs-bg, .judgment:hover .j-bg { opacity: 1; transform: none; }
.cs-card:hover, .judgment:hover { transform: translateY(-5px) rotate(-.6deg); border-color: #ad84d5; }
.cs-card .cs-body, .ob-cs.three .cs-card .cs-body, .judgment .j-body { padding: 28px; background: transparent; flex: 1; }
.cs-card .cs-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .08em; margin-bottom: 14px; }
.cs-card h3 { font-size: 31px; margin-bottom: 15px; }
.cs-card p, .judgment p { font-size: 15px; }
.cs-card .cs-stat { border-top: 1px solid var(--line); padding-top: 17px; margin-top: 24px; font-size: 12px; }
.cs-card .cs-stat b { font-size: 15px; }
.cs-card.wide { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 0; }
.cs-card.wide .cs-bg { height: 100%; min-height: 370px; }
.cs-card.wide .cs-body { padding: 40px; align-self: center; }
.cs-card.wide h3 { font-size: 44px; }
.page-case-studies main > .wrap:first-child { padding-top: 72px !important; }
.page-case-studies main > .wrap:first-child h1 { max-width: 1060px; }
.page-case-studies main > .section { padding-top: 56px; }
.mentor-home { gap: 74px; align-items: center; padding-top: 60px; padding-bottom: 60px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mentor-home h2 { font-size: clamp(34px,3.6vw,49px); line-height: 1.1; }
.page-index .section:has(> .mentor-home) { padding-top: 0; }
.chapter { padding-top: 58px; gap: 66px; margin-top: 60px; }
.chapter-body h3 { font-size: clamp(32px,3.5vw,49px); line-height: 1.1; }
.chapter-hero, .chapter-hero.wide { border: 8px solid var(--bg); border-radius: 3px; box-shadow: 7px 8px 0 #cfb9e4; transform: rotate(-2deg); }
.chapter:nth-of-type(3) .chapter-hero { transform: rotate(2deg); }
.chapter-head .ch-name { font-size: 11px; font-weight: 700; color: var(--violet); }
.chips { gap: 7px; }
.chips span { border-color: #c4acd9; border-radius: 100px; padding: 6px 12px; font-size: 10px; font-weight: 500; }
.callout { padding: 23px; border: 1px solid #d4bce6; background: #f8f2fe; border-radius: 4px; }
.callout .c-stats .n { font-size: 39px; text-transform: none; letter-spacing: -.055em; }
.ch-cta .text-link { white-space: normal; }
.human { gap: 80px; }
.human-media img { border: 9px solid #e9d9f7; box-shadow: 7px 8px 0 #d0b6e6; transform: rotate(-2deg); }
.quick h2 { font-size: clamp(36px,4vw,58px); line-height: 1.07; }
.quick h2 .accent { color: var(--violet); font-style: italic; }
.pull-quote { border: 0; border-left: 3px solid #c4a2e2; background: #f2eafb; padding: 24px 28px; }
.pull-quote p { font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }
.human .pull-quote { margin-top: 36px; transform: rotate(1deg); }
.pull-quote .attrib, .testimonial .attrib, .svc-quote .attrib { font-size: 10px; letter-spacing: .06em; }
label { font-size: 12px; text-transform: none; font-weight: 700; letter-spacing: 0; color: var(--ink); margin-bottom: 8px; }
input,textarea,select { border: 1px solid #c8b7d8; border-radius: 6px; background: var(--surface-2); font-family: var(--body); font-size: 16px; color: var(--ink); padding: 14px 16px; }
input:focus,textarea:focus,select:focus { outline: 2px solid #9d70d3; outline-offset: 2px; border-color: var(--violet); }
::placeholder { color: #8a7a95; opacity: 1; }
.field-error { color: #a02b40; font-size: 12px; }
input.invalid,textarea.invalid { border-color: #b33650; }
footer.site-footer { background: #e1cff4; border-top: 1px solid #c8afe0; padding: 52px 0 28px; }
.footer-nav { gap: 20px 30px; margin-bottom: 32px; }
.footer-nav a { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.footer-nav a:first-child { font-family: var(--display); color: var(--violet); font-size: 30px; letter-spacing: -.06em; margin-right: auto; }
.footer-bottom { border-color: #c7aee0; font-size: 10px; letter-spacing: .06em; }
/* Long-form pages keep comfortable reading widths and full-size imagery. */
.page-case-study .cs-back-link { display: block; font-size: 11px; font-weight: 600; margin-top: 32px; }
.cs-hero { padding-top: 40px; padding-bottom: 50px; }
.cs-hero h1 { max-width: 1040px; }
.cs-hero img { aspect-ratio: 16/8; border: 9px solid #e9d9f7; border-radius: 3px; box-shadow: 7px 8px 0 #d0b6e6; margin-top: 42px; }
.article-body { max-width: 840px; }
.article-body p { max-width: 100%; font-size: 17px; line-height: 1.8; }
.article-body h2 { font-size: 36px; line-height: 1.14; color: var(--ink); margin-top: 60px; }
.article-body p.big { text-transform: none; font-size: 36px; line-height: 1.2; color: var(--violet); letter-spacing: -.04em; }
.article-body .pull-quote p { font-size: 30px; line-height: 1.22; color: var(--ink); }
.article-body .eli5-statement { font-family: var(--display); text-transform: none; font-size: 44px; line-height: 1.15; color: var(--violet); letter-spacing: -.04em; }
.article-body .eli5-sub { font-size: 15px; line-height: 1.65; }
.eli5-wrap { background: #eee3f8; border: none; padding: 42px 28px; border-radius: 5px; }
.stat-row { gap: 26px 36px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat .n { font-family: var(--display); font-size: clamp(28px,3vw,39px); letter-spacing: -.05em; }
.stat .l { font-size: 10px; }
.impact-stat .n { letter-spacing: -.05em; }
.gallery, .article-img, .article-img-pair img, .article-img-trio img { border-radius: 4px; box-shadow: 4px 6px 0 #deccec; }
.gallery-cap { color: #fffdf8; padding-bottom: 36px; font-size: 12px; }
.gallery-nav { background: var(--bg); color: var(--violet); border: 1px solid #cab2df; width: 44px; height: 44px; }
.gallery-nav:hover { color: white; }
.gallery-dots { bottom: 7px; gap: 0; }
.gallery-dots button { width: 24px; height: 24px; background: transparent; position: relative; }
.gallery-dots button::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e8dfee; top: 8px; left: 8px; }
.gallery-dots button.active { background: transparent; transform: none; }
.gallery-dots button.active::after { background: #c99bf6; }
.album-carousel .album-item { opacity: 1; transform: none; }
.album-carousel .album-meta .title { text-transform: none; font-size: 20px; letter-spacing: -.03em; line-height: 1.3; }
.album-carousel .album-item img { border: 5px solid #f7f0fc; box-shadow: 3px 5px 0 #d9c4e9; }
.note { background: #f2eafb; border-left-color: #b28dd1; font-size: 12px; }
.mentor-callout { background: #eee3f8; border: 0; border-radius: 5px; padding: 32px; margin-bottom: 40px; }
.mentor-callout h3 { line-height: 1.2; }
.cs-next-card { border-radius: 4px; background: var(--bg); }
.cs-next-card .name { text-transform: none; letter-spacing: -.04em; }
.cs-nav-next a, .cs-final-cta p { font-size: 12px; letter-spacing: .025em; }
/* Services and mentorship use the same paper-and-purple system. */
.page-work-with-me .hero h1, .page-mentorship .hero h1 { font-size: clamp(46px,5.3vw,76px) !important; }
.page-work-with-me .hero p[style*="var(--display)"] { text-transform: none !important; font-size: 26px !important; line-height: 1.3; letter-spacing: -.03em; }
.service { max-width: none; display: grid; grid-template-columns: 170px minmax(0,720px); column-gap: 45px; padding: 48px 0; }
.wrap.col > .service { max-width: none; }
.service .svc-num { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .075em; }
.service h3 { font-size: 39px; margin-bottom: 22px; }
.service p { font-size: 16px; line-height: 1.8; }
.service > .btn { grid-column: 2; justify-self: start; }
.svc-quote { border-left-color: #ba95d8; }
.service .svc-quote p { font-size: 24px; line-height: 1.25; }
.testimonial { border-left-color: #b993d9; }
.testimonial p { font-size: 25px; }
.faq-item h3 { font-family: var(--body); font-size: 19px; letter-spacing: -.02em; line-height: 1.4; }
.logo-strip img { filter: grayscale(1) brightness(0); opacity: .62; }
.split-media img { border: 8px solid #ead9f7; box-shadow: 7px 8px 0 #d0b6e6; border-radius: 2px; }
#inquiry .col-wide { max-width: 850px; }
#inquiry form { background: var(--bg); border: 1px solid var(--line); padding: 36px; border-radius: 6px; box-shadow: 6px 7px 0 #d5bfea; }
.problem-grid { border: 0; gap: 0 40px; }
.problem { border: 0; border-top: 1px solid #ccb6e0; padding: 28px 0 40px; }
.problem .p-num { font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: .16em; color: var(--violet); margin-bottom: 15px; }
.problem h3 { line-height: 1.12; font-size: 28px; }
.problem p { font-size: 16px; }
.qualify h2 { font-size: 37px; line-height: 1.12; }
.qualify > div:first-child { border-right: 0; }
.qualify p { font-size: 17px; }
.statement-block h3 { line-height: 1.1; }
.statement-block h3.accent { color: var(--violet); line-height: 1.07; letter-spacing: -.05em; }
.offer-single { background: var(--bg); border: 1px solid #caafdf; border-radius: 6px; box-shadow: 7px 8px 0 #d4bde7; }
.offer-single .o-name { text-transform: none; letter-spacing: -.045em; line-height: 1.1; }
.feature-line { font-size: 12px; letter-spacing: .04em; }
.why-stats .n { font-family: var(--display); font-size: 44px; letter-spacing: -.045em; }
.judgment .j-bg { aspect-ratio: 3/2; }
.judgment h3 { line-height: 1.15; font-size: 27px; }
.judgment-close { text-transform: none; font-size: 26px; line-height: 1.25; letter-spacing: -.03em; }
.apply-form { border-radius: 6px; border-color: #cdb3e4; box-shadow: 6px 7px 0 #d5bfea; background: var(--bg); }
.page-thank-you main { background: #eee3f8; }
.page-thank-you main .wrap { padding: 50px 0; }
.page-thank-you main h1 { font-size: clamp(72px,12vw,130px) !important; transform: rotate(-4deg); }
@media (min-width: 1600px) { .hero { gap: 85px; } }
@media (max-width: 1100px) {
  .wrap, .header-inner { width: calc(100% - 72px); }
  .hero, .mentor-hero { gap: 38px; }
  .hero h1 { font-size: clamp(50px,6.2vw,70px); }
  .hero .eyebrow { font-size: 9px; letter-spacing: .11em; }
  .hero-photo { margin-right: 18px; }
  .photo-star { width: 74px; height: 47px; right: -6px; top: -22px; }
  .hero .hero-photo img { aspect-ratio: 3/4; }
  .record-wall { gap: 30px 20px; }
  .record .r-artist { font-size: 20px; }
  .ob-cs.three { gap: 18px; }
  .ob-cs.three .cs-card .cs-body { padding: 22px; }
  .cs-card h3 { font-size: 27px; }
  .human { gap: 48px; }
  .chapter { gap: 42px; }
  .statement .wrap { gap: 40px; }
  .service { grid-template-columns: 140px minmax(0,1fr); gap: 0 30px; }
}
@media (max-width: 900px) {
  .hero, .mentor-hero { grid-template-columns: 1fr 1fr; padding: 52px 0 72px; }
  .hero h1 { font-size: 51px; }
  .hero .hero-photo img { order: initial; aspect-ratio: 3/4; height: auto; }
  .hero-photo { align-self: center; }
  .hero .lede { font-size: 17px; }
  .record-wall { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .record .r-proof { font-size: 8px; padding: 4px 6px; }
  .record .r-role { font-size: 9px; }
  .ob-cs.three { grid-template-columns: 1fr; }
  .ob-cs.three .cs-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .ob-cs.three .cs-bg { height: 100%; min-height: 280px; }
  .chapter { grid-template-columns: 1fr; gap: 40px; }
  .chapter-hero { max-width: 700px; }
  .statement .wrap { grid-template-columns: 1.2fr .8fr; }
  .statement .formula h3 { font-size: 29px; }
  .mentor-home { gap: 30px; }
  .apply-intro { position: static; }
}
@media (max-width: 820px) {
  .header-inner { min-height: 78px; padding: 17px 0; }
  .logo { font-size: 33px; }
  nav.primary-nav { top: 78px; background: var(--bg); padding: 25px 36px 32px; gap: 22px; box-shadow: 0 15px 25px #38244e15; }
  nav.primary-nav a { font-size: 19px; padding: 5px 0; }
  nav.primary-nav a.nav-cta { font-size: 16px; }
  .hero, .mentor-hero { grid-template-columns: 1fr; gap: 42px; }
  .hero > div:first-child { max-width: 660px; }
  .hero h1 { font-size: clamp(48px,8.5vw,72px); }
  .hero .eyebrow { font-size: 10px; }
  .hero-photo { max-width: 570px; width: calc(100% - 32px); justify-self: center; margin: 6px 20px 16px 0; }
  .hero .hero-photo img { aspect-ratio: 5/4; }
  .hero-note { font-size: 32px; }
  .statement .wrap { grid-template-columns: 1fr; gap: 38px; }
  .statement .lines h2 { font-size: clamp(45px,8vw,66px); }
  .statement .formula { padding-top: 28px; border-top: 1px solid #d9c7a4; }
  .statement .formula::before { float: right; margin: 0 0 10px 20px; width: 74px; height: 47px; }
  .formula p { max-width: 540px; }
  .cs-card.wide { display: flex; }
  .cs-card.wide .cs-bg { min-height: 0; height: auto; aspect-ratio: 3/2; }
  .cs-card.wide .cs-body { padding: 28px; }
  .human { grid-template-columns: 1fr; gap: 54px; }
  .human-media img { aspect-ratio: 4/3; max-height: 530px; }
  .human-media .pull-quote { max-width: none; }
  .section, .section.medium { padding: 70px 0; }
  .problem-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-work-with-me .hero h1, .page-mentorship .hero h1 { font-size: clamp(48px,8vw,68px) !important; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 94px; }
  body { font-size: 16px; }
  .wrap, .header-inner { width: calc(100% - 40px); }
  .header-inner { min-height: 74px; padding: 15px 0; }
  nav.primary-nav { top: 74px; padding: 24px 20px 30px; }
  h1 { font-size: 46px; }
  h2 { font-size: 37px; }
  h3 { font-size: 27px; }
  .hero, .mentor-hero { padding: 35px 0 55px; gap: 35px; }
  .hero h1 { font-size: clamp(42px,10.8vw,62px); line-height: 1.06; letter-spacing: -.06em; }
  .hero .eyebrow { font-size: 9px; line-height: 1.7; margin-bottom: 19px; }
  .hero-note { font-size: 29px; margin-bottom: 12px; }
  .eyebrow-wrap { display: none; }
  .hero .lede { font-size: 17px; }
  .hero .hero-photo img { aspect-ratio: 1; }
  .hero-photo { padding: 8px 8px 24px; width: calc(100% - 24px); margin-right: 14px; box-shadow: 8px 10px 0 #d8c1ef; }
    .photo-star { width: 62px; height: 40px; right: -4px; top: -18px; }
  .page-index .hero > div:first-child > div[style] { gap: 21px !important; }
  .fader-rail { display: none; }
  .btn { padding: 14px 21px; font-size: 13px; }
  .text-link { font-size: 13px; }
  .section, .section.medium { padding: 58px 0; }
  .eyebrow { font-size: 10px; margin-bottom: 17px; }
  .record-wall { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 19px; }
  .record .r-meta { padding-top: 15px; }
  .record .r-artist { font-size: 21px; }
  .record .r-album { font-size: 12px; }
  .record .r-role { font-size: 9px; line-height: 1.5; }
  .record .r-proof { font-size: 8px; top: 10px; left: -5px; }
  .wall-stats { grid-template-columns: 1fr 1fr; gap: 28px 15px; margin-top: 38px; padding-top: 28px; }
  .wall-stats .n { font-size: 42px; }
  .wall-stats .l { font-size: 9px; }
  .statement .lines h2 { font-size: 44px; line-height: 1.17; }
  .statement .formula h3 { font-size: 31px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step { padding-top: 22px; }
  .step .s-num { font-size: 57px; }
  .step h3 { margin-top: 12px; }
  .range-list { font-size: 11px; }
  .cs-grid { grid-template-columns: 1fr; gap: 25px; }
  .ob-cs.three .cs-card { display: flex; }
  .ob-cs.three .cs-bg { height: auto; min-height: 0; aspect-ratio: 3/2; }
  .cs-card .cs-body, .ob-cs.three .cs-card .cs-body, .cs-card.wide .cs-body { padding: 25px; }
  .cs-card h3, .cs-card.wide h3 { font-size: 32px; }
  .mentor-home { padding-top: 42px; padding-bottom: 42px; }
  .mentor-home h2 { font-size: 36px; }
  .chapter { gap: 32px; padding-top: 38px; margin-top: 45px; }
  .chapter-hero, .chapter-hero.wide { border-width: 6px; box-shadow: 5px 6px 0 #cfb9e4; width: calc(100% - 8px); margin-left: 3px; }
  .chapter-body h3 { font-size: 37px; }
  .ch-cta { gap: 20px; }
  .callout { padding: 20px; }
  .callout .c-stats { gap: 25px; }
  .callout .c-stats .n { font-size: 33px; }
  .quick h2 { font-size: 42px; }
  .human-media img { border-width: 6px; width: calc(100% - 7px); margin-left: 3px; }
  .pull-quote { padding: 21px 23px; }
  .pull-quote p { font-size: 25px; }
  footer.site-footer { padding-top: 38px; }
  .footer-nav { gap: 14px 25px; }
  .footer-nav a:first-child { width: 100%; margin-bottom: 8px; }
  .footer-nav a { font-size: 13px; }
  .footer-bottom { font-size: 9px; gap: 6px; }
  .cs-hero { padding-top: 34px; padding-bottom: 40px; }
  .cs-hero h1 { font-size: 43px !important; }
  .cs-hero img { aspect-ratio: 4/3; border-width: 6px; margin-top: 30px; box-shadow: 4px 5px 0 #d0b6e6; }
  .cs-hero img.tssf-hero-img { aspect-ratio: 3/2; }
  .article-body h2 { font-size: 30px; margin-top: 44px; }
  .article-body p { font-size: 16px; line-height: 1.8; }
  .article-body .pull-quote p { font-size: 27px; line-height: 1.23; }
  .article-body p.big { font-size: 30px; }
  .article-body .eli5-statement { font-size: 34px; }
  .eli5-wrap { padding: 32px 20px; }
  .gallery-cap { font-size: 10px; padding: 26px 18px 35px; }
  .gallery-nav { width: 38px; height: 38px; }
  .gallery-nav.prev { left: 10px; }
  .gallery-nav.next { right: 10px; }
  .mentor-callout { padding: 26px; }
  .stat-row { gap: 22px; }
  .stat .n { font-size: 31px; }
  .cs-next-card { width: 100%; }
  .service { display: block; padding: 37px 0; }
  .service .svc-num { margin-bottom: 17px; }
  .service h3 { font-size: 35px; }
  .service .svc-quote p { font-size: 24px; }
  .split { gap: 30px; }
  .split-media img { height: 350px; }
  #inquiry form { padding: 25px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem { padding-bottom: 28px; }
  .problem h3 { font-size: 29px; }
  .offer-single { padding: 30px 24px; }
  .offer-single .o-name { font-size: 36px; }
  .why-stats { gap: 28px 18px; }
  .why-stats .n { font-size: 37px; }
  .why-stats .l { font-size: 10px; }
  .apply-form { padding: 26px 20px; }
  .page-case-studies main > .wrap:first-child { padding-top: 43px !important; }
  .page-case-studies main > .wrap:first-child h1 { font-size: 43px !important; }
  .page-case-studies main > .section { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Keep the article back link on the same inset as the story. */
.page-case-study .cs-back-link { margin-left: auto; margin-right: auto; }

/* =====================================================================
   CLEANUP PASS: crops and focal points, set per component and checked
   against detected face positions in each source photo.
   ===================================================================== */

/* Work With Me and Mentorship heroes: show the full frame. Both sources
   are 3:2 and both have people at the edges, so any crop loses either
   Sam or the room. */

/* Case-study heroes: square and near-square sources cropped to a wide
   banner need headroom, or the band's heads sit on the top edge. */
.cs-hero img{ object-position: center 38%; }
.page-case-study .cs-hero img[src*="basement-hero-press-crop"]{ aspect-ratio: 16/9; object-position: center center; }
.page-case-study .cs-hero img[src*="state-champs-hero-band"]{ object-position: center 42%; }
.page-case-study .cs-hero img[src*="tssf-early-band"]{ object-position: center 30%; }
.page-case-study .cs-hero img[src*="hundredth-hero-guitar"]{ object-position: center 62%; }
.page-case-study .cs-hero img[src*="basement-hero-drums"]{ object-position: center 55%; }

/* Gallery slides: portrait on mobile crops the sides, which pushed
   several subjects out of frame. Keep the source shape instead. */
@media (max-width:640px){
  .gallery-slide{ aspect-ratio: 4/3; }
}
.gallery-slide img[src*="spiritworld-backstage-festival"]{ object-position: center 34%; }
.gallery-slide img[src*="spiritworld-drum-session"]{ object-position: center 62%; }
.gallery-slide img[src*="hundredth-guitar-tracking"]{ object-position: 22% center; }
.gallery-slide img[src*="tssf-session-bass"]{ object-position: 30% center; }
.gallery-slide img[src*="tssf-sam-control-room"]{ object-position: 72% center; }
.gallery-slide img[src*="tssf-session-guitar-2"]{ object-position: 68% center; }
.gallery-slide img[src*="dangerous-summer-control-room"]{ object-position: 62% center; }
.gallery-slide img[src*="state-champs-drum-tracking"]{ object-position: center 38%; }

/* Homepage and mentorship supporting photography */
.human-media img{ object-position: center 30%; }
.chapter-hero{ object-position: center 52%; }
.judgment .j-bg[style*="hundredth-band-outdoor"]{ background-position: center 34%; }

/* =====================================================================
   PANDA ACCENT SYSTEM
   Two assets, one family: the original glasses mark (panda-mark) is the
   anchor and the only decorative asset. Used as punctuation, never as
   wallpaper: five placements across the whole site.
   ===================================================================== */
.panda-accent{ display:block; background-repeat:no-repeat; background-position:center; background-size:contain; }
.panda-accent.panda-mark{ width:74px; height:47px; margin-bottom:20px; background-image:url('images/panda-mark.png'); opacity:.9; transform:rotate(-4deg); }
@media (max-width:640px){
  .panda-accent.panda-mark{ width:60px; height:38px; margin-bottom:16px; }
}

/* =====================================================================
   CROP PASS: focal points and scale, set per image and per component.
   The console photo on Work With Me is the reference for "right".
   ===================================================================== */

/* the second Work With Me photo, same treatment, larger */
.page-work-with-me .split-media img, .page-work-with-me .service-media img{ aspect-ratio: 4/3; object-position: 45% 45%; }

/* Homepage */
.human-media img{ object-position: center 14%; }                 /* Basement: faces and console, not the floor */
.chapter-hero[src*="spiritworld-purafied-plugin"]{ aspect-ratio: 5/3; object-position: center center; }  /* show the whole plugin */
.chapter-hero[src*="panda-live-room"]{ aspect-ratio: 16/10; object-position: center 58%; }

/* Case-studies index cards */
/* the band fills this frame edge to edge, so the card shows the whole 3:2
   photo rather than cropping arms off both ends */
.cs-card .cs-bg.tssf-card-bg{ background-position: center center; background-size: cover; }
/* the homepage preview row shows all three photos in their native 3:2, so no
   band loses arms to a side crop and the three cards stay the same height */
.ob-cs.three .cs-bg{ aspect-ratio: 3/2; height: auto; min-height: 0; }
.ob-cs.three .cs-bg[style*="basement-card"]{ background-position: center 34%; }
.cs-card.wide .cs-bg.tssf-card-bg{ height: auto; min-height: 0; aspect-ratio: 3/2; align-self: center; }
/* the card uses a 4:3 crop of this photo, so it needs no zoom at all */
.cs-card .cs-bg[style*="basement-card"]{ background-position: center center; background-size: cover; }
.cs-card .cs-bg[style*="state-champs-hero-band"]{ background-position: center 40%; }
.cs-card .cs-bg[style*="hundredth-band-outdoor"]{ background-position: center 40%; }
.cs-card .cs-bg[style*="dangerous-summer-hero-press"]{ background-position: center 38%; }
/* closing wide card: full 3:2 frame, no side crop, so nobody loses an arm */
.cs-card.wide .cs-bg.spiritworld-card-bg{ height: auto; min-height: 0; aspect-ratio: 3/2; align-self: center; background-position: center center; background-size: cover; }

/* Square-format session photos: show the whole frame, no crop at all */
.page-case-study .gallery.square-gallery .gallery-slide{ aspect-ratio: 1; }
.page-case-study .gallery.square-gallery .gallery-slide img{ object-position: center center; }

/* State Champs carousel */
.page-case-study .gallery-slide{ aspect-ratio: 3/2; }

/* SpiritWorld carousel */
.gallery-slide img[src*="spiritworld-guitar-jam"]{ object-position: center 44%; }
.gallery-slide img[src*="spiritworld-guitar-tracking"]{ object-position: center 46%; }
.gallery-slide img[src*="spiritworld-drum-session"]{ object-position: center 58%; }
.gallery-slide img[src*="spiritworld-label-office-group"]{ object-position: center 36%; }
@media (max-width:640px){
  .page-case-study .gallery-slide{ aspect-ratio: 4/3; }
}

/* =====================================================================
   POLISH: heroes larger, case-study heroes shown at their own shape,
   carousels loosened so square-format session photos stop being cut.
   ===================================================================== */


/* Case-study heroes: every source except State Champs is already about
   3:2, so show the whole frame instead of cropping a band's legs off */
.cs-hero img{ aspect-ratio: 3/2; object-position: center center; }
.page-case-study .cs-hero img[src*="dangerous-summer-hero-press"]{ aspect-ratio: 16/9; }
.page-case-study .cs-hero img[src*="state-champs-hero-band"]{ aspect-ratio: 16/10; object-position: center 44%; }
@media (max-width:640px){
  .cs-hero img{ aspect-ratio: 3/2; }
  .page-case-study .cs-hero img[src*="state-champs-hero-band"]{ aspect-ratio: 4/3; }
}

/* Carousels: 4:3 keeps three quarters of a square session photo instead
   of half of it */
.page-case-study .gallery-slide{ aspect-ratio: 4/3; }
@media (max-width:640px){ .page-case-study .gallery-slide{ aspect-ratio: 4/3; } }

/* =====================================================================
   ONE HERO PHOTO COMPONENT
   The homepage .hero-photo frame is the source of truth: same size, same
   lavender double frame, same rotation, same 4:5 image. Work With Me and
   Mentorship now inherit it untouched. The only per-page difference is
   the focal point of the photograph inside it.
   ===================================================================== */
.page-mentorship .hero .hero-photo img{ object-position: 44% 48%; }     /* the engineer and the bassist; the third person falls outside the frame */

/* Honeypot: kept out of the layout and out of the tab order, and marked
   autocomplete="off" so browser autofill cannot populate it and get a real
   submission flagged as spam. */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Honeypot: kept out of the layout and out of the tab order, and marked
   autocomplete="off" so browser autofill cannot populate it and get a real
   submission flagged as spam. */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Homepage proof: three even columns, sized so the numbers stay numbers
   instead of ballooning on a wide display. */
.proof-impact{ padding:0 0 52px; }
.proof-impact .wrap{ padding-top:0; }
.proof-impact .impact-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0;
  padding:30px 0 0; border-top:1px solid var(--line);
}
.proof-impact .impact-stat{
  max-width:none; padding:2px 30px 2px 0; position:relative;
}
.proof-impact .impact-stat + .impact-stat{ padding-left:34px; }
.proof-impact .impact-stat + .impact-stat::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--line);
}
.proof-impact .impact-stat .n{
  font-size:clamp(34px,3.4vw,50px); line-height:1; white-space:nowrap; letter-spacing:-.035em;
}
.proof-impact .impact-stat .l{
  font-size:11.5px; letter-spacing:.11em; margin-top:10px; color:var(--ink);
}
.proof-impact .impact-stat .ctx{
  display:block; margin-top:5px; font-family:var(--body); font-size:12.5px; color:var(--muted); white-space:nowrap;
}
@media (max-width:1180px){ .proof-impact .impact-stat .ctx{ white-space:normal; } }
@media (max-width:760px){
  .proof-impact .impact-row{ grid-template-columns:1fr; gap:22px; padding-top:26px; }
  .proof-impact .impact-stat{ padding:0; }
  .proof-impact .impact-stat + .impact-stat{ padding-left:0; padding-top:20px; }
  .proof-impact .impact-stat + .impact-stat::before{ left:0; right:0; top:0; bottom:auto; width:auto; height:1px; }
}
/* Honeypot: kept out of the layout and out of the tab order, and marked
   autocomplete="off" so browser autofill cannot populate it and get a real
   submission flagged as spam. */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Honeypot: kept out of the layout and out of the tab order, and marked
   autocomplete="off" so browser autofill cannot populate it and get a real
   submission flagged as spam. */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Homepage proof: the same impact-stat component the case studies use,
   so the numbers look like the proof blocks people already scroll past. */
.proof-impact{ padding-top:0; }
.proof-impact .impact-row{ margin:0; padding-top:34px; border-top:1px solid var(--line); gap:40px 72px; }
.proof-impact .impact-stat{ max-width:280px; }
.proof-impact .impact-stat .n{ white-space:nowrap; }