/* ============================================================================
   ELTINE — Base: reset, fluid scaling, primitives, buttons, forms
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--brand-font-family);
  font-weight: var(--brand-weight-regular);
  color: var(--mapped-text-body);
  background-color: var(--alias-grey-100);
  font-size: var(--size-font);
  font-feature-settings: "ss01", "ss02";
}

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

img,
video {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  overflow-wrap: break-word;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

.is-list-unstyled {
  list-style: none;
}

.is-inline-block {
  display: inline-block;
}

::selection {
  background: var(--brand-signal-500);
  color: var(--brand-grey-900);
}

:focus-visible {
  outline: 2px solid var(--brand-signal-500);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Scaling System (after Osmo — https://osmo.supply/)
   One root font-size derived from viewport width; every dimension in the
   system is expressed in em, so the whole page scales as one drawing.
   --------------------------------------------------------------------------- */
:root {
  --size-unit: 16; /* body font-size in the design — unitless */
  --size-container-ideal: 1440; /* design canvas width — unitless */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

.container {
  width: 100%;
  max-width: var(--size-container);
  margin: 0 auto;
  padding-right: var(--mapped-padding-md);
  padding-left: var(--mapped-padding-md);
}

/* ---------------------------------------------------------------------------
   Typography roles
   --------------------------------------------------------------------------- */
.heading_display-large {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: -0.045em;
}

.heading_display-small {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: -0.04em;
}

.heading_h1 {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: -0.035em;
}

.heading_h2 {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: -0.028em;
}

.heading_h3 {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: -0.024em;
}

.heading_h4 {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: -0.02em;
}

.heading_h5 {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: -0.015em;
}

.heading_h6 {
  font-family: var(--brand-font-family);
  color: var(--mapped-text-headings);
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: -0.01em;
}

.heading_h6.is-inverse {
  color: var(--mapped-text-headings-inverse);
}

.text_size-large {
  color: var(--mapped-text-body);
  font-size: var(--type-paragraph-lg-size);
  line-height: var(--type-paragraph-lg-lh);
  font-weight: var(--brand-weight-regular);
  letter-spacing: -0.005em;
}

.text_size-medium {
  color: var(--mapped-text-body);
  font-size: var(--type-paragraph-md-size);
  line-height: var(--type-paragraph-md-lh);
  font-weight: var(--brand-weight-regular);
}

.text_size-medium.is-white {
  color: var(--mapped-text-headings);
}

.text_size-medium-m {
  color: var(--mapped-text-headings);
  font-size: var(--type-paragraph-md-size);
  line-height: var(--type-paragraph-md-lh);
  font-weight: var(--brand-weight-medium);
}

.text_size-small {
  color: var(--mapped-text-body);
  font-size: var(--type-paragraph-sm-size);
  line-height: var(--type-paragraph-sm-lh);
  font-weight: var(--brand-weight-regular);
}

.text_size-small.is-color-light {
  color: var(--mapped-text-body-light);
}

.text_size-small.is-inverse {
  color: var(--mapped-text-headings-inverse);
}

.text_size-xsmall {
  color: var(--mapped-text-body-light);
  font-size: var(--type-paragraph-xsm-size);
  line-height: var(--type-paragraph-xsm-lh);
  font-weight: var(--brand-weight-regular);
}

/* Mono is reserved for machine-readable content: labels, codes, readings,
   dates, quantities. Never for prose. */
.text_eyebrow,
.annotation_text,
.text_mono {
  font-family: var(--brand-font-mono);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  font-weight: var(--brand-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text_eyebrow {
  color: var(--mapped-text-body);
}

.annotation_text {
  color: var(--mapped-text-body-light);
  font-weight: var(--brand-weight-regular);
}

.is-accent {
  color: var(--brand-signal-500);
}

[data-theme-section="light"] .is-accent,
:root .is-accent {
  color: var(--mapped-text-action);
}

[data-theme-section="dark"] .is-accent,
[data-theme-section="hero"] .is-accent {
  color: var(--brand-signal-500);
}

/* ---------------------------------------------------------------------------
   Button — two stacked layers; the hover layer wipes in under a clip-path
   while the default label scales out. No radius, no shadow, no gradient.
   --------------------------------------------------------------------------- */
:root {
  --button-color: var(--mapped-text-on-action);
  --button-color-background: var(--mapped-surface-action);
  --button-hover-color: var(--mapped-text-on-action);
  --button-hover-color-background: var(--mapped-surface-action-hover);
  --button-padding: 1.55em 2.4em 1.55em 2.4em;
  --button-padding-big: 2.6em;
  --button-click-scale: 0.97 0.94;
  --button-default-text-scale: 1.18;
  --button-hover-text-scale: 0.86;
  --button-ease-hover: cubic-bezier(0.675, 0.15, 0.1, 1);
  --button-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
}

.button {
  -webkit-user-select: none;
  user-select: none;
  background-color: transparent;
  outline-style: none;
  flex: 0 auto;
  align-self: flex-start;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
  overflow: hidden;
  transition: scale 0.15s var(--button-ease-click);
}

.button:active {
  scale: var(--button-click-scale);
}

.button.is-big {
  align-self: auto;
  width: 100%;
}

.button__hover {
  pointer-events: none;
  color: var(--button-hover-color);
  z-index: 2;
  grid-area: 1 / 1;
  display: grid;
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  transition: clip-path 0.425s var(--button-ease-hover);
}

.button__default {
  pointer-events: none;
  color: var(--button-color);
  grid-area: 1 / 1;
  display: grid;
}

.button__text {
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--button-padding);
  z-index: 1;
  grid-area: 1 / 1;
  font-family: var(--brand-font-mono);
  font-size: 0.6875em;
  font-weight: var(--brand-weight-medium);
}

.button__text.is-big {
  padding: var(--button-padding-big);
}

.button__bg {
  grid-area: 1 / 1;
  place-self: center;
  width: 100%;
  height: 100%;
}

.button__bg.is--default {
  background-color: var(--button-color-background);
}

.button__bg.is--hover {
  background-color: var(--button-hover-color-background);
}

.button__hover .button__text {
  scale: var(--button-hover-text-scale);
  transition: scale 0.35s var(--button-ease-hover);
}

.button__default .button__text {
  scale: 1;
  transition: scale 0.35s var(--button-ease-hover);
}

.button:is(:hover, :focus-visible) .button__hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.425s 0.05s var(--button-ease-hover);
}

.button:is(:hover, :focus-visible) .button__hover .button__text {
  scale: 1;
  transition: scale 0.35s 0.1s var(--button-ease-hover);
}

.button:is(:hover, :focus-visible) .button__default .button__text {
  scale: var(--button-default-text-scale);
  transition: scale 0.35s 0.05s var(--button-ease-hover);
}

/* Ghost variant — outline only, for secondary actions */
.button.is-ghost {
  --button-color: var(--mapped-text-headings);
  --button-hover-color: var(--mapped-text-on-action);
  box-shadow: inset 0 0 0 1px var(--mapped-border-default);
}

.button.is-ghost .button__bg.is--default {
  background-color: transparent;
}

.button.is-ghost .button__bg.is--hover {
  background-color: var(--brand-signal-500);
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.form-field {
  width: 100%;
  padding: 1.25em 1.25em;
  font-family: var(--brand-font-family);
  font-size: var(--type-paragraph-sm-size);
  color: var(--mapped-text-headings);
  background-color: transparent;
  border: 1px solid var(--mapped-border-default);
  border-radius: 0;
  transition: border-color 0.25s ease;
}

.form-field::placeholder {
  color: var(--mapped-text-body-light);
  font-family: var(--brand-font-mono);
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-field:focus {
  outline: none;
  border-color: var(--brand-signal-500);
}

textarea.form-field {
  min-height: 8em;
  resize: vertical;
}

.form-consent {
  display: flex;
  gap: var(--brand-scale-300);
  align-items: flex-start;
  cursor: pointer;
}

.form-consent input {
  margin-top: 0.25em;
  accent-color: var(--brand-signal-500);
  width: 1em;
  height: 1em;
  flex: none;
}