/* --------------------------------------------------------------------------
   Company Facts — page layer

   Loaded via $pageStyles in company-facts.php, same as case-studies.css and
   process.css. Everything the page could take from gsroofing.css it does take:
   .gs-cat-filter, .gs-award-grid-sm, .gs-logo-strip-sm, .gs-card, .gs-section,
   .gs-band-lead and the theme utilities are untouched. What is left here is the
   banner and figures strip (the Case Studies recipe), the label/value reference
   list, and the small amount of trim the new blocks need. Every colour is a
   palette token from gsroofing.css; no new tokens.
   -------------------------------------------------------------------------- */

.company-facts-page { --gsroof-ink-soft: #3A4250; --gsroof-body: #505050; background: var(--gsroof-cream); }

/* The theme's default paragraph and link colours are pale for body copy on a
   light ground; these two follow the palette rule that text-level accent on
   light is the deep blue. */
.company-facts-page .gs-band-lead { color: var(--gsroof-ink-soft); }
.company-facts-page .cf-verify a,
.company-facts-page .cf-card-cta a,
.company-facts-page .cf-questions a { color: var(--gsroof-primary); text-decoration: underline; }
.company-facts-page .cf-verify a:hover,
.company-facts-page .cf-card-cta a:hover,
.company-facts-page .cf-questions a:hover { color: var(--gsroof-primary-dark); }

/* --------------------------------------------------------------------------
   Banner and figures strip
   -------------------------------------------------------------------------- */

/* Extra bottom padding is the room the figures strip laps into. */
.cf-hero { background: linear-gradient(90deg, rgba(35,42,53,.97), rgba(35,42,53,.85) 45%, rgba(35,42,53,.35)), url('../images/resized/webp/roofing-hero-1440.webp') center / cover; }
.cf-hero > .container { min-height: 400px; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; padding-bottom: 110px; }
.cf-hero > .container::before, .cf-hero > .container::after { content: none; }
.cf-hero-row { display: flex; align-items: center; flex-wrap: wrap; }
.cf-hero-row::before, .cf-hero-row::after { content: none; }
.cf-hero .gs-hero-eyebrow { color: var(--gsroof-accent); font-size: 12px; letter-spacing: 2px; margin-bottom: 10px; }
.cf-hero h1 { color: #fff; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.12; text-transform: uppercase; margin: 0 0 18px; letter-spacing: -.5px; }
.cf-hero h1 span { display: block; color: var(--gsroof-accent); }
.cf-hero-lead { max-width: 560px; color: #fff; font-size: 18px; line-height: 1.5; margin-bottom: 0; }

/* Banner aside: the three facts that pin down which company this is. Hidden
   below 992px (hidden-xs hidden-sm in the markup), where the lead paragraph
   carries the same ground. Carries its own ground so contrast does not rely
   on the scrim. */
.cf-hero-id { list-style: none; margin: 0; padding: 20px 24px; background: rgba(35,42,53,.72); border-left: 3px solid var(--gsroof-accent); border-radius: 4px; }
.cf-hero-id li { padding: 7px 0; color: #fff; font-size: 15px; line-height: 1.5; }
.cf-hero-id li + li { border-top: 1px solid rgba(255,255,255,.14); }
.cf-hero-id span { display: block; margin-bottom: 2px; color: var(--gsroof-accent); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }

/* Figures strip. The theme pads every section container; here that would eat
   the overlap. */
.company-facts-page #at-a-glance > .container { padding-top: 0; padding-bottom: 0; }
.cf-stats { position: relative; z-index: 2; margin-top: -64px; overflow: hidden; background: #fff; border: 1px solid var(--gsroof-line); border-radius: 12px; box-shadow: 0 18px 40px rgba(35,42,53,.08); }
.cf-stats > .row { margin: 0; }
.cf-stats > .row > [class*='col-'] { padding: 0; }
.cf-stat { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 28px 16px 26px; text-align: center; }
.cf-stat-icon { margin-bottom: 10px; color: var(--gsroof-primary); font-size: 24px; line-height: 1; }
.cf-stat-value { display: block; margin-bottom: 8px; color: var(--gsroof-primary-dark); font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.cf-stat-label { display: block; font-size: 14px; line-height: 1.45; color: var(--gsroof-body); }

/* Flex at every width: with floats, a taller first tile (two-line label)
   snags the third and leaves a hole in the 2x2. Bootstrap's clearfix
   pseudo-elements would become flex items, so they are switched off. */
.cf-stats > .row { display: flex; flex-wrap: wrap; }
.cf-stats > .row::before, .cf-stats > .row::after { content: none; }

@media (min-width: 992px) {
  .cf-stats > .row > [class*='col-'] + [class*='col-'] { border-left: 1px solid var(--gsroof-line); }
}

@media (max-width: 991px) {
  /* Two by two: a hairline between the pairs. */
  .cf-stats > .row > [class*='col-']:nth-child(even) { border-left: 1px solid var(--gsroof-line); }
  .cf-stats > .row > [class*='col-']:nth-child(n + 3) { border-top: 1px solid var(--gsroof-line); }
}

@media (max-width: 767px) {
  .cf-hero { background-position: 65% center; }
  .cf-hero > .container { min-height: 0; padding-top: 48px; padding-bottom: 88px; }
  .cf-hero-lead { font-size: 17px; }
  .cf-stats { margin-top: -48px; }
  .cf-stat { padding: 20px 12px 18px; }
  .cf-stat-value { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   Jump nav
   -------------------------------------------------------------------------- */

/* Slim rule-bounded band. Deliberately not sticky: the fixed menuzord nav is
   already overhead, and a second sticky bar under it eats a third of a phone
   screen. */
.cf-jump { padding: 22px 0; border-bottom: 1px solid var(--gsroof-line); }

/* The global pill lands around 33px tall — under the 44px tap target these
   need as the page's primary navigation on a phone. */
.cf-jump .gs-cat-filter a { padding: 13px 20px; line-height: 1.3; }

@media (max-width: 767px) {
  .cf-jump { padding: 18px 0; }
  /* Left-aligned and scrollable rather than centre-wrapped, so the pills do
     not wrap into a ragged block on a 375px screen. */
  .cf-jump .gs-cat-filter { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .cf-jump .gs-cat-filter > li { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   The facts — grouped definition lists
   -------------------------------------------------------------------------- */

/* Same shape as .gs-card-row, including the negative bottom margin that
   absorbs the last visual row's cell spacing. */
.cf-fact-groups { display: flex; flex-wrap: wrap; margin-bottom: -30px; }
.cf-fact-groups::before, .cf-fact-groups::after { content: none; }

/* Equal-height columns so two groups side by side line their rules up. */
.cf-fact-col { display: flex; margin-bottom: 30px; }

.cf-fact-group { flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid var(--gsroof-line); border-radius: 8px; padding: 28px 30px 22px; }

.cf-fact-group-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--gsroof-line); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--gsroof-ink); }

.cf-fact-group-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--gsroof-stone); color: var(--gsroof-primary); font-size: 15px; }

/* Reference list. Two columns from 768px — a narrow label rail and the detail
   beside it — and plain stacked pairs below that, where a 130px rail would
   leave the detail too narrow to read. */
.cf-facts { margin: 0; }
.cf-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gsroof-primary); line-height: 1.45; }
.cf-facts dd { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--gsroof-ink-soft); }
.cf-facts dd strong { color: var(--gsroof-ink); }

@media (max-width: 767px) {
  .cf-fact-group { padding: 24px 22px 18px; }
  .cf-facts dt { margin-bottom: 3px; }
  .cf-facts dd + dt { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gsroof-line); }
}

@media (min-width: 768px) {
  /* No column-gap: the row rule has to run unbroken across both columns. The
     label's breathing room comes from its own padding-right. */
  .cf-facts { display: grid; grid-template-columns: 144px minmax(0, 1fr); }
  .cf-facts dt { padding-top: 2px; padding-right: 14px; }
  .cf-facts dt:nth-child(n + 3),
  .cf-facts dd:nth-child(n + 3) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gsroof-line); }
}

