/* ==========================================================================
   NCB typography system
   One system font stack (no downloads, no extra font requests) and one fluid
   type scale for every page. This file loads LAST on every page so it wins
   over the older per-section font rules. Colours, layout and behaviour are
   untouched: only family, size, weight, line height and letter spacing.

   Scale: each token grows smoothly from a 320px phone to a 1440px desktop.
   ========================================================================== */
:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --display: var(--font-sans);
  --body: var(--font-sans);
  --lb-serif: var(--font-sans);

  --fs-display: clamp(2.25rem, 1.607rem + 3.214vw, 4.5rem);   /* 36 → 72 */
  --fs-h1: clamp(2rem, 1.571rem + 2.143vw, 3.5rem);           /* 32 → 56 */
  --fs-h2: clamp(1.75rem, 1.393rem + 1.786vw, 3rem);          /* 28 → 48 */
  --fs-h2-sm: clamp(1.5rem, 1.214rem + 1.429vw, 2.5rem);      /* 24 → 40 */
  --fs-h3: clamp(1.125rem, 1.054rem + .357vw, 1.375rem);      /* 18 → 22 */
  --fs-lead: clamp(1rem, .946rem + .268vw, 1.1875rem);        /* 16 → 19 */
  --fs-body: clamp(.9375rem, .902rem + .179vw, 1.0625rem);    /* 15 → 17 */
  --fs-small: clamp(.875rem, .857rem + .089vw, .9375rem);     /* 14 → 15 */
  --fs-label: clamp(.6875rem, .661rem + .134vw, .78125rem);   /* 11 → 12.5 */
  --fs-button: clamp(.8125rem, .795rem + .089vw, .875rem);    /* 13 → 14 */
  --fs-stat: clamp(1.625rem, 1.482rem + .714vw, 2.125rem);    /* 26 → 34 */

  --lh-tight: 1.1;
  --lh-heading: 1.15;
  --lh-title: 1.25;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --ls-heading: -.02em;
  --ls-label: .16em;
}

/* ---------- Base ---------- */
html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body)
}

h1,
h2,
h3,
h4 {
  font-family: inherit
}

h2 {
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading)
}

h3 {
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: -.01em
}

button,
input,
select,
textarea {
  font-family: inherit
}

/* Small capitals labels ("eyebrows") everywhere */
.eyebrow,
.eyebrow-ncb,
.services .eyebrow,
.intro .eyebrow,
.credentials-intro .eyebrow,
.about-hero .eyebrow,
.inspection-hero-content .eyebrow,
.process-section .section-heading .eyebrow,
.contact-info-panel .eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-label);
  text-transform: uppercase
}

/* ---------- Navigation (all pages) ---------- */
.brand-copy strong {
  font-weight: 700
}

.site-nav a {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em
}

.site-nav .dropdown-menu a {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none
}

@media (max-width: 900px) {
  .site-nav a {
    font-size: 1rem
  }

  .site-nav .dropdown-menu a {
    font-size: .9375rem
  }
}

/* ---------- Buttons ---------- */
.button,
.contact-submit,
.project-gallery-link,
.company-explore-link,
.project-callout .button,
.inspection-hero-content .button-light {
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em
}

.text-link {
  font-size: var(--fs-button);
  font-weight: 700
}

/* ---------- Home: hero ---------- */
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em
}

.hero h1 em {
  font-weight: 500
}

.hero-copy {
  font-size: var(--fs-lead);
  line-height: var(--lh-body)
}
/* ---------- Home: credentials strip ---------- */
.inspection-credentials h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-title)
}

.credentials-row p:not(.eyebrow) {
  font-size: var(--fs-body);
  line-height: var(--lh-body)
}

/* ---------- Home: introduction ---------- */
.intro h2 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.025em
}

.intro-text {
  font-size: var(--fs-lead);
  line-height: var(--lh-body)
}

.intro .text-link {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0
}

/* ---------- Home: What we do ---------- */
.services .section-heading h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading)
}

.services .service-number {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0
}

.services .service-card h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-title)
}

.services .service-card p,
.services .service-card ul {
  font-size: var(--fs-small);
  line-height: var(--lh-small)
}

