/* Kestrel Electric demo stylesheet (spec 18, v2-demo-electrician; build
   round R1, the design layer). Standalone, scoped css for this demo
   alone: every selector is .ksl- prefixed. The documented machine-scope
   exception is exactly one: the token block on #demo-main (the demo's
   own serving scope; the one sanctioned machine-selector root, which
   also repaints the machinery midnight body paint for this light-base
   demo). The demo carries its own border-box group (the machinery
   sheets ship no reset), the descendant link override group (the
   machinery base paints no anchors, so prose anchors would bleed UA
   styling; fact 302), and the exclusion belt: every component anchor
   paints via its own .ksl- class rule at a higher specificity than the
   bare override, so the belt never eats a button or tile face.

   Machinery contract (demo-base.css, demo-notice.css, layouts.demo) is
   never redefined here: the machinery banner-clearance token is
   consumed at EXACTLY ONE var() site, the demo-owned --ksl-clear
   bridge on the page wrapper (the static non-sticky chrome pays the
   fixed banner's height through its top padding). The machinery
   favicon pair, the demo banner, the skip link, and the consent pair
   ride the machinery chain untouched. No imports anywhere; the sibling
   demo namespaces and the app bundles are absent by construction.

   Faces: four font-face rules live ONLY in this file, self-hosted
   beside their OFL licenses under /demos/electrician/fonts/, display
   swap: Titillium Web 600/700/900 (display, headings, buttons) and one
   Open Sans variable rule (weight range 400 to 800, serving 400, 600
   and 700). No fixed-pitch face anywhere in the stack.

   Palette law (spec 18 section 4 as amended 18/3, the Arcwire
   register): the seven token color bytes are the only color literals
   in the sheet; the white-named token paints the silk byte (J-R4.2);
   light greys never carry body copy;
   photo scrims ride the one neutral ink triplet (the token block's
   scrim triplet) and are never accent tinted; overlay text rides the
   white-named token at full opacity. No zero-byte black hex anywhere
   (the footer's dark field rides the ink token). The dropdown's hover
   wash is the silk wash token; its panel shadow rides the same neutral
   ink triplet.

   Media conditions, the only ones in this file besides the
   reduced-motion block: 760px (the chrome flip, the split pair, the
   tiles trio, the column rows, the big type steps) and 1000px (the
   sidebar column, the text/media rows, the third heading step). The
   machinery's own 768 breakpoint never appears. */

