/* Skin: foundry. Classic local-contractor look: near-white ground, tight 4px
   geometry, brand-color buttons and brand-color bands, conventional blocks.
   Calibrated to the measured V1 house style (R3 to R5 in
   docs/design-reference/1click-measured-design-2026-08-12.md) and re-measured
   live on 2026-08-12 against the primary reference. Geometry and art direction
   only; every color flows from the derived palette tokens.
   Copied to src/generated/skin.css by the build orchestrator.

   Nothing here is lifted from the reference. Every selector is one of our own
   class names from docs/design-reference/skin-hooks.md and every rule is
   written fresh. What is shared is the measured NUMBERS (radii, shadow
   geometry, padding, container width, nav height, type scale). Deviations from
   the task brief's starting values, and the contrast work behind every new
   color pairing, are recorded in docs/design-reference/checklist-foundry.md. */

[data-skin='foundry'] {
  /* Live reference computes 4px on buttons, cards and images (the reference
     pack recorded 3px; the difference is one pixel and the live value wins). */
  --radius: 4px;
  --radius-card: 4px;
  --radius-button: 4px;
  --radius-image: 4px;

  /* Measured: 1200px container, 48px gutter, 80px section rhythm, 86px nav. */
  --container-max: 75rem;
  --container-pad: clamp(1.25rem, 3.75vw, 3rem);
  --section-pad: clamp(3.5rem, 8vw, 5rem);
  --nav-height: 5.4rem;
  --nav-height-mobile: 4.5rem;

  /* One shadow family across buttons and cards, as the reference has. */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 6px 22px rgba(0, 0, 0, 0.16);
  --shadow-button: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-button-hover: 0 6px 20px rgba(0, 0, 0, 0.16);
  --motion: 0.3s ease-in-out;

  /* Alternating bands are a 2 to 3 percent step off the page ground, not the
     full bg-alt jump. Both ends are contrast-guaranteed grounds, so anything
     legible on bg and bg_alt is legible on the blend. */
  --band-quiet: color-mix(in srgb, var(--color-bg-alt) 58%, var(--color-bg));

  /* Angled section divider: 29px at 1280px, matching the reference's hero
     edge, and proportionally shorter on narrow screens. */
  --wedge-h: clamp(14px, 2.3vw, 30px);

  /* Flat ink scrim over hero photography (the reference uses a flat 70%). */
  --hero-scrim: color-mix(in srgb, var(--color-bg-dark) 72%, transparent);

  /* Brand-tinted label ink for small link text. --color-accent alone is only
     guaranteed at 3:1 on the page ground, which is short of the 4.5:1 that
     small informational text needs; this blend clears 4.5:1 on bg and bg_alt
     across all six presets in both themes (worst 5.39:1). */
  --label-ink: color-mix(in srgb, var(--color-accent) 70%, var(--color-heading));

  /* Universal five-star amber, deliberately not brand-colored. */
  --star: #d99a06;
}

/* ---------------------------------------------------------------- type --
   Montserrat ships 400/600/700/800 and Inter 400/500/600 (data/fonts.json),
   so no weight below asks for something the pairing cannot render. The
   reference sets headings at weight 700, zero tracking, 1.12 line height and
   title case, which is the single loudest signal of this house style. */

[data-skin='foundry'] body { font-size: 1.125rem; line-height: 1.6; }
[data-skin='foundry'] h1,
[data-skin='foundry'] h2,
[data-skin='foundry'] h3,
[data-skin='foundry'] h4 {
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.12;
  text-transform: capitalize;
}
[data-skin='foundry'] h1 { font-size: clamp(30px, 4vw, 52px); }
[data-skin='foundry'] h2 { font-size: clamp(26px, 3.05vw, 39px); }
[data-skin='foundry'] h3 { font-size: clamp(20px, 1.8vw, 23px); }
[data-skin='foundry'] .lead,
[data-skin='foundry'] .subhead { font-size: 1.2rem; }
[data-skin='foundry'] .card-body p { font-size: 1rem; }

/* ------------------------------------------------------------ eyebrows --
   Small spaced caps above each H2, in heading ink rather than accent (the
   reference does the same, and accent is not guaranteed at 4.5:1 on our
   grounds). The brand color survives as the little diamond marker, which is
   decorative and only needs 3:1. */