/* --------------------------------------------------------------------------
   Awards — the verification panel and the platform strip
   -------------------------------------------------------------------------- */

.cf-verify { margin-top: 44px; padding: 24px 28px; background: #fff; border: 1px solid var(--gsroof-line); border-left: 3px solid var(--gsroof-primary); border-radius: 6px; }
.cf-verify-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gsroof-primary); }
.cf-verify-title .fa { margin-right: 7px; }
.cf-verify ul { list-style: none; margin: 0; padding: 0; }
.cf-verify li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.65; color: var(--gsroof-ink-soft); }
.cf-verify li + li { margin-top: 9px; }
.cf-verify li:before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--gsroof-line-strong); }
.cf-platforms { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--gsroof-line); }

/* Show the review platforms in their original colours at all times. */
.company-facts-page .cf-platforms .gs-logo-item img {
  filter: none;
  opacity: 1;
}

@media (max-width: 767px) {
  .cf-verify { margin-top: 32px; padding: 20px; }
  .cf-platforms { margin-top: 32px; padding-top: 26px; }
}

/* --------------------------------------------------------------------------
   Official profiles
   -------------------------------------------------------------------------- */

.cf-profiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* The whole tile is the link, so the tap target is the tile rather than the
   few words inside it. */
.cf-profiles a { display: flex; align-items: center; gap: 14px; height: 100%; min-height: 72px; padding: 16px 18px; background: #fff; border: 1px solid var(--gsroof-line); border-radius: 8px; color: var(--gsroof-ink); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.cf-profiles a:hover, .cf-profiles a:focus { border-color: var(--gsroof-primary); box-shadow: 0 6px 16px rgba(35,42,53,.08); transform: translateY(-2px); text-decoration: none; }
.cf-profiles a:focus-visible { outline: 3px solid var(--gsroof-primary); outline-offset: 2px; }
.cf-profile-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--gsroof-stone); color: var(--gsroof-primary); font-size: 16px; }
.cf-profile-text { flex: 1 1 auto; min-width: 0; }
.cf-profile-label { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.cf-profile-note { display: block; font-size: 12.5px; line-height: 1.4; color: var(--gsroof-body); }
.cf-profile-out { flex: 0 0 auto; font-size: 12px; color: var(--gsroof-line-strong); }
.cf-profiles a:hover .cf-profile-out, .cf-profiles a:focus .cf-profile-out { color: var(--gsroof-primary); }

@media (max-width: 991px) { .cf-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cf-profiles { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Company identity
   -------------------------------------------------------------------------- */

.cf-identity-title { margin: 0 0 12px; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--gsroof-ink); }

/* Pushed to the bottom so two cards of unequal copy still line their links up
   (.gs-card is already a column flexbox). */
.cf-card-cta { margin: auto 0 0; padding-top: 14px; font-weight: 600; }
.cf-card-cta .fa { margin-left: 6px; font-size: 12px; }

/* The disambiguation panel is the one place a reader may be about to get the
   company wrong, so it carries a warning accent rather than reading as another
   neutral card. */
.cf-identity-warn { border-left: 3px solid var(--gsroof-cta-dark); }
.cf-identity-warn .gs-card-icon { background: rgba(242,201,76,.18); color: #7A5F0C; }

/* The shared card hover darkens the icon tile; keep both identity icons legible. */
.company-facts-page .cf-identity:hover .gs-card-icon,
.company-facts-page .cf-identity:focus-within .gs-card-icon {
  background: var(--gsroof-primary);
  color: var(--gsroof-white);
}

.cf-questions { margin: 10px 0 0; text-align: center; font-size: 15px; color: var(--gsroof-ink-soft); }

/* Respect a reduced-motion preference for the one transform on this page. */
@media (prefers-reduced-motion: reduce) {
  .cf-profiles a { transition: none; }
  .cf-profiles a:hover, .cf-profiles a:focus { transform: none; }
}