.skip-link { position: absolute; z-index: 50; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: var(--color-ink); color: white; font-size: 13px; font-weight: 600; transition: transform var(--transition-fast); }
.skip-link:focus { transform: translateY(0); }
.hero-scope { max-width: 560px; margin: 22px 0 0; color: var(--color-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.home-offer { overflow: hidden; padding-top: clamp(78px, 9vw, 132px); padding-bottom: clamp(90px, 10vw, 150px); background: var(--color-paper); }
.home-offer-intro { display: grid; grid-template-columns: minmax(0, .92fr) minmax(220px, .48fr); gap: 8%; align-items: end; margin-bottom: 56px; }
.home-offer-intro h2 { max-width: 760px; font-size: clamp(52px, 6.5vw, 96px); }
.home-offer-intro > p { max-width: 360px; margin: 0 0 6px; color: var(--color-muted); font-size: 15px; line-height: 1.65; }
.home-offer-panels { position: relative; display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 1.65fr); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.home-offer-get, .home-offer-skip { min-width: 0; }
.home-offer-get { padding: 30px; background: var(--color-ink); color: var(--color-cream); }
.home-offer-panel-top { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.home-offer-panel-top p { margin: 0; color: var(--color-lime); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.home-offer-get ul { display: grid; margin: 84px 0 0; padding: 0; list-style: none; }
.home-offer-get li { display: grid; grid-template-columns: 14px 1fr 20px; gap: 12px; align-items: center; min-height: 78px; padding: 15px 0; border-top: 1px solid rgb(244 239 229 / 20%); }
.home-offer-get li::before { width: 7px; height: 7px; border-radius: 50%; background: var(--color-coral-text); content: ''; }
.home-offer-get li b { font: 400 26px/.98 var(--font-display); }
.home-offer-get li i { justify-self: end; color: var(--color-lime); font-style: normal; }
.home-offer-seam { position: absolute; z-index: 1; top: 50%; left: 33%; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-lime); color: var(--color-ink); transform: translate(-50%, -50%) rotate(-8deg); }
.home-offer-seam span { font: italic 17px var(--font-display); }
.home-offer-skip { padding: 30px 34px 34px; background: var(--color-cream); }
.home-offer-skip .home-offer-panel-top p { color: var(--color-coral-text); }
.home-offer-skip h3 { max-width: 640px; margin: 58px 0 15px; font: 400 clamp(38px, 4vw, 62px)/.92 var(--font-display); letter-spacing: -.035em; }
.home-offer-skip-intro { max-width: 540px; margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.6; }
.home-offer-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 40px -34px 0; background: var(--color-line); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.home-offer-benefits article { display: grid; grid-template-columns: 34px 1fr; gap: 12px; min-height: 166px; padding: 22px 24px; background: var(--color-cream); }
.home-offer-benefits article > .benefit-icon { width: 34px; height: 34px; }
.home-offer-benefits h4 { margin: 0 0 8px; font: 400 25px/.98 var(--font-display); }
.home-offer-benefits p { max-width: 290px; margin: 0; color: #526052; font-size: 13px; line-height: 1.5; }
.home-offer-closing { max-width: 560px; margin: 34px 0 0; color: var(--color-ink); font: italic 25px/1.05 var(--font-display); }

@media (max-width: 900px) {
  .home-offer-intro { grid-template-columns: 1fr; gap: 25px; }
  .home-offer-intro > p { max-width: 520px; }
  .home-offer-panels { grid-template-columns: 1fr; }
  .home-offer-get { grid-column: 1; grid-row: 1; }
  .home-offer-seam { position: relative; top: auto; left: auto; grid-column: 1; grid-row: 2; justify-self: center; margin: -38px 0; transform: rotate(-8deg); }
  .home-offer-skip { grid-column: 1; grid-row: 3; }
  .home-offer-get { padding-bottom: 64px; }
  .home-offer-get ul { margin-top: 56px; }
}

@media (max-width: 600px) {
  .home-offer { padding-top: 72px; padding-bottom: 84px; }
  .home-offer-intro { margin-bottom: 36px; }
  .home-offer-intro h2 { font-size: clamp(43px, 12vw, 58px); }
  .home-offer-get, .home-offer-skip { padding: 25px 25px 30px; }
  .home-offer-get { padding-bottom: 55px; }
  .home-offer-get li { grid-template-columns: 14px 1fr 16px; min-height: 68px; }
  .home-offer-get li b { font-size: 23px; }
  .home-offer-seam { width: 64px; height: 64px; margin: -32px 0; }
  .home-offer-seam span { font-size: 15px; }
  .home-offer-skip h3 { margin-top: 46px; font-size: clamp(34px, 10vw, 48px); }
  .home-offer-benefits { grid-template-columns: 1fr; margin-right: -25px; margin-left: -25px; }
  .home-offer-benefits article { min-height: 0; padding: 21px 25px; }
  .home-offer-closing { font-size: 22px; }
}
.trust { padding-top: clamp(60px, 7vw, 100px); padding-bottom: clamp(60px, 7vw, 100px); background: var(--color-paper); }
.trust-heading { display: grid; grid-template-columns: 33% 67%; gap: 24px; align-items: start; }
.trust-heading h2 { max-width: 700px; font-size: clamp(48px, 5.5vw, 82px); }
.trust-heading p:not(.section-label) { max-width: 520px; margin: 22px 0 0; color: var(--color-muted); line-height: 1.65; }
.trust ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 50px 0 0; padding: 0; list-style: none; border: 1px solid var(--color-line); background: var(--color-line); }
.trust li { min-height: 120px; padding: 24px; background: var(--color-paper); font-size: 14px; font-weight: 600; }
.trust li span { display: block; margin-bottom: 28px; color: var(--color-coral-text); font-size: 22px; }
.process-preview { --sketch-surface: var(--color-ink); padding-top: var(--section-space); padding-bottom: var(--section-space); background: var(--color-ink); color: var(--color-cream); }
.process-preview-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 8%; align-items: center; margin-bottom: 50px; }
.process-preview .process-preview-intro .section-heading { display: block; margin: 0; }
.process-preview-intro .section-heading > p:last-child { max-width: 440px; margin: 24px 0 0; font-size: 16px; }
.process-preview .editorial-photo figcaption { color: #c0c7b9; }
.process-preview .section-heading h2 em { color: var(--color-lime); }
.process-preview .section-heading > p:last-child { color: rgb(244 239 229 / 72%); }
.process-preview ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 35px; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 25%); border-bottom: 1px solid rgb(255 255 255 / 25%); background: rgb(255 255 255 / 25%); }
.process-preview li { min-height: 220px; padding: 25px; background: var(--color-ink); }
.process-preview li h3 { margin: 25px 0 8px; font: 400 32px/.98 var(--font-display); }
.process-preview li p { max-width: 270px; margin: 0; color: rgb(244 239 229 / 70%); font-size: 14px; line-height: 1.55; }
.process-preview .text-link { color: var(--color-cream); }
.work-section { padding-top: var(--section-space); padding-bottom: var(--section-space); background: var(--color-paper); }
.work-section .section-heading { margin-bottom: 35px; }
.work-library { padding-top: clamp(24px, 4vw, 58px); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-showcase-note { max-width: 780px; margin: 18px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.55; }
.work-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--color-ink); border-radius: 12px; background: var(--color-ink); color: var(--color-cream); }
.work-card-visual { position: relative; flex: none; aspect-ratio: 4 / 3; margin: 8px 8px 0; overflow: hidden; border-radius: 6px; background: #283128; }
.work-card-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.work-newSingle .work-card-visual img { object-position: 60% center; }
.work-fundraising .work-card-visual img { object-position: 68% center; }
.work-minecraft .work-card-visual img { object-position: 53% center; }
.work-card-placeholder { display: grid; place-items: center; height: 100%; padding: 24px; color: var(--color-cream); font-size: 14px; text-align: center; }
.work-card-body { display: flex; flex: 1; flex-direction: column; padding: 26px 28px 22px; }
.work-card-type { margin: 0 0 24px; color: #c0c7b9; font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.work-card h3 { min-height: 2.1em; margin: 0 0 18px; color: var(--color-cream); font: 400 clamp(34px, 3vw, 46px)/1.05 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.work-card-description { margin: 0 0 28px; color: #d3d8cd; font-size: 16px; line-height: 1.6; }
.work-card-outcome { margin: 0 0 28px; color: #d3d8cd; font-size: 14px; line-height: 1.6; }
.work-card-outcome > span { display: block; margin-bottom: 6px; color: var(--color-cream); font-size: 13px; font-weight: 600; }
.work-card-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid #475244; }
.work-card-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; color: var(--color-cream); font-size: 14px; font-weight: 600; text-underline-offset: 5px; }
.work-card-link > span { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-lime); color: var(--color-ink); font-size: 23px; font-weight: 400; transition: transform var(--transition-fast); }
.work-card-link::after { position: absolute; z-index: 1; inset: 0; border-radius: 12px; content: ''; }
.work-card-link:focus-visible { outline: none; text-decoration: underline; }
.work-card-link:focus-visible::after { outline: 3px solid var(--color-ink); outline-offset: 5px; }
.work-card-pending { display: flex; align-items: center; min-height: 40px; margin: 0; color: #c0c7b9; font-size: 14px; }
@media (hover: hover) {
  .work-card:has(.work-card-link):hover .work-card-visual img { transform: scale(1.04); }
  .work-card:hover .work-card-link { text-decoration: underline; }
  .work-card:hover .work-card-link > span { transform: rotate(45deg); }
}
.work-section > .button { margin-top: 34px; }
.button-outline { border-color: currentcolor; background: transparent; color: var(--color-ink); }
.button-outline:hover { background: var(--color-ink); color: white; }
.faq-preview { display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, .65fr); gap: 6%; padding-top: var(--section-space); padding-bottom: var(--section-space); background: var(--color-cream); }
.faq-preview h2 { font-size: clamp(48px, 5.5vw, 82px); }
.faq-preview .accordions { border-top: 1px solid var(--color-line); }
.faq-preview > .text-link { grid-column: 2; justify-self: start; margin-top: 20px; }
.next-steps { margin-top: 48px; }
.next-steps .section-label { margin-bottom: 18px; }
.next-steps ol { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.next-steps li { display: flex; gap: 12px; align-items: baseline; font-size: 12px; line-height: 1.45; }
.next-steps li span { color: var(--color-ink); font: italic 20px var(--font-display); }
.support-body { max-width: 980px; padding-top: var(--section-space); padding-bottom: var(--section-space); background: var(--color-paper); }
.support-section { max-width: 760px; padding: 0 0 38px; margin: 0 0 38px; border-bottom: 1px solid var(--color-line); }
.support-section h2 { margin-bottom: 16px; font-size: clamp(32px, 4vw, 54px); }
.support-section p, .support-section li { color: var(--color-muted); font-size: 16px; line-height: 1.7; }
.support-section p { margin: 0 0 14px; }
.support-section ul { margin: 12px 0 18px; padding-left: 20px; }
.support-section .text-link { color: var(--color-ink); font-size: 13px; }
.support-status { max-width: 760px; margin-top: 28px !important; color: var(--color-coral-text) !important; font-size: 12px !important; font-weight: 600; letter-spacing: .03em; }

/* Testimonials: three personal notes, with a tear-off author strip. */
.testimonials {
  padding-top: var(--section-space);
  padding-bottom: clamp(64px, 7vw, 100px);
  background: var(--color-ink);
  color: var(--color-cream);
}
.testimonials-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 76px; }
.testimonials-heading .section-label { color: var(--color-lime); }
.testimonials-heading h2 { font-size: clamp(62px, 7.5vw, 112px); }
.testimonials-heading h2 em { color: var(--color-lime); }
.testimonials-aside { padding: 0 24px 8px 0; }
.testimonials-sketch { display: block; width: 132px; height: auto; margin: 0 0 20px auto; stroke: var(--color-cream); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: rotate(7deg); }
.testimonials-sketch-accent { fill: var(--color-lime); stroke: var(--color-lime); }
.testimonials-aside p { margin: 0; color: #c0c7b9; font-size: 14px; line-height: 1.7; }
.testimonials-notes { display: grid; grid-template-columns: 1fr 1.08fr 1fr; align-items: start; gap: clamp(20px, 2.4vw, 38px); }
.testimonial-note {
  --note-paper: var(--color-paper);
  --note-rotation: -1.5deg;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 24px 0 0;
  padding: clamp(24px, 2.5vw, 38px) clamp(24px, 2.4vw, 36px) 0;
  border-radius: 3px;
  background: var(--note-paper);
  color: var(--color-ink);
  box-shadow: 0 16px 30px rgb(0 0 0 / 12%);
  transform: rotate(var(--note-rotation));
  transition: transform var(--transition-normal);
}
.testimonial-note::before { position: absolute; top: -11px; left: calc(50% - 32px); width: 64px; height: 23px; border: 1px solid rgb(244 239 229 / 20%); background: rgb(244 239 229 / 36%); transform: rotate(-5deg); content: ''; }
.testimonial-note-josh { --note-paper: #eaf0ce; --note-rotation: 1deg; margin-top: 0; }
.testimonial-note-vera { --note-paper: #f3c5b5; --note-rotation: -1deg; margin-top: 56px; }
.testimonial-note-top { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.testimonial-note-top .section-sketch { --sketch-surface: var(--note-paper); flex: none; width: 62px; height: 52px; }
.testimonial-note-top p { margin: 0; font-size: 10px; font-weight: 600; line-height: 1.65; letter-spacing: .09em; text-transform: uppercase; }
.testimonial-note h3 { margin: 0 0 26px; font: 400 clamp(35px, 3.5vw, 54px)/1.04 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.testimonial-note-josh h3 { font-size: clamp(30px, 2.7vw, 42px); }
.testimonial-note blockquote { margin: 0 0 30px; }
.testimonial-note blockquote p { margin: 0; color: #374236; font-size: 14px; line-height: 1.75; }
.testimonial-note figcaption { position: relative; display: flex; align-items: center; gap: 12px; margin: auto calc(-1 * clamp(24px, 2.4vw, 36px)) 0; padding: 24px clamp(24px, 2.4vw, 36px); border-top: 1px dashed rgb(23 32 24 / 32%); }
.testimonial-note figcaption::before, .testimonial-note figcaption::after { position: absolute; top: -8px; width: 8px; height: 16px; background: var(--color-ink); content: ''; }
.testimonial-note figcaption::before { left: 0; border-radius: 0 16px 16px 0; }
.testimonial-note figcaption::after { right: 0; border-radius: 16px 0 0 16px; }
.testimonial-name, .testimonial-role { display: block; }
.testimonial-name { position: relative; width: fit-content; font: italic 30px/1.1 var(--font-display); letter-spacing: -.02em; }
.testimonial-name::after { position: absolute; right: -12px; bottom: -7px; left: -3px; height: 7px; border-top: 1px solid currentcolor; border-radius: 50%; opacity: .55; transform: rotate(-3deg); content: ''; }
.testimonial-note-josh .testimonial-name::after { transform: rotate(2deg); }
.testimonial-note-vera .testimonial-name::after { left: 10px; right: -20px; transform: rotate(-5deg); }
.testimonial-role { margin-top: 13px; color: #465040; font-size: 11px; line-height: 1.5; }
.testimonials-endnote { display: flex; justify-content: end; align-items: baseline; gap: 12px; margin: 48px 0 0; color: #c0c7b9; font: italic 24px/1.25 var(--font-display); }
.testimonials-endnote > span { color: var(--color-lime); font-style: normal; }
@media (hover: hover) and (min-width: 901px) {
  .testimonial-note:hover { transform: translateY(-6px) rotate(0); }
}
@media (max-width: 900px) {
  .testimonials-heading { margin-bottom: 56px; }
  .testimonials-aside { padding-right: 0; }
  .testimonials-notes { grid-template-columns: 1fr; gap: 28px; }
  .testimonial-note { --note-rotation: 0deg; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 36px; margin-top: 0; padding: 32px 32px 0; transform: none; }
  .testimonial-note-top { grid-column: 1; margin-bottom: 24px; }
  .testimonial-note h3 { grid-column: 1; align-self: start; font-size: 42px; }
  .testimonial-note-josh h3 { font-size: 34px; }
  .testimonial-note blockquote { grid-column: 2; grid-row: 1 / 3; }
  .testimonial-note figcaption { grid-column: 1 / -1; margin-right: -32px; margin-left: -32px; padding: 20px 32px; }
  .testimonials-endnote { margin-top: 32px; }
}
@media (max-width: 600px) {
  .testimonials { padding-top: 72px; padding-bottom: 56px; }
  .testimonials-heading { align-items: start; gap: 16px; margin-bottom: 44px; }
  .testimonials-heading .section-label { max-width: 240px; margin-bottom: 24px; font-size: 10px; }
  .testimonials-heading h2 { font-size: clamp(48px, 12vw, 70px); }
  .testimonials-aside { align-self: end; flex: none; width: 54px; padding-bottom: 4px; }
  .testimonials-aside p { display: none; }
  .testimonials-sketch { width: 100%; margin: 0; }
  .testimonial-note { display: flex; padding: 28px 25px 0; }
  .testimonial-note-top { margin-bottom: 26px; }
  .testimonial-note h3 { font-size: 42px; }
  .testimonial-note-josh h3 { font-size: 34px; }
  .testimonial-note blockquote { margin-bottom: 28px; }
  .testimonial-note blockquote p { font-size: 15px; line-height: 1.7; }
  .testimonial-note figcaption { margin-right: -25px; margin-left: -25px; padding: 22px 25px; }
  .testimonials-endnote { justify-content: start; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-note { transition: none; }
  .testimonial-note:hover { transform: rotate(var(--note-rotation)); }
}