/* ─────────────────────────────────────────────────────────────
   Kensenhuis — one flat stylesheet, no build step.

   The palette, the Montserrat headings and the Avenir Next body stack are the
   Château Digital design system, taken over unchanged so the two sites read as
   one house. What differs here is the register: paper is the ground rather than
   navy, sections are separated by 1px rules rather than by shadows, and there is
   no monospace anywhere — metadata is tracked Montserrat instead.

   Sections
     1  Tokens
     2  Reset & base
     3  Typography
     4  Layout
     5  Components
     6  Header
     7  Front page
     8  Research index
     9  Single article
    10  Contact
    11  Footer
    12  Responsive
   ───────────────────────────────────────────────────────────── */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --paper:      #FAFAF7;
  --cream:      #F7F4EE;
  --ink:        #08213D;
  --deep:       #0B2A4D;
  --navy:       #134276;
  --body:       #4A5C75;
  --quiet:      #8B99AC;
  --accent:     #46BDDB;
  --accent-2:   #71C8E4;
  --on-dark:    #9DD7E8;
  --label:      #2BAED1;
  --rule:       #E5E0D4;
  --rule-dark:  rgba(157, 215, 232, 0.22);

  --font-display: 'Montserrat', "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Avenir Next", "Avenir", "Nunito Sans", system-ui, -apple-system, sans-serif;

  --wrap:  1200px;
  --pad-x: 32px;
  --pill:  999px;
}

/* ── 2. Reset & base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* The browser's own [hidden] rule lives in the UA sheet at (0,1,0), so any author
   rule that sets `display` on the same element beats it. The mobile nav is toggled
   purely through this attribute, so the attribute has to win. */
[hidden] { display: none !important; }

.kh-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-family: var(--font-display); font-size: 14px;
}
.kh-skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--label); outline-offset: 3px; }

/* ── 3. Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 900; letter-spacing: -0.032em; line-height: 0.98; }
h2 { font-weight: 700; letter-spacing: -0.022em; line-height: 1.06; }
h3 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; }
h4 { font-weight: 700; letter-spacing: -0.01em;  line-height: 1.25; }

p { margin: 0 0 22px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--label); }

ul, ol { margin: 0; padding: 0; }
.kh-plain-list { list-style: none; }

strong { color: var(--ink); font-weight: 600; }

.kh-lead { font-size: 22px; line-height: 1.55; }

/* Metadata. Montserrat rather than a monospace: on a light editorial page the
   tracked caps sit quieter next to the display type than a second family would. */
.kh-meta {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0;
}
.kh-meta--quiet { color: var(--quiet); }
.kh-meta--light { color: var(--on-dark); }

/* ── 4. Layout ─────────────────────────────────────────────── */
.kh-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.kh-wrap--narrow { max-width: 880px; }
.kh-wrap--wide   { max-width: 1080px; }

.kh-section { padding: 104px 0; }
.kh-section--cream { background: var(--cream); }
.kh-section--deep  { background: var(--deep); }
.kh-section--navy  { background: var(--navy); }

.kh-rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* A section heading with an "all …" link opposite it, over a rule. */
.kh-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 20px;
  margin-bottom: 48px;
}

