/* Shared type scale and the existing header's DM Sans “yn.” lockup. */
:root {
  --type-sans: "DM Sans", "Noto Sans JP", sans-serif;
  --type-serif: "Shippori Mincho B1", serif;
  --type-section: clamp(30px, 3.1vw, 44px);
  --type-subheading: clamp(22px, 2vw, 28px);
  --type-body: 15px;
  --type-note: 12px;
  --type-label: 11px;
}

.brand-lockup {
  --brand-mark: 64px;
  --brand-name: 15px;
  --brand-gap: 23px;
  display: inline-flex;
  align-items: center;
  gap: var(--brand-gap);
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-family: "DM Sans", sans-serif;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-lockup .brand-monogram {
  font-family: "DM Sans", sans-serif;
  font-size: var(--brand-mark);
  font-weight: 600;
  letter-spacing: -0.11em;
  line-height: 1;
  white-space: nowrap;
}
.brand-monogram > span {
  color: #ba4528;
}
.brand-lockup .brand-name {
  font-family: "DM Sans", sans-serif;
  font-size: var(--brand-name);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  white-space: nowrap;
}
.footer-top > .footer-brand {
  align-self: flex-start;
  color: var(--paper);
}
.footer-brand .brand-footer {
  --brand-mark: 76px;
  --brand-name: 18px;
  --brand-gap: 27px;
}
.footer-brand .brand-tagline {
  font-family: var(--type-serif);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin: 24px 0 0;
}
.footer-brand > .brand-lockup {
  display: inline-flex;
  border: 0;
  padding: 0;
  margin: 0;
}
.brand-profile {
  --brand-mark: 38px;
  --brand-name: 9px;
  --brand-gap: 14px;
  margin: 3px 0 16px;
}
.brand-lockup:focus-visible {
  outline: 3px solid #d78b64;
  outline-offset: 8px;
}

/* Give equivalent information the same typographic rank across sections. */
.site-typography {
  font-family: var(--type-sans);
}
.site-typography
  :is(
    .section-heading h2,
    .benefits-heading h2,
    .story-title h2,
    .check-intro h2,
    .reading h2,
    .faq h2,
    .contact h2
  ) {
  font-family: var(--type-sans);
  font-size: var(--type-section);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025em;
}
.site-typography .serif,
.site-typography .human-word {
  font-family: var(--type-serif);
  font-weight: 500;
}
.site-typography .visual-hero h1 {
  font-size: clamp(40px, 4.3vw, 70px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.035em;
  white-space: normal;
}
.site-typography .visual-hero .hero-statement {
  font-family: var(--type-sans);
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.025em;
}
.site-typography .field-cinema h2 {
  font-size: clamp(40px, 4.9vw, 70px);
  line-height: 1.4;
  letter-spacing: -0.035em;
}
.site-typography .field-cinema h2 > span {
  font-weight: 500;
}
.site-typography
  :is(
    .benefit-problem h3,
    .field-note h3,
    .process-grid h3,
    .consulting-scope > h3
  ) {
  font-family: var(--type-sans);
  font-size: var(--type-subheading);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.02em;
}
.site-typography
  :is(
    .intelligence-studio .intelligence h3,
    .work-sample summary,
    .quiz-result h3
  ) {
  font-family: var(--type-sans);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.02em;
}
.site-typography .fee .fee-heading {
  font-family: var(--type-sans);
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.6;
  letter-spacing: -0.025em;
}
.site-typography .lab-heading h3 {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.6;
  letter-spacing: -0.025em;
}
.site-typography
  :is(
    .scope-options h4,
    .sample-grid h3,
    .agreement-note h3,
    .case-list h3,
    .book h3
  ) {
  font-family: var(--type-sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.015em;
}
.site-typography .benefit-change strong {
  font-family: var(--type-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
}
.site-typography
  :is(.art-caption p, .film-caption p, .weave-film .film-caption p) {
  font-family: var(--type-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.015em;
}
.site-typography
  :is(
    .visual-hero .hero-description,
    .section-intro,
    .benefits-heading > div > p,
    .benefit-problem > p:last-child,
    .benefit-route > p,
    .intelligence-studio .intelligence > p,
    .field-note > p,
    .story-prose > p,
    .process-grid p,
    .scope-options p,
    .case-list article p,
    .sample-grid p,
    .agreement-note p,
    .faq details p,
    .contact-intro > p,
    .field-copy > .field-body
  ) {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.005em;
}
.site-typography .story-prose > p.story-lead {
  font-family: var(--type-serif);
  font-size: clamp(23px, 2.1vw, 30px);
  font-weight: 500;
  line-height: 1.7;
}
.site-typography .story-prose > p.signature {
  font-family: var(--type-serif);
  font-size: 27px;
  line-height: 1.6;
}
.site-typography .contact-intro > .contact-person {
  font-size: 22px;
}
.site-typography
  :is(
    .lab-intro,
    .lab-explain,
    .lab-detail,
    .quiz-opts button,
    .note-roles,
    .fee p,
    .fee ul,
    .contact-deliverables li,
    .form-intro,
    .scope-other
  ) {
  font-size: 14px;
  line-height: 1.85;
}
.site-typography
  :is(
    .eyebrow,
    .hero-topline,
    .art-title,
    .film-heading,
    .note-meta,
    .intelligence-studio .intelligence-title > p
  ) {
  font-family: var(--type-sans);
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.site-typography
  :is(
    .art-title span:last-child,
    .hero-topline span:last-child,
    .film-heading span:last-child
  ) {
  letter-spacing: 0.015em;
}
.site-typography .field-cinema .field-copy > .eyebrow {
  font-size: var(--type-label);
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.site-typography
  :is(
    .art-caption small,
    .film-caption small,
    .process-grid small,
    .case-output,
    .contact-intro > p.contact-terms,
    .contact-terms small,
    .contact-person small,
    .ff-privacy,
    .form-fallback,
    .benefits-foot p,
    .benefit-change dd,
    .benefits-entry p,
    .benefits-entry small,
    .work-sample summary small,
    .sample-heading span,
    .form-hint,
    .small-note
  ) {
  font-family: var(--type-sans);
  font-size: var(--type-note);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
}
/* Earlier mobile rules used !important for these two supporting lines. */
.site-typography .visual-hero .hero-actions > span,
.site-typography .check-intro .small-note {
  font-size: var(--type-note) !important;
  line-height: 1.75;
}
.site-typography
  :is(.art-toggle, .motion-master, .lab-signal, .hero-needs-link, .text-link) {
  font-size: 12px;
}
.site-typography :is(.footer-top > div, .footer-bottom) {
  font-size: 12px;
  line-height: 1.75;
}
.site-typography .story-identity > p {
  font-size: 13px;
  line-height: 1.85;
}
.site-typography .footer-bottom {
  letter-spacing: 0.02em;
}

/* The policy page uses the same logo and reading typography as the main site. */
.privacy-page {
  font-family: var(--type-sans);
  line-height: 1.9;
}
.privacy-page .bar {
  display: flex;
  align-items: center;
  padding: 20px max(24px, 4.8vw);
}
.privacy-page .bar .brand-lockup {
  --brand-mark: 42px;
  --brand-name: 10px;
  --brand-gap: 15px;
  color: #f3f1e9;
  letter-spacing: normal;
}
.privacy-page h1 {
  font-family: var(--type-sans);
  font-size: clamp(25px, 3.1vw, 36px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.025em;
}
.privacy-page h2 {
  font-family: var(--type-sans);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
}
.privacy-page :is(p, li) {
  font-size: 15px;
  line-height: 1.9;
}
.privacy-page .sub {
  font-size: 12px;
  letter-spacing: 0.04em;
}
.privacy-page footer {
  padding: 44px 24px 30px;
}
.privacy-page .brand-policy-footer {
  --brand-mark: 56px;
  --brand-name: 13px;
  --brand-gap: 20px;
  color: #f3f1e9;
}
.privacy-page .policy-copyright {
  font-size: 11px;
  color: #c2c4bb;
  margin-top: 25px;
  letter-spacing: 0.02em;
}

@media (max-width: 760px) {
  :root {
    --type-section: clamp(28px, 4.6vw, 34px);
    --type-subheading: 24px;
    --type-body: 14px;
  }
  .site-typography .visual-hero h1 {
    font-size: clamp(32px, 8.4vw, 54px);
    line-height: 1.45;
    letter-spacing: -0.035em;
  }
  .site-typography .visual-hero .hero-statement {
    font-size: clamp(21px, 4.4vw, 26px);
  }
  .site-typography .field-cinema h2 {
    font-size: clamp(36px, 7.6vw, 50px);
  }
  .site-typography
    :is(.intelligence-studio .intelligence h3, .work-sample summary) {
    font-size: 20px;
  }
  .site-typography .intelligence-studio .intelligence > p {
    font-size: 14px;
  }
  .site-typography
    :is(.art-caption p, .film-caption p, .weave-film .film-caption p) {
    font-size: 18px;
  }
  .site-typography .film-caption {
    flex-wrap: wrap;
  }
  .site-typography .hero-topline {
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  .site-typography .hero-topline span:last-child {
    max-width: none;
    text-align: start;
  }
  .site-typography .art-title {
    flex-wrap: wrap;
    gap: 7px;
  }
  .site-typography .film-heading {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .site-typography .visual-hero .hero-bottom {
    gap: 14px;
  }
  .site-typography .footer-bottom {
    flex-wrap: wrap;
  }
  .footer-brand .brand-footer {
    --brand-mark: 64px;
    --brand-name: 15px;
    --brand-gap: 23px;
  }
  .footer-brand .brand-tagline {
    font-size: 16px;
    margin-top: 20px;
  }
  .site-typography .story-identity > p {
    max-width: none;
  }
  .privacy-page .wrap {
    padding-top: 48px;
  }
  .privacy-page :is(p, li) {
    font-size: 14px;
  }
  .privacy-page .policy-copyright {
    font-size: 11px;
  }
}
@media print {
  .footer-top > .footer-brand,
  .privacy-page .brand-lockup {
    color: #242721;
  }
  .brand-lockup {
    break-inside: avoid;
  }
}