/*
 * Reset, global type roles, buttons and links, layout helpers.
 * Ported from web/src/styles/base.css in Shady-C/kiwisan-group-website (mobile-first): base values
 * are the 390 px artboard, desktop values (1440 px artboard) apply from 960 px.
 * Component-specific rules live with their components.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 15.5px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  overflow-wrap: break-word; /* long words and URLs never force sideways scroll */
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--navy); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- accessibility ---------- */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.skip {
  position: absolute; left: 16px; top: 0; z-index: 100;
  padding: 14px 20px; background: var(--orange); color: var(--navy);
  font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  transform: translateY(-120%);
}
.skip:focus { transform: translateY(16px); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- layout ---------- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }

.band { padding: var(--band) 0; position: relative; overflow: hidden; }
.band--mist { background: var(--mist); }
.band--navy { background: var(--navy); }
.band--navy2 { background: var(--navy-2); }
.band--tight { padding: 96px 0; }
.rule-top { border-top: 1px solid var(--rule); }

/* Section label (rail) + single reading column. One column until 960 px. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.split > .rail { padding: 0 0 30px; }

.stack > * + * { margin-top: 28px; }
.stack-lg > * + * { margin-top: 48px; }

/* ---------- type ---------- */
.label {
  font: 600 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.label--muted { color: var(--ink-soft); }
.label--accent { color: var(--orange-text); }

.display { font: 400 46px/1.04 var(--serif); letter-spacing: -.015em; color: #fff; }
.statement { font: 400 27px/1.33 var(--serif); letter-spacing: -.005em; color: var(--navy); text-wrap: pretty; }
.statement--sm { font-size: 23px; }
.lead { font: 300 19px/1.55 var(--serif); color: var(--silver); text-wrap: pretty; }
.title { font: 400 25px/1.25 var(--serif); color: var(--navy); }
.title--sm { line-height: 1.35; }
.body { max-width: 62ch; text-wrap: pretty; }
.body + .body { margin-top: 14px; }
.small { font-size: 14px; line-height: 1.7; }
.num { font: 500 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--orange-text); font-variant-numeric: tabular-nums; }
.dot { color: var(--orange); }
.stop { color: var(--orange); } /* the headline full stop: markup, on navy grounds only */
.sep { color: var(--orange-text); margin: 0 .5em; }

/* On navy grounds */
.on-navy { color: var(--silver); }
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy .statement, .on-navy .title { color: #fff; }
.on-navy .label { color: #fff; }
.on-navy .label--muted { color: var(--silver); }
.on-navy .label--accent { color: var(--orange); }
.on-navy .num { color: var(--orange); }
.on-navy .sep { color: var(--orange); }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 30px; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
button.btn { cursor: pointer; font-family: inherit; }
.btn--primary { background: var(--orange); color: var(--navy); } /* button text on orange is navy, never white */
.btn--navy { background: var(--navy); color: #fff; }
.btn--outline { border-color: var(--orange); color: #fff; }
.btn--outline-dark { border-color: var(--navy); color: var(--navy); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 11px; } /* 44 px minimum touch target on mobile */

/* The kit's arrow-right icon from the sprite: orange by default, navy beside navy text. */
.arrow { display: inline-block; width: 18px; height: 18px; margin: -4px 0; flex: none; color: var(--orange); }
.arrow--navy { color: var(--navy); }
.link {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px; padding-bottom: 10px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
  border-bottom: 1px solid var(--orange);
}
/* enlarges the hit area to 44 px without moving the rule */
.link::before { content: ""; position: absolute; inset: -12px 0; }
.link--plain { border-bottom: 0; padding-bottom: 0; }
.on-navy .link { color: #fff; }
.text-link { color: var(--navy); border-bottom: 1px solid var(--orange); padding-bottom: 2px; }
.on-navy .text-link { color: #fff; }

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  body { font-size: 16px; }
}

/* ---------- desktop (1440 px artboard) ---------- */
@media (min-width: 960px) {
  .split { grid-template-columns: var(--rail) minmax(0, var(--measure)); }
  .split > .rail { padding: 12px 32px 0 0; }
  .split--wide { grid-template-columns: var(--rail) minmax(0, 1fr); }

  .display { font-size: clamp(44px, 5.2vw, 76px); }
  .statement { font-size: 34px; line-height: 1.32; }
  .statement--lg { font-size: 39px; line-height: 1.3; }
  .statement--sm { font-size: 28px; line-height: 1.38; }
  .lead { font-size: 22px; }
  .title { font-size: 28px; }
  .title--sm { font-size: 22px; }

  .btn--sm { height: 42px; }
}