@font-face {
  font-family: "Titillium Web";
  src: url("/demos/electrician/fonts/titilliumweb-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("/demos/electrician/fonts/titilliumweb-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("/demos/electrician/fonts/titilliumweb-latin-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/demos/electrician/fonts/opensans-latin-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* The Arcwire tokens (amendment 18/3 part A, the recolor register; the
   A.2 bytes verbatim; the single sanctioned machine-scope root on this
   file). Seven hex bytes, one token definition each: the arc, the ink
   family, the warm greige, the hairline, the tile, and the silk. One
   dark neutral scrim triplet (the ride-along, J-R4.5), one silk wash,
   one dark wash, one panel shadow, the shell cap, and the two faces.
   The hue-named class vocabulary stays frozen this round (J-R4.1):
   .ksl-btn-deep / .ksl-btn-steel / .ksl-split-steel / .ksl-tile-steel
   and the other hue-named classes keep their names while their fills
   re-point to the ink and the arc. The four hue-bearing names of the
   outgoing register retire; the hue words survive only inside the
   frozen class vocabulary (J-R4.1). The light
   color scheme is scoped to the serving surface (plan A2/J9: a scoped
   property, the zero-form demo has no control palette to repaint). */
#demo-main {
  --ksl-arc: #9c2091;            /* primary band fill, buttons, sidebar base, the one accent voice */
  --ksl-ink: #3a312c;            /* headings, the dark band family (split cell 2, generator band, menu/panel fills, active rows), the footer base, link hover */
  --ksl-body: #574b44;           /* body text, the footer diagonal sweep */
  --ksl-grey: #eee2cf;           /* warm greige section fill */
  --ksl-hairline: #dccfc0;       /* warm hairline dividers */
  --ksl-tile: #fffdf9;           /* silk tile fill */
  --ksl-white: #fbf7f2;          /* silk page base, overlay text; the light-theme exemption byte (named --ksl-white, byte = silk, J-R4.2) */
  --ksl-scrim-triplet: 24, 24, 24; /* dark neutral scrims only, never accent tinted (ride-along, J-R4.5) */
  --ksl-wash: rgba(251, 247, 242, 0.12);   /* band surface hover wash (the silk triplet) */
  --ksl-dark-wash: rgba(24, 24, 24, 0.45); /* slider control hover wash (stays) */
  --ksl-shadow: 0 12px 28px rgba(24, 24, 24, 0.35);  /* stays */
  --ksl-shell: 1248px;
  --ksl-display: "Titillium Web", sans-serif;
  --ksl-text: "Open Sans", sans-serif;
  background: var(--ksl-white);
  color: var(--ksl-body);
  color-scheme: light;      /* plan F J9: the scoped light scheme */
}

/* The page wrapper: the machinery clearance token is consumed at
   EXACTLY ONE var() site, this bridge; the top bar pays the fixed
   banner's height and drinks the demo-owned token. */
.ksl-page {
  --ksl-clear: var(--demo-notice-space);
  position: relative;
  font-family: var(--ksl-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ksl-body);
}

/* Box discipline: the machinery stylesheets ship no global reset, so
   the demo carries its own border-box group the way the machinery
   skip link does: min-heights stay honest. */
.ksl-page,
.ksl-page *,
.ksl-page *::before,
.ksl-page *::after {
  box-sizing: border-box;
}

/* The descendant link override group (fact 302). The belt: bare prose
   anchors (no class attribute anywhere in this demo: every anchor
   carries its component class) would ride the arc voice; every
   component anchor paints via its own .ksl- class rule below. */
.ksl-page a {
  color: inherit;
  text-decoration: none;
}
.ksl-page a:not([class]) {
  color: var(--ksl-arc);
  text-decoration: underline;
}
.ksl-page a:not([class]):hover {
  color: var(--ksl-ink);
}

/* The page reset: the machinery ships no margins reset; the demo's
   components own their spacing. */
.ksl-page h1,
.ksl-page h2,
.ksl-page h3,
.ksl-page p,
.ksl-page ul,
.ksl-page ol,
.ksl-page figure,
.ksl-page blockquote {
  margin: 0;
}
.ksl-page ul,
.ksl-page ol {
  padding: 0;
  list-style: none;
}
.ksl-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The shell: width, inline padding, centered cap. */
.ksl-page .ksl-shell {
  width: 100%;
  max-width: var(--ksl-shell);
  margin-inline: auto;
  padding-inline: 20px;
}

/* The narrow column (the ready + have-ready blocks): left aligned
   inside the shell (plan D2.6). */
.ksl-page .ksl-narrow {
  max-width: 780px;
  margin-right: auto;
}

/* Shared grid systems. The sidebar grid: one column below 1000px (the
   sidebar stacks above the main column); the text/media rows: one
   column below 1000px; the column rows (the depend trio, the steps,
   the crew rows): one column below 760px. */
.ksl-page .ksl-splitgrid,
.ksl-page .ksl-two-col,
.ksl-page .ksl-colrow {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

/* Heading voices (plan A5). All headings ride Titillium 700; the 900
   lives on the slider statements and the request steps' numerals. */
.ksl-page h2 {
  font-family: var(--ksl-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ksl-ink);
}
.ksl-page h3 {
  font-family: var(--ksl-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ksl-ink);
}
.ksl-page .ksl-lead {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ksl-ink);
}

/* The small caps label voice (eyebrows, tile labels, the comprehensive
   label, footer titles, quote names). Source stays case true; the
   paint uppercases. */
.ksl-page .ksl-eyebrow,
.ksl-page .ksl-comp-label,
.ksl-page .ksl-tile-label,
.ksl-page .ksl-quote-name,
.ksl-page .ksl-pullquote cite,
.ksl-page .ksl-footer-head {
  font-family: var(--ksl-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Grey sections drop their body size one step (plan A5). */
.ksl-page .ksl-greyband p {
  font-size: 15px;
}

/* Focus: the ink ring default on light surfaces; the silk ring on
   every filled band (the group below it). */
.ksl-page a:focus-visible,
.ksl-page button:focus-visible {
  outline: 3px solid var(--ksl-ink);
  outline-offset: 2px;
}
.ksl-page .ksl-hero a:focus-visible,
.ksl-page .ksl-hero button:focus-visible,
.ksl-page .ksl-band a:focus-visible,
.ksl-page .ksl-band button:focus-visible,
.ksl-page .ksl-split a:focus-visible,
.ksl-page .ksl-tile-photo:focus-visible,
.ksl-page .ksl-tile-steel:focus-visible,
.ksl-page .ksl-genband a:focus-visible,
.ksl-page .ksl-ctaband a:focus-visible,
.ksl-page .ksl-footer a:focus-visible,
.ksl-page .ksl-sidebar a:focus-visible {
  outline-color: var(--ksl-white);
}

/* BUTTONS (plan A6): flat rectangular arrow buttons, zero radius, the
   44px touch floor, 14px caps. Exclusion-belt anchors at (0,2,1);
   hovers at (0,3,1). */
.ksl-page a.ksl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 26px;
  border: 0;
  border-radius: 0;
  font-family: var(--ksl-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ksl-white);
  text-decoration: none;
  transition: background-color 250ms;
}
.ksl-page a.ksl-btn-crimson {
  background: var(--ksl-arc);
}
.ksl-page a.ksl-btn-crimson:hover {
  background: var(--ksl-ink);
}
.ksl-page a.ksl-btn-deep {
  background: var(--ksl-ink);
}
.ksl-page a.ksl-btn-deep:hover {
  filter: brightness(0.9);
}
.ksl-page a.ksl-btn-steel {
  background: var(--ksl-ink);
}
.ksl-page a.ksl-btn-steel:hover {
  filter: brightness(0.9);
}
.ksl-page a.ksl-btn-outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ksl-white);
}
.ksl-page a.ksl-btn-outline:hover {
  background: var(--ksl-ink);
}
.ksl-page a.ksl-btn-arrow {
  position: relative;
  padding-right: 52px;
}
.ksl-page a.ksl-btn-arrow .ksl-ic-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* ICONS (plan A7): inline svg glyphs, stroke currentColor. The sheet
   sizes only the arrow glyph inside arrow buttons; every other size
   rides the markup attributes. */
.ksl-page .ksl-ic-arrow,
.ksl-page .ksl-ic-caret {
  flex: none;
}