.services .service-card a {
  font-size: var(--fs-body);
  font-weight: 500
}

/* ---------- Home: About NCB ---------- */
.company-copy h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading)
}

.company-copy>p:not(.eyebrow) {
  font-size: var(--fs-body);
  line-height: var(--lh-body)
}

.company-highlights strong {
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em
}

.company-highlights span,
.company-person-label {
  font-size: var(--fs-small);
  line-height: var(--lh-small)
}

/* ---------- Project gallery (home + gallery page + lightbox) ---------- */
.projects-home .projects-heading h2,
.project-gallery-page .projects-heading h2 {
  /* capped by window height so the home gallery still fits in one screen */
  font-size: max(1.625rem, min(var(--fs-h2), 5.2vh));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-heading)
}

.projects-home .projects-subtitle,
.project-gallery-page .projects-subtitle {
  font-size: var(--fs-small);
  line-height: 1.45
}

.projects-home .project-category,
.project-gallery-page .project-category,
.event-process .project-category {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em
}

.projects-home .project-process h3,
.project-gallery-page .project-process h3,
.event-process .project-process-top h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em
}

.projects-home .project-count,
.projects-home .project-counter,
.projects-home .stage-label.stage-caption,
.project-gallery-page .project-count {
  font-size: var(--fs-small)
}

.projects-home .carousel-arrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .04em
}

/* Filter pills stay small so 20 of them fit (documented exception) */
.projects-home .filter-button,
.project-gallery-page .filter-button {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0
}

.lightbox-title {
  font-size: var(--fs-h2-sm);
  font-weight: 700;
  letter-spacing: var(--ls-heading)
}

.stage-title {
  font-size: var(--fs-h3);
  font-weight: 600
}

.lightbox-divider-label,
.compare-image figcaption {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em
}

/* ---------- About page ---------- */
.about-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.025em
}

.about-hero p:not(.eyebrow) {
  font-size: var(--fs-lead);
  line-height: var(--lh-body)
}

.about-section h2,
#team .profile-copy h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading)
}

.intro-grid p,
#team .profile-copy p {
  font-size: var(--fs-body);
  line-height: var(--lh-body)
}

#team .profile-fact strong {
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em
}

#team .profile-fact span,
#team .credentials-note {
  font-size: var(--fs-small);
  line-height: var(--lh-small)
}

/* Our approach — heading capped by window height so the section fits */
#approach h2 {
  font-size: max(1.5rem, min(var(--fs-h2), 5.2vh))
}

#approach .intro-grid p:not(.eyebrow-ncb) {
  font-size: var(--fs-body);
  line-height: var(--lh-body)
}

#approach .principle strong {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-title)
}

#approach .principle span {
  font-size: var(--fs-small);
  line-height: var(--lh-small)
}

/* Credentials & affiliations — heading capped by window height */
#credentials .credentials-intro h2 {
  font-size: max(1.5rem, min(var(--fs-h2), 5.4vh));
  font-weight: 700;
  line-height: var(--lh-heading)
}

#credentials .credentials-intro p:last-child {
  font-size: var(--fs-body);
  line-height: var(--lh-small)
}

#credentials .credential-item h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-title)
}

#credentials .credential-item p {
  font-size: var(--fs-small);
  line-height: var(--lh-small)
}

.yt-meta h3,
.social-callout h3 {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0
}

/* ---------- Service pages ---------- */
.research-hero-content h1,
.renovation-hero-content h1,
.inspection-hero-content h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.025em
}

.research-hero-content .hero-intro,
.renovation-hero-content .hero-intro,
.inspection-hero-content p:not(.eyebrow) {
  font-size: var(--fs-lead);
  line-height: var(--lh-body)
}

.section-heading h2,
.service-detail-section .section-heading h2,
.project-callout h2,
.process-copy h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading)
}

:is(.service-detail-grid, .inspection-service-grid)> :is(.service-detail-card, .inspection-service-card) h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-title)
}

