/* Kumki Tea site styles, built on the Kumki Tea design system.
   Brand colours are constant; semantic tokens switch between the Paper (light) and Ink (dark) themes. */
:root {
  /* Brand palette */
  --ink: #102b2c;
  --ink-2: #173b3b;
  --ink-deep: #0b2021;
  --hero-dawn: #0a2022;
  --hero-valley: #123d3b;
  --hero-canopy: #456651;
  --hill: #2d5750;
  --forest: #294d47;
  --fern: #406153;
  --olive-deep: #56664a;
  --bark: #7d5536;
  --copper: #c97848;
  --copper-light: #f2b08d;
  --copper-glow: #e8a67f;
  --copper-soft: #f1b08c;
  --copper-blush: #ecb08f;
  --copper-mist: #f5dacd;
  --copper-tag: #e7b59b;
  --cream: #f5f0e6;
  --paper: #fbf8f1;
  --sage: #dce3d3;
  --mist: #eef1e8;
  --sage-text: #cbd6ce;
  --lichen: #bdcfc3;
  --footer-text: #afc2b5;

  /* Semantic, Paper theme */
  --surface: var(--paper);
  --surface-alt: var(--cream);
  --surface-sage: var(--sage);
  --surface-panel: var(--mist);
  --surface-input: var(--paper);
  --text: var(--ink);
  --text-body: #41605e;
  --text-muted: #526b65;
  --text-label: #4e7068;
  --accent: var(--copper);
  --accent-text: #8f4e2c;
  --on-accent: var(--ink-deep);
  --line: rgba(16, 43, 44, .18);
  --line-strong: var(--ink);
  --field-border: rgba(119, 144, 135, .4);
  --focus-ring: var(--copper);
  --status-success-bg: #dcead8;
  --status-success-border: #4b8257;
  --status-success-text: #285a39;
  --status-error-bg: #f4ded8;
  --status-error-border: #a84d3e;
  --status-error-text: #7d3027;

  /* Type */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: Manrope, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;

  /* Space and layout */
  --nav-height: 78px;
  --content-max: 1180px;
  --gutter: clamp(20px, 8vw, 130px);
  --section-y: 120px;
  --radius-pill: 99px;
  --shadow-nav: 0 8px 30px #07171833;
  --shadow-menu: 0 18px 35px #07171855;
  --shadow-field-focus: 0 0 0 3px #c9784826;
  --shadow-card-hover: 0 22px 45px #102b2c26;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: var(--ink-deep);
    --surface-alt: var(--ink);
    --surface-sage: var(--ink-2);
    --surface-panel: #14302f;
    --surface-input: var(--ink-deep);
    --text: var(--cream);
    --text-body: var(--sage-text);
    --text-muted: var(--lichen);
    --text-label: var(--footer-text);
    --accent-text: var(--copper-light);
    --line: rgba(255, 255, 255, .17);
    --line-strong: var(--cream);
    --field-border: rgba(189, 207, 195, .4);
    --focus-ring: var(--copper-light);
    --status-success-bg: #1d3a2c;
    --status-success-border: #6fa67b;
    --status-success-text: #a8d4b0;
    --status-error-bg: #3f2320;
    --status-error-border: #c9705f;
    --status-error-text: #f0b4a8;
    --shadow-card-hover: 0 22px 45px #00000055;
    color-scheme: dark;
  }
}

/* Base */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--sans); overflow-x: hidden }
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px }
.on-ink { --focus-ring: var(--copper-light) }