/* ============================== CHROME ==============================
   Top bar (plan B2): silk, 72px, the type-only wordmark left + the
   utility nav right. Non-sticky; below 760px the wordmark stands
   alone and the utility links join the band's disclosure panel. */
.ksl-page .ksl-topbar {
  padding-top: var(--ksl-clear);
  background: var(--ksl-white);
}
.ksl-page .ksl-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.ksl-page .ksl-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
}
.ksl-page .ksl-mark {
  font-family: var(--ksl-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  color: var(--ksl-arc);
}
.ksl-page .ksl-mark-sub {
  font-family: var(--ksl-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--ksl-body);
}
.ksl-page .ksl-util {
  display: none;
}
.ksl-page .ksl-util-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ksl-page .ksl-util-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-family: var(--ksl-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.57px;
  text-transform: uppercase;
  color: var(--ksl-ink);
  text-decoration: none;
  transition: color 160ms;
}
.ksl-page .ksl-util-link:hover {
  color: var(--ksl-arc);
}

/* The arc band (plan B3): full-bleed arc, 72px row, non-sticky.
   City block left, the services dropdown after it, the ink Get
   Started block flush right. The band phone rides every page. */
.ksl-page .ksl-band {
  background: var(--ksl-arc);
}
.ksl-page .ksl-band-row {
  display: flex;
  align-items: stretch;
  gap: 32px;
  min-height: 72px;
  padding-block: 4px;
}
.ksl-page .ksl-band-city {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin: 0;
}
.ksl-page .ksl-band-city-name {
  font-family: var(--ksl-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ksl-white);
}
.ksl-page .ksl-band-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--ksl-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ksl-white);
  text-decoration: none;
}
.ksl-page .ksl-band-phone:hover {
  text-decoration: underline;
}

/* The desktop groups hold display off at the base; the 760px block
   opens them. */
.ksl-page .ksl-band-drop,
.ksl-page .ksl-band-cta,
.ksl-page .ksl-band-menu {
  display: none;
}
.ksl-page .ksl-band-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font-family: var(--ksl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ksl-white);
  cursor: pointer;
}
.ksl-page .ksl-band-menu-btn .ksl-ic-caret {
  flex: none;
}
.ksl-page .ksl-band-menu-btn:hover {
  background: var(--ksl-wash);
}

/* The small-screen panel (plan B5): full width below the band, ink
   fill, stacked rows with the arc separators and the arc Get
   Started block row last. The hidden-attribute companion at the end of
   this sheet keeps the attribute authoritative at every width. */
.ksl-page .ksl-band-panel {
  padding: 8px 0;
  background: var(--ksl-ink);
}
.ksl-page .ksl-band-panel-row,
.ksl-page .ksl-band-panel-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px;
  font-family: var(--ksl-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ksl-white);
  text-decoration: none;
}
.ksl-page .ksl-band-panel-row .ksl-ic-arrow,
.ksl-page .ksl-band-panel-cta .ksl-ic-arrow {
  margin-left: auto;
}
.ksl-page li + li .ksl-band-panel-row,
.ksl-page .ksl-band-panel .ksl-band-panel-cta {
  border-top: 1px solid var(--ksl-arc);
}
.ksl-page .ksl-band-panel-row:hover {
  background: var(--ksl-arc);
}
.ksl-page .ksl-band-panel-cta {
  background: var(--ksl-arc);
  min-width: 0;
}
.ksl-page .ksl-band-panel-cta:hover {
  filter: brightness(0.9);
}

/* ============================== FOOTER ==============================
   The dark footer (plan B6): the ink base field with the body-token
   diagonal sweep (the dark pair; no zero-byte black hex anywhere),
   the one-line nav repeat above the three columns, and the copyright
   line. */
.ksl-page .ksl-footer {
  position: relative;
  overflow: hidden;
  background: var(--ksl-ink);
  color: var(--ksl-white);
}
.ksl-page .ksl-footer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(50% + 192px);
  height: 100%;
  background: var(--ksl-body);
  clip-path: polygon(0 0, 100% 0, calc(100% - 160px) 100%, 0 100%);
  z-index: 1;
}
.ksl-page .ksl-footer .ksl-shell {
  position: relative;
  z-index: 10;
  padding-top: 56px;
  padding-bottom: 40px;
}
.ksl-page .ksl-footer-nav {
  margin-bottom: 40px;
}
.ksl-page .ksl-footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
}
.ksl-page .ksl-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ksl-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ksl-white);
  text-decoration: none;
  transition: opacity 160ms;
}
.ksl-page .ksl-footer-nav a:hover {
  opacity: 0.75;
}
.ksl-page .ksl-footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
}
.ksl-page .ksl-footer .ksl-brand {
  display: inline-flex;
  margin-bottom: 24px;
}
.ksl-page .ksl-footer .ksl-mark {
  color: var(--ksl-white);
}
.ksl-page .ksl-footer .ksl-mark-sub {
  color: var(--ksl-hairline);
}
.ksl-page .ksl-footer-col {
  font-size: 15px;
  line-height: 1.6;
}
.ksl-page .ksl-footer-head {
  margin-bottom: 12px;
  color: var(--ksl-white);
}
.ksl-page .ksl-footer-col p {
  color: var(--ksl-hairline);
}
.ksl-page .ksl-footer-col ul {
  margin: 0 0 8px;
}
.ksl-page .ksl-footer-col a {
  display: inline-block;
  padding: 2px 0;
  color: var(--ksl-white);
  text-decoration: none;
  transition: opacity 160ms;
}
.ksl-page .ksl-footer-col a:hover {
  opacity: 0.75;
}
.ksl-page .ksl-footer-license {
  margin-top: 12px;
}
.ksl-page .ksl-footer-copy {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--ksl-body);
  font-size: 14px;
  color: var(--ksl-hairline);
}