:is(.service-detail-grid, .inspection-service-grid) :is(.service-card-content, .inspection-service-card)>p:not(.service-number),
:is(.service-detail-grid, .inspection-service-grid) :is(.service-details, .inspection-panel) li {
  font-size: var(--fs-small);
  line-height: var(--lh-small)
}

:is(.service-detail-grid, .inspection-service-grid) :is(.details-toggle, .inspection-toggle) {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em
}

/* Navy credentials / "why work with NCB" section — capped by window height */
.process-section .section-heading h2 {
  font-size: max(1.5rem, min(var(--fs-h2-sm), 5.6vh))
}

.process-section .process-grid span {
  font-size: var(--fs-label);
  letter-spacing: .14em
}

.process-section .process-grid h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-title)
}

.process-section .process-grid p {
  font-size: var(--fs-small);
  line-height: var(--lh-small)
}

.project-callout-grid>div:last-child p {
  font-size: var(--fs-body);
  line-height: var(--lh-body)
}

/* ---------- Let's Get Started ---------- */
.contact-form-panel h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading)
}

.contact-intro {
  font-size: var(--fs-body);
  line-height: var(--lh-body)
}

.contact-form label {
  font-size: .8125rem;
  font-weight: 600
}

/* 16px fields stop iPhones zooming in when a field is tapped */
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-size: 1rem
}

.form-message {
  font-size: var(--fs-small)
}

/* ---------- Contact Info ---------- */
.contact-info-panel h2 {
  font-size: var(--fs-h2-sm);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading)
}

.contact-info-panel>div>a {
  font-size: var(--fs-body);
  font-weight: 600
}

.contact-info-panel p:not(.eyebrow) {
  font-size: var(--fs-body)
}

.contact-info-panel .social-heading,
.social-callout h3 {
  font-size: var(--fs-h2-sm);
  font-weight: 700;
  letter-spacing: var(--ls-heading)
}

.contact-info-panel .contact-social p.social-intro {
  font-size: var(--fs-body)
}

:is(.contact-info-panel, .social-callout) .social-row {
  font-size: clamp(1rem, .94rem + .3vw, 1.1875rem);
  letter-spacing: -.005em
}

/* ==========================================================================
   Phone fit — the sections that must fit one screen (home gallery, About
   credentials and approach, navy service-page section) use one step smaller
   text on phones. Everything else follows the scale above.
   ========================================================================== */
@media (max-width: 820px) {
  .projects-home .projects-heading h2 {
    font-size: clamp(1.4375rem, 6.6vw, 2rem)
  }

  .projects-home .projects-subtitle {
    font-size: .8125rem
  }

  .projects-home .project-category {
    font-size: .625rem
  }

  .projects-home .project-process h3 {
    font-size: 1rem
  }

  .projects-home .project-count,
  .projects-home .project-counter,
  .projects-home .stage-label.stage-caption {
    font-size: .8125rem
  }

  .projects-home .filter-button {
    font-size: .65625rem
  }
}

@media (max-width: 700px) {
  #approach h2,
  #credentials .credentials-intro h2 {
    font-size: clamp(1.375rem, 6.2vw, 1.875rem)
  }

  #approach .intro-grid p:not(.eyebrow-ncb) {
    font-size: .875rem;
    line-height: 1.5
  }

  #approach .principle strong,
  #credentials .credential-item h3 {
    font-size: .96875rem
  }

  #approach .principle span,
  #credentials .credential-item p {
    font-size: .84375rem;
    line-height: 1.4
  }

  #credentials .credentials-intro p:last-child {
    font-size: .875rem
  }
}

@media (max-width: 600px) {
  .process-section .section-heading h2 {
    font-size: clamp(1.375rem, 6.2vw, 1.875rem)
  }

  .process-section .process-grid h3 {
    font-size: .96875rem
  }

  .process-section .process-grid p {
    font-size: .8125rem;
    line-height: 1.45
  }

  .process-section .process-grid span {
    font-size: .6875rem
  }
}

/* Short phone screens */
@media (max-width: 700px) and (max-height: 760px) {
  #approach .intro-grid p:not(.eyebrow-ncb) {
    font-size: .8125rem;
    line-height: 1.42
  }

  #approach .principle span,
  #credentials .credential-item p {
    font-size: .8rem;
    line-height: 1.35
  }

  .process-section .process-grid p {
    font-size: .78rem;
    line-height: 1.4
  }
}