[data-skin='foundry'] .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 0.7rem;
}
[data-skin='foundry'] .eyebrow::before {
  content: '';
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--color-accent);
  transform: rotate(45deg);
}
[data-skin='foundry'] .credentials .eyebrow,
[data-skin='foundry'] .calc-embed .eyebrow,
[data-skin='foundry'] .reviews .eyebrow { justify-content: center; }

/* --------------------------------------------------------------- ground --
   Near-white page, quiet alternating bands closed by hairline rules. */

[data-skin='foundry'] .container {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
}
[data-skin='foundry'] section { padding: var(--section-pad) 0; position: relative; }
[data-skin='foundry'] .intro-section { padding-bottom: 1rem; }
/* Banding mirrors base.css line 127 exactly, including its `nth-of-type(even)`
   selector. That selector counts every sibling <section>, not just rich ones,
   so the alternation depends on how many sections a page emits before the rich
   run: the roofing homepage puts the first rich block at an even index, which
   is what makes the banding land correctly there and on the service, area and
   about pages (all verified in the browser). It is deliberately not "fixed"
   here, because base owns the same selector for the bg-alt fill: changing only
   the skin's copy would leave the two rules banding different sections. The
   robust fix is a class emitted by RichSections.astro, consumed by base and
   every skin at once. */
[data-skin='foundry'] .services-grid-section,
[data-skin='foundry'] .reviews,
[data-skin='foundry'] .credentials,
[data-skin='foundry'] .calc-embed,
[data-skin='foundry'] .rich-section:nth-of-type(even) {
  background: var(--band-quiet);
}

/* ------------------------------------------------------- angled dividers --
   The reference cuts every section boundary with a flat triangular wedge: a
   full-bleed shape thin at the left edge and the wedge's full height at the
   right, painted in the ground color of the section BELOW the boundary. It
   measures 29px tall at 1280px on the hero edge (2.3% of the viewport width)
   and shrinks with the viewport.

   Ours is built the other way round so the color is always self-evident: each
   section carries the wedge on its own top edge, offset upward into whatever
   sits above it, and fills it with its own ground. Nothing has to know what
   follows it, so the sequence stays correct on every page and in every theme.
   The clip path is the same geometry the reference's path describes: the fill
   starts 90% of the way down at the left edge and at the very top on the
   right. This is background-on-background decoration with no text over it, so
   no contrast pairing is introduced. */

[data-skin='foundry'] .trustbar,
[data-skin='foundry'] .site-footer { position: relative; }