/* ============================== HOME ==============================
   The statement hero slider (plan C1): four full-bleed photo slides,
   text left over a left-weighted neutral scrim, manual arrows + dots,
   no timers anywhere. The track translates; the slides swap the
   active class; slides other than the active one stay unpainted by
   default (the static first slide renders alone with no script at
   all). */
.ksl-page .ksl-hero {
  position: relative;
  overflow: hidden;
  height: clamp(420px, 72vh, 620px);
  background: var(--ksl-ink);
}
.ksl-page .ksl-hero-track {
  display: flex;
  height: 100%;
  transform: translateX(0);
  transition: transform 450ms ease;
  will-change: transform;
}
.ksl-page .ksl-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
}
.ksl-page .ksl-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.ksl-page .ksl-slide-shell {
  position: relative;
  height: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ksl-page .ksl-slide-content {
  max-width: 600px;
  padding: 48px 20px;
}
.ksl-page .ksl-hero-title {
  font-family: var(--ksl-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  color: var(--ksl-white);
}
.ksl-page .ksl-hero-sub {
  margin-top: 14px;
  font-family: var(--ksl-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ksl-white);
}
.ksl-page .ksl-slide-content .ksl-btn {
  margin-top: 28px;
}

/* The per-slide neutral scrim (plan A10: the ink triplet only). */
.ksl-page .ksl-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.ksl-page .ksl-scrim-slide {
  background: linear-gradient(90deg, rgba(var(--ksl-scrim-triplet), 0.82) 0%, rgba(var(--ksl-scrim-triplet), 0.45) 52%, rgba(var(--ksl-scrim-triplet), 0.12) 100%);
}
.ksl-page .ksl-scrim-paghero {
  background: linear-gradient(90deg, rgba(var(--ksl-scrim-triplet), 0.85) 0%, rgba(var(--ksl-scrim-triplet), 0.35) 60%, rgba(var(--ksl-scrim-triplet), 0.10) 100%);
}
.ksl-page .ksl-scrim-quote {
  background: linear-gradient(0deg, rgba(var(--ksl-scrim-triplet), 0.55) 0%, rgba(var(--ksl-scrim-triplet), 0.72) 100%);
}
.ksl-page .ksl-scrim-tile {
  background-color: rgba(var(--ksl-scrim-triplet), 0.45);
  background-image: linear-gradient(to bottom, rgba(var(--ksl-scrim-triplet), 0) 45%, rgba(var(--ksl-scrim-triplet), 0.55) 100%);
}

/* Slider controls: the 44px transparent arrows at the edges + the dot
   group under the shell's left (plan C1). */
.ksl-page .ksl-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ksl-white);
  cursor: pointer;
  z-index: 20;
  transition: background-color 160ms;
}
.ksl-page .ksl-hero-arrow:hover {
  background: var(--ksl-dark-wash);
}
.ksl-page .ksl-hero-prev {
  left: 8px;
}
.ksl-page .ksl-hero-next {
  right: 8px;
}
.ksl-page .ksl-hero-dots {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 4px;
  z-index: 20;
}
.ksl-page .ksl-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ksl-page .ksl-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ksl-white);
}
.ksl-page .ksl-dot.ksl-active::before {
  background: var(--ksl-arc);
}

/* The stripe sweep (plan A9): the light diagonal motif on the silk
   and grey sections; the band shapes clip inside the sweep container
   so nothing overflows the page. Static decoration: zero script. */
.ksl-page .ksl-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.ksl-page .ksl-sweep-band {
  position: absolute;
  transform: rotate(37deg);
  background: linear-gradient(300deg, var(--ksl-tile) 0%, var(--ksl-hairline) 100%);
  clip-path: polygon(0 0, calc(100% - 144px) 0, 100% 100%, 144px 100%);
  height: 190px;
  width: 1500px;
}
.ksl-page .ksl-sweep-band-sm {
  height: 90px;
  width: 1050px;
  clip-path: polygon(0 0, calc(100% - 68px) 0, 100% 100%, 68px 100%);
}
.ksl-page .ksl-years .ksl-sweep-band {
  right: -140px;
  top: -120px;
}
.ksl-page .ksl-tiles .ksl-sweep-band {
  left: -160px;
  bottom: -140px;
}
.ksl-page .ksl-training .ksl-sweep-band-sm {
  left: -120px;
  top: -40px;
}
.ksl-page .ksl-neighborband .ksl-sweep-band {
  background: var(--ksl-body);
}

/* The general silk section rhythm; sections that carry sweeps or
   photos go relative and put their content above. */
.ksl-page .ksl-section {
  position: relative;
  padding: 72px 0;
}
.ksl-page .ksl-section > .ksl-shell {
  position: relative;
  z-index: 2;
}

/* The arc and ink split band (plan C2): the two service audiences
   side by side, arc left at 57, ink right at 43, stacked on
   mobile. */
