/*
 * Forge: the Theme Kit in Forge's own look. Linked after themes/_shared/assets/css/kit.css, so the variables set here
 * replace its defaults for every block and module section.
 *
 * Strong and workmanlike: every corner is square, headings are bold condensed capitals (--forge-heading-weight, the
 * heaviest weight of the font palette, set by the layout), and buttons are chunky slabs with two clipped corners.
 * Cards are plain plates with a heavy bar along the top and a small accent tab in the corner; big icons sit in square
 * accent tiles; photos carry a heavy accent bar along the bottom; step numbers and figures are big; section headings
 * stand over a short measuring tape. Dark bands have angled edges, accent bands are edged with hazard tape, and muted
 * bands are faintly ruled like graph paper. This file may load nothing, so every shape here is drawn with gradients
 * and clip-path.
 */

.kit-root {
  --forge-ink: var(--text-primary, #1d2023);
  --forge-cut: 0.7rem;
  --kit-radius: 0;
  --kit-radius-sm: 0;
  --kit-media-radius: 0;
  --kit-button-radius: 0;
  --kit-input-radius: 0;
  --kit-chip-radius: 0;
  --kit-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent), 0 16px 30px -22px color-mix(in srgb, #000 40%, transparent);
  --kit-shadow-hover: 0 2px 4px color-mix(in srgb, #000 10%, transparent), 0 26px 40px -22px color-mix(in srgb, #000 50%, transparent);
  --kit-heading-weight: var(--forge-heading-weight, 700);
  --kit-heading-tracking: 0.005em;
  --kit-heading-transform: uppercase;
  --kit-button-weight: var(--forge-heading-weight-light, 600);
  --kit-button-tracking: calc(0.06em * var(--forge-face-scale, 0.7));
  --kit-button-transform: uppercase;
  --kit-eyebrow-tracking: 0.14em;
  --kit-star: var(--accent, #ffc20e);
  --kit-focus: var(--accent-ink, #7d5c00);
  --kit-card-pad: clamp(1.4rem, 2.2vw, 1.9rem);
  --kit-gap-medium: 1.5rem;
  --kit-gap-large: clamp(2rem, 4vw, 3rem);
  --kit-gutter: var(--forge-gutter, clamp(1.25rem, 4vw, 3rem));
  --kit-width-normal: 74rem;
  --kit-width-narrow: 46rem;
  --kit-width-wide: 90rem;
  --kit-pad-normal: clamp(3.75rem, 7.5vw, 6.5rem);
  --kit-pad-compact: clamp(2.25rem, 4.5vw, 3.5rem);
  --kit-pad-spacious: clamp(5rem, 10vw, 8.5rem);
  --kit-speed: 180ms;
  --kit-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------ Bands */

/* Muted bands are faintly ruled like graph paper. */
.kit-section--muted {
  background-image:
    linear-gradient(color-mix(in srgb, var(--kit-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--kit-text) 5%, transparent) 1px, transparent 1px);
  background-position: center top;
  background-size: 2.5rem 2.5rem;
}

/* Dark steel bands lean: their top and bottom edges are angled (the transparent borders make room for the slope), with a
   soft sheen across the steel. */
.kit-section--inverse {
  --forge-angle: clamp(1rem, 3vw, 2.75rem);
  border-block: var(--forge-angle) solid transparent;
  background-image: linear-gradient(115deg, color-mix(in srgb, var(--on-primary, #fff) 7%, transparent), transparent 45%);
  clip-path: polygon(0 var(--forge-angle), 100% 0, 100% calc(100% - var(--forge-angle)), 0 100%);
}

/* Accent bands are edged top and bottom with hazard tape. */
.kit-section--accent {
  background-image: var(--forge-hazard), var(--forge-hazard);
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 0.6rem, 100% 0.6rem;
}

/* A photograph under a dark steel wash, with a heavy accent bar along the bottom. */
.kit-section--image {
  background-image: linear-gradient(color-mix(in srgb, var(--primary, #1d2023) 74%, transparent), color-mix(in srgb, var(--primary, #1d2023) 66%, transparent)), var(--kit-section-image, none);
}

.kit-section--image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(40%, 24rem);
  height: 0.5rem;
  background: var(--accent, #ffc20e);
}

.kit-slide--image {
  background-image: linear-gradient(color-mix(in srgb, var(--primary, #1d2023) 72%, transparent), color-mix(in srgb, var(--primary, #1d2023) 64%, transparent)), var(--kit-slide-image, none);
}

/* On a band the bars and outlines follow the band's text colour, and the main button stays a solid slab: the accent on
   a dark band or a photograph, dark steel on the accent band. */
.kit-section--inverse,
.kit-section--image,
.kit-slide {
  --forge-ink: var(--kit-section-fg);
}

.kit-section--accent {
  --forge-ink: var(--on-accent, #1d2023);
}

/* ------------------------------------------------------------------ Headings and labels */

.kit-heading {
  line-height: 1.02;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: calc(clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem) * var(--forge-face-fit, 0.85));
  line-height: 0.98;
}

.kit-heading--2 {
  font-size: calc(clamp(2.05rem, 1.4rem + 2.6vw, 3.6rem) * var(--forge-face-fit, 0.85));
  line-height: 1;
}

.kit-heading--3 {
  font-size: clamp(1.3rem, 1.12rem + 0.7vw, 1.65rem);
  font-weight: var(--forge-heading-weight-light, 600);
  letter-spacing: 0.02em;
  line-height: 1.12;
}

/* A section's heading stands over a short measuring tape, centred when the heading is. */
.kit-heading-group > .kit-heading--2::after {
  content: "";
  display: block;
  width: 6.5rem;
  height: 0.85rem;
  margin-top: 1rem;
  background:
    repeating-linear-gradient(90deg, var(--on-accent, #1d2023) 0 2px, transparent 2px 2.5rem) 0 0 / 100% 72% no-repeat,
    repeating-linear-gradient(90deg, var(--on-accent, #1d2023) 0 1px, transparent 1px 0.5rem) 0 0 / 100% 38% no-repeat,
    var(--accent, #ffc20e);
}

.kit-heading-group.kit-text--center > .kit-heading--2::after {
  margin-inline: auto;
}

.kit-heading-group.kit-text--end > .kit-heading--2::after {
  margin-inline-start: auto;
}

/* On the accent band the tape is dark steel with accent marks. */
.kit-section--accent .kit-heading-group > .kit-heading--2::after {
  background:
    repeating-linear-gradient(90deg, var(--accent, #ffc20e) 0 2px, transparent 2px 2.5rem) 0 0 / 100% 72% no-repeat,
    repeating-linear-gradient(90deg, var(--accent, #ffc20e) 0 1px, transparent 1px 0.5rem) 0 0 / 100% 38% no-repeat,
    var(--primary, #1d2023);
}

/* Small labels: spaced capitals in the heading face behind a strip of hazard tape. */
.kit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.9rem;
  font-weight: var(--forge-heading-weight-light, 600);
  line-height: 1.3;
}

.kit-eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 0.55rem;
  background: var(--forge-hazard);
}

.kit-text--lead {
  line-height: 1.55;
}

/* ------------------------------------------------------------------ Buttons */

/* Chunky slabs with two clipped corners, in capitals. On hover the cut bites deeper and a darker kick plate shows along
   the bottom; a click presses them down. The clip hides an outline drawn outside, so focus is drawn inside. */
.kit-button {
  --forge-button-cut: var(--forge-cut);
  min-height: 3.25rem;
  padding: 0.8rem 1.75rem;
  border-width: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.05rem;
  line-height: 1.2;
  clip-path: polygon(0 0, calc(100% - var(--forge-button-cut)) 0, 100% var(--forge-button-cut), 100% 100%, var(--forge-button-cut) 100%, 0 calc(100% - var(--forge-button-cut)));
  transition: background-color var(--kit-speed) ease, color var(--kit-speed) ease, box-shadow var(--kit-speed) ease, clip-path var(--kit-speed) var(--kit-ease), transform var(--kit-speed) var(--kit-ease);
}

.kit-button--small {
  --forge-cut: 0.55rem;
  min-height: 2.6rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.92rem;
}

.kit-root .kit-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -7px;
}

.kit-button--primary,
.kit-button--primary:hover {
  background: var(--accent, #ffc20e);
  color: var(--on-accent, #1d2023);
}

.kit-button--primary:hover {
  --forge-button-cut: calc(var(--forge-cut) * 1.6);
  box-shadow: inset 0 -0.3rem 0 color-mix(in srgb, var(--on-accent, #1d2023) 28%, transparent);
}

.kit-section--accent .kit-button--primary,
.kit-section--accent .kit-button--primary:hover {
  background: var(--primary, #1d2023);
  color: var(--on-primary, #fff);
}

.kit-section--accent .kit-button--primary:hover {
  box-shadow: inset 0 -0.3rem 0 color-mix(in srgb, var(--accent, #ffc20e) 70%, transparent);
}

/* The outline button: a frame in the text colour with the same clipped corners, drawn with gradients so the cut edges
   carry the line too; a light tint fills it on hover. */
.kit-button--secondary,
.kit-button--secondary:hover {
  background:
    linear-gradient(currentColor 0 0) 0 0 / calc(100% - var(--forge-cut)) 2px no-repeat,
    linear-gradient(currentColor 0 0) 100% 100% / 2px calc(100% - var(--forge-cut)) no-repeat,
    linear-gradient(currentColor 0 0) 100% 100% / calc(100% - var(--forge-cut)) 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 0 / 2px calc(100% - var(--forge-cut)) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px) calc(50% + 2px), transparent calc(50% + 2px)) 100% 0 / var(--forge-cut) var(--forge-cut) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px) calc(50% + 2px), transparent calc(50% + 2px)) 0 100% / var(--forge-cut) var(--forge-cut) no-repeat;
  background-color: transparent;
  color: var(--kit-text);
}

.kit-button--secondary:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.kit-button:active {
  transform: translateY(2px);
}

.kit-button--ghost {
  padding-inline: 0.15rem;
  clip-path: none;
  text-decoration: underline;
  text-decoration-color: var(--accent, #ffc20e);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

.kit-button--ghost:hover {
  background: none;
  text-decoration-thickness: 5px;
}

.kit-section--accent .kit-button--ghost {
  text-decoration-color: currentColor;
}

.kit-link {
  font-weight: var(--forge-body-weight-strong, 600);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.kit-link:hover {
  text-decoration-color: var(--accent, #ffc20e);
  text-decoration-thickness: 4px;
}

:is(.kit-section--accent) .kit-link:hover {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ Cards */

/* Plates: square, with a heavy bar in the text colour along the top and a small accent tab clipped into the top right
   corner. A linked card rises a little and its bar turns to the accent colour. */
.kit-card--surface,
.kit-card--outline {
  border: 0;
  border-top: 4px solid var(--forge-ink);
}

.kit-card--surface {
  background: var(--kit-surface);
  box-shadow: inset 0 0 0 1px var(--kit-line), var(--kit-shadow);
}

.kit-card--outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--kit-line-strong);
}

.kit-card--surface::before,
.kit-card--outline::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 1.15rem;
  height: 1.15rem;
  background: linear-gradient(to bottom left, var(--accent, #ffc20e) 50%, transparent 50%);
  pointer-events: none;
}

.kit-section--accent :is(.kit-card--surface, .kit-card--outline)::before {
  background: linear-gradient(to bottom left, var(--forge-ink) 50%, transparent 50%);
}

.kit-card--linked:hover {
  border-top-color: var(--accent, #ffc20e);
  transform: translateY(-4px);
}

.kit-card--linked.kit-card--surface:hover {
  box-shadow: inset 0 0 0 1px var(--kit-line), var(--kit-shadow-hover);
}

.kit-section--accent .kit-card--linked:hover {
  border-top-color: var(--forge-ink);
}

/* Photos in cards carry a heavy accent bar along their bottom edge. */
.kit-card__media {
  position: relative;
}

.kit-card__media::after,
.kit-picture.kit-rounded::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42%;
  height: 0.4rem;
  background: var(--accent, #ffc20e);
  transition: width 420ms var(--kit-ease);
}

.kit-card--linked:hover .kit-card__media::after {
  width: 100%;
}

.kit-card__media img {
  transition: transform 600ms var(--kit-ease);
}

.kit-card--linked:hover .kit-card__media img {
  transform: scale(1.04);
}

.kit-card__title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.45rem);
  font-weight: var(--forge-heading-weight-light, 600);
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-transform: uppercase;
}

.kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-family: var(--font-heading, sans-serif);
  font-size: 0.88rem;
  font-weight: var(--forge-heading-weight-light, 600);
  letter-spacing: 0.12em;
}

/* Numbered steps: the number very large in outlined figures over a solid accent shadow, under a steel rule. */
.kit-card--plain {
  overflow: visible;
  border-top: 3px solid var(--forge-ink);
}

.kit-card--plain > .kit-card__content {
  padding-top: 1.25rem;
}

.kit-card--plain > .kit-card__content > .kit-card__eyebrow:first-child {
  margin-bottom: 0.5rem;
  color: transparent;
  font-size: clamp(3.4rem, 2.6rem + 2.6vw, 5rem);
  font-weight: var(--forge-heading-weight, 700);
  letter-spacing: 0;
  line-height: 0.9;
  text-shadow: 0.06em 0.06em 0 var(--accent, #ffc20e);
  -webkit-text-stroke: 2px var(--forge-ink);
}

.kit-section--accent .kit-card--plain > .kit-card__content > .kit-card__eyebrow:first-child {
  text-shadow: 0.06em 0.06em 0 var(--primary, #1d2023);
}

/* Big icons sit in square accent tiles with a clipped corner. */
.kit-icon--large {
  box-sizing: content-box;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0.7rem;
  background: var(--accent, #ffc20e);
  color: var(--on-accent, #1d2023);
  stroke-width: 2;
  clip-path: polygon(0 0, calc(100% - 0.6rem) 0, 100% 0.6rem, 100% 100%, 0 100%);
}

.kit-section--accent .kit-icon--large {
  background: var(--primary, #1d2023);
  color: var(--accent, #ffc20e);
}

/* Pictures are square; a gallery's pictures dim slightly until they are pointed at. */
.kit-picture.kit-rounded img {
  transition: transform 600ms var(--kit-ease);
}

.kit-section .kit-grid > .kit-picture.kit-rounded:hover img {
  transform: scale(1.03);
}

/* Photos of people are square, on an accent bar. */
.kit-avatar {
  border-radius: 0;
  border-bottom: 3px solid var(--accent, #ffc20e);
}

.kit-avatar--large {
  width: 6rem;
  height: 6rem;
  border-bottom-width: 4px;
}

/* ------------------------------------------------------------------ Figures */

/* Numbers and prices are big, in the heading face. A figure stands on a heavy accent bar. */
.kit-output--large,
.kit-price__amount,
.kit-summary__amount,
.kit-stat__value {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--kit-heading-weight);
  letter-spacing: 0.01em;
}

.kit-stat {
  gap: 0.45rem;
}

.kit-stat__value {
  font-size: clamp(3rem, 2rem + 3.6vw, 4.75rem);
  line-height: 0.95;
}

/* A price on a plan card is smaller, so it stays on one line in a narrow column. */
.kit-card .kit-stat__value {
  font-size: clamp(2.25rem, 1.8rem + 1.3vw, 3rem);
}

.kit-stat__value::after {
  content: "";
  display: block;
  width: 3rem;
  height: 5px;
  margin: 0.7rem auto 0.15rem;
  background: var(--accent, #ffc20e);
}

.kit-align--start .kit-stat__value::after {
  margin-inline-start: 0;
}

.kit-section--accent .kit-stat__value::after {
  background: var(--forge-ink);
}

.kit-stat__label {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.95rem;
  font-weight: var(--forge-heading-weight-light, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kit-price--large .kit-price__amount {
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ Lists */

.kit-list--check > .kit-list-item::before {
  background: var(--kit-accent-text);
}

.kit-list-item__icon {
  color: var(--kit-muted);
}

.kit-list-item__title {
  font-weight: var(--forge-body-weight-strong, 600);
}

/* ------------------------------------------------------------------ Fields */

/* Square fields with a firm frame; the one you are typing in turns the frame to the text colour over an accent bar. */
.kit-input {
  min-height: 3.1rem;
  padding-inline: 1rem;
  border: 2px solid var(--kit-line-strong);
  background-color: var(--kit-surface);
}

.kit-select {
  padding-inline: 1rem 2.75rem;
}

.kit-textarea {
  padding-block: 0.85rem;
}

.kit-input:focus {
  border-color: var(--forge-ink);
  box-shadow: inset 0 -4px 0 var(--accent, #ffc20e);
}

.kit-field__label {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.88rem;
  font-weight: var(--forge-heading-weight-light, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Quotes */

/* A quote opens with a square accent tile holding a quote mark of two slanted bars. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote__text {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
}

.kit-quote__text::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  background:
    linear-gradient(105deg, transparent 0 24%, var(--on-accent, #1d2023) 24% 42%, transparent 42% 56%, var(--on-accent, #1d2023) 56% 74%, transparent 74%) 50% 50% / 64% 44% no-repeat,
    var(--accent, #ffc20e);
}

.kit-section--accent .kit-quote__text::before {
  background:
    linear-gradient(105deg, transparent 0 24%, var(--accent, #ffc20e) 24% 42%, transparent 42% 56%, var(--accent, #ffc20e) 56% 74%, transparent 74%) 50% 50% / 64% 44% no-repeat,
    var(--primary, #1d2023);
}

.kit-quote__author {
  margin-top: 1rem;
  font-family: var(--font-heading, sans-serif);
  font-size: 1rem;
  font-weight: var(--forge-heading-weight-light, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kit-quote__role {
  margin-top: 0.15rem;
  font-family: var(--font-body, sans-serif);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ------------------------------------------------------------------ Questions */

/* Questions are plates, a little apart, with a heavy bar down the left that turns to the accent colour when open; the
   arrow sits in a square tile. */
.kit-accordion {
  border-top: 0;
}

.kit-accordion__item {
  padding-inline: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 0;
  border-left: 5px solid var(--forge-ink);
  background: var(--kit-surface);
  box-shadow: inset 0 0 0 1px var(--kit-line);
}

.kit-accordion__item + .kit-accordion__item {
  margin-top: 0.65rem;
}

.kit-accordion__item[open] {
  border-left-color: var(--accent, #ffc20e);
}

.kit-section--accent .kit-accordion__item[open] {
  border-left-color: var(--primary, #1d2023);
}

.kit-accordion__title {
  padding-block: 1.1rem;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: var(--forge-heading-weight-light, 600);
  letter-spacing: 0.01em;
}

.kit-accordion__title:hover {
  color: var(--kit-text);
}

.kit-accordion__chevron {
  box-sizing: content-box;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0.4rem;
  background: var(--forge-ink);
  color: var(--kit-surface);
  stroke-width: 2.6;
}

.kit-section:is(.kit-section--inverse, .kit-section--image, .kit-section--accent) .kit-accordion__chevron {
  color: var(--kit-section-bg);
}

.kit-accordion__body {
  padding-bottom: 1.4rem;
}

/* ------------------------------------------------------------------ Text, badges and the rest */

.kit-rich-text blockquote {
  margin-inline: 0;
  padding: 1.1rem 1.4rem;
  border-inline-start: 6px solid var(--accent, #ffc20e);
  background: var(--kit-surface-alt);
  color: var(--kit-text);
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.5;
}

/* A rule in a text is a strip of hazard tape. */
.kit-rich-text hr {
  width: 6rem;
  height: 0.55rem;
  border: 0;
  background: var(--forge-hazard);
}

.kit-rich-text :is(h2, h3, h4) {
  text-transform: uppercase;
}

.kit-badge,
.kit-chip {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.8rem;
  font-weight: var(--forge-heading-weight-light, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kit-carousel__button {
  border: 0;
  border-radius: 0;
  background: var(--forge-ink);
  color: var(--kit-surface);
}

.kit-section:is(.kit-section--inverse, .kit-section--image, .kit-section--accent) .kit-carousel__button {
  color: var(--kit-section-bg);
}

.kit-carousel__button:hover:not(:disabled) {
  background: var(--accent, #ffc20e);
  color: var(--on-accent, #1d2023);
}

.kit-dialog,
.kit-drawer--right.is-ready,
.kit-drawer--bottom.is-ready {
  border-top: 5px solid var(--accent, #ffc20e);
}

@media (prefers-reduced-motion: reduce) {
  .kit-card--linked:hover,
  .kit-button:active {
    transform: none;
  }

  .kit-card--linked:hover .kit-card__media img,
  .kit-section .kit-grid > .kit-picture.kit-rounded:hover img {
    transform: none;
  }
}