/* Labels and headlines */
.kt-kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .19em; text-transform: uppercase; color: var(--copper-light); margin: 0 0 24px }
.kt-eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin: 0 }
.on-ink .kt-eyebrow { color: var(--copper-light) }
.kt-number { font: 500 12px/1.4 var(--mono); letter-spacing: .2em; color: var(--text-label); margin-bottom: 48px }
.kt-divider { border: 0; border-top: 1px solid var(--line); margin: 0 0 48px }
.kt-display { font-family: var(--serif); font-weight: 500; margin: 18px 0 0; color: var(--text); text-wrap: balance }
.kt-display em { display: block; color: var(--accent-text) }
.on-ink .kt-display { color: var(--cream) }
.on-ink .kt-display em { color: var(--copper-glow) }
.kt-display--hero { font-size: clamp(4rem, 9vw, 8.8rem); line-height: .88; letter-spacing: -.07em; margin: 0 }
.kt-display--statement { font-size: clamp(3rem, 6vw, 6.5rem); line-height: .93; letter-spacing: -.07em }
.kt-display--section { font-size: clamp(2.8rem, 5.5vw, 5.6rem); line-height: .95; letter-spacing: -.06em }
.kt-display--intro { font-size: clamp(2.8rem, 5vw, 5rem); line-height: 1; letter-spacing: -.05em }
.kt-display--page { font-size: clamp(3.2rem, 7vw, 7.4rem); line-height: .92; letter-spacing: -.07em; max-width: 900px }

/* Button */
.kt-btn { display: inline-flex; align-items: center; gap: 16px; padding: 15px 20px; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s }
.kt-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.kt-btn--solid { background: var(--ink); border-color: var(--ink); color: var(--copper-mist) }
.kt-btn--on-ink { border-color: var(--copper-blush); color: var(--copper-mist) }
.kt-btn[disabled] { opacity: .55; cursor: progress }
.kt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
@media (prefers-color-scheme: dark) { .kt-btn--solid { background: var(--copper-mist); border-color: var(--copper-mist); color: var(--ink) } }

/* Navigation */
.kt-nav { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--nav-height); padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; color: var(--cream); background: rgba(16, 43, 44, .96); box-shadow: var(--shadow-nav); transition: background .3s, box-shadow .3s }
.kt-nav--over-hero { background: linear-gradient(180deg, rgba(8, 24, 25, .82), transparent); box-shadow: none }
.kt-nav--over-hero.scrolled { background: rgba(16, 43, 44, .96); box-shadow: var(--shadow-nav) }
.kt-nav__brand { display: flex; align-items: center; height: var(--nav-height) }
.kt-nav__brand img { width: 74px; height: 74px; object-fit: contain }
.kt-nav__links { display: flex; gap: 32px; font: 500 12px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase }
.kt-nav__links a { opacity: .8; transition: color .2s, opacity .2s }
.kt-nav__links a:hover, .kt-nav__links a[aria-current="page"] { color: var(--copper-light); opacity: 1 }
.kt-nav__menu { display: none; width: 44px; height: 44px; border: 1px solid #ffffff66; border-radius: 50%; background: #102b2ccc; color: var(--cream); font-size: 22px; line-height: 1; cursor: pointer }
.kt-nav__menu[aria-expanded="true"] { color: var(--copper-light); border-color: var(--copper-light) }
.kt-nav__panel { display: none }

/* Hero (homepage) */
.kt-hero { min-height: 100svh; position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: var(--cream) }
.kt-hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at 68% 20%, #b9d0bc33, transparent 20%), linear-gradient(135deg, var(--hero-dawn) 0%, var(--hero-valley) 49%, var(--hero-canopy) 100%) }
.kt-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(120deg, transparent 0%, black 58%, transparent 100%); mask-image: linear-gradient(120deg, transparent 0%, black 58%, transparent 100%) }
.kt-hero__mountain { position: absolute; inset: auto -8% -3% -8%; height: 48%; z-index: -2; background: var(--ink-2); clip-path: polygon(0 75%, 8% 58%, 16% 70%, 26% 39%, 36% 61%, 49% 23%, 60% 58%, 70% 34%, 81% 65%, 92% 46%, 100% 67%, 100% 100%, 0 100%) }
.kt-hero__mountain--back { bottom: 17%; height: 40%; background: var(--hill); opacity: .65; transform: scaleX(1.1) }
.kt-hero__mist { position: absolute; width: 70vw; height: 90px; border-radius: 50%; background: #d7e4d655; filter: blur(24px); left: -10%; bottom: 29%; transform: rotate(-8deg) }
.kt-hero__mist--2 { left: 44%; bottom: 38%; width: 58vw; opacity: .42; transform: rotate(8deg) }
.kt-hero__inner { width: min(var(--content-max), 90vw); padding: 105px 0 50px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 4vw; align-items: center }
.kt-hero .kt-display em { margin-left: 11vw }
.kt-hero__copy { max-width: 480px; margin: 32px 0 0; color: #e3e5d9cc; font-size: 17px; line-height: 1.8 }
.kt-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 38px }
.kt-hero__scroll { font: 500 12px var(--mono); letter-spacing: .12em; color: #bfd2c7; display: flex; align-items: center; gap: 12px }
.kt-hero__scroll::before { content: ""; width: 42px; border-top: 1px solid #bfd2c7 }
.kt-hero__mark { justify-self: end; width: min(330px, 58vw); opacity: .96 }

/* Page hero (inner pages): the same lit gradient, mark at the right, no hills */
.page-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--cream); background: var(--ink); padding: calc(var(--nav-height) + 80px) var(--gutter) 70px }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 75% 22%, #b9d0bc33, transparent 16%), linear-gradient(135deg, var(--hero-dawn) 0%, var(--hero-valley) 52%, var(--forest) 100%) }
.page-hero::after { content: ""; position: absolute; z-index: -1; right: var(--gutter); top: 50%; width: min(28vw, 300px); aspect-ratio: 1; transform: translateY(-40%); background: url('kumki-tea-logo-white.png') center / contain no-repeat; opacity: .14 }
.page-hero__inner { max-width: var(--content-max); margin: 0 auto }
.page-hero .kt-display { margin-top: 24px }
.page-hero__copy { max-width: 720px; margin: 28px 0 0; color: var(--sage-text); font-size: 18px; line-height: 1.85 }

/* Sections */
.section { padding: var(--section-y) var(--gutter) }
.section--alt { background: var(--surface-alt) }
.section--sage { background: var(--surface-sage) }
.section--ink { background: var(--ink); color: var(--cream); position: relative; overflow: hidden }
.lede { font-size: 18px; line-height: 1.9; max-width: 600px; color: var(--text-body); margin: 0 }
.lede + .lede { margin-top: 18px }
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; align-items: start }
.split > * { min-width: 0 }

