@charset "UTF-8";
/* ==========================================================================
   KRYLANE Studio® — Homepage
   Design system: "CHROMATIC EDITORIAL — Thirteen Chapters"

   The page is read as a bound sequence of coloured chapters. Swiss bones stay
   untouched: Inter only, tight negative tracking on oversized display type, a
   12-column grid, hairline structure, zero radius, zero drop shadows. Colour
   arrives as large calm masses — a section field, a card block, a 4px chapter
   bar, a numeral — never as badge clusters or confetti.

   --------------------------------------------------------------------------
   RULE C — THE GOVERNOR. Read this before adding any `color:` declaration.

     A hue may carry TEXT only where it clears 4.5:1 on that exact surface.
     Otherwise it demotes to a rule, bar, square, backplate, stroke or fill,
     and the text renders --krl-ink (light grounds) or #FFFFFF (dark grounds).

   The three easiest mistakes to make while building this file, all of which
   Rule C forbids:
     · crimson  on --krl-mist          = 4.23:1  -> use --krl-berry
     · crimson  on --krl-tint-crimson  = 4.16:1  -> use --krl-berry / --krl-ink
     · crimson  on --krl-ink           = 4.09:1  -> large text (>=48px) or
                                                    graphics only
     · amber    on ANY light field     = <2.1:1  -> fills and bars only, never
                                                    text (brief §4)
     · coral    on ANY light field     = 2.80:1  -> fills and bars only

   --------------------------------------------------------------------------
   TEXT-COLOUR LAW
     Headings  --krl-ink on every light field, #FFFFFF on every dark field.
     Body      --krl-text on every light field, #E3E3E3 on every dark field.
     Headings never take a hue (brief §4). All chromatic energy lives in
     fields, rules, bars, numerals, backplates and icon strokes.

   --------------------------------------------------------------------------
   THE CADENCE — 13 chapters, one fixed field each
     S1  hero          tint-crimson        S8   pricing       bg (white)
     S2  marquee       ink   *metronome*   S9   awards        tint-violet
     S3  logo wall     bg (white, forced)  S10  testimonials  ink *metronome*
     S4  offer         bg + 7 card fields  S11  faq           bg (white)
     S5  story         tint-teal           S12  contact       mist
     S6  stats         ink   *metronome*   S13  final cta     crimson gradient
     S7  why           tint-amber
   Three full-ink bands land at S2, S6 and S10 — an exact four-section
   metronome, so the eye gets a hard reset between chromatic chapters.

   BUDGETS
     Violet   exactly 2 uses: the S9 field, and the S4 Chatbot card. No more.
     Gradient exactly 2, both crimson-family: the S13 band (crimson->berry)
              and the 6px bar on the S8 Business card (crimson->coral).
              Nothing else in this file uses a gradient function as a colour
              transition; the S13 hairline texture is an SVG rect tile, and
              .krl-ul is a flat single-colour fill used as an animatable
              underline, not a gradient.
     CTA      crimson only. Never amber, teal, violet or coral.

   --------------------------------------------------------------------------
   DECLARED DEVIATION — brief §4 asks for seven different SOFT TINT WASHES on
   the S4 service cards but defines only four (crimson, amber, teal, violet).
   Cards 2, 5 and 7 therefore ship as solid fields instead: ink (the featured
   card), berry and mist. Inventing three more pale washes out of a five-hue
   palette would have produced seven near-identical pastels — the generic
   pastel card grid brief §9 forbids — and would have cost the composition its
   two dark masses. Flagged to the brief owner for a ruling; not silent.

   --------------------------------------------------------------------------
   THE REGISTER — seven hue channels declared in S4 and re-flowed in identical
   order through S7 (index backplates) and S10 (card top-ticks), so testimonial
   03 shares a channel with service 03. Violet is deliberately NOT in the
   register: re-flowing it would take the page from two violet uses to four.
   Its slot renders as the neutral (ink on light grounds, white on dark).

   --------------------------------------------------------------------------
   FAIL-OPEN CONTRACT — one mechanism, not three.
   Every animated element's FINAL state is the plain CSS default. The scroll
   reveal pre-state is armed ONLY by `.krl-js`, which krylane-home.js adds to
   <main class="krl"> after an IntersectionObserver has been successfully
   constructed. No JS, a JS error, an old engine, or a reduced-motion
   preference => nothing is ever hidden. Each enhancement is fenced off in its
   own try/catch and carries its own class (`.krl-rail-js` for the rail
   buttons), so one failure can never suppress another. `@media print` below
   the reveal block is the escape hatch for a print job taken before the
   observer or the safety timer has fired.

   --------------------------------------------------------------------------
   SCOPE — every selector is namespaced under .krl and every custom property is
   defined on .krl, never :root, so nothing leaks into the global Elementor
   header or footer. No !important is used anywhere in this file.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.krl {
	/* --- Core tokens, exact from the Elementor global kit (brief §3) ------ */
	--krl-ink:    #111111;
	--krl-text:   #5D5D5D;
	--krl-accent: #DD2D4A;
	--krl-alt:    #4C4C4C;
	--krl-border: #E3E3E3;
	--krl-bg:     #FFFFFF;
	--krl-mist:   #F5F5F5;

	/* --- Extended palette (brief §4) -------------------------------------- */
	--krl-berry:  #A81D3F;
	--krl-coral:  #FF6B5A;
	--krl-amber:  #F5A524;
	--krl-teal:   #0E7C7B;
	--krl-violet: #6C4AB6;

	--krl-tint-crimson: #FDF0F2;
	--krl-tint-amber:   #FFF6E9;
	--krl-tint-teal:    #EAF5F4;
	--krl-tint-violet:  #F2EEFB;

	/* --- Dark-field text values (TEXT-COLOUR LAW) ------------------------- */
	--krl-on-ink:      #FFFFFF;  /* 18.88:1 on ink */
	--krl-on-ink-body: #E3E3E3;  /* 14.71:1 on ink */
	--krl-hair-light:  rgba(255, 255, 255, .16);
	--krl-hair-light2: rgba(255, 255, 255, .22);

	/* --- Chapter hairlines: tinted bands take their own hue at low alpha -- */
	--krl-hair-teal:   rgba(14, 124, 123, .30);
	--krl-hair-amber:  rgba(245, 165, 36, .55);
	--krl-hair-violet: rgba(108, 74, 182, .28);

	/* --- THE REGISTER, light grounds (S7 backplates) ---------------------- */
	--krl-reg-1: var(--krl-accent);
	--krl-reg-2: var(--krl-berry);
	--krl-reg-3: var(--krl-teal);
	--krl-reg-4: var(--krl-ink);   /* the violet slot, demoted to neutral */
	--krl-reg-5: var(--krl-amber);
	--krl-reg-6: var(--krl-coral);
	--krl-reg-7: var(--krl-ink);
	/* figure colour that clears 4.5:1 on each backplate above */
	--krl-reg-1-on: #FFFFFF;       /* 4.62:1 */
	--krl-reg-2-on: #FFFFFF;       /* 7.21:1 */
	--krl-reg-3-on: #FFFFFF;       /* 5.01:1 */
	--krl-reg-4-on: #FFFFFF;       /* 18.88:1 */
	--krl-reg-5-on: var(--krl-ink);/* 9.25:1  — amber finally carries a mark */
	--krl-reg-6-on: var(--krl-ink);/* 6.75:1 */
	--krl-reg-7-on: #FFFFFF;       /* 18.88:1 */

	/* --- THE REGISTER, ink grounds (S10 ticks) ----------------------------
	   Berry is 2.60:1 on ink, i.e. functionally invisible, so the berry
	   channel appears on dark grounds as its tint. The two neutral slots
	   invert to white per the TEXT-COLOUR LAW.                            */
	--krl-regd-1: var(--krl-accent);
	--krl-regd-2: var(--krl-tint-crimson);
	--krl-regd-3: var(--krl-teal);
	--krl-regd-4: #FFFFFF;
	--krl-regd-5: var(--krl-amber);
	--krl-regd-6: var(--krl-coral);
	--krl-regd-7: #FFFFFF;

	/* --- Spacing ladder. Section heights are rhythm, not uniformity:
	       -sm on the punctuation bands (S2, S3, S6, S9)
	       -md on the argument sections (S1, S4, S5, S7, S8, S10, S11, S12)
	       -lg on S13 only, so the closing gradient is the tallest band. --- */
	--krl-sec-xs: clamp(2.5rem, 2rem + 1.6vw, 3.75rem);
	--krl-sec-sm: clamp(3.5rem, 2.5rem + 3vw, 6rem);
	--krl-sec:    clamp(4.5rem, 3rem + 6vw, 9rem);
	--krl-sec-lg: clamp(5.5rem, 3.5rem + 8vw, 12rem);

	/* strict 4px step set — all internal gaps come from here */
	--krl-4:   .25rem;
	--krl-8:   .5rem;
	--krl-12:  .75rem;
	--krl-16:  1rem;
	--krl-20:  1.25rem;
	--krl-24:  1.5rem;
	--krl-32:  2rem;
	--krl-40:  2.5rem;
	--krl-56:  3.5rem;
	--krl-72:  4.5rem;
	--krl-96:  6rem;
	--krl-144: 9rem;

	/* --- Grid & measure --------------------------------------------------- */
	--krl-max:    1400px;
	--krl-gutter: clamp(1rem, 4vw, 3rem);
	--krl-col-gap: clamp(1rem, 2.2vw, 2rem);

	/* --- Motion ----------------------------------------------------------- */
	--krl-ease: cubic-bezier(.2, .7, .2, 1);
	--krl-fast: 220ms;
	--krl-med:  260ms;

	/* --- Hero signature geometry ------------------------------------------
	   The eyebrow is a fixed single line (.75rem / 1.2 = .9rem) plus its
	   1.5rem margin, so the H1 cap-line is deterministic. The final clamp is
	   the optical nudge from the H1 box top down to its cap-line (lh .90). */
	--krl-hero-field-top: calc(var(--krl-sec-lg) + 2.4rem + clamp(.25rem, .9vw, .75rem));
}


