/* ========== Typography system only ========== */
/*
  Luxury type layer for Renovation 786.
  Does not change layout, colours (except body text readability),
  section structure, spacing tokens, cards, or images.
*/

:root {
  --fs-caption: 0.875rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.125rem;
  --fs-btn: 1rem;
  --fs-nav: 1rem;
  --fs-h5: 1.5rem;
  --fs-h4: 1.75rem;
  --fs-h3: 1.75rem;
  --fs-h2: 2.125rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: 2.375rem;
  --fs-hero: 2.5rem;
  --fs-xl: 1.5rem;
  --fs-xs: 0.875rem;
  /* Card titles — restrained so multi-column grids stay balanced */
  --fs-card-title: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
}

@media (min-width: 768px) {
  :root {
    --fs-base: 1.125rem;   /* 18 */
    --fs-md: 1.125rem;
    --fs-sm: 1rem;         /* 16 */
    --fs-lg: 1.25rem;      /* 20 */
    --fs-nav: 1.0625rem;   /* 17 */
    --fs-h5: 1.5rem;       /* 24 */
    --fs-h4: 1.875rem;     /* 30 */
    --fs-h3: 2.375rem;     /* 38 */
    --fs-h2: 3.25rem;      /* 52 */
    --fs-2xl: 3.25rem;
    --fs-3xl: 3.5rem;
    --fs-hero: 4rem;       /* 64 */
    --fs-xl: 1.875rem;
    --fs-card-title: clamp(1.1875rem, 1.05rem + 0.35vw, 1.375rem);
  }
}

/* ---- Base ---- */
body {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.8;
  letter-spacing: 0.0125em;
  color: var(--color-body-text, #4A4A4A);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Utility classes ---- */
.type-display { font-family: var(--font-display), serif; }
.type-body { font-family: var(--font-body), sans-serif; }
.type-h1 { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -1px; line-height: 1.1; }
.type-h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; }
.type-h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; }
.type-h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; }
.type-h5 { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -0.15px; line-height: 1.3; }
.type-lead { font-size: var(--fs-lg); line-height: 1.8; letter-spacing: 0.0125em; }
.type-caption { font-size: var(--fs-caption); line-height: 1.6; letter-spacing: 0.02em; }
.type-measure { max-width: var(--measure, 43.75rem); }

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6,
.hero h1,
.page-hero h1,
.section__header h2,
.cta-band h2,
.about-intro__copy h2,
.why-grid h2,
.service-card__body h3,
.project-card__overlay h3,
.value-card h3,
.faq-item__btn,
.testimonial blockquote p,
.trust-metrics__title,
.hero-stat__value,
.process-step h3,
.process-card__title,
.inclusion-card h3,
.why-point h3 {
  font-family: var(--font-display), serif;
  font-weight: 600;
  color: var(--color-primary);
  text-wrap: balance;
}

h1,
.hero h1,
.page-hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 1.15rem;
}

h2,
.section__header h2,
.cta-band h2,
.about-intro__copy h2,
.why-grid h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-bottom: 1.1rem;
}

/* Section / prose h3 only — card titles use --fs-card-title below */
h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: var(--fs-h4);
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin-bottom: 0.7rem;
}

h5, h6 {
  font-size: var(--fs-h5);
  letter-spacing: -0.15px;
  line-height: 1.3;
  margin-bottom: 0.65rem;
}

.hero h1,
.page-hero h1,
.section--dark h2,
.section--dark h3,
.cta-band h2,
.why-grid-section h2,
.why-grid-section h3,
.project-card__overlay h3,
.trust-metrics__title,
.hero-stat__value {
  color: var(--color-ivory);
}

