/* Compact default typography. All content remains scalable through rem units. */
body {font-size: .875rem;}
.hero-description, .intro-copy>p:not(.eyebrow), .value-card p,
.service-info p:not(.eyebrow), .section-heading>p, .featured-copy>p:not(.eyebrow),
.project-caption p, .project-details-content, .case-study dd,
.package-intro, .package-list li, .package-guidance p,
.about-copy>p:not(.eyebrow), .step p, .process-top p, .contact-copy>p:not(.eyebrow),
.project-form>p:not(.form-note):not(.form-status),
.detail-grid li, .tech-flow p, .detail-wide p, .detail-cta p, .faq-group details p {
  font-size: .875rem;
  line-height: 1.65;
}
.hero .hero-description, .lead {font-size: .9375rem; line-height: 1.7;}
.hero h1 {font-size: 3.75rem; line-height: 1.07; letter-spacing: -.045em;}
h2, .intro-copy h2, .section-heading h2, .process-top h2, .faq-intro h2, .contact-copy h2 {
  font-size: 2.375rem;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.about-copy h2, .development-projects .section-heading h2 {font-size: 1.875rem;}
h3, .service-info h3, .value-card h3, .project-caption h3, .package-card h3 {font-size: 1.375rem; line-height: 1.25; letter-spacing: -.025em;}
.featured-copy h3 {font-size: 2rem;}
.step h3, .project-form h3 {font-size: 1.25rem;}
.hero h1 em {letter-spacing: inherit;}
.hero h1 em::after {height: 8px; bottom: 3px;}
.field-label, .footer-top p, .footer-bottom, .footer, .page-end, .hero-person p, .hero-person b {font-size: .8125rem;}
.detail-hero h1, .hero:has(>h1) h1 {font-size: 3rem;}
.header~main .hero h1 {font-size: 3rem;}
.detail-hero h1 {letter-spacing: -.04em;}
.content h2, .detail-wide h2, .detail-cta h2, .faq-group>h2 {font-size: 1.375rem;}
.detail-grid h2, .aside h2 {font-size: 1.125rem;}
.detail-hero {padding-block: 32px 36px;}
.hero:has(>h1) {padding-block: 48px 32px;}
.section-head :is(h1,h2), .intro h1 {font-size: 1.5rem; line-height: 1.25;}
.demo-top h3 {font-size: 1.375rem;}
.quality-panel h4 {font-size: 1.125rem;}
.quality-context :is(span,p), .quality-kpis :is(span,small), .quality-bar strong,
.quality-panel table, .footnote, .small, .summary-list div {font-size: .8125rem;}
.hero-person {margin-top: 24px;}
.section-heading {margin-bottom: 30px;}
.hero {padding-block: 42px 48px;}
@media (max-width: 1100px) {
  .hero h1 {font-size: 3rem;}
  .site-header .nav {gap: 12px;}
}
@media (max-width: 620px) {
  .hero h1 {font-size: 2.25rem;}
  h2, .intro-copy h2, .section-heading h2, .process-top h2, .faq-intro h2, .contact-copy h2 {font-size: 1.75rem;}
  .about-copy h2, .development-projects .section-heading h2 {font-size: 1.625rem;}
  .featured-copy h3 {font-size: 1.75rem;}
  .header~main .hero h1, .hero:has(>h1) h1, .detail-hero h1 {font-size: 2rem;}
  .section-head :is(h1,h2), .intro h1 {font-size: 1.375rem;}
  .site-header .brand {min-width: min(100%,9rem);}
  .site-header .menu-button {width: 6.5rem;}
  .site-header .nav {gap: 12px;}
  .header .brand, .topbar .brand {flex: 1;}
  .hero {padding-block: 30px 38px;}
}

/* Keep the size controls usable even when the content is strongly enlarged. */
.text-size-control {position: relative; flex: none; font: 14px/1.4 var(--font-body);}
.text-size-toggle {display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #54788a; border-radius: 10px; background: #14283a; color: #edf6f8; font: 600 18px/1 var(--font-body); cursor: pointer;}
.text-size-toggle:hover, .text-size-toggle[aria-expanded="true"] {border-color: #80d4c9; color: #80d4c9;}
.text-size-toggle svg {width: 10px; height: 10px;}
.text-size-panel {position: absolute; z-index: 60; inset: calc(100% + 10px) 0 auto auto; width: min(260px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 16px; border: 1px solid #54788a; border-radius: 14px; background: #14283a; color: #edf6f8; box-shadow: 0 14px 40px #0005; transform: translate(var(--text-panel-shift,0px),var(--text-panel-shift-y,0px));}
.text-size-heading {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: #edf6f8; font-size: 14px; font-weight: 600;}
.text-size-value {font-size: 13px; font-weight: 500; color: #b4c7d1;}
.text-size-buttons {display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px;}
.text-size-buttons button {min-width: 44px; min-height: 44px; border: 1px solid #80d4c9; border-radius: 8px; background: #102536; color: #edf6f8; font: 600 18px/1 var(--font-body); cursor: pointer;}
.text-size-buttons button[data-text-action="reset"] {font-size: 13px;}
.text-size-buttons button:hover {background: #224354;}
.text-size-buttons button[aria-disabled="true"] {border-color: #54788a; color: #b4c7d1; cursor: default;}
.text-size-hint {margin: 12px 0 0; color: #b4c7d1; font-size: 12px; line-height: 1.5;}
.text-size-status {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
html {scroll-padding-top: calc(var(--site-header-height,88px) + 16px);}
.nav-links {max-height: calc(100dvh - var(--site-header-height,88px));}
.project-form :is(input,select,textarea) {scroll-margin-top: calc(var(--site-header-height,88px) + 16px);}