/* ==========================================================================
   2. BASE — everything scoped under .krl
   ========================================================================== */

.krl {
	display: block;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	overflow-x: clip; /* global guard: no horizontal scroll at any width */
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--krl-text);
	background: var(--krl-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.krl *,
.krl *::before,
.krl *::after { box-sizing: border-box; }

/* These element defaults are wrapped in :where() so they carry ZERO
   specificity. A plain `.krl h2` selector would score (0,1,1) and silently
   beat every single-class component rule below it — which is how a crimson
   button ends up with grey body-text as its label, and how component margins
   get eaten. :where() keeps the reset a true default that components override
   naturally, with no !important and no specificity arms race. */
:where(.krl) h1,
:where(.krl) h2,
:where(.krl) h3 {
	margin: 0;
	color: var(--krl-ink);
	font-weight: 600;
	text-wrap: balance;
}

:where(.krl) p { margin: 0; }

:where(.krl) ul,
:where(.krl) ol,
:where(.krl) dl { margin: 0; padding: 0; list-style: none; }

:where(.krl) dd { margin: 0; }

:where(.krl) img,
:where(.krl) svg { display: block; max-width: 100%; }

:where(.krl) a { color: inherit; text-decoration: none; }

:where(.krl) b,
:where(.krl) strong { font-weight: 600; }

/* Section shell. overflow-x:clip (never hidden) keeps the vertical axis
   visible, so nothing here can create an unwanted scroll container. */
.krl-s {
	position: relative;
	width: 100%;
	overflow-x: clip;
}

.krl-wrap {
	position: relative;
	width: 100%;
	max-width: var(--krl-max);
	margin-inline: auto;
	padding-inline: var(--krl-gutter);
}

.krl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   3. SHARED OBJECTS
   ========================================================================== */

/* --- Chapter bar: a 4px full-bleed hue bar on the top edge of every tinted
       band. Scrolling produces a visible index of colour bars, like the
       tabbed edge of a bound volume. ------------------------------------- */
.krl-chapter-bar {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 4px;
	z-index: 3;
	pointer-events: none;
}
.krl-chapter-bar--crimson { background: var(--krl-accent); }
.krl-chapter-bar--teal    { background: var(--krl-teal); }
.krl-chapter-bar--amber   { background: var(--krl-amber); }
.krl-chapter-bar--violet  { background: var(--krl-violet); }
.krl-chapter-bar--ink     { background: var(--krl-ink); height: 6px; }

/* --- Eyebrow / label / index micro-type ------------------------------------ */
.krl-eyebrow {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--krl-berry);
}
.krl-eyebrow__mark {
	display: inline-block;
	width: 32px;
	height: 3px;
	margin-inline-end: var(--krl-12);
	vertical-align: middle;
	background: var(--krl-teal);
}
.krl-eyebrow__mark--light  { background: #FFFFFF; }
.krl-eyebrow__mark--violet { background: var(--krl-violet); }

/* --- THE CHROMATIC FULL STOP — the same mark at three scales -------------- */
.krl-fullstop {
	display: inline-block;
	width: .42em;
	height: .42em;
	margin-inline-start: .12em;
	background: var(--krl-accent);
	vertical-align: baseline;
}

/* --- DRAW-ON UNDERLINE — the page's single motion motif. One gesture,
       three placements: service card titles, FAQ questions, the Shopify link.
       background-size is animatable and needs no pseudo-element, so it works
       across wrapped lines with box-decoration-break. --------------------- */
.krl-ul {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	padding-bottom: .06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* --- Section header row: display H2, a hairline riding the baseline, and a
       right-aligned count marker so a scanner knows the section's size
       before committing to the scroll. ------------------------------------ */
.krl-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--krl-12) var(--krl-24);
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.krl-head__title {
	flex: 0 1 auto;
	font-size: clamp(2.25rem, 5.2vw, 4.5rem);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: .96;
}
.krl-head__rule {
	display: none;
	flex: 1 1 4rem;
	height: 1px;
	margin-bottom: .6em;
	background: var(--krl-border);
}
.krl-head__count {
	flex: 0 0 auto;
	margin-bottom: .4em;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--krl-berry);
}
.krl-head__count--plain {
	letter-spacing: .02em;
	text-transform: none;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--krl-text);
}
.krl-head__count-n { font-variant-numeric: tabular-nums; }

@media (min-width: 600px) {
	.krl-head__rule { display: block; }
	.krl-head { flex-wrap: nowrap; }
}