.intro p { font-size: 18px; line-height: 1.9; max-width: 600px; color: var(--text-body); margin: 0 }
.intro p + p { margin-top: 18px }

.collection-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 55px }
.collection-head p { max-width: 340px; color: var(--text-muted); line-height: 1.7; font-size: 14px; margin: 0 }

.story::before { content: "K"; position: absolute; right: -5vw; top: -18vw; font: 900 60vw/.8 var(--serif); color: #fff; opacity: .035; pointer-events: none }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; position: relative }
.story p { color: var(--sage-text); line-height: 1.9; font-size: 16px; max-width: 520px }
.story__mark { display: flex; align-items: center; justify-content: center }
.story__mark img { width: min(360px, 80%); opacity: .9 }

.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; background: var(--surface-sage) }
.contact > * { min-width: 0 }
.contact__copy { color: var(--text-muted); line-height: 1.8; max-width: 450px; font-size: 17px }
.contact .kt-contact { margin-top: 50px }

/* Grade card */
.kt-grades { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px }
@media (max-width: 1280px) { .kt-grades { grid-template-columns: repeat(3, 1fr) } }
.kt-card { position: relative; min-height: 340px; padding: 22px 19px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--ink); color: var(--cream); overflow: hidden; transition: transform .3s }
.kt-card:hover { transform: translateY(-9px) }
.kt-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; bottom: -40px; border: 1px solid #c9784866; border-radius: 50%; pointer-events: none }
.kt-card--forest { background: var(--forest) }
.kt-card--fern { background: var(--fern) }
.kt-card--olive { background: var(--olive-deep) }
.kt-card--bark { background: var(--bark) }
.kt-card--copper { background: var(--copper); color: var(--ink-deep) }
.kt-card--copper::before { border-color: #0b202155 }
.kt-card__tag { font: 500 10px/1.4 var(--mono); letter-spacing: .13em; color: var(--copper-tag) }
.kt-card--olive .kt-card__tag, .kt-card--bark .kt-card__tag { color: var(--cream) }
.kt-card--copper .kt-card__tag { color: var(--ink-deep) }
.kt-card__name { font: 500 clamp(2rem, 3vw, 3.3rem)/1.05 var(--serif); letter-spacing: -.06em; margin: 0 0 8px }
.kt-card__copy { font-size: 12px; line-height: 1.65; margin: 0; opacity: .9 }
.kt-card__grade { font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7 }
.kt-card--copper .kt-card__copy, .kt-card--copper .kt-card__grade { opacity: 1 }

/* Grade card, long form (tea grades page) */
.kt-grades--detail { grid-template-columns: repeat(3, 1fr) }
.kt-grades--detail .kt-card { min-height: 300px }
.kt-grades--detail .kt-card__copy { font-size: 14px; line-height: 1.7 }

/* Info card (inner pages): a quieter ink tile */
.kt-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 34px 0 }
.kt-info { padding: 25px 22px; min-height: 170px; background: var(--ink); color: var(--cream); border-top: 1px solid var(--copper-glow); transition: transform .25s, box-shadow .25s }
.kt-info:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover) }
.kt-info h3 { margin: 0 0 12px; font: 500 1.55rem/1.2 var(--serif); color: var(--copper-soft) }
.kt-info p { margin: 0; color: var(--sage-text); line-height: 1.7; font-size: 14px }
@media (prefers-color-scheme: dark) { .kt-info { background: var(--ink-2) } }

