/* base.css — Reset + Viewport-Based Sizing System */

/* ========== FONTS ========== */
@font-face {
  font-family: 'Suisse Intl';
  src: url('./SuisseIntl-Book.TAOtEZs9.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('./SuisseIntl-Medium-WebM.BBtZoIj1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ========== TAILWIND-STYLE RESET ========== */
*, *::before, *::after {
  border: 0 solid;
  box-sizing: border-box;
}

::before, ::after {
  --tw-content: "";
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

body {
  line-height: inherit;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

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

b, strong {
  font-weight: bolder;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font-family: inherit;
  font-feature-settings: inherit;
  font-size: 100%;
  font-variation-settings: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
  -webkit-appearance: button;
  background-color: initial;
  background-image: none;
}

menu, ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

fieldset, legend {
  padding: 0;
}

fieldset {
  margin: 0;
}

textarea {
  resize: vertical;
}

[role=button], button {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

audio, canvas, embed, iframe, img, object, svg, video {
  display: block;
  vertical-align: middle;
}

img, video {
  height: auto;
  max-width: 100%;
}

[hidden]:where(:not([hidden=until-found])) {
  display: none;
}

/* ========== VIEWPORT-BASED REM SYSTEM ========== */
:root {
  --size: 402;
  --clamp: 13px;
}

@media (min-width: 650px) {
  :root {
    --size: 1500;
  }
}

html {
  font-kerning: none;
  font-size: clamp(1px, calc(10 * 100vw / var(--size)), var(--clamp));
  font-variant-ligatures: common-ligatures;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  color: #000;
}

body, html {
  overscroll-behavior: none;
}

body {
  font-family: 'Suisse Intl', sans-serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: none;
  font-variant-ligatures: common-ligatures;
}

@media (min-width: 650px) {
  body {
    font-size: 2rem;
  }
}

/* ========== SELECTION ========== */
::-moz-selection {
  background-color: #000;
  color: #fff;
}

::selection {
  background-color: #000;
  color: #fff;
}

/* ========== BUTTON RESET ========== */
button {
  border-radius: 0;
}

button, input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
}

input, textarea {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  outline: 0;
  padding: 0;
  min-width: 0;
}

/* ========== HEADING CLASSES ========== */
.h1 {
  font-size: 4.2rem;
  letter-spacing: -.04em;
  line-height: 1;
}

@media (min-width: 650px) {
  .h1 {
    font-size: 7.9rem;
  }
}

.h3 {
  font-size: 2.3rem;
  letter-spacing: -.02em;
  line-height: 1.1;
}

@media (min-width: 650px) {
  .h3 {
    font-size: 3.2rem;
  }
}

/* ========== TEXT UTILITIES ========== */
.txt > :not(:last-child) {
  margin-bottom: 2.5rem;
}

.txt p {
  color: #a2a2a2;
  font-weight: 400;
}

.txt strong {
  color: #000;
  font-weight: 500;
}

/* ========== SITE GRID SYSTEM ========== */
.site-max {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  width: 100%;
}

.site-max .site-max {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 650px) {
  .site-max {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.site-grid {
  --gap: 1.2rem;
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-column-gap: var(--gap);
}

@media (min-width: 650px) {
  .site-grid {
    --gap: 1.7rem;
    --cols: 12;
  }
}

/* ========== UNDERLINE ANIMATION ========== */
.uline {
  display: inline-flex;
  position: relative;
  white-space: nowrap;
  --bottom: 0;
}

.uline:before {
  background-color: currentColor;
  bottom: var(--bottom);
  content: "";
  height: .08em;
  left: 0;
  min-height: 1px;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .75s cubic-bezier(.19, 1, .22, 1);
}

@media (hover: hover) and (pointer: fine) {
  .uline:hover:before,
  a:hover .uline:before {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ========== ULINE DOUBLE (Enroll now style) ========== */
.uline-double {
  display: inline-flex;
  position: relative;
  white-space: nowrap;
  --bottom: -.05em;
}

.uline-double:after,
.uline-double:before {
  background-color: currentColor;
  bottom: var(--bottom);
  content: "";
  height: .08em;
  left: .05em;
  min-height: 1px;
  position: absolute;
  right: 0;
}

.uline-double:before {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .75s cubic-bezier(.19, 1, .22, 1);
  transition-delay: .5s;
}

.uline-double:after {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .75s cubic-bezier(.19, 1, .22, 1);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  .uline-double:hover:before {
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .75s cubic-bezier(.19, 1, .22, 1);
    transition-delay: 0s;
  }
  .uline-double:hover:after {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .75s cubic-bezier(.19, 1, .22, 1);
    transition-delay: .2s;
  }
}

/* ========== MEDIA UTILITIES ========== */
.media-fill img, .media-fill video {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

/* ========== RADIUS ========== */
.radius-global,
.radius-media {
  border-radius: 1rem;
}

.radius-media {
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  overflow: hidden;
}

/* ========== HOVER EFFECTS ========== */
@media (hover: hover) and (pointer: fine) {
  .h-scale__item {
    transition: transform 1s cubic-bezier(.19, 1, .22, 1);
  }
  .h-scale:hover .h-scale__item {
    transform: scale(1.02);
  }
  .h-fade {
    transition: opacity .5s ease-out;
  }
  .h-fade:hover {
    opacity: .3;
  }
  .h-list__item {
    transition: opacity .3s ease-out;
  }
  .h-list:hover .h-list__item {
    opacity: .3;
  }
  .h-list__item:hover {
    opacity: 1 !important;
  }
}

/* ========== STACK ========== */
.stack {
  display: grid;
}
.stack > * {
  grid-area: 1/1;
}

/* ========== TRANSITION DEFAULTS ========== */
.transition {
  transition-duration: .15s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

.transition-opacity {
  transition-duration: .15s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

/* ========== FAQ ROTATE ICON ========== */
.rotate-icon {
  transition: transform .5s cubic-bezier(.19, 1, .22, 1), color .5s cubic-bezier(.19, 1, .22, 1);
}

.rotate-icon-t.is-active .rotate-icon {
  transform: rotate(180deg);
}

/* ========== ASPECT ========== */
.aspect {
  padding-top: var(--aspect);
}

/* ========== CURSOR ========== */
.cursor-grab {
  cursor: grab;
}
.cursor-grab.is-grabbing {
  cursor: grabbing;
}