/* --- Buttons. Radius 0, 52px minimum, crimson or ink only. ---------------- */
.krl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--krl-12);
	min-height: 52px;
	padding: 1.125rem 2.25rem;
	border: 1px solid transparent;
	border-radius: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.krl-btn--primary { background: var(--krl-accent); color: #FFFFFF; }        /* 4.62:1 */
.krl-btn--primary:hover,
.krl-btn--primary:focus-visible { background: var(--krl-berry); }           /* 7.21:1 */

.krl-btn--ghost { background: transparent; border-color: var(--krl-ink); color: var(--krl-ink); }
.krl-btn--ghost:hover,
.krl-btn--ghost:focus-visible { background: var(--krl-ink); color: #FFFFFF; }

/* White fill / ink label — used on the ink pricing card and the S13 gradient */
.krl-btn--invert,
.krl-btn--light { background: #FFFFFF; color: var(--krl-ink); }
.krl-btn--invert:hover,
.krl-btn--invert:focus-visible,
.krl-btn--light:hover,
.krl-btn--light:focus-visible { background: var(--krl-tint-crimson); color: var(--krl-ink); }

.krl-btn:focus-visible { outline: 2px solid var(--krl-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
	.krl-btn { transition: background-color var(--krl-fast) var(--krl-ease), color var(--krl-fast) var(--krl-ease), border-color var(--krl-fast) var(--krl-ease); }
	.krl-ul { transition: background-size var(--krl-fast) var(--krl-ease); }
}

/* --- Scroll reveal. Armed only by .krl-js, which JS adds after an
       IntersectionObserver is successfully constructed, and never under a
       reduced-motion preference. Nothing can be left invisible. ----------- */
@media (prefers-reduced-motion: no-preference) {
	.krl-js .krl-reveal {
		opacity: 0;
		transform: translateY(14px);
	}
	.krl-js .krl-reveal.krl-in {
		opacity: 1;
		transform: none;
		transition: opacity 620ms ease, transform 620ms var(--krl-ease);
	}
}

/* PRINT ESCAPE HATCH. `prefers-reduced-motion` still evaluates under media
   type print, so without this a print or PDF taken before the JS safety timer
   fires would emit blank sections for everything below the fold. Same
   specificity as the .krl-in rule but later in the file, so no !important. */
@media print {
	.krl-js .krl-reveal,
	.krl-js .krl-reveal.krl-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   4. SECTION 1 — HERO
   field: --krl-tint-crimson · bar: crimson
   ink/tint 17.0:1 · text/tint 5.93:1 · berry/tint 6.50:1 · white/crimson 4.62:1
   ========================================================================== */

.krl-hero {
	background: var(--krl-tint-crimson);
	padding-block: var(--krl-sec-lg) var(--krl-sec);
}

.krl-hero__wrap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--krl-col-gap);
	z-index: 2;
}
.krl-hero__wrap > * { grid-column: 1 / -1; min-width: 0; }

.krl-hero__eyebrow { margin-bottom: var(--krl-24); }

.krl-hero__title {
	font-size: clamp(3.25rem, 9.4vw, 8.75rem);
	font-weight: 600;
	letter-spacing: -.045em;
	line-height: .90;
	max-inline-size: 15ch;
	color: var(--krl-ink);
	text-wrap: balance;
}

.krl-hero__sub {
	margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
	max-inline-size: 46ch;
	font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
	line-height: 1.5;
	color: var(--krl-text);
	text-wrap: pretty;
}

.krl-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--krl-12);
	margin-top: clamp(2rem, 3.4vw, 3rem);
}

/* THE CRIMSON FIELD — the single boldest gesture on the page, and it contains
   nothing. Backed by an offset hairline plate so two misregistered fields read
   unmistakably as a deliberate compositional act rather than a failed image. */
.krl-hero__field,
.krl-hero__plate { display: none; }

.krl-hero__field-mobile {
	display: block;
	width: 100%;
	height: clamp(88px, 22vw, 160px);
	margin-top: clamp(2.5rem, 6vw, 4rem);
	margin-bottom: calc(-1 * var(--krl-sec)); /* flush to the hero's bottom edge */
	background: var(--krl-accent);
}

@media (max-width: 639px) {
	.krl-hero__cta { flex-direction: column; align-items: stretch; }
	.krl-hero__cta .krl-btn { width: 100%; }
}

@media (min-width: 900px) {
	.krl-hero__sub,
	.krl-hero__cta { grid-column: 1 / span 7; }
	.krl-hero__field-mobile { display: none; }
}

@media (min-width: 1200px) {
	.krl-hero__title { grid-column: 1 / span 9; }
	.krl-hero__sub,
	.krl-hero__cta { grid-column: 1 / span 6; }

	.krl-hero__field {
		display: block;
		position: absolute;
		inset-block-start: var(--krl-hero-field-top);
		inset-block-end: 0;
		/* 76% keeps BOTH the field and the 24px-offset ghost plate behind it
		   clear of the 9-column H1 at every width from 1200 to 1920. At the
		   tightest point (1200px) the plate still clears the H1 by ~30px. */
		inset-inline-start: 76%;
		inset-inline-end: 0;
		background: var(--krl-accent);
		z-index: 1;
	}
	.krl-hero__plate {
		display: block;
		position: absolute;
		inset-block-start: calc(var(--krl-hero-field-top) - 24px);
		inset-block-end: 24px;
		inset-inline-start: calc(76% - 24px);
		inset-inline-end: 24px;
		border: 1px solid rgba(221, 45, 74, .30);
		z-index: 0;
	}
}


/* ==========================================================================
   5. SECTION 2 — SERVICE MARQUEE   (black metronome 1 of 3)
   field: --krl-ink · white 18.88:1 · amber numerals 9.25:1
   ========================================================================== */

.krl-marquee {
	background: var(--krl-ink);
	padding-block: var(--krl-sec-xs);
}

/* overflow:hidden on the container is mandatory (brief §7). Under reduced
   motion it becomes a scroll container, so the markup gives it
   role="region" + tabindex="0" and it needs a visible focus ring. The ring is
   inset because anything outside the box would be clipped by overflow. */
.krl-marquee__viewport { overflow: hidden; }
.krl-marquee__viewport:focus-visible { outline: 2px solid var(--krl-amber); outline-offset: -2px; }  /* 9.25:1 on ink */

/* WCAG 2.2.2 — the marquee runs longer than 5s, so it needs a real
   user-operable stop. The button sits inside the viewport so that the
   :focus-within rule below pauses the animation even with JS absent; with JS,
   clicking it latches .is-paused on the track. */
.krl-marquee__bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--krl-24);
}
.krl-marquee__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--krl-8);
	min-height: 44px;
	min-width: 44px;
	padding-inline: var(--krl-16);
	background: transparent;
	border: 1px solid var(--krl-hair-light2);
	border-radius: 0;
	color: #FFFFFF;              /* 18.88:1 on ink */
	font: inherit;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.krl-marquee__pause:hover { background: rgba(255, 255, 255, .08); }
.krl-marquee__pause:focus-visible { outline: 2px solid var(--krl-amber); outline-offset: 2px; }
/* Latched state reads as an inverted chip, so the control never looks inert. */
.krl-marquee__pause[aria-pressed="true"] { background: #FFFFFF; border-color: #FFFFFF; color: var(--krl-ink); }

.krl-marquee__pause-icon {
	position: relative;
	display: block;
	flex: none;
	width: 12px;
	height: 12px;
}
.krl-marquee__pause-icon::before,
.krl-marquee__pause-icon::after {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 3px;
	background: currentColor;
}
.krl-marquee__pause-icon::before { inset-inline-start: 0; }
.krl-marquee__pause-icon::after  { inset-inline-end: 0; }
/* Paused: the two bars become a single play triangle. */
.krl-marquee__pause[aria-pressed="true"] .krl-marquee__pause-icon::after { display: none; }
.krl-marquee__pause[aria-pressed="true"] .krl-marquee__pause-icon::before {
	inset-block: 0 auto;
	inset-inline-start: 1px;
	width: 0;
	height: 0;
	background: transparent;
	border-block: 6px solid transparent;
	border-inline-start: 10px solid currentColor;
}

.krl-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
}

.krl-marquee__group {
	display: flex;
	align-items: center;
}

.krl-marquee__item {
	display: flex;
	align-items: flex-start;
	gap: var(--krl-12);
	margin-inline: clamp(1.5rem, 3vw, 3rem);
}

/* The chromatic beat: one 10px crimson square per gap. */
.krl-marquee__item::after {
	content: "";
	align-self: center;
	width: 10px;
	height: 10px;
	margin-inline-start: clamp(1.5rem, 3vw, 3rem);
	background: var(--krl-accent);
}

.krl-marquee__num {
	flex: none;
	transform: translateY(.35em);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	font-variant-numeric: tabular-nums;
	color: var(--krl-amber);
}