/* Fact grid */
.kt-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #ffffff2c; margin-top: 42px; border: 1px solid #ffffff2c }
.kt-fact { padding: 22px; background: var(--ink) }
.kt-fact strong { display: block; font: 500 28px/1.2 var(--serif); color: var(--copper-soft); margin-bottom: 5px }
.kt-fact span { font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lichen) }

/* Note */
.kt-note-block { padding: 24px 26px; background: var(--surface-sage); border-left: 3px solid var(--copper); color: var(--text-body); max-width: 760px; line-height: 1.7 }
.kt-note-block a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px }

/* Contact card */
.kt-contact { border-top: 1px solid var(--line-strong); padding-top: 25px }
.kt-contact span { display: block; font: 400 11px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--text-label); margin-bottom: 10px }
.kt-contact a { font: 500 clamp(1.5rem, 3vw, 2.5rem)/1.2 var(--serif); overflow-wrap: anywhere }
.kt-contact a:hover { color: var(--accent-text) }
.kt-contact p { margin: 0 0 22px; color: var(--text-body); line-height: 1.7; max-width: 420px }

/* Form */
.kt-form { display: grid; gap: 18px; padding: 28px; background: var(--surface-panel); border: 1px solid var(--line) }
.kt-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.kt-field { display: grid; gap: 8px }
.kt-label { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-label) }
.kt-label span { text-transform: none; letter-spacing: .04em; opacity: .85 }
.kt-field small { font-size: 12px; color: var(--text-muted) }
.kt-input, .kt-textarea { width: 100%; border: 1px solid var(--field-border); border-radius: 0; background: var(--surface-input); color: var(--text); padding: 13px 14px; font: 16px var(--sans); outline: none }
.kt-textarea { min-height: 120px; resize: vertical }
.kt-input:focus, .kt-textarea:focus { border-color: var(--focus-ring); box-shadow: var(--shadow-field-focus) }
.kt-input:user-invalid { border-color: var(--status-error-border) }
.kt-note { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0 }
.kt-status { margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.6; border-left: 3px solid }
.kt-status--success { background: var(--status-success-bg); border-color: var(--status-success-border); color: var(--status-success-text) }
.kt-status--error { background: var(--status-error-bg); border-color: var(--status-error-border); color: var(--status-error-text) }
.kt-form .kt-btn { width: max-content }

/* Inner page body */
.page { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 80px var(--gutter) 110px }
.page > h2 { color: var(--text); font: 500 clamp(2rem, 4vw, 4rem)/1 var(--serif); letter-spacing: -.05em; margin: 72px 0 20px; text-wrap: balance }
.page > h2:first-child { margin-top: 0 }
.page > p { max-width: 760px; color: var(--text-body); font-size: 17px; line-height: 1.85 }
.page .kt-actions { margin-top: 34px }
.page > .kt-note-block, .page > .kt-grades { margin: 34px 0 }
.contact-page { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; align-items: start }
.contact-page > * { min-width: 0 }

