/* WHY and the following sections share the established quiet music identity. */
.why,
.faq {
  max-width: none;
  margin: 0;
  background: var(--paper);
  padding: 112px max(48px, calc((100% - 1280px) / 2));
}
.why { border: 0; padding-top: 108px; padding-bottom: 128px; }
.why .section-kicker,
.services .section-kicker,
.works .section-kicker,
.faq .section-kicker,
.contact .section-kicker { font-size: 10px; font-weight: 500; }
.why .section-heading,
.services .section-heading,
.works .section-heading { align-items: center; margin-top: 40px; margin-bottom: 64px; }
.why .section-heading h2,
.services .section-heading h2,
.works .section-heading h2,
.faq-heading h2 {
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -.05em;
}
.why .section-heading > p,
.services .section-heading > p,
.works .section-heading > p { font-size: 15px; line-height: 2.15; color: var(--muted); }

/* Three ideas, expressed as three related sound diagrams. */
.reasons { gap: 0; }
.reason { padding: 26px 36px 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.reason:first-child { padding-left: 0; border-left: 0; }
.reason:last-child { padding-right: 0; }
.reason-top { position: relative; height: 192px; margin-bottom: 24px; display: block; }
.reason-number { position: absolute; top: 0; left: 0; font-size: 16px; letter-spacing: -.025em; color: var(--muted); }
.reason-art { position: absolute; inset: 8px -16px 0; display: grid; place-items: center; }
.reason-art img { display: block; width: 100%; max-width: 300px; height: 184px; object-fit: contain; transition: transform .8s var(--ease); }
@media (hover: hover) {
  .reason:hover .reason-art img { transform: translateY(-4px) scale(1.035); }
}
.reason .tiny-label { font-size: 9px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
.reason h3 { margin-top: 17px; font-size: 22px; line-height: 1.7; letter-spacing: -.035em; }
.reason > p { margin-top: 22px; font-size: 15px; line-height: 2.15; color: var(--muted); }

/* A light visual stage paired with the four service descriptions. */
.services { background: var(--soft); border-radius: 0; padding-top: 112px; padding-bottom: 112px; }
.service-layout { grid-template-columns: .9fr 1.1fr; gap: 80px; }
.service-art { top: 112px; height: 450px; border-radius: 0; background: var(--paper); border: 1px solid var(--line); }
.service-art::before { background-size: 32px 32px; opacity: .16; }
.service-art .wave-canvas { opacity: .75; }
.service-art-top { top: 26px; left: 28px; right: 28px; color: var(--muted); }
.service-art-word { left: 30px; bottom: 68px; font-size: clamp(36px, 3.2vw, 46px); letter-spacing: -.055em; }
.service-art-bottom { left: 32px; bottom: 30px; color: var(--muted); }
.service-item { border-color: var(--line); }
.service-item > summary { gap: 18px; padding: 30px 0; }
.service-index { font-size: 9px; padding-top: 6px; }
.service-english { font-size: clamp(21px, 1.85vw, 28px); line-height: 1.25; letter-spacing: -.035em; }
.service-japanese { font-size: 12px; }
.service-item .plus { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; }
.service-item .plus::before,
.service-item .plus::after { left: 9px; top: 15px; width: 12px; }
.service-item[open] .plus { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.service-content { padding-left: 32px; padding-bottom: 32px; }
.service-content p { font-size: 15px; line-height: 2.1; color: var(--muted); }
.tags { gap: 7px; margin-top: 22px; }
.tags li { border-color: var(--line); color: var(--muted); font-size: 10px; padding: 5px 11px; }
.service-cta { font-size: 12px; padding-top: 24px; padding-bottom: 13px; border-color: var(--line); }
.service-note { max-width: 540px; margin-top: 36px; font-size: 15px; line-height: 2; color: var(--muted); }

/* The work has a dark stage; the factual results sit on the surrounding white. */
.works.dark-section { background: var(--paper); color: var(--ink); border-radius: 0; }
.works-inner { padding-top: 112px; padding-bottom: 112px; }
.works .section-kicker .section-number,
.works .kicker-right { color: var(--muted); }
.work-visual { height: 420px; border: 0; border-radius: 0; background: var(--ink); color: var(--paper); }
.work-visual .wave-canvas { opacity: .46; }
.work-visual-top,
.work-visual-bottom { left: 32px; right: 32px; color: var(--paper); font-size: 8px; font-weight: 400; }
.work-visual-top { top: 28px; }
.work-visual-bottom { bottom: 26px; }
.work-title { top: 90px; left: 42px; font-size: clamp(72px, 8vw, 112px); font-weight: 400; letter-spacing: -.065em; }
.work-title-star { font-size: 66px; color: var(--accent); }
.work-visual .asset-note { color: var(--paper); opacity: .6; font-size: 9px; }
.metrics { padding: 38px 0; border-color: var(--line); }
.metric { padding: 4px 25px; border-color: var(--line); }
.metric-label { color: var(--muted); font-size: 8px; font-weight: 500; letter-spacing: .06em; }
.metric strong { margin-top: 12px; margin-bottom: 4px; font-size: clamp(36px, 3.2vw, 46px); line-height: 1.4; }
.metric strong > span { font-size: 15px; }
.metric strong > small { font-size: 12px; }
.metric p { color: var(--muted); font-size: 15px; line-height: 1.9; }
.producer { grid-template-columns: 205px 1fr; gap: 32px; padding-top: 42px; }
.producer-label { gap: 20px; }
.producer-label .tiny-label,
.producer-name > span,
.producer-name > small { color: var(--muted); }
.producer-photo { width: 92px; height: 92px; color: var(--muted); background: var(--soft); border-color: var(--line); }
.producer-name h3 { font-size: 25px; margin-block: 7px; }
.producer-name > small { font-size: 10px; }
.producer > p { color: var(--muted); font-size: 15px; line-height: 2.1; }

/* Familiar native details, with generous row spacing and clear questions. */
.faq { padding-top: 100px; padding-bottom: 120px; }
.faq-layout { grid-template-columns: .65fr 1.35fr; gap: 88px; padding-top: 72px; }
.faq-heading { top: 120px; }
.faq-heading h2 { margin-top: 32px; }
.faq-heading > p { font-size: 15px; }
.faq-heading .text-link { margin-top: 32px; font-size: 12px; }
.faq-list > details,
.faq-list > details:last-child { border-color: var(--line); }
.faq-list summary { padding: 27px 0; gap: 24px; font-size: 15px; font-weight: 500; }
.faq-index { color: var(--muted); font-size: 9px; }
.faq-list .plus { width: 26px; height: 26px; }
.faq-list .plus::before,
.faq-list .plus::after { top: 12px; left: 6px; }
.faq-answer { padding: 0 40px 28px 36px; color: var(--muted); font-size: 15px; line-height: 2.1; }

/* The invitation and the form are balanced, without an oversized headline. */
.contact { background: var(--soft); border-radius: 0; }
.contact-inner { padding-top: 112px; padding-bottom: 112px; }
.contact-title { font-size: clamp(30px, 3.1vw, 44px); margin-top: 40px; margin-bottom: 54px; line-height: 1.7; letter-spacing: -.05em; }
.contact-title > span { color: var(--ink); }
.contact-layout { grid-template-columns: .9fr 1.1fr; gap: 88px; }
.contact-copy > p { font-size: 15px; line-height: 2.2; color: var(--muted); }
.contact-copy > p:first-child { color: var(--ink); }
.contact-signature { margin-top: 24px; height: 180px; }
.contact-signature canvas { width: 190px; height: 180px; left: -20px; opacity: .55; }
.contact-signature > span { top: 72px; left: 115px; font-size: 13px; line-height: 1.6; letter-spacing: -.015em; }
.contact-form { padding: 36px; background: var(--paper); border: 1px solid var(--line); gap: 26px; }
.contact-form label,
.contact-form legend { font-size: 12px; }
.contact-form input:not([type=checkbox]),
.contact-form select { font-size: 15px; padding-block: 14px; border-color: var(--line); }
.checkboxes span { font-size: 11px; padding: 9px 12px; border-color: var(--line); }
.submit-button { margin-top: 6px; padding: 16px 18px 16px 24px; background: var(--ink); }
.submit-button:hover { background: var(--ink); opacity: .9; border-color: var(--ink); }
.submit-button > span:first-child { font-size: 12px; }
.submit-button small { margin-left: 9px; font-size: 9px; }
.contact-form .form-note { color: var(--muted); margin-top: -12px; }
.footer { padding-top: 36px; background: var(--paper); border-color: var(--line); }
.footer-wordmark { max-width: 1280px; height: clamp(100px, 14vw, 190px); margin: 44px auto 32px; opacity: .6; }
.footer-bottom { gap: 24px; }

@media (max-width: 1100px) {
  .why, .faq { padding-inline: 38px; }
  .why, .services, .works-inner, .contact-inner { padding-block: 88px; }
  .reason { padding-inline: 24px; }
  .reason-top { height: 170px; }
  .reason-art img { height: 166px; }
  .reason h3 { font-size: 20px; }
  .service-layout { gap: 44px; }
  .service-art { height: 410px; }
  .service-art-word { font-size: 36px; }
  .producer { grid-template-columns: 175px 1fr; gap: 24px; }
  .producer-label { gap: 12px; }
  .producer > p { font-size: 15px; }
  .metric { padding-inline: 16px; }
  .metric-label { font-size: 7px; }
  .faq-layout { gap: 48px; }
  .contact-layout { gap: 44px; }
  .contact-form { padding: 28px; }
}
@media (max-width: 760px) {
  .why, .faq { padding-inline: 24px; }
  .why, .services, .works-inner, .contact-inner { padding-block: 72px; }
  .why .section-kicker, .services .section-kicker, .works .section-kicker,
  .faq .section-kicker, .contact .section-kicker { font-size: 9px; }
  .why .section-heading, .services .section-heading, .works .section-heading { margin-top: 30px; margin-bottom: 40px; }
  .why .section-heading h2, .services .section-heading h2,
  .works .section-heading h2, .faq-heading h2 { font-size: 28px; line-height: 1.65; }
  .why .section-heading > p, .services .section-heading > p,
  .works .section-heading > p { font-size: 15px; margin-top: 22px; line-height: 2.1; }
  .reasons { grid-template-columns: 1fr; gap: 34px; }
  .reason, .reason:first-child, .reason:last-child { display: block; padding: 24px 0 0; border-left: 0; }
  .reason-top { display: block; height: 146px; margin-bottom: 20px; }
  .reason-number { position: absolute; font-size: 15px; padding: 0; }
  .reason-art { inset: -14px 24px 0; }
  .reason-art img { max-width: 270px; height: 166px; }
  .reason .tiny-label { font-size: 8px; padding: 0; }
  .reason h3 { font-size: 21px; line-height: 1.65; padding: 0; margin-top: 14px; }
  .reason > p { font-size: 15px; margin-top: 18px; line-height: 2.15; }
  .service-layout { grid-template-columns: 1fr; gap: 32px; }
  .service-art { position: relative; top: auto; height: 320px; }
  .service-art-top { top: 22px; left: 22px; right: 22px; }
  .service-art-word { left: 24px; bottom: 54px; font-size: 38px; }
  .service-art-bottom { left: 25px; bottom: 24px; }
  .service-item > summary { gap: 14px; padding: 24px 0; }
  .service-english { font-size: clamp(20px, 5.7vw, 24px); }
  .service-japanese { font-size: 11px; }
  .service-summary { gap: 8px; min-width: 0; }
  .service-index { font-size: 8px; padding-top: 6px; }
  .service-item .plus { width: 28px; height: 28px; }
  .service-item .plus::before, .service-item .plus::after { left: 7px; top: 13px; }
  .service-content { padding-left: 26px; padding-bottom: 28px; }
  .service-content p { font-size: 15px; }
  .tags li { font-size: 9px; }
  .service-cta { font-size: 11px; }
  .service-note { font-size: 15px; }
  .work-visual { height: 310px; }
  .work-visual-top, .work-visual-bottom { left: 22px; right: 22px; font-size: 6px; }
  .work-visual-top { top: 22px; }
  .work-visual-bottom { bottom: 22px; }
  .work-visual .asset-note { font-size: 8px; }
  .work-title { top: 92px; left: 24px; right: 24px; font-size: clamp(48px, 14vw, 70px); }
  .work-title > span:last-child { gap: 20px; padding-left: 15%; }
  .work-title-star { font-size: 38px; }
  .metrics { padding: 28px 0; gap: 28px 0; }
  .metric, .metric:nth-child(odd) { padding: 0 16px; border-color: var(--line); }
  .metric:nth-child(odd) { padding-left: 0; }
  .metric:nth-child(even) { padding-right: 0; }
  .metric-label { font-size: 6px; }
  .metric strong { font-size: 36px; margin-top: 12px; gap: 3px; }
  .metric strong > span { font-size: 12px; }
  .metric strong > small { font-size: 10px; }
  .metric p { font-size: 15px; }
  .producer { grid-template-columns: 1fr; padding-top: 32px; gap: 24px 20px; }
  .producer-label { display: block; }
  .producer-photo { width: 80px; height: 80px; }
  .producer-name h3 { font-size: 24px; }
  .producer-name > small { font-size: 9px; }
  .producer > p { font-size: 15px; }
  .faq { padding-block: 0 72px; }
  .faq-layout { grid-template-columns: 1fr; padding-top: 62px; gap: 36px; }
  .faq-heading { position: relative; top: auto; }
  .faq-heading h2 { margin-top: 28px; }
  .faq-heading > p { font-size: 15px; }
  .faq-list summary { padding: 24px 0; gap: 15px; font-size: 15px; }
  .faq-list .plus { width: 22px; }
  .faq-answer { padding-left: 28px; padding-right: 18px; font-size: 15px; }
  .contact-title { font-size: clamp(25px, 6.2vw, 34px); margin-top: 30px; margin-bottom: 34px; }
  .contact-layout { grid-template-columns: 1fr; gap: 34px; }
  .contact-copy > p { font-size: 15px; }
  .contact-form { padding: 24px 20px; gap: 25px; }
  .form-row { grid-template-columns: 1fr; gap: 25px; }
  .contact-form input:not([type=checkbox]), .contact-form select { font-size: 16px; min-height: 48px; }
  .contact-form input::placeholder { font-size: 15px; }
  .contact-form select { font-size: 15px; }
  .checkboxes span { font-size: 10px; }
  .submit-button { padding: 14px 14px 14px 17px; }
  .submit-button > span:first-child { font-size: 11px; }
  .submit-button small { font-size: 8px; margin-left: 6px; }
  .submit-button .round-arrow { width: 28px; height: 28px; }
  .footer { padding: 30px 24px; }
  .footer-wordmark { margin-block: 36px 28px; height: 22vw; }
}