.krl-marquee__word {
	font-size: clamp(1.75rem, 4.4vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.05;
	white-space: nowrap;
	color: #FFFFFF;
}

@media (prefers-reduced-motion: no-preference) {
	.krl-marquee__track { animation: krl-marquee 34s linear infinite; }
	/* Three stop mechanisms: hover (pointer), :focus-within (keyboard, and it
	   now actually matches because the pause button lives inside the viewport),
	   and the latched .is-paused class the button sets via JS. */
	.krl-marquee__viewport:hover .krl-marquee__track,
	.krl-marquee__viewport:focus-within .krl-marquee__track,
	.krl-marquee__track.is-paused { animation-play-state: paused; }

	@media (max-width: 767px) {
		.krl-marquee__track { animation-duration: 24s; }
	}
}

@keyframes krl-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion: no animation at all, the duplicate group is removed, and the
   viewport becomes scrollable so all five items stay reachable. */
@media (prefers-reduced-motion: reduce) {
	.krl-marquee__group--dup { display: none; }
	.krl-marquee__viewport { overflow-x: auto; scrollbar-width: thin; }
	/* Nothing moves here, so a pause control would be a lie. The viewport's own
	   role/tabindex keeps the five items keyboard-reachable. */
	.krl-marquee__bar { display: none; }
}


/* ==========================================================================
   6. SECTION 3 — CLIENT LOGO WALL
   field: --krl-bg PURE WHITE — non-negotiable, the SVGs carry baked white rects.
   The page's first breath, and technically required by the assets.
   ========================================================================== */

.krl-logos {
	background: var(--krl-bg);
	border-block: 1px solid var(--krl-border);
	padding-block: var(--krl-sec-sm);
}

.krl-logos__head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.krl-logos__title {
	margin-top: var(--krl-12);
	max-inline-size: 26ch;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.1;
	color: var(--krl-ink);
}

/* THE HAIRLINE QUILT, use 1 of 3. Every division on the page is the identical
   1px #E3E3E3 seam: this lattice, the service quilt (S4), the pricing table
   (S8) and the fact table (S5) are all the same construction. */
.krl-lattice {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--krl-border);
	border: 1px solid var(--krl-border);
}

.krl-lattice__cell {
	display: grid;
	place-items: center;
	min-width: 0;
	aspect-ratio: 5 / 3;
	padding: clamp(.75rem, 1.6vw, 1.25rem);
	background: #FFFFFF;
}

.krl-lattice__logo {
	width: auto;
	height: clamp(30px, 4.2vw, 46px);
	max-width: 100%;
	object-fit: contain;
	/* belt-and-braces against the baked-in white background <rect> */
	mix-blend-mode: multiply;
	filter: grayscale(1) opacity(.55);
}

.krl-lattice__cell:hover .krl-lattice__logo,
.krl-lattice__cell:focus-within .krl-lattice__logo {
	filter: grayscale(0) opacity(1);
}

@media (prefers-reduced-motion: no-preference) {
	.krl-lattice__logo { transition: filter 240ms var(--krl-ease); }
}

/* 5 columns => two clean rows of 5. Never 3 or 4, which orphan cells in a
   visible lattice. At 360px: 2 cols, (328 - 2 border - 1 gap) / 2 = 162.5px
   per cell, 12px padding, logo 30px tall / ~57px wide. Fits with room. */
@media (min-width: 640px) {
	.krl-lattice { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ==========================================================================
   7. SECTION 4 — WHAT WE OFFER · the service quilt
   base: --krl-bg, carrying seven flat colour fields butted together with
   nothing but a hairline between them.
   ========================================================================== */

.krl-offer {
	background: var(--krl-bg);
	padding-block: var(--krl-sec);
}

/* THE HAIRLINE QUILT, use 2 of 3. */
.krl-quilt {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--krl-border);
	border: 1px solid var(--krl-border);
}

.krl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--krl-16);
	min-width: 0;
	min-height: clamp(240px, 26vw, 340px);
	padding: clamp(1.5rem, 2.6vw, 2.75rem);
	border-radius: 0;
	background: var(--krl-card-field);
	color: var(--krl-card-title);
}

/* Top bar in the card's accent. Height only — no transform, so it is safe. */
.krl-card__bar {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 6px;
	background: var(--krl-card-accent);
}
@media (prefers-reduced-motion: no-preference) {
	.krl-card__bar { transition: height var(--krl-med) var(--krl-ease); }
	.krl-card:hover .krl-card__bar,
	.krl-card:focus-visible .krl-card__bar { height: 14px; }
	.krl-card__go { transition: transform 240ms var(--krl-ease); }
	.krl-card:hover .krl-card__go { transform: translateX(8px); }
}

.krl-card__icon {
	display: block;
	color: var(--krl-card-mark);
	margin-top: var(--krl-8);
}
.krl-card__icon > svg { width: 40px; height: 40px; }

/* Contrast fix for card 4: amber on tint-amber is 1.91:1 and fails the 3:1
   graphic rule, so the icon sits on a solid amber backplate with INK strokes
   (9.25:1). The same device is reused for the S7 index numerals. */
.krl-card__icon--plate {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--krl-amber);
	color: var(--krl-ink);
}
.krl-card__icon--plate > svg { width: 30px; height: 30px; }

.krl-card__title {
	font-size: clamp(1.1875rem, 1.6vw, 1.625rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--krl-card-title);
}

.krl-card__go {
	margin-top: auto;
	color: var(--krl-card-mark);
}
.krl-card__go > svg { width: 24px; height: 24px; }

.krl-card:hover .krl-card__title .krl-ul,
.krl-card:focus-visible .krl-card__title .krl-ul { background-size: 100% 2px; }

/* currentColor here is always the title colour, so the ring is >=3:1 on its
   own field by construction. */
.krl-card:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -6px;
}

/* FEATURED CARD — the 7-column cell gets a one-step-up title and a larger
   icon, so the page's colour peak has an actual focal point instead of seven
   equal-weight blocks. */
.krl-card--feature .krl-card__title { font-size: clamp(1.375rem, 2.1vw, 2.125rem); letter-spacing: -.025em; }
.krl-card--feature .krl-card__icon > svg { width: 52px; height: 52px; }

/* --- The seven fields. Titles are ink on light, white on dark — never a hue,
       per the TEXT-COLOUR LAW. Marks are the card's accent wherever it clears
       3:1 as a graphic, and ink where it does not. ------------------------ */
.krl-card--1 { --krl-card-field: var(--krl-tint-crimson); --krl-card-accent: var(--krl-accent); --krl-card-title: var(--krl-ink);  --krl-card-mark: var(--krl-accent); }
.krl-card--2 { --krl-card-field: var(--krl-ink);          --krl-card-accent: var(--krl-coral);  --krl-card-title: #FFFFFF;         --krl-card-mark: var(--krl-coral); }
.krl-card--3 { --krl-card-field: var(--krl-tint-teal);    --krl-card-accent: var(--krl-teal);   --krl-card-title: var(--krl-ink);  --krl-card-mark: var(--krl-teal); }
.krl-card--4 { --krl-card-field: var(--krl-tint-amber);   --krl-card-accent: var(--krl-amber);  --krl-card-title: var(--krl-ink);  --krl-card-mark: var(--krl-ink); }
.krl-card--5 { --krl-card-field: var(--krl-berry);        --krl-card-accent: #FFFFFF;           --krl-card-title: #FFFFFF;         --krl-card-mark: #FFFFFF; }
.krl-card--6 { --krl-card-field: var(--krl-tint-violet);  --krl-card-accent: var(--krl-violet); --krl-card-title: var(--krl-ink);  --krl-card-mark: var(--krl-violet); }
.krl-card--7 { --krl-card-field: var(--krl-mist);         --krl-card-accent: var(--krl-ink);    --krl-card-title: var(--krl-ink);  --krl-card-mark: var(--krl-ink); }

/* 600–899px: two columns, card 7 spans both so the row never orphans. */
@media (min-width: 600px) {
	.krl-quilt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.krl-card--7 { grid-column: span 2; }
}

/* 900–1199px: six columns, 3/3 — 2/2/2 — 3/3. */
@media (min-width: 900px) {
	.krl-quilt { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.krl-card--1 { grid-column: span 3; }
	.krl-card--2 { grid-column: span 3; }
	.krl-card--3,
	.krl-card--4,
	.krl-card--5 { grid-column: span 2; }
	.krl-card--6 { grid-column: span 3; }
	.krl-card--7 { grid-column: span 3; }
}

/* >=1200px: twelve columns, 5/7 — 4/4/4 — 7/5. Asymmetric, no orphan. */
@media (min-width: 1200px) {
	.krl-quilt { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.krl-card--1 { grid-column: span 5; }
	.krl-card--2 { grid-column: span 7; }
	.krl-card--3,
	.krl-card--4,
	.krl-card--5 { grid-column: span 4; }
	.krl-card--6 { grid-column: span 7; }
	.krl-card--7 { grid-column: span 5; }
}


/* ==========================================================================
   8. SECTION 5 — OUR STORY
   field: --krl-tint-teal · bar: teal
   Teal at 12px on tint-teal is 4.51:1 — technically passing but too marginal
   to ship at that size, so teal is restricted here to rules, bars and seams.
   ========================================================================== */

.krl-story {
	background: var(--krl-tint-teal);
	padding-block: var(--krl-sec);
}

.krl-story__wrap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--krl-col-gap);
}
.krl-story__wrap > * { grid-column: 1 / -1; min-width: 0; }

.krl-story__eyebrow { color: var(--krl-ink); }

.krl-story__title {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	font-size: clamp(1.875rem, 4.2vw, 3.75rem);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.06;
	color: var(--krl-ink);
	text-wrap: balance;
}

.krl-story__rule {
	height: 1px;
	margin-block: clamp(2rem, 1.5rem + 2.5vw, 4rem);
	background: var(--krl-teal);
}

/* THE HAIRLINE QUILT, use 3 of 3 — the fact table. Seams take the chapter's
   own hue at low alpha, because #E3E3E3 on tint-teal is ~1.1:1 and vanishes. */
.krl-facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--krl-hair-teal);
	border: 1px solid var(--krl-hair-teal);
}
.krl-facts__row {
	display: grid;
	grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
	gap: var(--krl-16);
	align-items: baseline;
	padding: var(--krl-16) var(--krl-20);
	background: var(--krl-tint-teal);
}
.krl-facts__k {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--krl-text);
}
.krl-facts__v {
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--krl-ink);
}

