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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--header-h) + var(--nav-row-h, 0px) + var(--space-4));
  scroll-padding-bottom: calc(var(--bottom-offset, 0px) + var(--space-4) + var(--fab) + var(--space-2));
}

html.is-locked { overflow: hidden; }

html.is-locked { background: color-mix(in srgb, var(--color-night) 55%, var(--color-bg)); }   

html.is-locked:has(.drawer[open]) { background: var(--color-surface); }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--ink);
  font: var(--weight-regular) var(--text-body) / var(--leading-body) var(--font-body);
  overflow-x: clip;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

[hidden] { display: none !important; }

img,
svg,
video,
canvas { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; letter-spacing: inherit; }

button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
}

ul[class],
ol[class] { padding: 0; list-style: none; }

fieldset { min-width: 0; padding: 0; border: 0; }

legend { padding: 0; }

table { border-collapse: collapse; }

address { font-style: normal; }

summary { cursor: pointer; }

dialog { color: inherit; }

::selection { background: var(--color-maroon); color: var(--color-on-maroon); }

html[lang="en"] [data-lang="ms"],
html[lang="ms"] [data-lang="en"] { display: none !important; }

:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

main:focus-visible { outline: none; }

h1,
h2,
h3,
h4,
.display,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variation-settings: "opsz" var(--opsz-heading);
  font-variant-numeric: lining-nums;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  color: var(--ink);
}

h1,
h2,
.display,
.h1,
.h2 { color: var(--ink-heading); }

.display { font-size: var(--text-display); line-height: var(--leading-display); }

@media (min-width: 1024px) {
  .display { font-variation-settings: "opsz" var(--opsz-display); letter-spacing: var(--tracking-display); }
}

h1,
.h1 { font-size: var(--text-h1); }

h2,
.h2 { font-size: var(--text-h2); }

@media (min-width: 1280px) {
  h1,
  h2,
  .h1,
  .h2 { font-variation-settings: "opsz" var(--opsz-display); letter-spacing: var(--tracking-display); }
}

h3,
.h3,
h4,
.h4 { font-variation-settings: "opsz" var(--opsz-text); letter-spacing: var(--tracking-title); }

h3,
.h3 { font-size: var(--text-h3); font-weight: var(--weight-display-strong); }

h4,
.h4 { font-size: var(--text-h4); font-weight: var(--weight-display-strong); line-height: var(--leading-tight); }

h5,
h6 { font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }

p,
li,
dd,
figcaption,
blockquote { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-variation-settings: normal;   
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink-label);
}

.eyebrow--quiet { color: var(--ink-label-quiet); }

.eyebrow--muted { color: var(--ink-muted); }

.lead {
  max-width: var(--measure);
  font-size: var(--text-body-lg);
  line-height: var(--leading-lead);
  color: var(--ink-muted);
}

.body { max-width: var(--measure); font-size: var(--text-body); line-height: var(--leading-body); }

.small { font-size: var(--text-small); line-height: var(--leading-lead); }

.label {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.meta { font-size: var(--text-meta); line-height: var(--leading-notes); color: var(--ink-muted); }

.muted { color: var(--ink-muted); }

.persona {
  font-family: var(--font-display);
  font-variation-settings: "opsz" var(--opsz-text);
  font-size: max(1.125rem, 1em);   
  font-style: italic;
  font-weight: var(--weight-display);
  line-height: var(--leading-persona);
  color: var(--ink-accent);
}

.price {
  font-size: var(--text-price);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-snug);
  white-space: nowrap;
  color: var(--ink);
}

.price--lg { font-size: var(--text-price-lg); line-height: var(--leading-heading); }

.tabular { font-variant-numeric: tabular-nums; }

strong,
b { font-weight: var(--weight-semibold); }

a {
  color: var(--ink-accent);
  font-weight: var(--weight-medium);
  text-decoration: underline var(--border-w) var(--underline);
  text-underline-offset: var(--underline-offset);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--ink-hover); text-decoration-color: currentColor; }
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

.container--mid { width: min(100% - 2 * var(--gutter), var(--container-mid)); }

.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.section { padding-block: var(--section-y); }

.section--flush-top { padding-top: 0; }

.section--flush-bottom { padding-bottom: 0; }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.stack > * { min-width: 0; }

.stack--1 { --stack-gap: var(--space-1); }
.stack--2 { --stack-gap: var(--space-2); }
.stack--3 { --stack-gap: var(--space-3); }
.stack--5 { --stack-gap: var(--space-5); }
.stack--6 { --stack-gap: var(--space-6); }
.stack--7 { --stack-gap: var(--space-7); }
.stack--8 { --stack-gap: var(--space-8); }

.stack--start { align-items: flex-start; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

.cluster--2 { --cluster-gap: var(--space-2); }
.cluster--4 { --cluster-gap: var(--space-4); }
.cluster--5 { --cluster-gap: var(--space-5); }

.cluster--between { justify-content: space-between; }

.cluster--baseline { align-items: baseline; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-row-gap, var(--grid-gap)) var(--grid-gap);
}

.grid > * { min-width: 0; grid-column: 1 / -1; }

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.icon {
  flex: none;
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }

.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

.icon__fill { fill: currentColor; stroke: none; }

.icon--brand { fill: currentColor; stroke: none; }

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

.measure { max-width: var(--measure); }

.text-center { text-align: center; }

.nowrap { white-space: nowrap; }

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-skip-bg);
  color: var(--color-skip-fg);
  font-size: var(--text-small);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--color-champagne);
  outline-offset: calc(var(--focus-w) * -2);
}

@media (hover: hover) and (pointer: fine) {
  .skip-link:hover { color: var(--color-skip-fg); }
}

.noscript {
  padding: var(--space-4) var(--gutter);
  border-top: var(--border-w) solid var(--rule);
  background: var(--color-surface);
  color: var(--ink);
  font-size: var(--text-small);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition:
      opacity var(--dur-slow) var(--ease-out) calc(var(--reveal-i, 0) * var(--stagger)),
      transform var(--dur-slow) var(--ease-out) calc(var(--reveal-i, 0) * var(--stagger));
  }

  html.js [data-reveal].is-visible { opacity: 1; transform: none; }
}

.boot-pending { display: none; }

@keyframes boot-fallback-show { to { visibility: visible; opacity: 1; } }

@keyframes boot-fallback-hide { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: var(--dur-none) !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-none) !important;
    transition-delay: 0s !important;
  }
}