[data-skin='foundry'] .whyus::before,
[data-skin='foundry'] .process-section::before,
[data-skin='foundry'] .financing::before,
[data-skin='foundry'] .faq-section::before,
[data-skin='foundry'] .gallery::before,
[data-skin='foundry'] .coverage-section::before,
[data-skin='foundry'] .value-section::before,
[data-skin='foundry'] .bullets-section::before,
[data-skin='foundry'] .contact-section::before,
[data-skin='foundry'] .intro-section::before,
[data-skin='foundry'] .hail-stats::before,
[data-skin='foundry'] .rich-section::before,
[data-skin='foundry'] .services-grid-section::before,
[data-skin='foundry'] .reviews::before,
[data-skin='foundry'] .credentials::before,
[data-skin='foundry'] .calc-embed::before,
[data-skin='foundry'] .rich-section:nth-of-type(even)::before,
[data-skin='foundry'] .areas-grid-section::before,
[data-skin='foundry'] .cta-band::before,
[data-skin='foundry'] .trustbar::before,
[data-skin='foundry'] .site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--wedge-h));
  height: var(--wedge-h);
  clip-path: polygon(0 90%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
/* Ground color per wedge, one group per ground. Each section class appears in
   exactly one group, so nothing here can win the wrong color by specificity. */
[data-skin='foundry'] .whyus::before,
[data-skin='foundry'] .process-section::before,
[data-skin='foundry'] .financing::before,
[data-skin='foundry'] .faq-section::before,
[data-skin='foundry'] .gallery::before,
[data-skin='foundry'] .coverage-section::before,
[data-skin='foundry'] .value-section::before,
[data-skin='foundry'] .bullets-section::before,
[data-skin='foundry'] .contact-section::before,
[data-skin='foundry'] .intro-section::before,
[data-skin='foundry'] .hail-stats::before,
[data-skin='foundry'] .rich-section::before { background: var(--color-bg); }
[data-skin='foundry'] .services-grid-section::before,
[data-skin='foundry'] .reviews::before,
[data-skin='foundry'] .credentials::before,
[data-skin='foundry'] .calc-embed::before,
[data-skin='foundry'] .rich-section:nth-of-type(even)::before { background: var(--band-quiet); }
[data-skin='foundry'] .areas-grid-section::before,
[data-skin='foundry'] .cta-band::before { background: var(--color-accent); }
[data-skin='foundry'] .trustbar::before,
[data-skin='foundry'] .site-footer::before { background: var(--color-bg-dark); }
[data-skin='foundry'] .section-intro { max-width: 42rem; }
/* Long-form section copy keeps a readable measure instead of running the full
   1104px content width, which is what the reference's two-column blocks do. */
[data-skin='foundry'] .rich-section p,
[data-skin='foundry'] .rich-section li,
[data-skin='foundry'] .intro-section p,
[data-skin='foundry'] .legal p { max-width: 46rem; }
[data-skin='foundry'] .reviews { text-align: center; }
/* .section-intro is a block, so centring it is a margin job; .reviews-subline
   is the flex row and needs the justification. */
[data-skin='foundry'] .reviews .section-intro { margin-inline: auto; }
[data-skin='foundry'] .reviews-subline { justify-content: center; margin-inline: auto; }

/* ---------------------------------------------------------------- hero --
   Photo under a flat ink scrim, copy left, two buttons. */

[data-skin='foundry'] .hero {
  background: var(--band-quiet);
  text-align: left;
  padding: clamp(3.5rem, 9vw, 6rem) 0;
}
[data-skin='foundry'] .hero-compact { padding: clamp(2.5rem, 6vw, 4rem) 0; }
[data-skin='foundry'] .hero-image {
  background:
    linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    var(--hero-img) center / cover no-repeat;
}
[data-skin='foundry'] .hero-content { max-width: 46rem; }
[data-skin='foundry'] .hero .subhead { margin: 1rem 0 0; max-width: 36rem; }
[data-skin='foundry'] .hero-actions { justify-content: flex-start; margin-top: 2rem; }
[data-skin='foundry'] .hero-stats { justify-content: flex-start; }
/* Over the scrim, base tints sub-copy with body-alt, which is only
   contrast-guaranteed against a flat bg-dark and drops to 3.80:1 against a
   72% scrim over a pale photo. The near-white heading token holds 5.23:1
   there in the worst of the twelve preset/theme combinations. */
[data-skin='foundry'] .hero-image .subhead,
[data-skin='foundry'] .hero-image .lead,
[data-skin='foundry'] .hero-image .breadcrumbs { color: var(--color-heading-alt); }
/* Plain proof line with a small marker instead of a glass pill. */
[data-skin='foundry'] .hero-badge {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}
[data-skin='foundry'] .hero-image .hero-badge {
  background: none;
  border: 0;
  color: var(--color-heading-alt);
}
[data-skin='foundry'] .hero-badge-dot {
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--star);
}
/* The service-area credential line is 18px at weight 600, below the WCAG
   large-text threshold on both counts, so it needs the full 4.5:1. On those
   pages the hero is `hero hero-compact` and the line sits on a flat pale
   ground, where accent bottoms out at 3.68:1 across the twelve preset and
   theme combinations. The heading token is contract-guaranteed there. */
[data-skin='foundry'] .hero-cred { color: var(--color-heading); }
[data-skin='foundry'] .hero-image .hero-cred { color: var(--color-heading-alt); }
[data-skin='foundry'] .stat-tile { border-radius: var(--radius-card); }
[data-skin='foundry'] .stat-suffix-star { color: var(--star); }

/* ------------------------------------------------------------- buttons --
   4px corners, 13px by 24px, weight 700, one soft drop shadow, no lift. */

[data-skin='foundry'] .btn {
  border-radius: var(--radius-button);
  border-width: 1px;
  padding: 0.8125rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  transition: background var(--motion), color var(--motion),
    border-color var(--motion), box-shadow var(--motion);
}
[data-skin='foundry'] .btn-lg { padding: 1rem 2rem; font-size: 1rem; }
[data-skin='foundry'] .btn-primary,
[data-skin='foundry'] .btn-inverse { box-shadow: var(--shadow-button); }
[data-skin='foundry'] .btn-primary:hover,
[data-skin='foundry'] .btn-inverse:hover { box-shadow: var(--shadow-button-hover); }
/* Secondary action: light fill, 2px brand edge, brand-tinted label. The
   reference's secondary button is exactly this, white on the photo hero. */