.krl-story__body {
	margin-top: var(--krl-32);
	max-inline-size: 40ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--krl-text);
}

@media (min-width: 900px) {
	.krl-story__eyebrow { grid-column: 1 / span 6; }
	.krl-story__title   { grid-column: 1 / span 9; }
	.krl-facts          { grid-column: 1 / span 6; }
	/* justified to the right column, so the rule above reads as a fold */
	.krl-story__body    { grid-column: 8 / -1; margin-top: 0; }
}


/* ==========================================================================
   9. SECTION 6 — STATS   (black metronome 2 of 3)
   field: --krl-ink. A warm quartet: amber 9.25 · coral 6.75 · white 18.88 ·
   crimson 4.09 — legal because every numeral renders at >=48px, where the
   large-text threshold is 3:1. Captions #E3E3E3 at 14.71:1.
   ========================================================================== */

.krl-stats {
	background: var(--krl-ink);
	padding-block: var(--krl-sec-sm);
}

.krl-stats__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.krl-stat {
	min-width: 0;
	padding-block: var(--krl-32);
}
.krl-stat + .krl-stat { border-block-start: 1px solid var(--krl-hair-light); }

.krl-stat__n {
	display: block;
	font-size: clamp(3rem, 7.2vw, 6.5rem);
	font-weight: 600;
	letter-spacing: -.045em;
	line-height: .90;
	font-variant-numeric: tabular-nums;
}
.krl-stat:nth-child(1) .krl-stat__n { color: var(--krl-amber); }
.krl-stat:nth-child(2) .krl-stat__n { color: var(--krl-coral); }
.krl-stat:nth-child(3) .krl-stat__n { color: #FFFFFF; }
.krl-stat:nth-child(4) .krl-stat__n { color: var(--krl-accent); }

.krl-stat__c {
	display: block;
	margin-top: clamp(.75rem, 1.4vw, 1rem);
	max-inline-size: 22ch;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--krl-on-ink-body);
}

@media (min-width: 480px) {
	.krl-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.krl-stat { padding-inline: clamp(1rem, 2.4vw, 2.5rem); }
	.krl-stat:nth-child(-n+2) { border-block-start: 0; }
	.krl-stat:nth-child(n+3)  { border-block-start: 1px solid var(--krl-hair-light); }
	.krl-stat:nth-child(2n)   { border-inline-start: 1px solid var(--krl-hair-light); }
	.krl-stat:nth-child(1),
	.krl-stat:nth-child(3)    { padding-inline-start: 0; }
}

@media (min-width: 900px) {
	.krl-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.krl-stat { border-block-start: 0; border-inline-start: 1px solid var(--krl-hair-light); padding-inline: clamp(1rem, 2.4vw, 2.5rem); }
	.krl-stat:nth-child(n+3) { border-block-start: 0; }
	.krl-stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
	.krl-stat:nth-child(3) { padding-inline-start: clamp(1rem, 2.4vw, 2.5rem); }
}


/* ==========================================================================
   10. SECTION 7 — WHY CHOOSE US
   field: --krl-tint-amber · bar: amber
   A deliberate register change: after a section of solid blocks the page needs
   a flat typographic passage. Index numerals sit on solid REGISTER backplates,
   which is how amber finally carries something on its own chapter instead of
   only edging it — amber text on any light field is banned (1.91:1 here).
   ========================================================================== */

.krl-why {
	background: var(--krl-tint-amber);
	padding-block: var(--krl-sec);
}
.krl-why .krl-head__rule { background: var(--krl-hair-amber); }
.krl-why .krl-head__count { color: var(--krl-berry); }  /* 6.73:1 */

.krl-why__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--krl-8) clamp(1rem, 2.4vw, 2rem);
	padding-block: var(--krl-20);
	border-block-start: 1px solid var(--krl-hair-amber);
}
.krl-why__item:last-child { border-block-end: 1px solid var(--krl-hair-amber); }

.krl-why__i {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
	background: var(--krl-reg-plate);
	color: var(--krl-reg-figure);
}

/* THE REGISTER re-flowed. Same order as the S4 service fields; the violet slot
   (04) renders as the neutral so the page keeps exactly two violet uses. */
.krl-why__item:nth-child(1) { --krl-reg-plate: var(--krl-reg-1); --krl-reg-figure: var(--krl-reg-1-on); }
.krl-why__item:nth-child(2) { --krl-reg-plate: var(--krl-reg-2); --krl-reg-figure: var(--krl-reg-2-on); }
.krl-why__item:nth-child(3) { --krl-reg-plate: var(--krl-reg-3); --krl-reg-figure: var(--krl-reg-3-on); }
.krl-why__item:nth-child(4) { --krl-reg-plate: var(--krl-reg-4); --krl-reg-figure: var(--krl-reg-4-on); }
.krl-why__item:nth-child(5) { --krl-reg-plate: var(--krl-reg-5); --krl-reg-figure: var(--krl-reg-5-on); }
.krl-why__item:nth-child(6) { --krl-reg-plate: var(--krl-reg-6); --krl-reg-figure: var(--krl-reg-6-on); }
.krl-why__item:nth-child(7) { --krl-reg-plate: var(--krl-reg-7); --krl-reg-figure: var(--krl-reg-7-on); }

.krl-why__t {
	font-size: clamp(1.125rem, 1.7vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--krl-ink);
}
.krl-why__p {
	max-inline-size: 60ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--krl-text);
}

/* >=720px the index becomes a true first column. */
@media (min-width: 720px) {
	.krl-why__item {
		grid-template-columns: 3rem minmax(0, 1fr);
		padding-block: clamp(1.25rem, 2.2vw, 2rem);
	}
	.krl-why__i { grid-row: span 2; align-self: start; margin-top: .2rem; }
}

/* >=1024px the title and line sit side by side, 5fr / 7fr. */
@media (min-width: 1024px) {
	.krl-why__item { grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; }
	.krl-why__i { grid-row: auto; }
}


/* ==========================================================================
   11. SECTION 8 — PRICING
   field: --krl-bg, carrying three card fields left to right:
   white · ink (the inverted anchor) · tint-crimson.
   align-items:stretch + margin-top:auto on the CTA puts all three buttons on
   one baseline despite the 5 / 7 / 8 feature-count difference. Price
   comparison is the highest-intent scan on the page.
   ========================================================================== */