/* Process steps */
.kt-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; max-width: var(--content-max) }
.kt-steps li { counter-increment: step; padding: 20px 22px; background: var(--surface-alt); border-top: 1px solid var(--line) }
.kt-steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .15em; color: var(--accent-text) }
.kt-steps strong { display: block; font: 500 1.3rem/1.2 var(--serif); color: var(--text); margin-bottom: 6px }
.kt-steps p { margin: 0; color: var(--text-body); font-size: 15px; line-height: 1.7 }

/* Grade comparison table */
.kt-table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--line) }
.kt-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.5 }
.kt-table caption { text-align: left; padding: 14px 18px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-label); background: var(--surface-alt) }
.kt-table th, .kt-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); color: var(--text-body) }
.kt-table thead th { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-label); background: var(--surface-alt) }
.kt-table tbody th a { display: block; font: 500 1.35rem/1.1 var(--serif); color: var(--text) }
.kt-table tbody th a:hover { color: var(--accent-text) }
.kt-table tbody th span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--text-muted) }

/* FAQ */
.kt-faq { max-width: 820px; margin: 24px 0; border-top: 1px solid var(--line) }
.kt-faq details { border-bottom: 1px solid var(--line) }
.kt-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font: 500 1.25rem/1.3 var(--serif); color: var(--text) }
.kt-faq summary::-webkit-details-marker { display: none }
.kt-faq summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--accent-text) }
.kt-faq details[open] summary::after { content: "−" }
.kt-faq details p { margin: 0 0 22px; max-width: 720px; color: var(--text-body); font-size: 16px; line-height: 1.8 }

.collection-head p a { color: var(--accent-text); white-space: nowrap }
.kt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Footer */
.kt-footer { padding: 28px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--ink-deep); color: var(--footer-text); font: 12px var(--mono); letter-spacing: .08em }
.kt-footer img { width: 80px; height: 80px; object-fit: contain }
.kt-footer a { color: var(--copper-light) }

/* Tablet and below */
@media (max-width: 960px) {
  .kt-nav__links { display: none }
  .kt-nav__menu { display: block }
  .kt-nav__panel { position: absolute; top: var(--nav-height); left: 20px; right: 20px; display: none; padding: 12px; background: rgba(16, 43, 44, .98); border: 1px solid #ffffff33; box-shadow: var(--shadow-menu) }
  .kt-nav__panel.open { display: grid }
  .kt-nav__panel a { padding: 16px 14px; border-bottom: 1px solid #ffffff1f; font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase }
  .kt-nav__panel a:last-child { border-bottom: 0 }
  .kt-nav__panel a[aria-current="page"] { color: var(--copper-light) }
  .kt-hero__inner, .split, .story__grid, .contact, .contact-page { grid-template-columns: 1fr }
  .kt-hero__inner { padding-top: 120px }
  .kt-hero__mark { justify-self: center; max-width: 250px; margin-top: 30px }
  .kt-hero .kt-display em { margin-left: 15vw }
  .section { padding: 85px 7vw }
  .collection-head { display: block }
  .collection-head p { margin-top: 24px }
  .kt-grades { grid-template-columns: repeat(2, 1fr) }
  .kt-card { min-height: 270px }
  .story__mark { order: -1; margin-bottom: 20px }
  .story__mark img { max-width: 220px }
  .page-hero::after { opacity: .08; width: 220px; right: -30px }
  .page { padding: 64px 7vw 80px }
  .kt-footer { flex-direction: column; align-items: flex-start }
}

@media (max-width: 800px) {
  :root { --nav-height: 72px }
  .kt-nav__brand img { width: 64px; height: 64px }
  .kt-form__row { grid-template-columns: 1fr }
  .kt-form { padding: 22px }
}

@media (max-width: 440px) {
  .kt-grades { grid-template-columns: 1fr }
  .kt-card { min-height: 230px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .kt-card, .kt-info, .kt-btn, .kt-nav { transition: none }
  .kt-card:hover, .kt-info:hover { transform: none }
}