[data-skin='foundry'] .btn-glass,
[data-skin='foundry'] .hero-image .btn-glass {
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  color: var(--label-ink);
  box-shadow: var(--shadow-button);
  padding: 0.75rem 1.4375rem;
}
[data-skin='foundry'] .btn-glass.btn-lg,
[data-skin='foundry'] .hero-image .btn-glass.btn-lg { padding: 0.9375rem 1.9375rem; }
[data-skin='foundry'] .btn-glass:hover,
[data-skin='foundry'] .hero-image .btn-glass:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* --------------------------------------------------------------- cards --
   Page-ground fill, hairline border, 4px corners, one soft shadow, and a
   shadow-only hover. Base's 3px accent cap is dropped: the reference has no
   colored rule on its cards. */

[data-skin='foundry'] .card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion);
}
[data-skin='foundry'] .card:hover {
  transform: none;
  box-shadow: var(--shadow-card-hover);
}
[data-skin='foundry'] .card-body { padding: 1.25rem 1.4rem 1.4rem; }
[data-skin='foundry'] .card-cta { color: var(--label-ink); }
/* Demo briefs ship no service photography, so the placeholder is visible far
   more often than it should be. Base blends accent into secondary, which
   lands on an off-brand hue; this keeps it inside the brand ramp. */
[data-skin='foundry'] .card-img-placeholder,
[data-skin='foundry'] .whyus-img-placeholder {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 88%, black),
    color-mix(in srgb, var(--color-accent) 45%, var(--color-bg-alt)));
  opacity: 1;
}
[data-skin='foundry'] .icon-badge { border-radius: var(--radius-card); }
[data-skin='foundry'] .whyus-img,
[data-skin='foundry'] .gallery-grid figure,
[data-skin='foundry'] .hours-card,
[data-skin='foundry'] .review-card { border-radius: var(--radius-image); }
[data-skin='foundry'] .whyus-img,
[data-skin='foundry'] .review-card { box-shadow: var(--shadow-card); }
[data-skin='foundry'] .coverage-card {
  border-radius: var(--radius-card);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}
[data-skin='foundry'] .gallery-grid figure:hover img { transform: none; }

/* ------------------------------------------------------------- reviews --
   Quote-marked cards, gold stars, squared avatar. */

[data-skin='foundry'] .review-card {
  border: 1px solid var(--color-border);
  padding: 1.5rem 1.6rem;
  text-align: left;
}
[data-skin='foundry'] .stars { color: var(--star); }
[data-skin='foundry'] .avatar { border-radius: var(--radius-card); }
[data-skin='foundry'] .review-card cite {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

/* ----------------------------------------------------------- brand band --
   The service-area block and the closing call to action are solid brand
   panels, the way both live V1 references carry one mid-page and one at the
   end. Flat accent, never a lightened gradient: --color-on-accent is the only
   token the palette guarantees at 4.5:1 on accent, and that guarantee is void
   the moment the ground is tinted away from accent (a 10% white blend drops
   the worst case to 3.99:1). */

[data-skin='foundry'] .areas-grid-section,
[data-skin='foundry'] .cta-band {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 0;
}
[data-skin='foundry'] .areas-grid-section h2,
[data-skin='foundry'] .areas-grid-section p,
[data-skin='foundry'] .areas-grid-section .eyebrow,
[data-skin='foundry'] .cta-band h2,
[data-skin='foundry'] .cta-band p { color: var(--color-on-accent); }
[data-skin='foundry'] .areas-grid-section .eyebrow::before { background: var(--color-on-accent); }
/* City links sit straight on the band as a plain list, the way the reference
   lists its towns. On-accent is the one token guaranteed at 4.5:1 there, and
   a translucent fill under it would void that guarantee (on-accent at 10%
   over accent already drops the worst case to 3.99:1), so the tiles stay
   unfilled and hover moves the border instead. */
[data-skin='foundry'] .areas-grid-section .area-links a {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-on-accent) 32%, transparent);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--color-on-accent);
  font-weight: 600;
}
[data-skin='foundry'] .areas-grid-section .area-links a:hover {
  background: transparent;
  border-color: var(--color-on-accent);
  color: var(--color-on-accent);
  box-shadow: none;
}
/* Base draws the outline button in heading-alt, which sinks to 1.87:1 on a
   light-theme accent band. On-accent is the guaranteed pair. The hover state
   is left to base: it fills with heading-alt and prints bg-dark on it, a pair
   the palette guarantees at 4.5:1 regardless of what the band under it is. */
