/* Typography system — fonts loaded via <link> in HTML for reliable browser rendering */

:root {
  /* Font families */
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
  --script: 'Great Vibes', cursive;

  /* Type scale — 17px base feel, comfortable reading */
  --text-xs: 0.8125rem;   /* 13px — labels, captions */
  --text-sm: 0.9375rem;   /* 15px — secondary, nav */
  --text-base: 1.0625rem; /* 17px — body */
  --text-md: 1.125rem;    /* 18px — lead paragraphs */
  --text-lg: 1.25rem;     /* 20px — card titles */
  --text-xl: 1.375rem;    /* 22px — sub-headings */
  --text-2xl: 1.625rem;   /* 26px — h4 / subsections */
  --text-3xl: 2rem;       /* 32px — h3 / section titles */
  --text-4xl: 2.5rem;     /* 40px — h2 */
  --text-5xl: 3.125rem;   /* 50px — hero h1 */

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;
}

html {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}

/* Heading hierarchy */
h1, h2, h3, h4, h5, h6,
.title,
.hero h1,
.page-hero h1,
.cta h2,
.fees-copy h3,
.areas-title h3,
.service-card h3,
.service-detail-card h3,
.contact-info-card h3,
.form-section h3,
.highlight-banner h3,
.fees-box h3,
.credential-card h4,
.special-title {
  font-family: var(--serif);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}

/* ——— Component typography ——— */

/* Topbar */
.topbar { font-size: var(--text-xs); font-weight: var(--fw-medium); }

/* Header / brand — logo wordmark */
.brand-copy strong {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.12;
  text-transform: uppercase;
}
.brand-copy span {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Navigation */
.nav,
.nav-dropdown-toggle,
.nav-dropdown-menu a {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

/* Buttons */
.btn {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
}

/* Eyebrow / kicker labels */
.eyebrow,
.hero-kicker,
.why-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
}

/* Hero */
.hero h1 {
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 700;
  line-height: 1.15;
  font-family: var(--serif);
}
.hero p {
  font-size: 1.125rem;
  line-height: 1.65;
}
.call-now {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}
.signature .name { font-family: var(--script); font-size: 2.25rem; }
.signature .role {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
}

/* Section titles */
.title { font-size: clamp(1.75rem, 2.5vw, 2.35rem); line-height: var(--leading-tight); }
.subtitle { font-size: var(--text-md); line-height: var(--leading-relaxed); }
.about-copy .title { font-size: var(--text-3xl); }
.services .title { font-size: var(--text-3xl); }
.areas-title h3 { font-size: var(--text-2xl); }
.cta h2 { font-size: var(--text-3xl); }
.fees-copy h3 { font-size: var(--text-2xl); }

/* Body copy blocks */
.about-copy p,
.content-block p,
.fees-copy p,
.fees-card p,
.highlight-banner p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.fees-card h4 {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}

/* Trust strip */
.trust-item {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
}

/* About features */
.about-feature span {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
}

/* Service cards */
.service-card h3,
.service-detail-card h3 {
  font-size: var(--text-xl);
}
.service-card li,
.service-detail-card li {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* Why choose */
.why-card h4 {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
}
.why-card p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Specialized */
.special-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
}
.special-desc {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.special-actions .btn {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
}
.special-card h4 {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
}

/* Chips / service areas */
.chip,
.cities-grid .chip {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

/* Reviews */
.review-card p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.reviewer {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}

/* FAQ */
.faq-q {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}
.faq-a {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* CTA */
.cta p { font-size: var(--text-base); }
.cta-call { font-size: var(--text-base); font-weight: var(--fw-semibold); }

/* Links */
.text-link,
.faq-more a {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}

/* Footer — larger, readable */
.footer { padding: 32px 0 0; }
.footer-main { padding-bottom: 32px; }
.footer-brand strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.footer-brand .small {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.footer-tag {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.footer h4 {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
}
.footer li {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.footer-bottom {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Inner pages */
.page-hero h1 { font-size: var(--text-4xl); }
.page-hero p { font-size: var(--text-md); line-height: var(--leading-relaxed); }
.breadcrumb { font-size: var(--text-xs); }
.content-block .title { font-size: var(--text-3xl); }
.disclaimer-box { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.credential-card h4 { font-size: var(--text-base); }
.credential-card p { font-size: var(--text-sm); }
.fees-box h3 { font-size: var(--text-2xl); }
.fees-box p { font-size: var(--text-base); }
.feature-item span { font-size: var(--text-sm); }
.highlight-banner h3 { font-size: var(--text-2xl); }
.contact-info-card h3 { font-size: var(--text-xl); }
.contact-info-list li { font-size: var(--text-base); }
.business-hours { font-size: var(--text-sm); }
.business-hours h4 { font-size: var(--text-xs); }
.bookings-btn { font-size: var(--text-xs); }
.bookings-note { font-size: var(--text-xs); }
.form-section h3 { font-size: var(--text-xl); }
.form-section .form-desc { font-size: var(--text-sm); }
.form-group label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--sans);
  font-size: var(--text-base);
}
.appointment-note { font-size: var(--text-sm); }

/* Responsive type scale — no tiny overrides */
@media (max-width: 1050px) {
  .hero h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
}

@media (max-width: 900px) {
  .page-hero h1 { font-size: clamp(1.75rem, 5vw, 2.1rem); }
  .brand-copy strong { font-size: 1.05rem; letter-spacing: 0.08em; }
  .brand-copy span { font-size: 0.65rem; }
  .nav, .nav-dropdown-toggle, .nav-dropdown-menu a { font-size: 1rem; }
}

@media (max-width: 600px) {
  html { font-size: 16px; }
  body { font-size: 1rem; }
  .hero h1 { font-size: 1.75rem; }
  .hero p { font-size: 1rem; }
  .title { font-size: 1.65rem; }
  .about-copy .title,
  .content-block .title { font-size: 1.6rem; }
  .page-hero h1 { font-size: 1.6rem; }
  .cta h2 { font-size: 1.55rem; }
  .areas-title h3 { font-size: 1.4rem; }
  .brand-copy strong { font-size: 0.95rem; }
  .brand-copy span { font-size: 0.62rem; }
  .chip, .cities-grid .chip { font-size: 0.875rem; }
  .footer li, .footer-tag { font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .btn:hover,
  .mini-btn:hover,
  .bookings-btn:hover { transform: none; }
}

/* ——— Modern buttons (load last) ——— */
.header .nav-cta {
  padding: 12px 22px;
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.cta-actions .btn {
  min-width: 200px;
}

.hero-actions .btn {
  min-width: 210px;
}

.form-submit .btn,
.form-submit button.btn {
  min-width: 220px;
  border: none;
  font-family: inherit;
}

button.btn {
  appearance: none;
  -webkit-appearance: none;
}

/* Light-background outline variant */
.fees .btn-navy,
.highlight-banner .btn-gold,
.page-cta .btn-gold {
  box-shadow: var(--btn-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.fees .btn-navy {
  box-shadow: var(--btn-shadow-navy), inset 0 1px 0 rgba(255, 255, 255, .15);
}