.krl-pricing {
	background: var(--krl-bg);
	padding-block: var(--krl-sec);
}

/* THE HAIRLINE QUILT again — the pricing table is the same 1px seam grid. */
.krl-plans {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	align-items: stretch;
	background: var(--krl-border);
	border: 1px solid var(--krl-border);
}

.krl-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1.75rem, 3vw, 3rem);
	border-radius: 0;
	background: var(--krl-plan-field);
}

/* The Popular badge sits IN FLOW in the header row, never absolutely
   positioned over the card edge — that is the 360px overflow bug. */
.krl-plan__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--krl-12);
}

.krl-plan__name {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--krl-plan-name);
}

.krl-plan__badge {
	padding: .375rem .75rem;
	background: var(--krl-accent);
	color: #FFFFFF;              /* 4.62:1 */
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Gradient 2 of 2 — crimson to coral, on the Business card only. */
.krl-plan__topbar {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 6px;
	background: linear-gradient(90deg, #DD2D4A 0%, #FF6B5A 100%);
}

.krl-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-top: var(--krl-12);
}
.krl-plan__amount {
	font-size: clamp(2.5rem, 4.4vw, 3.5rem);
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--krl-plan-strong);
}
.krl-plan__term {
	margin-inline-start: var(--krl-8);
	font-size: .875rem;
	font-weight: 400;
	color: var(--krl-plan-body);
}

.krl-plan__rule {
	height: 1px;
	margin-block: clamp(1.25rem, 2vw, 1.75rem);
	background: var(--krl-plan-hair);
}

.krl-plan__desc {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--krl-plan-body);
}

/* The gap above the CTA lives here, so `margin-top:auto` on the button itself
   is never overridden and the three CTAs always share one baseline. */
.krl-plan__features { display: grid; margin-block-end: clamp(1.5rem, 2.4vw, 2rem); }
.krl-plan__features > li {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr);
	gap: var(--krl-12);
	align-items: start;
	padding-block: var(--krl-8);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--krl-plan-body);
}
.krl-plan__marker {
	width: 10px;
	height: 10px;
	transform: translateY(.45em);
	background: var(--krl-plan-marker);
}

.krl-plan__cta {
	width: 100%;
	margin-block-start: auto;   /* one CTA baseline across 5 / 7 / 8 features */
	padding-inline: 2rem;
}

/* --- The three fields ---------------------------------------------------- */
.krl-plan--basic {
	--krl-plan-field: var(--krl-bg);
	--krl-plan-name: var(--krl-berry);   /* 7.21:1 */
	--krl-plan-strong: var(--krl-ink);   /* 18.88:1 */
	--krl-plan-body: var(--krl-text);    /* 6.58:1 */
	--krl-plan-marker: var(--krl-accent);
	--krl-plan-hair: var(--krl-border);
}
.krl-plan--business {
	--krl-plan-field: var(--krl-ink);
	--krl-plan-name: var(--krl-amber);   /* 9.25:1 */
	--krl-plan-strong: #FFFFFF;          /* 18.88:1 */
	--krl-plan-body: var(--krl-on-ink-body); /* 14.71:1 */
	--krl-plan-marker: var(--krl-coral);
	--krl-plan-hair: var(--krl-hair-light);
}
.krl-plan--enterprise {
	--krl-plan-field: var(--krl-tint-crimson);
	--krl-plan-name: var(--krl-berry);   /* 6.50:1 */
	--krl-plan-strong: var(--krl-ink);   /* 17.0:1 */
	--krl-plan-body: var(--krl-text);    /* 5.93:1 */
	--krl-plan-marker: var(--krl-accent);
	--krl-plan-hair: rgba(17, 17, 17, .14);
}
.krl-plan--business .krl-btn:focus-visible { outline-color: #FFFFFF; }

.krl-pricing__note {
	margin-top: clamp(1.5rem, 2.6vw, 2rem);
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--krl-text);
}
.krl-pricing__note-amount { color: var(--krl-ink); font-weight: 600; }
.krl-link { color: var(--krl-accent); }        /* 4.62:1 on white */
.krl-link .krl-ul { background-size: 100% 1px; }
.krl-link:hover .krl-ul,
.krl-link:focus-visible .krl-ul { background-size: 100% 2px; }
.krl-link:focus-visible { outline: 2px solid var(--krl-ink); outline-offset: 3px; }

/* Never two columns: that orphans the third tier and buries the Popular card. */
@media (min-width: 1000px) {
	.krl-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.krl-pricing__note { text-align: right; }
}


/* ==========================================================================
   12. SECTION 9 — AWARDS
   field: --krl-tint-violet · bar: violet   (VIOLET USE 2 OF 2)
   Deliberately the shortest chapter — a quiet violet interval between the
   pricing table and the black testimonial band. Violet is 5.59:1 here, so it
   passes AA body and the small eyebrow is safe.
   ========================================================================== */

.krl-awards {
	background: var(--krl-tint-violet);
	padding-block: var(--krl-sec-sm);
}

.krl-awards__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--krl-12);
}
/* No display H2: the section heading is the eyebrow itself, which keeps the
   document outline correct without inventing a headline the brief never gave.
   Because it IS the heading it renders --krl-ink, never a hue (brief §4); the
   chapter's violet is carried by the mark beside it, the count, the rule and
   the award icons. */
.krl-awards__eyebrow { color: var(--krl-ink); }   /* 17.0:1 on tint-violet */
.krl-awards__count {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--krl-violet);
}

.krl-awards__rule {
	display: block;
	height: 1px;
	margin-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--krl-violet);
}

.krl-awards__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.krl-award { min-width: 0; }
.krl-award + .krl-award {
	margin-block-start: clamp(1.5rem, 2.4vw, 2rem);
	padding-block-start: clamp(1.5rem, 2.4vw, 2rem);
	border-block-start: 1px solid var(--krl-hair-violet);
}

.krl-award__mark { color: var(--krl-violet); }
.krl-award__mark > svg { width: 28px; height: 28px; }

.krl-award__name {
	margin-top: clamp(1rem, 1.8vw, 1.25rem);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	font-weight: 400;
	letter-spacing: -.015em;
	line-height: 1.25;
	color: var(--krl-ink);
}
.krl-award__org  { font-weight: 600; }
/* The dash sits inside the <h3>, so it inherits ink — no hue inside a heading. */
.krl-award__desc { font-weight: 400; }

.krl-award__detail {
	margin-top: var(--krl-8);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--krl-text);
}

