/* Shared local type system. Load after each page's own styles. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

body:is([data-page="genesis"], [data-page="demo-forma"], [data-page="demo-raiz"], [data-page="text"]) {
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-weight: 800;
  font-family: var(--sans);
  font-size: 16px;
  font-synthesis: none;
  font-optical-sizing: auto;
}

body[data-page="demo-forma"] { --heading-weight: 600; }
body[data-page="demo-raiz"] { --heading-weight: 750; }
body[data-page="text"] { --heading-weight: 700; }

body:is([data-page="genesis"], [data-page="demo-forma"], [data-page="demo-raiz"], [data-page="text"]) :is(h1, h2, h3) {
  font-family: var(--serif);
  font-style: normal;
  font-weight: var(--heading-weight);
  letter-spacing: -.04em;
  text-wrap: balance;
}

body:is([data-page="genesis"], [data-page="demo-forma"], [data-page="demo-raiz"], [data-page="text"]) :is(h1, h2, h3) em {
  font-style: normal;
  font-weight: inherit;
}

body:is([data-page="genesis"], [data-page="demo-forma"], [data-page="demo-raiz"], [data-page="text"]) :is(button, input, select, textarea) {
  font-family: var(--sans);
}

body:is([data-page="genesis"], [data-page="demo-forma"], [data-page="demo-raiz"], [data-page="text"]) :is(input, select, textarea) {
  font-size: 16px;
  line-height: 1.5;
}

/* These are reading and control labels, not decorative glyphs. */
body:is([data-page="genesis"], [data-page="demo-forma"], [data-page="demo-raiz"], [data-page="text"]) :is(label, small, summary, nav a, .button, .text-link, .demo-bar, .demo-bar a, .eyebrow, .menu-toggle) {
  font-size: 14px;
}

body:is([data-page="genesis"], [data-page="demo-forma"], [data-page="demo-raiz"], [data-page="text"]) .eyebrow {
  letter-spacing: .08em;
  line-height: 1.6;
}

/* Main brand: compact, upright display type and readable supporting copy. */
body[data-page="genesis"] :is(.brand > span, .mini-nav > span:first-child, .example-wordmark, .price) {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.04em;
}

body[data-page="genesis"] :is(.service-list p, .section-heading > p, .example-caption p, .examples-note, .payment-plan > p, .process-grid p, details > p, .contact-copy > p:not(.eyebrow)) {
  font-size: 15px;
  line-height: 1.7;
}

body[data-page="genesis"] :is(.quiet, .art-topline, .browser-chrome, .mini-nav > span:last-child, .mini-label, .mini-button, .mini-bottom, .art-caption, .hero-foot p, .item-number, .example-tag, .example-caption > span, .package-label, .inclusion-checks li, .payment-row, .payment-row small, .price span, .contact-direct, .contact-email, .brief-form label, .brief-form > p, .footer > p, .footer > div, .footer > small) {
  font-size: 14px;
}

body[data-page="genesis"] .package-copy .price-note,
body[data-page="genesis"] .contact-copy .contact-small {
  font-size: 14px !important;
}

body[data-page="genesis"] .price span {
  font-family: var(--sans);
  font-weight: 500;
}

body[data-page="genesis"] .process-grid li > span {
  font-family: var(--serif);
  font-weight: 700;
}

body[data-page="genesis"] .mini-hero img,
body[data-page="genesis"] .browser-preview {
  border-radius: 2px;
}

/* Forma keeps a lighter display rhythm, with an architectural image crop. */
body[data-page="demo-forma"] :is(.wordmark, .intro-strip p, .service-number, .service h3, .service-price strong, .studio-bottom p, .faq-heading) {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.025em;
}

body[data-page="demo-forma"] .hero-visual img {
  border-radius: 2px;
}

body[data-page="demo-forma"] :is(.hero-footnote, .image-label, .hero-caption, .section-heading > p, .service p, .service-price small, .example-note, .gallery figcaption, .gallery figcaption span:first-child, .hours-panel > p, .hours div, .hours-panel .example-note, details p, .form-disclosure, .form-status, .footer-top p, .footer-bottom, .dialog-head, .dialog-note) {
  font-size: 14px;
  line-height: 1.65;
}

body[data-page="demo-forma"] .hero-caption span:last-child {
  font-style: normal;
}

/* Raíz uses a more emphatic display weight, preserving its natural palette. */
body[data-page="demo-raiz"] :is(.brand > span, .service-name, .principles h3, .form-intro, .footer-brand > span) {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 750;
  letter-spacing: -.04em;
}

body[data-page="demo-raiz"] :is(.hero-photo, .site-nav .nav-cta, .button, .hero-visual figcaption) {
  border-radius: 2px;
}

body[data-page="demo-raiz"] :is(.hero-lead, .hero-note p, .hero-visual figcaption, .photo-side-note, .interlude-inner, .section-heading > p:last-child, .service-number, .service-short, .service-content, .section-disclaimer, .approach-lead, .tiny-label, .principles article > span, .principles p, .faq-heading > p:last-child, .faq-list details p, .contact-copy > p:not(.eyebrow), .contact-destination strong, .contact-destination div > span, .form-note, .form-status, .fallback-link, noscript p, .site-footer p, .footer-back) {
  font-size: 14px;
  line-height: 1.65;
}

/* Retain the existing responsive grids; adjust only typographic density. */
@media (max-width: 680px) {
  body[data-page="genesis"] :is(.mini-nav > span:last-child, .mini-label, .mini-button, .mini-bottom, .art-topline) {
    letter-spacing: 0;
  }

  body[data-page="demo-forma"] :is(h1, h2),
  body[data-page="demo-raiz"] :is(h1, h2) {
    letter-spacing: -.035em;
  }
}
.icon{width:20px;height:20px;display:inline-block;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}

/* Comfortable pointer and keyboard targets. */
body[data-page] .text-link,body[data-page] .footer-back{min-height:44px;align-items:center}
body[data-page] .menu-toggle{min-height:44px}
body[data-page] .demo-bar a{display:inline-flex;align-items:center;min-height:44px}