/* ============================================================
   genstonecompanies.com — the 2026 visual language
   ============================================================
   genstone-base carries the 2027 design; this site's content was authored
   against the 2026 one. These are the treatments that differ — all of them,
   found by diffing the two themes declaration by declaration.

   It is a short file on purpose. Two rules kept it that way:

   1. Override DECLARATIONS, never whole rules.

      The first draft lifted each differing rule wholesale, and it broke two
      things. A rule copied here arrives AFTER everything the parent loaded,
      so a parent modifier of equal specificity that relied on source order
      loses to the base rule it was written to override — that turned
      headings on blue grounds black, because the markup is
      `class="gs-heading-lg gs-heading-lg--white"` and the parent breaks that
      0-1-0 tie by declaring `--white` second.

      It also restated `.gs-btn { padding: 13px 26px }`, which defeated
      `.gs-btn--lg`'s padding: the parent sets that through --gs-btn-pad-*
      custom properties, and a literal padding here ignores them. Large
      buttons quietly shrank.

   2. Check the parent's mechanism before overriding a value. Most of what
      looked different was not: the parent's button padding and border width
      resolve to the same numbers through tokens, and `text-transform` moved
      from `--lg` up to `.gs-btn`. Only the values below actually differ.

   NOT here, deliberately: .site-header, .site-main and the hero statements
   bar. Those were ported INTO genstone-base under scoped selectors of their
   own, and re-stating the 2026 versions would fight the port.

   The hero carousel is not here either — its 59 differing declarations are a
   redesign, not a re-skin, and it is handled by the parent's hero style
   option instead.
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────────
   Pills, not squares. That is the whole difference: the parent's padding and
   border width already resolve to this site's values through its tokens. */

.gs-btn {
  border-radius: 50px;
}

/* .gs-btn--primary is orange here. genstone-base groups it with --blue in one
   rule, which is why a selector-keyed diff missed this: the selector STRING
   differs, so it read as "only in 2026" rather than as a value to override.
   The hero's primary CTA hardcodes this class, so without it that button
   comes out blue. */
.gs-btn--primary {
  background: var(--gs-orange);
  color: var(--gs-white);
  border: 0;
}
.gs-btn--primary:hover {
  background: var(--gs-orange-dark);
}

/* Grey ghost. The parent retired it in favor of Ghost (Primary) and the brand
   palette, so this site carries its rules (the saved value stays `ghost-navy`;
   see genstone_btn_color in inc/design.php). */
.gs-btn--ghost-navy {
  background: transparent;
  color: #4a4a4a;
  border-color: #4a4a4a;
}
.gs-btn--ghost-navy:hover {
  background: var(--gs-navy);
  color: var(--gs-white);
}

/* Solid white, as the parent had it before it became White (Primary): blue text,
   a light-gray hover. */
.gs-btn--white {
  background: var(--gs-white);
  color: var(--gs-blue);
  border-color: var(--gs-white);
}
.gs-btn--white:hover,
.gs-btn--white:focus-visible {
  background: var(--gs-light);
  color: var(--gs-blue-dark);
  border-color: var(--gs-light);
}

/* No trailing arrow on regular buttons. The parent now adds one to every CTA
   link; on this site only the large size has ever had it. The new-tab icon is
   kept, and so are the hero buttons' own arrows. */
a.gs-btn:not(.gs-btn--lg):not([data-gs-newtab]):not(.hero-carousel__ctas .gs-btn)::after {
  content: none;
}

/* Hero copy width. This site's Classic hero gave the copy column 2.5 of 4.5
   parts of the container (about 56%: 756px at 1440 wide, 889px from 1760 up),
   with or without a right-hand column. The parent now splits a hero with no
   right-hand column evenly (50/50, narrower copy). Restored here, for desktop,
   for heroes that did not pick their own Copy Column Max Width or center their
   copy, and not for ones showing the slide teaser (which widens the copy on
   purpose). */
@media (min-width: 1025px) {
  .hero-carousel:not(.hero-carousel--has-teaser) .hero-carousel__slide--style-classic:not(.hero-carousel__slide--has-col-max):not(.hero-carousel__slide--align-center) .hero-carousel__inner:not(.hero-carousel__inner--has-secondary) {
    grid-template-columns: 2.5fr 2fr;
  }
  /* The parent also caps the copy column itself at the slash panel's width
     (--gs-hero-col-w, roughly 493px at 1440 and 627px at 1920), which has no
     meaning on a full-bleed photo. Released, so the column fills its track. */
  .hero-carousel .hero-carousel__slide--style-classic:not(.hero-carousel__slide--has-col-max):not(.hero-carousel__slide--align-center) .hero-carousel__col:first-child {
    max-width: none;
  }
}