/* ── 5. Components ─────────────────────────────────────────── */
.kh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  border-radius: var(--pill);
  padding: 15px 30px;
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.kh-btn--ink   { background: var(--ink); color: #fff; }
.kh-btn--ink:hover { background: var(--navy); color: #fff; }
.kh-btn--cyan  { background: var(--accent); color: var(--ink); }
.kh-btn--cyan:hover { background: var(--accent-2); color: var(--ink); }
.kh-btn--line  { background: transparent; color: var(--ink); border-color: var(--ink); }
.kh-btn--line:hover { background: var(--ink); color: #fff; }
.kh-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.kh-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

.kh-btn svg { flex: none; }

.kh-nav {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.kh-nav:hover { color: var(--label); }
.kh-nav--on { color: var(--label); }
.kh-nav--dark { color: rgba(255,255,255,0.72); }
.kh-nav--dark:hover { color: var(--on-dark); }

/* The only movement on the site: an underline that grows under a title on hover.
   Painted with a background gradient rather than a border so it animates without
   shifting the text baseline. */
.kh-titlelink {
  color: var(--ink);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 220ms cubic-bezier(.2, .8, .2, 1);
}
.kh-titlelink:hover { color: var(--ink); background-size: 100% 2px; }

.kh-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--body);
  border: 1px solid var(--rule);
  border-radius: var(--pill);
  padding: 6px 13px;
  white-space: nowrap;
}
.kh-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.kh-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Placeholder that stands in for an image a post has not been given yet. Visible
   on purpose: a missing feature image should look unfinished, not look like a
   design choice. */
.kh-noimage {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.kh-cover { width: 100%; object-fit: cover; }
.kh-cover--3x2 { aspect-ratio: 3 / 2; }
.kh-cover--4x3 { aspect-ratio: 4 / 3; }
.kh-cover--1x1 { aspect-ratio: 1 / 1; }
.kh-cover--wide { aspect-ratio: 16 / 7; }

/* ── 6. Header ─────────────────────────────────────────────── */
.kh-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 20;
}
.kh-header__inner {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.kh-brand { display: flex; align-items: baseline; gap: 10px; }
.kh-brand__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kh-brand__sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quiet);
}
/* In the footer the lockup sits in a narrow column, where the inline form wraps
   "Investment Management" under itself and reads like a mistake. Stack it there. */
.kh-brand--dark { flex-direction: column; align-items: flex-start; gap: 2px; }
.kh-brand--dark .kh-brand__name { color: #fff; }
.kh-brand--dark .kh-brand__sub  { color: var(--on-dark); }

.kh-header__nav { display: flex; gap: 34px; align-items: center; margin-left: auto; }
.kh-header__cta { padding: 12px 24px; min-height: 44px; }

.kh-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  margin-right: -10px;
}

.kh-mobilenav {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 8px 0 20px;
}
.kh-mobilenav__list { list-style: none; display: flex; flex-direction: column; }
.kh-mobilenav__list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--rule);
}

/* ── 7. Front page ─────────────────────────────────────────── */
.kh-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--deep);
}
/* The hero image is a cut-out: Hero.png is 72% fully transparent and what remains is
   dark, so dimming it to 0.5 over navy erased it completely — which is exactly what
   shipped on the first deploy. Full opacity, anchored right, and let the scrim do all
   the work of keeping the headline side readable. A regular photo survives this
   treatment too; a dimmed cut-out does not. */
.kh-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
}
.kh-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(11,42,77,0.97) 0%,
    rgba(11,42,77,0.86) 42%,
    rgba(11,42,77,0.10) 100%);
}
.kh-hero__inner { position: relative; width: 100%; padding-block: 80px; }
.kh-hero__title {
  font-size: clamp(34px, 5.7vw, 82px);
  color: #fff;
  max-width: 960px;
  margin: 26px 0 30px;
}
.kh-hero__lead {
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 600px;
  margin: 0 0 40px;
}
.kh-ctarow { display: flex; gap: 14px; flex-wrap: wrap; }

.kh-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.kh-featured__title { font-size: clamp(30px, 3.2vw, 46px); margin: 0 0 26px; }
.kh-featured__metarow { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.kh-featured__tldr {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
  border-left: 2px solid var(--accent);
  padding-left: 22px;
}
.kh-featured__tldr li { font-size: 16px; line-height: 1.6; }

.kh-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: start;
}
.kh-split__title { font-size: clamp(32px, 3.7vw, 52px); }

.kh-focus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.kh-focus__item { padding: 44px 56px 44px 0; }
.kh-focus__item + .kh-focus__item { padding: 44px 0 44px 56px; border-left: 1px solid var(--rule); }
.kh-focus__title { font-size: 30px; margin: 16px 0 18px; }