.ksl-page .ksl-split {
  display: grid;
  grid-template-columns: 1fr;
}
.ksl-page .ksl-split-cell {
  min-height: 320px;
  padding: 24px;
}
.ksl-page .ksl-split-crimson {
  background: var(--ksl-arc);
}
.ksl-page .ksl-split-steel {
  background: var(--ksl-ink);
}
.ksl-page .ksl-split-cell h2 {
  color: var(--ksl-white);
}
.ksl-page .ksl-split-p {
  margin-top: 16px;
  max-width: 520px;
  color: var(--ksl-white);
}
.ksl-page .ksl-band-links {
  margin-top: 24px;
  display: grid;
  gap: 4px;
}
.ksl-page .ksl-band-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--ksl-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ksl-white);
  text-decoration: none;
}
.ksl-page .ksl-band-link .ksl-ic-house,
.ksl-page .ksl-band-link .ksl-ic-store {
  flex: none;
}
.ksl-page .ksl-band-link .ksl-ic-arrow {
  margin-left: auto;
  transition: transform 200ms;
}
.ksl-page .ksl-band-link:hover span {
  text-decoration: underline;
}
.ksl-page .ksl-band-link:hover .ksl-ic-arrow {
  transform: translateX(4px);
}

/* The years section (plan C3): silk, the light sweep behind the
   skewed clip photo, the ink The Crew button. */
.ksl-page .ksl-years {
  overflow: hidden;
}
.ksl-page .ksl-years .ksl-two-col {
  position: relative;
  z-index: 2;
}
.ksl-page .ksl-col-media {
  position: relative;
  z-index: 3;
}
.ksl-page .ksl-years p {
  margin-top: 16px;
}
.ksl-page .ksl-years p.ksl-year-cta {
  margin-top: 28px;
}

/* The training row (plan C4): photo left in the slim clip + the
   arc box right with the ink button (plan J5). */
.ksl-page .ksl-training {
  overflow: hidden;
}
.ksl-page .ksl-training .ksl-two-col {
  position: relative;
  z-index: 2;
}
.ksl-page .ksl-train-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 48px 40px;
  background: var(--ksl-arc);
}
.ksl-page .ksl-train-head {
  color: var(--ksl-white);
}

/* The testimonial band (plan C5): the full-bleed dark interior photo,
   the center-weighted scrim, the centered quote column. */
.ksl-page .ksl-quote-band {
  position: relative;
  overflow: hidden;
  background: var(--ksl-ink);
}
.ksl-page .ksl-quote-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.ksl-page .ksl-quote-content {
  position: relative;
  z-index: 10;
  max-width: 820px;
  margin-inline: auto;
  padding: 96px 20px;
  text-align: center;
  color: var(--ksl-white);
}
.ksl-page .ksl-quote-content h2,
.ksl-page .ksl-neighborband h2,
.ksl-page .ksl-ctaband h2,
.ksl-page .ksl-genband h2 {
  color: var(--ksl-white);
}
.ksl-page .ksl-quote-text {
  margin-top: 24px;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
}
.ksl-page .ksl-quote-name {
  margin-top: 20px;
}

/* The three-tile row (plan C6; the user-ordered card exemption, AC 20
   positive pin: exactly three whole-tile anchors): silk, photo, and
   arc; the photo tile keeps the text-over-image contract; hover
   carries the arrow nudge (and the ink step on the arc tile). */
.ksl-page .ksl-tiles {
  position: relative;
  padding: 56px 0;
}
.ksl-page .ksl-tiles-row {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
.ksl-page .ksl-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 220px;
  padding: 28px;
  text-decoration: none;
}
.ksl-page .ksl-tile-white {
  background: var(--ksl-tile);
}
.ksl-page .ksl-tile-steel {
  background: var(--ksl-arc);
  transition: background-color 250ms;
}
.ksl-page .ksl-tile-steel:hover {
  background: var(--ksl-ink);
}
.ksl-page .ksl-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.ksl-page .ksl-tile-label {
  position: relative;
  z-index: 10;
  color: var(--ksl-ink);
}
.ksl-page .ksl-tile-photo .ksl-tile-label,
.ksl-page .ksl-tile-steel .ksl-tile-label {
  color: var(--ksl-white);
}
.ksl-page .ksl-tile-head {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ksl-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ksl-ink);
}
.ksl-page .ksl-tile-photo .ksl-tile-head,
.ksl-page .ksl-tile-steel .ksl-tile-head {
  color: var(--ksl-white);
}
.ksl-page .ksl-tile-head .ksl-ic-arrow {
  flex: none;
  transition: transform 200ms;
}
.ksl-page .ksl-tile:hover .ksl-tile-head .ksl-ic-arrow {
  transform: translateX(4px);
}

/* ============================== INTERIOR ==============================
   The photo hero band (plans D + D2): 260px top band, the eager photo,
   the left-weighted scrim, the shell content low-left. */
.ksl-page .ksl-paghero {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  background: var(--ksl-ink);
}
.ksl-page .ksl-paghero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.ksl-page .ksl-paghero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding-top: 56px;
  padding-bottom: 24px;
  text-align: left;
  color: var(--ksl-white);
}
.ksl-page .ksl-eyebrow {
  margin-bottom: 10px;
  color: var(--ksl-white);
}
.ksl-page .ksl-paghero-title {
  font-family: var(--ksl-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ksl-white);
}
.ksl-page .ksl-paghero-sub {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
}