@media (min-width: 560px) {
	.krl-awards__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.krl-award { padding-inline: clamp(1rem, 2vw, 2rem); }
	.krl-award + .krl-award { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
	.krl-award:nth-child(2n)  { border-inline-start: 1px solid var(--krl-hair-violet); }
	.krl-award:nth-child(n+3) { border-block-start: 1px solid var(--krl-hair-violet); padding-block-start: clamp(1.5rem, 2.4vw, 2rem); margin-block-start: clamp(1.5rem, 2.4vw, 2rem); }
	.krl-award:nth-child(1),
	.krl-award:nth-child(3)   { padding-inline-start: 0; }
}

@media (min-width: 1000px) {
	.krl-awards__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.krl-award:nth-child(n+3) { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
	.krl-award + .krl-award { border-inline-start: 1px solid var(--krl-hair-violet); }
	.krl-award:nth-child(3) { padding-inline-start: clamp(1rem, 2vw, 2rem); }
}


/* ==========================================================================
   13. SECTION 10 — TESTIMONIALS   (black metronome 3 of 3)
   field: --krl-ink. A rail, not a marquee: S2 already owns marquee motion and
   this content has to be keyboard-reachable. Native arrow-key, Home/End and
   scrollbar operation all come free from the focusable region — the buttons
   and the crimson thumb are additive, and the rail works without either.
   ========================================================================== */

.krl-tst {
	background: var(--krl-ink);
	padding-block: var(--krl-sec);
}

.krl-tst__head {
	display: flex;
	align-items: center;
	gap: var(--krl-24);
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.krl-tst__rule { flex: 1 1 auto; height: 1px; background: var(--krl-hair-light2); }
.krl-tst__count {
	flex: 0 0 auto;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--krl-amber);   /* 9.25:1 */
}

/* The rail is a full-width child of the full-bleed band, so it runs off the
   right viewport edge by construction. Its left padding is computed to land
   exactly on the .krl-wrap gutter. Nothing overflows: the section is clipped. */
.krl-tst__rail {
	display: flex;
	overflow-x: auto;
	padding-inline-start: max(calc((100% - 1400px) / 2 + var(--krl-gutter)), var(--krl-gutter));
	padding-inline-end: var(--krl-gutter);
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: max(calc((100% - 1400px) / 2 + var(--krl-gutter)), var(--krl-gutter));
	overscroll-behavior-x: contain;
	/* kept visible on purpose: redundant reinforcement of the affordance */
	scrollbar-width: thin;
	scrollbar-color: var(--krl-accent) rgba(255, 255, 255, .14);
}
.krl-tst__rail:focus-visible { outline: 2px solid var(--krl-amber); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
	.krl-tst__rail { scroll-behavior: smooth; }
}

.krl-quote {
	position: relative;
	flex: 0 0 82vw;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 240px;
	margin: 0;
	padding: clamp(1.75rem, 2.6vw, 2.5rem);
	background: var(--krl-ink);
	border-inline-start: 1px solid var(--krl-hair-light);
	scroll-snap-align: start;
}

/* THE REGISTER on ink. Testimonial 03 shares a channel with service 03. */
.krl-quote__tick {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 4px;
	background: var(--krl-tick);
}
.krl-quote:nth-child(1) { --krl-tick: var(--krl-regd-1); }
.krl-quote:nth-child(2) { --krl-tick: var(--krl-regd-2); }
.krl-quote:nth-child(3) { --krl-tick: var(--krl-regd-3); }
.krl-quote:nth-child(4) { --krl-tick: var(--krl-regd-4); }
.krl-quote:nth-child(5) { --krl-tick: var(--krl-regd-5); }
.krl-quote:nth-child(6) { --krl-tick: var(--krl-regd-6); }
.krl-quote:nth-child(7) { --krl-tick: var(--krl-regd-7); }

.krl-quote__mark { color: var(--krl-coral); }   /* 6.75:1 */
.krl-quote__mark > svg { width: 24px; height: 24px; }

.krl-quote__text { margin: 0; }
.krl-quote__text > p {
	margin-top: var(--krl-20);
	font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
	line-height: 1.5;
	color: #FFFFFF;                  /* 18.88:1 */
}

.krl-quote__rule {
	height: 1px;
	margin-block: auto var(--krl-20);   /* pushes the attribution to the foot */
	background: var(--krl-hair-light2);
}
.krl-quote__by { display: flex; flex-direction: column; gap: var(--krl-4); }
.krl-quote__name { font-size: .9375rem; font-weight: 600; color: var(--krl-amber); }
.krl-quote__role { font-size: .8125rem; line-height: 1.4; color: var(--krl-on-ink-body); }

/* THE RAIL RULE — a 2px hairline track carrying a crimson thumb driven by
   scroll position. If the JS never runs the thumb simply keeps its authored
   width and the rail still scrolls: it degrades to a plain static rule. */
.krl-tst__foot {
	display: flex;
	align-items: center;
	gap: var(--krl-24);
	margin-top: clamp(1.5rem, 2.4vw, 2rem);
}
.krl-tst__track {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	background: var(--krl-hair-light);
}
.krl-tst__thumb {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 22%;
	background: var(--krl-accent);
}

/* Visible prev/next controls, shown only when JS is actually running. They
   supplement native arrow-key scrolling; nothing depends on them. Gated by
   `.krl-rail-js`, which initRail adds itself — NOT by `.krl-js` — so a failure
   in any other enhancement can never leave inert buttons on screen. */
.krl-tst__ctrls { display: none; flex: 0 0 auto; gap: var(--krl-8); }
.krl-rail-js .krl-tst__ctrls { display: flex; }
.krl-tst__btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--krl-hair-light2);
	border-radius: 0;
	color: #FFFFFF;
	cursor: pointer;
}
.krl-tst__btn > svg { width: 20px; height: 20px; }
.krl-tst__btn:hover { background: rgba(255, 255, 255, .08); }
.krl-tst__btn:focus-visible { outline: 2px solid var(--krl-amber); outline-offset: 2px; }
/* End state: dimmed but the border stays visible, so the control never vanishes. */
.krl-tst__btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.krl-tst__btn[aria-disabled="true"]:hover { background: transparent; }

@media (min-width: 640px) {
	.krl-quote { flex-basis: clamp(280px, 34vw, 420px); min-height: clamp(260px, 26vw, 320px); }
}


/* ==========================================================================
   14. SECTION 11 — FAQ
   field: --krl-bg. Native <details>/<summary>, so the accordion works with
   JavaScript disabled; name="krl-faq" gives single-open behaviour with zero
   script. NOT sticky — a globally sticky Elementor header of unknown height
   would collide with it, and this is the section that handles objections.
   ========================================================================== */

.krl-faq {
	background: var(--krl-bg);
	padding-block: var(--krl-sec);
}

.krl-faq__wrap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--krl-col-gap);
}
.krl-faq__wrap > * { grid-column: 1 / -1; min-width: 0; }

.krl-faq__head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.krl-faq__title {
	font-size: clamp(2.25rem, 5.2vw, 4.5rem);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: .96;
	color: var(--krl-ink);
}
.krl-faq__count {
	margin-top: var(--krl-16);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--krl-berry);   /* 7.21:1 */
}

.krl-faq__item {
	border-block-start: 1px solid var(--krl-border);
	padding-inline-start: 0;
}
.krl-faq__item:last-child { border-block-end: 1px solid var(--krl-border); }

/* OPEN STATE — colour arrives as a single calm bar, never a highlight fill. */
.krl-faq__item[open] {
	box-shadow: inset 3px 0 0 var(--krl-accent);
	padding-inline-start: var(--krl-20);
}

.krl-faq__q {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	gap: var(--krl-16);
	align-items: center;
	min-height: 56px;
	padding-block: clamp(1.125rem, 1.8vw, 1.5rem);
	list-style: none;
	cursor: pointer;
}
.krl-faq__q::-webkit-details-marker { display: none; }
.krl-faq__q:focus-visible { outline: 2px solid var(--krl-accent); outline-offset: 2px; }

.krl-faq__qt {
	max-inline-size: 40ch;
	font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.35;
	color: var(--krl-ink);
}
.krl-faq__q:hover .krl-ul,
.krl-faq__q:focus-visible .krl-ul { background-size: 100% 2px; }
.krl-faq__q:hover .krl-faq__qt { color: var(--krl-accent); }   /* 4.62:1 on white */

/* MARKER — a plus that becomes a minus. No icon font, no rotation. */
.krl-faq__marker { position: relative; width: 24px; height: 24px; }
.krl-faq__marker::before,
.krl-faq__marker::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	background: var(--krl-ink);
}
.krl-faq__marker::before { width: 18px; height: 1.5px; transform: translate(-50%, -50%); }
.krl-faq__marker::after  { width: 1.5px; height: 18px; transform: translate(-50%, -50%); transform-origin: center; }
.krl-faq__item[open] .krl-faq__marker::after { transform: translate(-50%, -50%) scaleY(0); }
.krl-faq__item[open] .krl-faq__marker::before,
.krl-faq__item[open] .krl-faq__marker::after { background: var(--krl-accent); }

@media (prefers-reduced-motion: no-preference) {
	.krl-faq__marker::after  { transition: transform var(--krl-fast) var(--krl-ease); }
	.krl-faq__marker::before { transition: background-color var(--krl-fast) var(--krl-ease); }
}

.krl-faq__a {
	padding-block-end: clamp(1.25rem, 2vw, 1.75rem);
	padding-inline-end: clamp(0rem, 3vw, 3rem);
}
.krl-faq__a > p {
	max-inline-size: 68ch;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--krl-text);
}

