/* One type family and a shared scale. Colors and effect rules live in style.css. */
:root {
  --type-caption: 0.75rem;
  --type-small: 0.875rem;
  --type-body: 1rem;
  --type-lead: 1.125rem;
  --type-card: 1.25rem;
  --type-panel: 1.5rem;
  --type-section: clamp(1.875rem, 3vw, 2.5rem);
  --type-hero: clamp(2rem, 3.5vw, 3.25rem);
}

body, button, input, select, textarea {
  font-family: var(--font-sans);
}

body { font-size: var(--type-body); line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-sans); text-wrap: balance; }
button, input, select, textarea { font-size: var(--type-body); }
section[id] { scroll-margin-top: var(--header-height); }
section:not(.hero-scroll-track) { padding-block: clamp(64px, 7vw, 104px); }

.hero-content-container { top: calc(var(--header-height) + 40px); bottom: 104px; }
.hero-phase .hero-title,
.hero-phase .hero-phase-title {
  font-size: var(--type-hero);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
.hero-phase .hero-description,
.hero-phase .hero-phase-desc {
  font-size: var(--type-lead);
  line-height: 1.65;
  max-width: 56ch;
}
.phase-3 .hero-cta-group { margin-bottom: 0; }
.phase-tech-pills .tech-pill { font-size: var(--type-small); }
.scroll-cue-text { font-size: var(--type-caption); }

.section-header {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px 64px;
  align-items: end;
  max-width: none;
  text-align: left;
  margin: 0 0 48px;
}
.section-tag {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0;
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
}
.section-title {
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-transform: none;
  margin: 0;
}
.section-subtitle { font-size: var(--type-body); line-height: 1.7; max-width: 58ch; }

.service-title, .step-title {
  font-size: var(--type-card);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 16px;
}
.result-title, .blueprint-title {
  font-size: var(--type-panel);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-transform: none;
  margin-bottom: 16px;
}
.service-desc, .step-desc, .result-desc, .blueprint-desc,
.trust-quote, .faq-answer p, .footer-brand-desc {
  font-size: var(--type-body);
  line-height: 1.7;
}
.trust-quote { font-style: normal; }
.author-name, .direct-value, .faq-question {
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.5;
}
.direct-value { overflow-wrap: anywhere; }
.direct-icon, .faq-icon { flex-shrink: 0; }
.author-role, .footer-link, .footer-bottom, .result-meta-label,
.blueprint-norm-box, .measure-name, .form-feedback, .service-learn-more,
.sim-label, .form-label, .hotspot-btn-select {
  font-size: var(--type-small);
  line-height: 1.5;
}
.measure-ref, .measure-tag, .service-norm-tag, .status-pill,
.blueprint-badge, .direct-label {
  font-size: var(--type-caption);
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.measures-title, .footer-heading {
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}
.sim-value, .result-meta-value { font-size: var(--type-body); font-variant-numeric: tabular-nums; }
.step-number { font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 24px; }
.form-input, .form-textarea, .sim-select { font-size: var(--type-body); line-height: 1.5; min-height: 48px; }
.phase-3 :is(.btn-primary-hero, .btn-secondary-hero),
.btn-submit-form, .btn-whatsapp-full {
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  min-height: 48px;
}

.site-header .brand-title, .brand-title {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.site-header .brand-subtitle, .brand-subtitle { font-size: 0.625rem; line-height: 1.5; letter-spacing: 0.16em; }
.site-header .nav-link { font-size: var(--type-small); font-weight: 500; }
.header-actions .btn-emergency { font-size: var(--type-small); font-weight: 600; }

.services-grid, .trust-grid, .sim-grid { gap: 24px; }
.service-card { display: flex; flex-direction: column; padding: 32px; }
.service-footer { margin-top: auto; padding-top: 24px; gap: 12px; flex-wrap: wrap; }
.service-icon-box { margin-bottom: 24px; }
.sim-card-input, .sim-card-result, .contact-info-card, .contact-form-card, .trust-card { padding: 32px; }
.contact-info-card .status-pill { margin-bottom: 16px; }
.blueprint-container, .contact-grid { gap: 40px; }
.blueprint-details { padding: 32px; }
.timeline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.timeline-step { padding: 28px; }
.faq-container { max-width: none; }
.faq-question { padding: 24px; gap: 24px; }
.faq-answer { padding-inline: 24px; }
.faq-item.active .faq-answer { max-height: none; padding-bottom: 24px; }
.faq-answer p { max-width: 78ch; }
.footer-grid { gap: 32px; }

@media (max-width: 1024px) {
  .section-header { gap: 16px 32px; }
  .timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --type-hero: clamp(1.875rem, 6.8vw, 2.5rem); }
  .hero-content-container { top: calc(var(--header-height) + 24px); bottom: 104px; }
  .hero-phase .hero-description, .hero-phase .hero-phase-desc { font-size: var(--type-body); }
  .section-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .section-title { max-width: 24ch; }
  .sim-card-input, .sim-card-result, .contact-info-card, .contact-form-card,
  .service-card, .trust-card, .blueprint-details, .timeline-step { padding: 24px; }
  .blueprint-container, .contact-grid { gap: 24px; }
  .timeline-grid { grid-template-columns: 1fr; gap: 16px; }
  .faq-question { padding: 20px; gap: 16px; }
  .faq-answer { padding-inline: 20px; }
  .result-meta-row { gap: 12px; flex-wrap: wrap; }
  .measure-item { flex-wrap: wrap; gap: 8px; }
  .measure-info { min-width: 120px; }
  .phase-tech-pills .tech-pill { font-size: var(--type-caption); }
}

@media (max-height: 740px) and (min-width: 769px) {
  .hero-phase .hero-title, .hero-phase .hero-phase-title { font-size: clamp(2rem, 5.5vh, 2.75rem); }
  .hero-phase .hero-description, .hero-phase .hero-phase-desc { font-size: var(--type-body); }
}

/* Light editorial breaks between the atmospheric dark sections. */
.section-light {
  --bg-card: #ffffff;
  --bg-card-hover: #fff7f7;
  --text-main: #211c20;
  --text-muted: #5e545b;
  --text-dim: #6e626a;
  background: #fff;
  color: var(--text-main);
}
.section-light :is(.section-title, .service-title, .faq-question) { color: var(--text-main); }
.section-light .section-tag { color: #b81725; }
.section-light :is(.service-norm-tag, .service-learn-more) { color: #b81725; }
.section-light .service-card { border-color: #e7dce0; }
.section-light .service-card:hover { border-color: var(--red-primary); }
.section-light .faq-item { border-color: #e7dce0; }
.section-light .faq-item.active {
  border-color: var(--red-primary);
  box-shadow: 0 8px 25px rgba(122, 12, 18, 0.12);
}
.contact-link { display: block; text-decoration: none; }
.contact-link:hover { color: var(--red-vibrant); text-decoration: underline; text-underline-offset: 4px; }
.contact-link:focus-visible { outline: 2px solid var(--red-vibrant); outline-offset: 4px; }
.site-header .brand-title, .brand-title { font-size: 1.25rem; letter-spacing: -0.025em; }
.brand-title > span { display: block; font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1.5; }
.site-header .brand-subtitle, .brand-subtitle { font-size: 0.5625rem; letter-spacing: 0.09em; }

:root { --header-height: 112px; }
.brand-logo .costta-logo { display: block; width: 104px; height: 90px; object-fit: contain; }
.site-footer .costta-logo { width: 176px; height: 152px; }
.form-help { margin: 10px 0 16px; font-size: var(--type-small); line-height: 1.6; color: var(--text-muted); }
.file-input { display: block; width: 100%; min-width: 0; font-size: var(--type-small); color: var(--text-main); }
.file-input::file-selector-button { min-height: 44px; padding: 10px 16px; margin-right: 12px; border: 1px solid var(--border-active); border-radius: 6px; background: var(--bg-card); color: var(--text-main); font: inherit; cursor: pointer; }
.file-input:focus-visible, .attachment-action:focus-visible { outline: 2px solid var(--red-vibrant); outline-offset: 4px; }
.attachment-list { list-style: none; display: grid; gap: 8px; }
.attachment-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; }
.attachment-list li span { overflow-wrap: anywhere; min-width: 0; font-size: var(--type-small); }
.attachment-action { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: 6px; background: transparent; color: var(--text-main); font: inherit; font-size: var(--type-small); cursor: pointer; }
.attachment-action:hover { border-color: var(--red-vibrant); }
.contact-fallback { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.contact-fallback p { margin-bottom: 16px; font-size: var(--type-small); line-height: 1.6; }
.contact-fallback :is(a, button) { margin: 0 8px 12px 0; font-size: var(--type-small); }
.contact-fallback[hidden], #contact-message-copy[hidden] { display: none; }
.contact-form-card :disabled { opacity: 0.6; cursor: wait; }
.form-feedback:empty { display: none; }
@media (max-width: 768px) {
  :root { --header-height: 96px; }
  .site-header .brand-logo .costta-logo { width: 84px; height: 74px; }
  .attachment-list li { align-items: flex-start; gap: 8px; }
}