/* The arc sidebar (plan D1): the arc service list with the ink
   separators, the ink active row, arrows right; 280px column at
   1000px, stacked full-width below it. */
.ksl-page .ksl-sidebar {
  background: var(--ksl-arc);
}
.ksl-page .ksl-sidebar-rows li {
  position: relative;
  list-style: none;
}
.ksl-page .ksl-sidebar-rows li + li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  height: 2px;
  background: var(--ksl-ink);
  width: calc(100% - 36px);
}
.ksl-page a.ksl-sidebar-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding: 12px 48px 12px 20px;
  font-family: var(--ksl-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ksl-white);
  text-decoration: none;
  transition: background-color 160ms;
}
.ksl-page .ksl-sidebar-row .ksl-ic-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
}
.ksl-page a.ksl-sidebar-row:hover {
  background: var(--ksl-ink);
}
.ksl-page a.ksl-sidebar-active {
  background: var(--ksl-ink);
}

/* Anchored in-page targets (plan J8): the machinery banner never
   hides a landed anchor. */
.ksl-page #troubleshooting,
.ksl-page #panel-upgrades,
.ksl-page #lighting-smart,
.ksl-page #services-ev,
.ksl-page #services-surge,
.ksl-page #ksl-faq {
  scroll-margin-top: 90px;
}

/* The prose voices (plan D): the arc inline link, the bold book
   line, the centered intro quote button. */
.ksl-page .ksl-intro-head {
  margin-bottom: 16px;
}
.ksl-page .ksl-intro-media {
  margin-top: 40px;
}
.ksl-page .ksl-inline {
  color: var(--ksl-arc);
  font-weight: 700;
  text-decoration: underline;
  transition: color 160ms;
}
.ksl-page .ksl-inline:hover {
  color: var(--ksl-ink);
}
.ksl-page .ksl-book {
  margin-top: 24px;
  color: var(--ksl-ink);
}
.ksl-page .ksl-intro-cta {
  margin-top: 28px;
  text-align: center;
}
.ksl-page .ksl-intro-cta .ksl-btn {
  min-width: 220px;
}

/* The comprehensive grey section (plan D2.3): the full-width grey
   field, the small-caps list label, the ten-item plain dot list, the
   three anchored trio subsections. */
.ksl-page .ksl-greyband {
  background: var(--ksl-grey);
}
.ksl-page .ksl-comp-head {
  margin-bottom: 16px;
}
.ksl-page .ksl-comp-label {
  margin-top: 24px;
  color: var(--ksl-ink);
}
.ksl-page .ksl-comp-list {
  margin-top: 16px;
  max-width: 780px;
  list-style: disc;
  padding-left: 24px;
}
.ksl-page .ksl-comp-list li {
  list-style: disc;
}
.ksl-page .ksl-trio-head {
  margin-top: 32px;
}

/* The depend row (plan D2.4): the shared column row (plan J19): three
   arc disc columns with silk glyphs. */
.ksl-page .ksl-depend {
  text-align: center;
}
.ksl-page .ksl-depend-head {
  margin-bottom: 40px;
}
.ksl-page .ksl-depend-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ksl-arc);
  color: var(--ksl-white);
}
.ksl-page .ksl-depend-colhead {
  margin-top: 16px;
  font-size: 17px;
}
.ksl-page .ksl-depend-row p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
}

/* The generator band (plan D2.5): the full-width ink field, silk
   copy, the arc estimate button, the photo right at 760px. */
.ksl-page .ksl-genband {
  background: var(--ksl-ink);
  padding: 64px 0;
}
.ksl-page .ksl-gen-grid {
  gap: 40px;
  align-items: center;
}
.ksl-page .ksl-gen-sub {
  margin-top: 12px;
  font-weight: 700;
  font-size: 18px;
}
.ksl-page .ksl-gen-copy p {
  margin-top: 16px;
  color: var(--ksl-white);
}
.ksl-page .ksl-gen-copy h2 {
  color: var(--ksl-white);
}
.ksl-page .ksl-gen-copy .ksl-gen-sub {
  color: var(--ksl-white);
}
.ksl-page .ksl-gen-copy .ksl-btn {
  margin-top: 24px;
}

/* The ready section (plan D2.6) + the have-ready block (plan D4.4). */
.ksl-page .ksl-ready h2,
.ksl-page .ksl-haveready h2 {
  margin-bottom: 16px;
}
.ksl-page .ksl-ready p,
.ksl-page .ksl-haveready p {
  margin-top: 12px;
}
.ksl-page .ksl-have-list {
  margin-top: 16px;
  padding-left: 20px;
  list-style: disc;
}
.ksl-page .ksl-have-list li {
  list-style: disc;
  margin-top: 8px;
}

/* The FAQ accordion (plans D2.7 + D4.5; the disclosure grammar): ink
   triggers on the grey field, the 1px hairline separators, the
   plus/minus icon pair whose paint keys on the trigger's expanded
   state, the answer regions with the hidden-attribute companion. */