@media (min-width: 1024px) {
	.krl-faq__head { grid-column: 1 / span 4; margin-bottom: 0; }
	.krl-faq__list { grid-column: 6 / -1; }
}


/* ==========================================================================
   15. SECTION 12 — CONTACT
   field: --krl-mist
   CRITICAL: crimson on mist computes 4.23:1 and FAILS AA body, so NO crimson
   `color:` appears in this section. Crimson here is fills, squares, focus
   rings, error underlines and the submit button only; every text accent is
   --krl-berry (6.61:1). Control borders use --krl-text (6.04:1) — --krl-border
   would be 1.28:1 and fail the 3:1 UI-component requirement outright.
   ========================================================================== */

.krl-contact {
	background: var(--krl-mist);
	border-block-start: 1px solid var(--krl-border);
	padding-block: var(--krl-sec);
}

.krl-contact__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(1.5rem, 3vw, 3rem);
	row-gap: clamp(2.5rem, 6vw, 4rem);
}

.krl-contact__title {
	max-inline-size: 16ch;
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.02;
	color: var(--krl-ink);
	text-wrap: balance;
}
.krl-contact__sub {
	margin-top: var(--krl-20);
	max-inline-size: 34ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--krl-text);
}

.krl-support { margin-top: clamp(2rem, 4vw, 3rem); }
.krl-support__line {
	display: flex;
	align-items: baseline;
	padding-block: .875rem;
	border-block-start: 1px solid var(--krl-border);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--krl-text);
}
/* The chromatic full stop at its third scale: 8px. */
.krl-support__sq {
	flex: none;
	width: 8px;
	height: 8px;
	margin-inline-end: .625rem;
	transform: translateY(-.1em);
	background: var(--krl-accent);
}
.krl-support__tel {
	color: var(--krl-berry);       /* 6.61:1 — crimson would be 4.23:1 here */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.krl-support__tel:hover { color: var(--krl-ink); }
.krl-support__tel:focus-visible { outline: 2px solid var(--krl-ink); outline-offset: 3px; }

/* --- The form. Fields are underlines, not boxes. ------------------------- */
.krl-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(1.25rem, 2.4vw, 2rem);
	row-gap: clamp(1.5rem, 2.6vw, 2rem);
	align-content: start;
}

.krl-field { display: flex; flex-direction: column; min-width: 0; }
.krl-field--wide { grid-column: 1 / -1; }

.krl-field__label {
	margin-bottom: var(--krl-8);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--krl-ink);
}
.krl-field__req { color: var(--krl-berry); }

.krl-field__input {
	width: 100%;
	min-height: 52px;
	padding-block: .875rem;
	padding-inline: 0;
	background: transparent;
	border: 0;
	border-block-end: 1px solid var(--krl-text);
	border-radius: 0;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--krl-ink);
	-webkit-appearance: none;
	appearance: none;
}
/* Default is already dark, so hover deepens rather than lightens — going to
   #B8B8B8 here would drop the control below the 3:1 boundary on mist. */
.krl-field__input:hover { border-block-end-color: var(--krl-ink); }

.krl-field__input:focus {
	border-block-end-width: 2px;
	border-block-end-color: var(--krl-accent);   /* 4.23:1 — a non-text UI
	                                                indicator, so the 3:1
	                                                boundary applies, not 4.5 */
	outline: none;
}
.krl-field__input:focus-visible { outline: 2px solid var(--krl-ink); outline-offset: 4px; }

.krl-field__textarea { min-height: 8rem; resize: vertical; }

.krl-field__select {
	padding-inline-end: 2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23111111' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .25rem center;
	background-size: 12px 8px;
}

/* Invalid state: 2px crimson underline plus a message bound by
   aria-describedby. The message renders BERRY, not crimson — crimson body
   text on mist is 4.23:1 and a user who fails validation with no legible
   reason is a lost enquiry. */
.krl-field--invalid .krl-field__input { border-block-end-width: 2px; border-block-end-color: var(--krl-accent); }
.krl-field__err {
	margin-top: var(--krl-8);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--krl-berry);       /* 6.61:1 */
}
.krl-field__err[hidden] { display: none; }

.krl-form__foot { display: flex; flex-direction: column; align-items: flex-start; }
.krl-form__submit { width: 100%; justify-content: center; }

.krl-form__status {
	margin-top: var(--krl-24);
	padding-inline-start: var(--krl-16);
	box-shadow: inset 3px 0 0 var(--krl-accent);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--krl-ink);
}
.krl-form__status[hidden] { display: none; }

@media (min-width: 720px) {
	.krl-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.krl-form__submit { width: auto; align-self: flex-start; padding-inline: 2.5rem; }
}

@media (min-width: 900px) {
	.krl-contact__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.krl-contact__intro { grid-column: 1 / span 4; }
	.krl-form { grid-column: 6 / -1; }
}


/* ==========================================================================
   16. SECTION 13 — FINAL CTA
   field: gradient 1 of 2, crimson -> berry. A 6px ink bar closes the sequence
   and bookends the three black chapters, and the page's own hairline signature
   is made literally visible at full-bleed scale one last time.
   White on the gradient is 4.62:1 at its worst point (the crimson end), which
   clears AA body outright. The CTA points at /contact/, per brief §6.13.
   ========================================================================== */

.krl-cta {
	background: linear-gradient(103deg, #DD2D4A 0%, #A81D3F 100%);
	padding-block: var(--krl-sec-lg);
}

/* THE CLOSING HAIRLINE TEXTURE — the page's 1px seam, at full-bleed scale.
   Deliberately NOT a repeating-linear-gradient: the page's gradient budget is
   exactly two (brief §4), both crimson-family, and both are already spent (the
   band above and the S8 Business topbar). This is an inline SVG <rect> tile
   instead, so the stripe costs nothing against that budget. The tile is 80
   user units wide and painted at 80px, so the 1-unit rect lands on 1 device px. */
.krl-cta__texture {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Crect width='1' height='10' fill='%23FFFFFF' fill-opacity='.07'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 80px 100%;
	pointer-events: none;
}

.krl-cta__wrap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--krl-col-gap);
	z-index: 1;
}
.krl-cta__wrap > * { grid-column: 1 / -1; min-width: 0; }

/* EYEBROW BOOKEND — the same line that opens the hero, inverted. */
.krl-cta__eyebrow { color: #FFFFFF; }
.krl-cta__rule {
	height: 1px;
	margin-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
	background: rgba(255, 255, 255, .35);
}

.krl-cta__title {
	max-inline-size: 18ch;
	font-size: clamp(2.25rem, 5.6vw, 5rem);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: .98;
	color: #FFFFFF;
	text-wrap: balance;
}

.krl-cta__btn {
	justify-self: stretch;
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-inline: 2.5rem;
}
.krl-cta__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.krl-cta__arrow { flex: none; }

@media (prefers-reduced-motion: no-preference) {
	.krl-cta__arrow { transition: transform 240ms var(--krl-ease); }
	.krl-cta__btn:hover .krl-cta__arrow { transform: translateX(8px); }
}

@media (min-width: 900px) {
	.krl-cta__title { grid-column: 1 / span 8; }
	.krl-cta__btn {
		grid-column: 10 / -1;
		grid-row: 3;
		align-self: end;
		justify-self: end;
		margin-top: 0;
	}
}


/* ==========================================================================
   17. FORCED COLORS
   Keep the structural hairlines and chapter bars perceivable in Windows High
   Contrast, where background-colour is discarded.
   ========================================================================== */

@media (forced-colors: active) {
	.krl-chapter-bar,
	.krl-card__bar,
	.krl-plan__topbar,
	.krl-quote__tick,
	.krl-fullstop,
	.krl-support__sq,
	.krl-plan__marker,
	.krl-tst__thumb,
	.krl-hero__field,
	.krl-hero__field-mobile { forced-color-adjust: none; }

	.krl-lattice,
	.krl-quilt,
	.krl-plans,
	.krl-facts { border-color: CanvasText; }

	.krl-lattice__logo { filter: none; }
}