/* Home "About NCB Construction": one step smaller on phones so the section fits */
@media (max-width: 700px) {
  .company-copy h2 {
    font-size: clamp(1.375rem, 6.2vw, 1.875rem)
  }

  .company-copy>p:not(.eyebrow) {
    font-size: .875rem;
    line-height: 1.5
  }

  .company-highlights strong {
    font-size: 1.5rem
  }

  .company-highlights span,
  .company-person-label {
    font-size: .8125rem;
    line-height: 1.4
  }
}

/* Home inspection "A whole-property view" — heading capped by window height */
.systems-copy h2 {
  font-size: max(1.5rem, min(var(--fs-h2), 5.2vh));
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading)
}

.systems-copy>p:not(.eyebrow) {
  font-size: var(--fs-body);
  line-height: var(--lh-body)
}

.systems-list span {
  font-size: clamp(.8125rem, .79rem + .12vw, .875rem)
}

.systems-copy .text-link {
  font-size: var(--fs-button)
}

@media (max-width: 650px) {
  .systems-copy h2 {
    font-size: clamp(1.375rem, 6.2vw, 1.875rem)
  }

  .systems-copy>p:not(.eyebrow) {
    font-size: .875rem;
    line-height: 1.5
  }

  .systems-list span {
    font-size: .78rem
  }
}

@media (max-width: 650px) and (max-height: 760px) {
  .systems-copy>p:not(.eyebrow) {
    font-size: .82rem;
    line-height: 1.42
  }
}

/* "How we work" (Project research + Renovation) */
#process .process-copy h2 {
  font-size: max(1.5rem, min(var(--fs-h2), 5.2vh))
}

#process .step>span {
  font-size: var(--fs-label);
  letter-spacing: .1em
}

#process .step h3 {
  font-size: max(1rem, min(var(--fs-h3), 2.6vh));
  font-weight: 600
}

#process .step p {
  font-size: var(--fs-small);
  line-height: 1.5
}

#process .photo-label span {
  font-size: var(--fs-label)
}

#process .photo-label strong {
  font-size: var(--fs-small);
  line-height: 1.35
}

/* Phones: text sits beside the narrow photo column */
@media (max-width: 650px) {
  #process .process-copy h2 {
    font-size: clamp(1.25rem, 5.6vw, 1.75rem)
  }

  #process .step>span {
    font-size: .6875rem;
    letter-spacing: .06em
  }

  #process .step h3 {
    font-size: .98rem
  }

  #process .step p {
    font-size: .84rem;
    line-height: 1.45
  }

  #process .photo-label span {
    font-size: .5625rem;
    letter-spacing: .08em
  }

  #process .photo-label strong {
    font-size: .6875rem;
    line-height: 1.3
  }
}

@media (max-width: 650px) and (max-height: 760px) {
  #process .step p {
    font-size: .8125rem;
    line-height: 1.4
  }
}

/* Home inspection "Why inspections matter" — heading capped by window height */
.inspection-video-copy h2 {
  font-size: max(1.5rem, min(var(--fs-h2), 5.2vh))
}

.inspection-video-copy>p:not(.eyebrow) {
  font-size: var(--fs-body);
  line-height: var(--lh-body)
}

@media (max-width: 760px) {
  .inspection-video-copy h2 {
    font-size: clamp(1.375rem, 6.2vw, 1.875rem)
  }
}

/* Home inspection "An important note" — large bold statement, as in the design */
.inspection-note .inspection-note-copy h2 {
  font-size: max(1.75rem, min(var(--fs-h1), 7vh));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.025em
}

.inspection-note .inspection-note-copy p:not(.eyebrow) {
  font-size: var(--fs-body);
  line-height: 1.75
}

@media (max-width: 650px) {
  .inspection-note .inspection-note-copy h2 {
    font-size: clamp(1.5rem, 7vw, 2rem)
  }

  .inspection-note .inspection-note-copy p:not(.eyebrow) {
    font-size: .9rem;
    line-height: 1.6
  }
}