.kh-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-dark);
}
.kh-steps__item { padding: 40px 44px 0 0; }
.kh-steps__item + .kh-steps__item { padding-left: 44px; border-left: 1px solid var(--rule-dark); }
.kh-steps__item:last-child { padding-right: 0; }
.kh-steps__title { font-size: 25px; color: #fff; margin: 16px 0; }
.kh-steps__body { font-size: 16px; color: rgba(255,255,255,0.72); line-height: 1.7; margin: 0; }

.kh-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.kh-card { display: flex; flex-direction: column; }
.kh-card__img { margin-bottom: 24px; }
.kh-card__meta { margin-bottom: 14px; }
.kh-card__title { font-size: 24px; margin: 0 0 14px; }
.kh-card__excerpt { font-size: 16px; margin: 0 0 20px; }
.kh-card .kh-tags { margin-top: auto; }

.kh-subscribe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
}
.kh-subscribe__title { font-size: clamp(28px, 3vw, 42px); color: #fff; margin: 0 0 16px; }
.kh-subscribe__body { font-size: 17px; color: rgba(255,255,255,0.78); margin: 0; }
.kh-subscribe__row { display: flex; gap: 12px; flex-wrap: wrap; }
.kh-subscribe__input {
  flex: 1 1 260px;
  height: 52px;
  border: 1px solid rgba(157,215,232,0.4);
  background: rgba(255,255,255,0.06);
  padding: 0 18px;
  font-family: inherit;
  font-size: 16px;
  color: #fff;
  border-radius: var(--pill);
}
.kh-subscribe__input::placeholder { color: rgba(255,255,255,0.45); }

/* ── 8. Research index ─────────────────────────────────────── */
.kh-pagehead {
  padding: 92px 0 68px;
  border-bottom: 1px solid var(--rule);
}
.kh-pagehead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 80px;
  align-items: end;
}
.kh-pagehead__title { font-size: clamp(40px, 5.3vw, 76px); }

.kh-filters {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.kh-tag--on { background: var(--ink); border-color: var(--ink); color: #fff; }

.kh-list__item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 300px;
  gap: 48px;
  padding: 46px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.kh-list__date { display: flex; flex-direction: column; gap: 8px; }
.kh-list__title { font-size: clamp(24px, 2.5vw, 34px); margin: 0 0 16px; }

/* ── 9. Single article ─────────────────────────────────────── */
.kh-article__head { padding: 56px 0 0; }
.kh-article__title { font-size: clamp(34px, 4.4vw, 62px); margin: 0 0 28px; }
.kh-article__byline {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.kh-dot { width: 3px; height: 3px; background: var(--rule); border-radius: var(--pill); flex: none; }
.kh-article__byline .kh-tags { margin-left: auto; }

.kh-article__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 64px;
  align-items: start;
}

/* Long-form defaults for whatever the editor produces. Scoped to .kh-prose so a
   heading inside a card never inherits article spacing. */
.kh-prose > p:first-child { font-size: 21px; line-height: 1.6; color: var(--ink); }
.kh-prose h2 { font-size: 30px; margin: 48px 0 20px; }
.kh-prose h3 { font-size: 24px; margin: 40px 0 16px; }
.kh-prose ul, .kh-prose ol { margin: 0 0 22px; padding-left: 22px; }
.kh-prose li { margin-bottom: 8px; }
.kh-prose img { margin: 44px 0; border: 1px solid var(--rule); }
.kh-prose figure { margin: 44px 0; }
.kh-prose figcaption {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--quiet);
  margin-top: 12px;
}
.kh-prose blockquote {
  margin: 36px 0;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-size: 19px;
  color: var(--ink);
}

.kh-aside { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 28px; }
.kh-aside__block { border-top: 1px solid var(--rule); padding-top: 20px; }
.kh-aside__block--strong { border-top: 2px solid var(--ink); }
.kh-aside__list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.kh-aside__list li { font-size: 15px; line-height: 1.6; }

.kh-share { display: flex; gap: 10px; }
.kh-share a {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
}
.kh-share a:hover { border-color: var(--label); }

.kh-disclaimer {
  border: 1px solid var(--rule);
  background: var(--cream);
  padding: 28px 32px;
  margin-top: 64px;
}
.kh-disclaimer p { font-size: 15px; }

/* ── 10. Contact ───────────────────────────────────────────── */
.kh-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 88px;
  align-items: start;
}
.kh-field { display: flex; flex-direction: column; gap: 10px; }
.kh-field__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Underline inputs rather than boxes: on a page built out of 1px rules a boxed
   field is the only element with a fourth side, and it shows. */