.ksl-page .ksl-faq {
  background: var(--ksl-grey);
}
.ksl-page .ksl-faq h2 {
  margin-bottom: 24px;
}
.ksl-page .ksl-faq-item + .ksl-faq-item {
  border-top: 1px solid var(--ksl-hairline);
}
.ksl-page .ksl-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  padding: 15px 44px 15px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--ksl-text);
  font-size: 18px;
  font-weight: 700;
  color: var(--ksl-ink);
  cursor: pointer;
}
.ksl-page .ksl-faq-trigger .ksl-ic-open {
  display: none;
}
.ksl-page .ksl-faq-trigger .ksl-ic-closed {
  display: block;
}
.ksl-page .ksl-faq-trigger[aria-expanded="true"] .ksl-ic-open {
  display: block;
}
.ksl-page .ksl-faq-trigger[aria-expanded="true"] .ksl-ic-closed {
  display: none;
}
.ksl-page .ksl-faq-region p {
  padding: 0 44px 18px 0;
}

/* The neighbors band (plan D2.8): the dark texture field rides the
   sweep grammar in the dark pair (no photo; the zero-repeat census
   stays 14 view files). */
.ksl-page .ksl-neighborband {
  position: relative;
  overflow: hidden;
  background: var(--ksl-ink);
}
.ksl-page .ksl-neighborband .ksl-sweep-band-lg {
  left: -160px;
  bottom: -120px;
}
.ksl-page .ksl-neighborband .ksl-sweep-band-sm {
  right: -120px;
  top: -80px;
}
.ksl-page .ksl-neighborband .ksl-quote-content {
  padding: 88px 20px;
}

/* The CTA band (plans D2.9 + D3.6 + D4.6): the full-width arc
   field, the ink + outline pair riding request-service. */
.ksl-page .ksl-ctaband {
  background: var(--ksl-arc);
  padding: 72px 20px;
  text-align: center;
}
.ksl-page .ksl-ctaband .ksl-cta-sub {
  margin-top: 12px;
  color: var(--ksl-white);
}
.ksl-page .ksl-cta-buttons {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* THE CREW (plan D3; the feature rides the sidebar band's content
   column under the statement per amendment 18/3 part B): the
   statement paragraph in the sidebar grid, the owner feature with the
   slim clip portrait + the arc rule pull quote, the two text rows,
   the grey plain-facts list. */
.ksl-page .ksl-crew-statement {
  font-family: var(--ksl-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 28px;
  color: var(--ksl-ink);
}
.ksl-page .ksl-feature-head {
  margin-bottom: 16px;
}
.ksl-page .ksl-feature-copy p {
  margin-top: 12px;
}
.ksl-page .ksl-pullquote {
  margin-top: 24px;
  border-left: 4px solid var(--ksl-arc);
  padding: 16px 24px;
}
.ksl-page .ksl-pullquote p {
  font-family: var(--ksl-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ksl-ink);
}
.ksl-page .ksl-pullquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  color: var(--ksl-ink);
}
.ksl-page .ksl-crewrows li {
  padding: 28px 0;
  border-top: 1px solid var(--ksl-hairline);
}
.ksl-page .ksl-crewname {
  font-size: 17px;
}
.ksl-page .ksl-crewrows li p {
  margin-top: 10px;
}
.ksl-page .ksl-facts-head {
  margin-bottom: 24px;
}
.ksl-page .ksl-facts-list {
  max-width: 780px;
}
.ksl-page .ksl-facts-list li {
  padding: 14px 0 14px 26px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: var(--ksl-ink);
}
.ksl-page .ksl-facts-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 10px;
  height: 10px;
  background: var(--ksl-arc);
}

/* REQUEST SERVICE (plan D4): the safety band above the funnel, the
   three-step row, the have-ready grey block. */
.ksl-page .ksl-safety {
  padding: 48px 0;
  background: var(--ksl-white);
}
.ksl-page .ksl-safety-line {
  border-left: 4px solid var(--ksl-arc);
  background: var(--ksl-tile);
  padding: 16px 24px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ksl-ink);
}
.ksl-page .ksl-steps-head {
  margin-bottom: 32px;
}
.ksl-page .ksl-steps {
  text-align: center;
}
.ksl-page .ksl-step-num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ksl-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  color: var(--ksl-arc);
}
.ksl-page .ksl-steps h3 {
  font-size: 17px;
}
.ksl-page .ksl-steps p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
}

/* ============================== BREAKPOINTS ============================== */