/* ---- Body / paragraphs ---- */
p,
.section__header p,
.about-intro__copy p,
.content-prose p,
.faq-item__content p,
.hero__lead,
.form-note,
.footer-brand p,
.testimonial-disclaimer,
.contact-card p,
.service-card__body p,
.value-card p {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.0125em;
  color: var(--color-body-text, #4A4A4A);
}

.section__header p,
.about-intro__copy > p,
.content-prose p,
.hero__lead,
.faq-item__content p {
  max-width: var(--measure, 43.75rem);
}

.hero__lead {
  font-size: var(--fs-lg);
  color: var(--color-text-light);
  line-height: 1.75;
}

.section--dark .section__header p,
.section--dark p,
.cta-band p,
.why-grid-section.section--dark .why-point p,
.footer-brand p {
  color: var(--color-text-light);
}

.section__header--center p {
  margin-inline: auto;
}

/* ---- Section titles rhythm (type margins only) ---- */
.section__header {
  margin-bottom: 2rem;
}

.section__header .eyebrow {
  margin-bottom: 0.85rem;
}

.section__header h2 + p {
  margin-top: 0.35rem;
}

/* ---- Eyebrows / labels / captions ---- */
.eyebrow,
.project-card__cat,
.hero-stat__label,
.trust-strip__item,
.filter-btn,
.breadcrumb,
.form-field label,
.logo__tag {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.eyebrow {
  text-transform: uppercase;
}

.project-card__meta,
.testimonial__meta span,
.contact-map__note,
.carousel-dots,
.testimonial-disclaimer,
.form-note,
.form-field .error-msg {
  font-size: var(--fs-caption);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* ---- Navigation ---- */
.nav-desktop > a,
.nav-desktop .nav-dropdown > button {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.nav-desktop > a:hover,
.nav-desktop .nav-dropdown > button:hover,
.nav-desktop > a.is-active,
.nav-desktop .nav-dropdown > button.is-active {
  color: var(--color-primary);
  opacity: 1;
}

.nav-mega a,
.nav-mobile a,
.nav-mobile__group > button {
  font-family: var(--font-body), sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.nav-mega a {
  font-size: 0.95rem;
  font-weight: 400;
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.2;
}

.btn--ghost {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---- Cards / UI text ---- */
.service-card__body h3,
.value-card h3,
.inclusion-card h3 {
  font-size: var(--fs-card-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 0.45rem;
}

.project-card__overlay h3 {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.service-card__link,
.related-services a {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.trust-points li {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.trust-metrics__title {
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.trust-metrics__text {
  font-size: var(--fs-caption);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.hero-stat__value {
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.why-point h3 {
  font-family: var(--font-display), serif;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.why-point p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  letter-spacing: 0.0125em;
}

.why-point__num {
  font-family: var(--font-display), serif;
  font-weight: 600;
  letter-spacing: -0.5px;
}

/* ---- Testimonials ---- */
.testimonial blockquote p {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.5;
  max-width: none;
}

.testimonial__meta strong {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- FAQ ---- */
.faq-item__btn {
  font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.3;
  color: var(--color-primary);
}

.faq-item__content p {
  font-size: var(--fs-base);
  line-height: 1.8;
}

/* ---- Forms ---- */
.form-field label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.contact-form-wrap h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.3px;
}

.process-step h3 {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.25rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

/* Size controlled in style.css process breakpoints so the timeline stays compact */
.process-card__title {
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 0;
}

.material-item h3 {
  font-family: var(--font-body), sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 0.35rem;
  color: var(--color-primary);
}

/* ---- Footer ---- */
.footer-col h3 {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: var(--color-bronze);
}

.footer-col a,
.footer-contact li,
.footer-bottom p,
.footer-bottom a {
  font-family: var(--font-body), sans-serif;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.7;
}

.footer-col ul {
  display: grid;
  gap: 0.45rem;
}

.footer-brand p {
  font-size: var(--fs-sm);
  line-height: 1.75;
  max-width: 22rem;
}

.site-footer__bg-word {
  font-family: var(--font-display), serif;
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* ---- Process / materials / misc ---- */
.process-step p,
.process-card__text,
.material-item p,
.inclusion-card p,
.areas-list li {
  font-size: var(--fs-sm);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.content-prose h2 {
  font-size: var(--fs-h3);
  margin-top: 2rem;
  margin-bottom: 0.85rem;
}

.content-prose h3 {
  font-size: var(--fs-h4);
  margin-top: 1.5rem;
  margin-bottom: 0.7rem;
}

.content-prose li {
  font-size: var(--fs-base);
  line-height: 1.8;
  letter-spacing: 0.0125em;
  color: var(--color-body-text, #4A4A4A);
}

.thank-you-box h1 {
  font-size: var(--fs-h2);
}

.quote-tab {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Avoid awkward wraps on key titles */
.hero h1,
.page-hero h1,
.section__header h2 {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 479px) {
  .hero h1 {
    font-size: 2.5rem;
    letter-spacing: -0.8px;
  }

  .section__header h2 {
    font-size: 2.125rem;
  }
}