[data-skin='foundry'] .cta-band .btn-outline {
  border-color: var(--color-on-accent);
  color: var(--color-on-accent);
}
[data-skin='foundry'] .cta-actions { margin-top: 2rem; }

/* ------------------------------------------------------------- process --
   Numbered squares rather than circles, to stay with the tight geometry. */

[data-skin='foundry'] .step-num {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-card);
  font-family: var(--font-heading);
  margin-bottom: 0.8rem;
}

/* ----------------------------------------------------------------- faq --
   Full-width rows with a brand-tinted rule and a plus affordance. */

[data-skin='foundry'] .faq {
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
  padding: 0.5rem 0;
}
[data-skin='foundry'] .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  padding: 0.8rem 0;
}
[data-skin='foundry'] .faq summary::-webkit-details-marker { display: none; }
[data-skin='foundry'] .faq summary::after {
  content: '+';
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
  flex: none;
}
[data-skin='foundry'] .faq[open] summary::after { content: '\2212'; }

/* ------------------------------------------- credentials, chips, pills --
   Everything that base rounds to a pill is squared off to the 4px scale. */

[data-skin='foundry'] .badge,
[data-skin='foundry'] .chip {
  border-radius: var(--radius-card);
  border-color: var(--color-border);
}
[data-skin='foundry'] .badge:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}
[data-skin='foundry'] .area-links a {
  border-radius: var(--radius-card);
  box-shadow: none;
  font-weight: 600;
}
[data-skin='foundry'] .area-links a:hover {
  color: var(--label-ink);
  box-shadow: var(--shadow-card);
}

/* ----------------------------------------------------------- financing --
   Same panel, squared, with the brand edge kept. */

[data-skin='foundry'] .financing .container-narrow {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------- calc embed --
   Hairline frame in place of base's gradient glow ring. */

[data-skin='foundry'] .calc-frame-wrap {
  background: var(--color-border);
  padding: 1px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
[data-skin='foundry'] .calc-frame-wrap iframe { border-radius: 3px; }

/* --------------------------------------------------------------- chrome --
   Taller white header with a hairline rule; footer keeps the ink ground so
   the brand band at the CTA stays the one brand slab at the foot of the page
   (R5 carries a brand footer, R3 a pale gray one; ink reads with both). */

[data-skin='foundry'] .header-row { min-height: var(--nav-height); }
[data-skin='foundry'] .site-header { border-bottom-color: var(--color-border-light); }
[data-skin='foundry'] .site-nav { gap: 1.7rem; }
[data-skin='foundry'] .site-nav a { font-weight: 500; }
[data-skin='foundry'] .brand-logo { max-height: 3rem; }
[data-skin='foundry'] .footer-head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
/* A hairline keeps the ink footer from merging into the brand CTA band above
   it when the brand color is itself a deep blue. */
[data-skin='foundry'] .site-footer {
  padding-top: 3.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-heading-alt) 20%, transparent);
}

/* ---------------------------------------------------------- sticky bar --
   The bar is dark, so its secondary button takes the light-on-dark treatment
   instead of the light-ground one used everywhere else. */

[data-skin='foundry'] .sticky-cta .btn {
  border-radius: var(--radius-button);
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  box-shadow: none;
  white-space: nowrap;
}
[data-skin='foundry'] .sticky-cta .btn-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-heading-alt);
}
[data-skin='foundry'] .sticky-cta .btn-glass:hover { background: rgba(255, 255, 255, 0.16); }
[data-skin='foundry'] .sticky-cta-place { font-size: 0.8rem; white-space: nowrap; }

/* ------------------------------------------------------------- mobile --- */

@media (max-width: 820px) {
  [data-skin='foundry'] .header-row { min-height: var(--nav-height-mobile); gap: 0.9rem; }
  [data-skin='foundry'] .site-nav { top: var(--nav-height-mobile); }
  /* Our .btn padding is larger than base's, so the compact header button has
     to be restated here or the header overflows at phone widths. */
  [data-skin='foundry'] .header-actions .btn-primary {
    padding: 0.5em 0.9em;
    font-size: 0.92rem;
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  [data-skin='foundry'] .header-actions .btn-primary { display: none; }
  [data-skin='foundry'] .hero-actions .btn { width: 100%; text-align: center; }
  [data-skin='foundry'] .btn-lg { padding: 0.9375rem 1.5rem; }
  [data-skin='foundry'] .card-body { padding: 1.1rem 1.2rem 1.3rem; }
}