@media (min-width: 760px) {
  /* The chrome flip (plans B2 + B3 + B5): the utility nav joins the
     top bar; the desktop dropdown + Get Started open; the mobile
     toggle and panel retire. The city block stacks (city over phone,
     plan B3) on the desktop row. */
  .ksl-page .ksl-band-city {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
  .ksl-page .ksl-util {
    display: block;
  }
  .ksl-page .ksl-band-drop {
    display: flex;
  }
  .ksl-page .ksl-band-cta {
    display: inline-flex;
  }
  .ksl-page .ksl-band-menu {
    display: block;
  }
  .ksl-page .ksl-band-menu-btn {
    display: none;
  }
  .ksl-page .ksl-band-panel {
    display: none;
  }

  /* The desktop dropdown panel (plan B4): 300px under the trigger. */
  .ksl-page .ksl-band-drop {
    position: relative;
  }
  .ksl-page .ksl-band-drop-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    font-family: var(--ksl-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ksl-white);
    cursor: pointer;
    transition: background-color 160ms;
  }
  .ksl-page .ksl-band-drop-btn:hover,
  .ksl-page .ksl-band-drop-btn:focus-visible {
    background: var(--ksl-wash);
  }
  .ksl-page .ksl-band-drop-btn .ksl-ic-caret {
    flex: none;
  }
  .ksl-page .ksl-band-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    background: var(--ksl-ink);
    box-shadow: var(--ksl-shadow);
    z-index: 40;
  }
  .ksl-page .ksl-band-menu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px 18px;
    font-family: var(--ksl-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--ksl-white);
    text-decoration: none;
    transition: background-color 160ms;
  }
  .ksl-page .ksl-band-menu-row .ksl-ic-arrow {
    margin-left: auto;
  }
  .ksl-page .ksl-band-menu-row + .ksl-band-menu-row {
    border-top: 1px solid var(--ksl-arc);
  }
  .ksl-page .ksl-band-menu-row:hover {
    background: var(--ksl-arc);
  }

  /* The Get Started block (plan B3): the ink full-height right block
     inside the shell row; hover rides the brightness step (plan J3b). */
  .ksl-page .ksl-band-cta {
    margin-left: auto;
    min-width: 220px;
    min-height: 72px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    background: var(--ksl-ink);
    font-family: var(--ksl-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ksl-white);
    text-decoration: none;
    transition: filter 250ms;
  }
  .ksl-page .ksl-band-cta:hover {
    filter: brightness(0.9);
  }
  .ksl-page .ksl-band-cta .ksl-ic-arrow {
    flex: none;
  }

  /* The scale steps (plan A5): the slider statement, the interior hero
     h1, the section h2s, the sublines, the quote face, the column
     heads. */
  .ksl-page .ksl-hero-title {
    font-size: 63px;
  }
  .ksl-page .ksl-hero-sub {
    font-size: 24px;
  }
  .ksl-page .ksl-paghero {
    min-height: 260px;
  }
  .ksl-page .ksl-paghero-title {
    font-size: 52px;
  }
  .ksl-page .ksl-paghero-sub {
    font-size: 18px;
  }
  .ksl-page h2 {
    font-size: 30px;
  }
  .ksl-page .ksl-quote-text {
    font-size: 26px;
  }
  .ksl-page .ksl-paghero-content {
    min-height: 260px;
  }
  .ksl-page .ksl-crew-statement {
    font-size: 24px;
  }
  .ksl-page .ksl-depend-colhead,
  .ksl-page .ksl-crewname,
  .ksl-page .ksl-steps h3 {
    font-size: 18px;
  }

  /* The split pair (plan C2): arc 57 / ink 43, the 500px floor. */
  .ksl-page .ksl-split {
    grid-template-columns: 57fr 43fr;
  }
  .ksl-page .ksl-split-cell {
    min-height: 500px;
    padding: 48px 40px;
  }

  /* The training row, the column rows, the tiles trio, the generator
     pair, the footer columns. */
  .ksl-page .ksl-training-row {
    grid-template-columns: 1fr 1fr;
  }
  .ksl-page .ksl-colrow-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .ksl-page .ksl-colrow-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .ksl-page .ksl-tiles-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .ksl-page .ksl-gen-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ksl-page .ksl-footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  /* The clip insets stand at full value above 760px (the halved
     mobile values are the base, plan A8). */
  .ksl-page .ksl-clip-lg {
    clip-path: polygon(63px 0, 100% 0, calc(100% - 63px) 100%, 0 100%);
  }
  .ksl-page .ksl-clip-sm {
    clip-path: polygon(38px 0, 100% 0, calc(100% - 38px) 100%, 0 100%);
  }
}

@media (min-width: 1000px) {
  /* The sidebar column + the text/media rows (plans D1 + C3 + C4
     + D3.3). */
  .ksl-page .ksl-splitgrid {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
  .ksl-page .ksl-two-col {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .ksl-page .ksl-feature {
    grid-template-columns: 300px 1fr;
    gap: 40px;
  }
  .ksl-page .ksl-comp-list {
    columns: 2;
    column-gap: 48px;
  }
  .ksl-page h3 {
    font-size: 24px;
  }
  .ksl-page .ksl-depend-colhead,
  .ksl-page .ksl-crewname,
  .ksl-page .ksl-steps h3 {
    font-size: 18px;
  }
}

/* The hidden-attribute companion (the paint law): the attribute is
   authoritative at every width; the pair flips with it. One grouped
   rule covers the band dropdown, the small-screen panel, and the FAQ
   answer regions. */
.ksl-page .ksl-band-menu[hidden],
.ksl-page .ksl-band-panel[hidden],
.ksl-page .ksl-faq-region[hidden] {
  display: none;
}

/* Slides other than the active one stay unpainted as the css default
   (the static first slide renders alone with no script at all). */
.ksl-page .ksl-slide:not(.ksl-slide-active) {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ksl-page .ksl-hero-track {
    transition: none;
    transform: none;
  }
  .ksl-page .ksl-hero-arrow,
  .ksl-page .ksl-dot {
    opacity: 0.35;
    pointer-events: none;
  }
  .ksl-page .ksl-hero-arrow,
  .ksl-page .ksl-hero-arrow:hover,
  .ksl-page a.ksl-btn,
  .ksl-page a.ksl-btn-outline,
  .ksl-page a.ksl-sidebar-row,
  .ksl-page .ksl-band-panel-row,
  .ksl-page .ksl-band-panel-cta,
  .ksl-page .ksl-band-menu-row,
  .ksl-page .ksl-band-link .ksl-ic-arrow,
  .ksl-page .ksl-tile-head .ksl-ic-arrow,
  .ksl-page .ksl-tile-steel {
    transition: none;
  }
}