.kh-input, .kh-textarea {
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  border-radius: 0;
}
.kh-input { height: 52px; padding: 0 2px; }
.kh-textarea { padding: 10px 2px; line-height: 1.7; resize: vertical; }
.kh-input:focus, .kh-textarea:focus { border-bottom-color: var(--label); outline: none; }

.kh-fieldset { border: 0; margin: 8px 0 0; padding: 0; }
.kh-fieldset legend { padding: 0; margin-bottom: 16px; }
.kh-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
}
.kh-choice input { accent-color: var(--label); margin: 0; }
.kh-choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(70,189,219,0.09);
  color: var(--navy);
}
.kh-required { color: var(--label); }

/* The honeypot. Off-screen rather than display:none — a bot that reads styles skips
   a hidden field, but happily fills one it believes is merely positioned. */
.kh-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kh-notice {
  border-left: 3px solid var(--accent);
  background: var(--cream);
  padding: 16px 20px;
  font-size: 15px;
  margin: 0 0 28px;
  color: var(--ink);
}
.kh-notice--err { border-left-color: #B4453C; }

.kh-details__block { border-top: 1px solid var(--rule); padding: 24px 0 30px; }
.kh-details__block--first { border-top: 2px solid var(--ink); }
.kh-details__row { display: flex; justify-content: space-between; gap: 20px; }

/* ── 11. Footer ────────────────────────────────────────────── */
.kh-footer { background: var(--deep); }
.kh-footer__inner { padding-block: 76px 44px; }
.kh-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.kh-footer__tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin: 22px 0 0;
  max-width: 300px;
}
.kh-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.kh-footer__address { font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.7; margin: 0; }
.kh-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(157,215,232,0.2);
  margin-top: 56px;
  padding-top: 26px;
}
.kh-footer__legal { font-size: 13px; color: rgba(255,255,255,0.5); }

/* ── 12. Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kh-featured,
  .kh-split,
  .kh-subscribe,
  .kh-contact,
  .kh-pagehead__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .kh-article__body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .kh-aside { position: static; }
  .kh-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-steps { grid-template-columns: minmax(0, 1fr); }
  .kh-steps__item,
  .kh-steps__item + .kh-steps__item {
    padding: 28px 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule-dark);
  }
  .kh-list__item { grid-template-columns: 150px minmax(0, 1fr); }
  .kh-list__img { grid-column: 1 / -1; max-width: 420px; }
}

@media (max-width: 780px) {
  :root { --pad-x: 20px; }

  .kh-section { padding: 56px 0; }
  .kh-pagehead { padding: 52px 0 40px; }

  .kh-header__nav, .kh-header__cta { display: none; }
  .kh-burger { display: flex; }
  .kh-header__inner { min-height: 66px; }
  .kh-brand { flex-direction: column; gap: 1px; align-items: flex-start; }
  .kh-brand__name { font-size: 16px; }
  .kh-brand__sub  { font-size: 9px; }

  .kh-hero { min-height: 560px; align-items: flex-end; }
  /* Portrait crops hard: at 375px the frame shows roughly a third of the image, and
     centring it lands on the empty half of the cut-out. Anchor right so the subject
     is in frame at all. The gradient then runs top to bottom, open enough at the top
     to let the silhouette read and dark enough by 40% to carry the headline. */
  .kh-hero__img { object-position: right top; }
  .kh-hero__scrim {
    background: linear-gradient(180deg,
      rgba(11,42,77,0.34) 0%,
      rgba(11,42,77,0.78) 40%,
      rgba(11,42,77,0.96) 72%);
  }
  .kh-hero__inner { padding-block: 0 44px; }
  .kh-hero__lead { font-size: 17px; margin-bottom: 30px; }
  .kh-ctarow { flex-direction: column; align-items: stretch; }
  .kh-ctarow .kh-btn { justify-content: center; }

  .kh-grid3 { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .kh-focus { grid-template-columns: minmax(0, 1fr); }
  .kh-focus__item,
  .kh-focus__item + .kh-focus__item {
    padding: 26px 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
  }
  .kh-list__item { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px 0; }
  .kh-list__date { flex-direction: row; gap: 16px; }
  .kh-field__row { grid-template-columns: minmax(0, 1fr); }
  .kh-article__byline .kh-tags { margin-left: 0; }
  .kh-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .kh-subscribe__row .kh-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}