/* Hero overlay. The parent's overlay now fades to clear across the copy width;
   this site keeps the fade it has always had: the chosen color easing to about
   half strength by 60% and holding there. Three classes, so it wins over the
   parent's desktop and mobile versions. */
.hero-carousel .hero-carousel__slide .hero-carousel__overlay {
  background-image: linear-gradient(90deg, var(--gs-hero-overlay-c) 0%, color-mix(in srgb, var(--gs-hero-overlay-c) 52%, transparent) 60%);
}

/* ── Backgrounds ─────────────────────────────────────────────
   Both grounds are a noise texture over a banded gradient, banded
   differently in the two themes. */

.gs-bg--light {
  background-image:
}

.gs-bg--blue {
  background-image:
}

/* ── Headings and eyebrows ───────────────────────────────────
   Both flip colour, and both have a parent modifier of equal specificity
   that has to keep winning — see rule 1 above. */

.gs-heading-lg {
  color: var(--gs-text-dark);
}
/* Re-stated so it still beats the rule above, as it does in the parent. */
.gs-heading-lg--white {
  color: var(--gs-white);
}

.gs-eyebrow {
  /* A module's Eyebrow Color (Design tab) sets --gs-eyebrow-c on the element. */
  color: var(--gs-eyebrow-c, var(--gs-blue));
}
/* Same reason as .gs-heading-lg--white. */
.gs-eyebrow--light {
  color: var(--gs-eyebrow-c, var(--gs-white));
}

/* The underline is a hand-drawn masked stroke here, not the parent's flat
   2px bar, so the mask and the geometry it needs come across together. */
.gs-eyebrow::after {
  height: 14px;
  bottom: -18px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 15' fill='none' preserveAspectRatio='none'><path d='M0.112489 7.62587C44.2792 2.62587 145.812 -4.37413 198.612 7.62587C176.779 5.79253 131.212 3.22585 123.612 7.62587C127.112 6.47738 144.112 11.1259 147.112 12.1259' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 15' fill='none' preserveAspectRatio='none'><path d='M0.112489 7.62587C44.2792 2.62587 145.812 -4.37413 198.612 7.62587C176.779 5.79253 131.212 3.22585 123.612 7.62587C127.112 6.47738 144.112 11.1259 147.112 12.1259' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: -1;
}

/* ── Gravity Forms ───────────────────────────────────────────
   The form buttons mirror .gs-btn, so they follow it back to pills and to
   the orange ramp. The parent already declares these !important; matching
   that is the only way to reach the same declarations, not escalation. */

.gform-theme--foundation .gform_button,
.gform-theme--foundation .gform_next_button,
.gform-theme--framework .gform_button,
.gform-theme--framework .gform_next_button {
  padding: 16px 32px !important;
  border-radius: 50px !important;
  border: 2px solid transparent !important;
  background: linear-gradient(135deg, var(--gs-orange) 0%, var(--gs-orange-dark) 100%) !important;
}

.gform-theme--foundation .gform_button:hover,
.gform-theme--foundation .gform_next_button:hover,
.gform-theme--framework .gform_button:hover,
.gform-theme--framework .gform_next_button:hover {
  background: linear-gradient(135deg, var(--gs-orange-dark) 0%, var(--gs-orange) 100%) !important;
}

.gform-theme--foundation .gform_previous_button,
.gform-theme--framework .gform_previous_button {
  border-radius: 50px !important;
}

/* ── Hero ────────────────────────────────────────────────────
   The Classic hero itself lives in genstone-base — it is a whole design, not
   a re-skin, and belongs with the theme that offers the choice. This is the
   one part of it that is this site's preference rather than the design's:
   the parent draws the tagline in orange, and here it reads white and
   regular-weight over the photograph.

   Same specificity as the parent's rule (0-2-0), loaded after it, so it wins
   on source order without out-specifying anything. */

.hero-carousel--style-classic .hero-carousel__tagline {
  color: var(--gs-white);
  font-weight: 400;
}

/* ── Universal Content ───────────────────────────────────────
   The only block-level difference outside the hero. */

.universal-content__col-body ul {
  list-style: disc;
}