/* Shared reading scale, applied after the original responsive layout. */
:root {
  --text-body: 1.125rem;
  --text-lead: 1.1875rem;
  --text-ui: .9375rem;
  --text-small: .875rem;
  --text-label: .75rem;
  --copy-on-light: #3e554d;
  --copy-on-dark: #c4d8d0;
}

body { font-size: var(--text-body); font-weight: 500; }

.hero-description,
.section-intro,
.service-panel > p,
.service-panel ul,
.possibilities-intro,
.experience-description p,
.about-copy > p:not(.eyebrow):not(.about-lead),
.process-grid p,
.contact-side p {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.75;
}

.section-intro,
.service-name > span,
.service-panel > p,
.service-panel ul,
.about-copy > p:not(.eyebrow):not(.about-lead),
.process-grid p { color: var(--copy-on-light); }

.hero-description,
.possibilities-intro,
.experience-description p,
.hero-baseline p:first-child,
.footer-brand > p,
.appointment,
.footer-bottom { color: var(--copy-on-dark); }

.hero-description { max-width: 480px; }
.hero-copy { padding-bottom: 100px; }
.hero-actions { flex-wrap: wrap; }
.section-heading > *,
.about-layout > *,
.experience-description > *,
.footer-main > * { min-width: 0; }
.section-intro { max-width: 450px; }
.possibilities-intro { max-width: 410px; }
.experience-description p { max-width: 520px; }
.process-grid p { max-width: 38ch; }
.service-name > span { font-size: var(--text-ui); font-weight: 500; line-height: 1.65; }
.service-panel li { margin-bottom: 8px; }
.about-lead { font-size: var(--text-lead); font-weight: 600; line-height: 1.65; }
.about-copy > p:not(.eyebrow):not(.about-lead) { margin-top: 16px; }

.button,
.button-small,
.header-cta,
.hero-actions .button,
.contact-side .button { font-size: var(--text-ui); font-weight: 700; }

.text-link,
.hero-actions .text-link,
.service-panel .text-link,
.about-copy .text-link,
.contact-mail,
.desktop-nav a,
.experience-tabs button { font-size: var(--text-ui); font-weight: 600; }

.desktop-nav { gap: 24px; margin-right: 20px; }
.experience-tabs { overflow-x: auto; }
.experience-tabs button { flex-shrink: 0; }
.service-tags { font-size: var(--text-label); color: #4d695c; letter-spacing: .4px; }
.service-number,
.process-number { font-size: var(--text-small); font-weight: 600; color: #456b59; }

.eyebrow,
.hero .eyebrow,
.section-index,
.about-copy .section-index,
.process-heading .section-index,
.contact .eyebrow,
.small-label,
.network-intro .small-label,
.footer-label,
.concept-label,
.baseline-label {
  font-size: var(--text-label);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.1px;
}
.section-index { color: #4d665c; }
.possibilities .section-index,
.small-label,
.footer-label,
.concept-label,
.baseline-label { color: #a8cbbd; }
.concept-label { letter-spacing: .6px; }
.hero-baseline p:first-child { font-size: var(--text-small); }
.image-caption { font-size: .6875rem; color: #c4d8d0; }
.image-caption-index { font-size: var(--text-label); color: #a8cbbd; }
.contact-mail { overflow-wrap: anywhere; }
.contact-bottom { font-size: .6875rem; letter-spacing: .7px; gap: 20px; flex-wrap: wrap; }

.footer-brand > p,
.footer-main > div:not(.footer-brand) > a,
.footer-main > div:not(.footer-brand) > p { font-size: var(--text-ui); font-weight: 500; line-height: 1.8; }
.footer-main > div > a { overflow-wrap: anywhere; }
.appointment { font-size: var(--text-small); }
.footer-bottom { font-size: var(--text-small); flex-wrap: wrap; }
.draft-label { font-size: .6875rem; color: #a8cbbd; }
.location-stamp,
.stamp-coordinate { font-size: var(--text-label); }
.since-label span { font-size: .6875rem; }

@media (min-width: 721px) {
  .contact-side { padding-top: 115px; }
}

@media (max-width: 940px) {
  .header-inner { gap: 16px; }
  .desktop-nav { gap: 16px; margin-right: 0; }
  .desktop-nav a,
  .header-cta { font-size: .8125rem; }
  .section-heading { display: block; }
  .section-intro,
  .possibilities-intro { max-width: 52ch; margin-top: 25px; }
  .service-panel { grid-template-columns: 1fr; }
  .service-panel ul { margin-top: 3px; }
  .experience-description { grid-template-columns: 1fr auto; gap: 18px 28px; }
  .experience-description > div { grid-column: 1; grid-row: 1; }
  .experience-description > p { grid-column: 1; grid-row: 2; }
  .experience-description .circle-button { grid-column: 2; grid-row: 1 / 3; align-self: start; }
}

@media (max-width: 720px) {
  :root { --text-body: 1rem; --text-lead: 1.125rem; --text-ui: .9375rem; }
  .hero-copy { padding-bottom: 390px; }
  .hero-inner { min-height: 0; }
  .hero-description { max-width: 440px; }
  .hero-art { top: auto; bottom: 80px; }
  .hero-actions { gap: 14px 24px; }
  .hero-baseline { flex-wrap: wrap; gap: 14px 20px; padding-block: 22px; }
  .hero-baseline p:first-child { max-width: none; flex-basis: 100%; }
  .hero-baseline p:nth-child(2) { flex-direction: row; align-items: center; gap: 16px; margin-left: 0; }
  .scroll-down { margin-left: auto; }
  .baseline-label { font-size: .6875rem; }
  .service-name > span { max-width: none; }
  .service-panel { padding-left: 0; }
  .process-grid p { max-width: none; }
  .process-heading .section-index { max-width: none; }
  .contact-symbol { bottom: 68px; }
  .contact-side .button { max-width: 100%; }
  .contact-bottom { font-size: .625rem; }
  .location-stamp { font-size: .6875rem; }
  .contact .eyebrow,
  .hero .eyebrow { font-size: .6875rem; letter-spacing: .9px; }
}

@media (max-width: 480px) {
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .footer-main > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .footer-main > div:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .footer-bottom { align-items: flex-start; gap: 20px; }
  .footer-bottom > div { width: 100%; }
  .contact-symbol { display: none; }
}

/* Keep the horizontally scrollable tabs within narrow viewports. */
@media (max-width: 720px) {
  .experience-tabs { margin-right: 0; padding-right: 0; }
}