/* Reset, document defaults, type scale, layout containers and section rhythm. */

/* Pretendard (variable weight), shipped with the site so it looks the same on every computer */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../assets/fonts/pretendard-variable.woff2") format("woff2-variations"),
       url("../assets/fonts/pretendard-variable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

/* The scroll dot replaces the native scrollbar while the script runs */
html.js {
  scrollbar-width: none;
}

html.js::-webkit-scrollbar {
  display: none;
}

/* Page transition: the page lifts and fades before the next one loads; the header stays.
   Only the contents fade, so the page background keeps covering the footer fixed behind it. */
html.is-leaving main > *,
html.is-leaving .footer > * {
  opacity: 0;
  transform: translateY(calc(var(--reveal-y) * -1));
  transition: opacity var(--dur-leave) var(--ease-inout), transform var(--dur-leave) var(--ease-inout);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Sub pages sit on light grey so they read apart from the white home page; panels and the footer turn white */
body.is-sub {
  background: var(--bg-soft);
}

/* Tiles on the grey sub pages are the page's own grey, raised a little and lit from above */
body.is-sub .tile {
  background: var(--tile-sheen), var(--bg-soft);
  box-shadow: var(--shadow-tile-lit);
}

body.is-sub .footer {
  background: var(--white);
}

/* Footer reveal: the page lifts like a sheet and uncovers the footer fixed behind it */
@media (min-width: 769px) and (min-height: 640px) {
  main {
    position: relative;
    z-index: 1;
    background: var(--white);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
  }
  body.is-sub main {
    background: var(--bg-soft);
  }
  .footer {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }
}

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

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

a,
button {
  -webkit-tap-highlight-color: transparent;
}

ul,
ol {
  list-style: none;
}

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

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

::selection {
  background: var(--green-200);
  color: var(--ink-900);
}

/* Type scale */

.t-display,
.t-h1,
.t-h2,
.t-h3,
.t-num {
  font-weight: var(--fw-bold);
  color: var(--color-text);
  word-break: keep-all;
  text-wrap: balance;
}

.t-num { text-wrap: nowrap; }

.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-h1      { font-size: var(--fs-h1);      line-height: var(--lh-h1);      letter-spacing: var(--ls-h1); }
.t-h2      { font-size: var(--fs-h2);      line-height: var(--lh-h2);      letter-spacing: var(--ls-h2); }
.t-h3      { font-size: var(--fs-h3);      line-height: var(--lh-h3);      letter-spacing: var(--ls-h3); }
.t-num     { font-size: var(--fs-num);     line-height: var(--lh-num);     letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; }

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--color-text-2);
  word-break: keep-all;
  text-wrap: balance;
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-2);
  word-break: keep-all;
  text-wrap: pretty;
}

.t-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0;
  color: var(--color-text-3);
}

.t-label {
  display: inline-block;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--color-accent);
}

.accent {
  color: var(--color-accent);
}

.on-dark .t-display,
.on-dark .t-h1,
.on-dark .t-h2,
.on-dark .t-h3,
.on-dark .t-num { color: var(--color-on-dark); }
.on-dark .t-lead,
.on-dark .t-body { color: var(--color-on-dark-2); }
.on-dark .t-small { color: var(--color-on-dark-3); }
.on-dark .t-label,
.on-dark .accent { color: var(--green-400); }

.pc { display: inline; }
.mo { display: none; }

@media (max-width: 768px) {
  .pc { display: none; }
  .mo { display: inline; }
}

/* Layout */

.container,
.container--narrow,
.container--wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container        { max-width: calc(var(--container) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide  { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tall {
  padding-block: var(--section-y-tall);
}

/* On desktop every section is at least one screen tall with its content centred,
   so a section with little content keeps its whitespace instead of shrinking */
@media (min-width: 1025px) and (min-height: 700px) {
  .section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
  }
}

.section--clip {
  overflow: hidden;
}

.section--soft { --tile-bg: var(--bg-soft); background: var(--bg-soft); }
.section--dark {
  background: var(--grad-dark);
  color: var(--color-on-dark);
}

.section__head {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}

.section__head--left {
  margin-inline: 0;
  text-align: left;
}

.section__head .t-label + * { margin-top: var(--gap-label-title); }
.section__head .t-lead { margin-top: var(--gap-title-lead); max-width: 560px; margin-inline: auto; }
.section__head--left .t-lead { margin-inline: 0; }
.section__head .btn { margin-top: var(--gap-lead-btn); }
.section__head .link-arrow { margin-top: var(--gap-title-lead); }
.section__head + .section__visual { margin-top: var(--gap-text-visual); }

/* Section rails: side lines that break between sections and draw as the section scrolls by.
   The script adds two .rail spans to each section and scales them; the lines show only on wide screens. */
.rail {
  display: none;
}

@media (min-width: 1400px) {
  .section:not(.section--dark):not([data-pin-steps]):not([data-phrases]):not(.sec-logos):not(.sec-cta):not(.sec-process) {
    isolation: isolate;
  }
  .rail {
    display: block;
    position: absolute;
    top: var(--sp-8);
    bottom: var(--sp-8);
    left: calc((100% - var(--container)) / 2 - var(--sp-8));
    z-index: -1;
    width: 1px;
    background: var(--ink-200);
    transform-origin: center top;
    pointer-events: none;
  }
  .rail--right {
    left: auto;
    right: calc((100% - var(--container)) / 2 - var(--sp-8));
  }
  .sec-page .rail {
    top: calc(var(--header-h) + var(--sp-8));
  }
}

/* Reveal: hidden until the script animates it in */

.js [data-reveal],
.js [data-reveal-group] > *,
.js [data-intro] {
  opacity: 0;
}

/* Headings are split into words so each line can sharpen on its own */
.word {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js [data-intro] {
    opacity: 1;
  }
  html { scroll-behavior: auto; }
}

/* Utilities */

/* Underline that draws in from the left on hover and slides out to the right. A link that is the only thing in
   its row (a list item, a table cell) also underlines when the row is pointed at. */
.u-line {
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  background-origin: content-box;
  transition: background-size var(--dur-hover) var(--ease-inout), color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .u-line:hover,
  :hover > .u-line:only-child {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

.u-center { text-align: center; }
.u-hide { display: none !important; }
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}