/* Vaultd site. Layout sizes are in em: the root font size scales with the
   viewport (see --size-font), so the whole page scales as one piece. */

/* Obscura uses Riant Display (Adobe Fonts, one weight). Space Grotesk is the
   closest free match: same squarish rounds and proportions. */
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --size-unit: 16;
  --size-container-ideal: 1500;
  --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)));

  --color-black: #0a0a0a;
  --color-dark: #111111;
  --color-dark-2: #1a1a1a;
  --color-white: #f3f3f3;
  --color-paper: #e8e8e5;
  --color-light-gray: #8a8a8a;
  --color-gray: #5c5c5c;
  --color-line: rgba(243, 243, 243, 0.14);
  --color-line-dark: rgba(10, 10, 10, 0.16);

  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: 1.5em;
  --gap: 1.25em;
  --ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-active: var(--color-white);
  --nav-inactive: var(--color-light-gray);
}

@media screen and (max-width: 991px) {
  :root { --size-container-ideal: 1080; --size-container-min: 768px; --size-container-max: 991px; }
}
@media screen and (max-width: 767px) {
  :root { --size-container-ideal: 620; --size-container-min: 480px; --size-container-max: 767px; --gutter: 1.25em; --gap: 1em; }
}
@media screen and (max-width: 479px) {
  :root { --size-container-ideal: 400; --size-container-min: 0px; --size-container-max: 479px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-black); overflow-x: hidden; }
/* clip, not hidden: hidden would turn body into a scroll box and break the sticky sections */
body { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-font);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--color-white);
  background: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background-color: #666; color: #ffffff; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 0.3em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.u-container { width: 100%; max-width: var(--size-container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.grid-col-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.u-separator { width: 100%; height: 1px; background: var(--color-line); transform-origin: left center; }

.u-text-sm { font-size: 0.75em; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; }
.u-text-base { font-size: 1em; line-height: 1.45; font-weight: 400; }
.u-text-md { font-size: 1.75em; line-height: 1.12; letter-spacing: -0.025em; }
.u-text-lg { font-size: 3.5em; line-height: 1; letter-spacing: -0.045em; }
.u-text-xl { font-size: 9.75em; line-height: 0.84; letter-spacing: -0.065em; }
.is-muted { color: var(--color-light-gray); }

/* split text helpers (SplitText adds these) */
.split-line { padding-bottom: 0.075em !important; margin-bottom: -0.075em; }
.split-mask { overflow: clip; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-black); color: var(--color-white);
  display: none; flex-direction: column; justify-content: space-between;
  padding: var(--gutter);
  will-change: clip-path;
}
html.has-loader .loader { display: flex; }
.loader_top { display: flex; justify-content: space-between; }
.loader_mid { overflow: hidden; }
.loader_logo { width: 100%; height: auto; color: var(--color-white); overflow: hidden; }
.loader_logo path { transform-box: fill-box; }
.loader_bottom { align-items: end; }
.loader_percent { grid-column: 1 / span 3; font-variant-numeric: tabular-nums; }
.loader_bar { grid-column: 7 / span 6; height: 1px; background: var(--color-line); position: relative; margin-bottom: 0.55em; }
.loader_bar_fill { position: absolute; inset: 0; background: var(--color-white); clip-path: inset(0 100% 0 0); }

/* ---------- page transition ---------- */
.page_transition {
  position: fixed; inset: 0; z-index: 150;
  background: var(--color-dark);
  pointer-events: none;
  transform: translateY(100%);
  display: flex; align-items: flex-end; padding: var(--gutter);
}
.page_transition_label { opacity: 0; }
html.has-transition .page_transition { transform: none; }
html.is-loading [data-hero], html.is-loading [data-navbar] { visibility: hidden; }

/* ---------- navbar ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  mix-blend-mode: difference; color: var(--color-white);
  pointer-events: none;
}
.navbar_wrap { padding-top: 1.35em; padding-bottom: 1.35em; align-items: start; }
.navbar_wrap > * { pointer-events: auto; }
.nav_logo_link { grid-column: 1 / span 3; font-weight: 500; font-size: 1.05em; letter-spacing: -0.01em; justify-self: start; }
.nav_links { grid-column: 7 / span 6; display: flex; gap: 2.25em; }
.nav_link { color: var(--nav-inactive); transition: color 350ms ease; }
.nav_link.is-active, body.is-home .nav_link { color: var(--nav-active); }
.nav_links:has(.nav_link:hover) .nav_link { color: var(--nav-inactive); }
.nav_links:has(.nav_link:hover) .nav_link:hover { color: var(--nav-active); transition-duration: 250ms; }
.navbar .nav_menu_btn { display: none; grid-column: 10 / span 3; justify-self: end; }

.nav_menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--color-black);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6em var(--gutter) var(--gutter);
  visibility: hidden; clip-path: inset(0 0 100% 0);
}
.nav_menu_links { display: flex; flex-direction: column; }
.nav_menu_links .u-mask { padding-bottom: 0.12em; margin-bottom: -0.12em; }
.nav_menu_link { display: block; text-transform: lowercase; padding: 0.04em 0; transition: opacity 0.4s ease; }
.nav_menu_links:has(.nav_menu_link:hover) .nav_menu_link { opacity: 0.3; }
.nav_menu_links:has(.nav_menu_link:hover) .nav_menu_link:hover { opacity: 1; }
.nav_menu_bottom { display: flex; justify-content: space-between; margin-top: 3em; color: var(--color-light-gray); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: baseline; gap: 0.6em; padding-bottom: 0.28em; white-space: nowrap; }
.btn_line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right center; transition: transform 0.7s var(--ease); }
.btn_line.is-2 { transform: scaleX(0); transform-origin: left center; transition-delay: 0s; }
.btn:hover .btn_line:not(.is-2) { transform: scaleX(0); }
.btn:hover .btn_line.is-2 { transform: scaleX(1); transition-delay: 0.28s; }
.btn_arrow { display: inline-block; transition: transform 0.6s var(--ease-out); }
.btn_arrow svg { width: 0.7em; height: auto; display: inline-block; vertical-align: 0.02em; }
.btn_arrow.is-up svg { transform: rotate(-45deg); }
.btn:hover .btn_arrow { transform: translateX(0.25em); }
.btn.is-lg { padding-bottom: 0.18em; }
.btn.is-lg .btn_line { height: max(1px, 0.04em); }

/* hover: the word slides up and a copy rises from below, growing from 80% */
[data-hover="slideup"] { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.hover-slide-original, .hover-slide-clone { display: block; white-space: nowrap; transition: transform 0.65s var(--ease); transform-origin: 50% 50%; }
.hover-slide-clone { position: absolute; top: 100%; left: 0; width: 100%; transform: scale(0.8); }
a:hover .hover-slide-original, button:hover .hover-slide-original, [data-hover="slideup"]:hover .hover-slide-original { transform: translateY(-100%) scale(0.8); }
a:hover .hover-slide-clone, button:hover .hover-slide-clone, [data-hover="slideup"]:hover .hover-slide-clone { transform: translateY(-100%) scale(1); }

/* ---------- custom cursor ---------- */
[data-custom-cursor], [data-custom-cursor] * { cursor: none !important; }
.cursor {
  position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none;
  width: 6.5em; height: 6.5em; margin: -3.25em 0 0 -3.25em;
  border-radius: 50%; background: #fff; color: #000; mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
}
@media (hover: none) { .cursor { display: none; } }

/* ---------- hero (home) ---------- */
.hero { position: relative; height: 100svh; min-height: 42em; overflow: hidden; background: var(--color-black); }
.hero_bg { position: absolute; left: 50%; top: 50%; width: 29em; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0.25em; transform: translate(-50%, -50%); will-change: transform; }
.hero_bg_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.01); user-select: none; }
.hero_bg_img.is-active { opacity: 1; }
.hero_overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,0.65) 100%); pointer-events: none; }
.hero_inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 5.5em; padding-bottom: var(--gutter); }
.hero_words { position: relative; row-gap: 0.9em; align-content: start; --hero-word-h: min(calc((min(100vw, var(--size-container)) - 2 * var(--gutter)) * 0.8 / var(--r)), 17svh); }
.hero_word { height: var(--hero-word-h); width: auto; max-width: none; overflow: hidden; }
.hero_word path { transform-box: fill-box; }
.hero_word.is-1 { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
.hero_word.is-2 { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
.hero_word.is-3 { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-left: calc((100% + var(--gap)) / 12 * 2); }
.hero_bottom { align-items: end; }
.hero_heading { grid-column: 1 / span 5; }
.hero_btn_wrap { grid-column: 7 / span 4; }
.hero_cpt { grid-column: 11 / span 2; justify-self: end; }

/* ---------- intro (home 01) ---------- */
.intro { position: relative; z-index: 2; padding-top: 11em; padding-bottom: 14em; margin-bottom: -14em; background: var(--color-black); }
.about { position: relative; z-index: 1; }
.intro_main { position: relative; row-gap: 5em; }
.intro_heading { grid-column: 1 / span 9; }
.intro_cpt { grid-column: 11 / span 2; justify-self: end; padding-top: 0.6em; }
.intro_img_wrap { grid-column: 1 / span 4; aspect-ratio: 4 / 5; overflow: hidden; position: relative; border-radius: 0.25em; }
.intro_img_wrap img, .about_img_wrap img, .u-cover { width: 100%; height: 130%; object-fit: cover; position: absolute; top: -15%; left: 0; }
.intro_text { grid-column: 7 / span 4; align-self: end; display: flex; flex-direction: column; gap: 1.1em; color: var(--color-light-gray); }
.intro_text p:first-child { color: var(--color-white); }
.intro_svg { position: absolute; right: var(--gutter); bottom: 0; width: 42%; color: var(--color-white); opacity: 0.035; pointer-events: none; }
.intro .u-separator { margin-top: 10em; }

/* ---------- work / drop cycle (home 02) ---------- */
.work { position: relative; }
.work_top { padding-top: 10em; padding-bottom: 4em; row-gap: 3.5em; align-items: end; }
.work_top_text { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 1.5em; }
.work_top_text p { color: var(--color-light-gray); max-width: 22em; }
.work_top_title { grid-column: 1 / -1; text-transform: lowercase; }
.work_main { position: relative; height: 340vh; }
.work_sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.work_bg { position: absolute; inset: 0; }
.work_bg_item { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 50% 0 50%); }
.work_bg_item:first-child { clip-path: inset(0 0 0 0); }
.work_bg_item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: blur(2px); }
.work_bg_overlay { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.72); }
.work_content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 6em; padding-bottom: var(--gutter); }
.work_mid { flex: 1; align-items: center; }
.work_titles { grid-column: 1 / span 4; align-self: center; }
.work_center { grid-column: 5 / span 4; display: flex; flex-direction: column; gap: 1em; }
.work_img_wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; border-radius: 0.25em; }
.work_img_item { position: absolute; inset: 0; overflow: hidden; clip-path: inset(100% 0 0 0); }
.work_img_item:first-child { clip-path: inset(0 0 0 0); }
.work_img_item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.work_nums { grid-column: 11 / span 2; justify-self: end; align-self: center; font-variant-numeric: tabular-nums; }
.work_bottom { align-items: end; }
.work_tags { grid-column: 1 / span 4; }
.work_btn_wrap { grid-column: 5 / span 4; }
.work_meta { grid-column: 11 / span 2; justify-self: end; text-align: right; }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.swap > *:not(:first-child) { visibility: hidden; }
.work_tag_list { display: flex; flex-direction: column; gap: 0.35em; }
.work_desc { color: var(--color-light-gray); max-width: 26em; }

/* ---------- platform list (home 03) ---------- */
.svc { position: relative; z-index: 3; padding-top: 10em; padding-bottom: 26em; margin-bottom: -16em; background: var(--color-black); }
.svc_top { padding-bottom: 5em; align-items: start; }
.svc_top_cpt { grid-column: 1 / span 3; padding-top: 0.5em; }
.svc_top_heading { grid-column: 5 / span 7; }
.svc_list { display: block; }
.svc_item { position: relative; display: block; overflow: hidden; }
.svc_item_row { position: relative; z-index: 1; align-items: center; padding-top: 1.6em; padding-bottom: 1.6em; }
.svc_item_cnt { grid-column: 1 / span 2; }
.svc_item_name { grid-column: 3 / span 10; display: flex; align-items: center; gap: 0.18em; text-transform: lowercase; white-space: nowrap; }
.svc_item_arrow { width: 0.62em; flex: none; margin-left: -0.8em; opacity: 0; transform: translateX(-60%); transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), margin 0.7s var(--ease-out); }
.svc_item_label { display: inline-block; }
.svc_item_panel { position: relative; z-index: 1; height: 0; overflow: hidden; }
.svc_item_panel_inner { padding-bottom: 2.4em; align-items: start; }
.svc_panel_cpt { grid-column: 3 / span 2; padding-top: 0.4em; }
.svc_panel_text { grid-column: 5 / span 4; }
.svc_panel_list { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 0.4em; }
.svc_item_overlay { position: absolute; inset: 0; background: var(--color-white); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.7s var(--ease); z-index: 0; }
.svc_item { transition: color 0.45s var(--ease); }
@media (hover: hover) {
  .svc_item:hover { color: var(--color-black); }
  .svc_item:hover .svc_item_overlay { transform: scaleY(1); }
  .svc_item:hover .svc_item_arrow { opacity: 1; transform: translateX(0); margin-left: 0; margin-right: 0.18em; }
}

/* ---------- about (home 04) ---------- */
.about { padding-top: 6em; padding-bottom: 12em; }
.about_top { position: relative; align-items: start; margin-bottom: 9em; }
.about_signal { grid-column: 1 / span 11; display: grid; }
.about_signal > * { grid-area: 1 / 1; width: 100%; height: auto; }
.about_signal_solid path { transform-box: fill-box; }
.about_arrow { grid-column: 12 / span 1; justify-self: end; width: 3.2em; margin-top: 0.4em; }
.about_mobile_text { display: none; }
.about_main { row-gap: 3em; }
.about_img_wrap { grid-column: 1 / span 5; aspect-ratio: 4 / 5; overflow: hidden; position: relative; border-radius: 0.25em; }
.about_content { grid-column: 7 / span 6; display: flex; flex-direction: column; justify-content: space-between; gap: 4em; }
.about_text_wrap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap); }
.about_cpt { grid-column: 1 / span 2; padding-top: 0.3em; }
.about_right { grid-column: 3 / span 4; display: flex; flex-direction: column; gap: 2.2em; align-items: start; }
.about_paragraphs { display: flex; flex-direction: column; gap: 1.1em; color: var(--color-light-gray); }
.about_paragraphs p:first-child { color: var(--color-white); }

/* ---------- services-style page hero ---------- */
.page_hero { padding-top: 7.5em; }
.page_hero_lines { display: flex; flex-direction: column; gap: 1.1em; }
.page_hero_line { display: flex; justify-content: space-between; gap: var(--gap); align-items: flex-start; }
.page_hero_svg { width: calc(var(--w) * 1%); height: auto; overflow: hidden; flex: none; }
.page_hero_svg path { transform-box: fill-box; }
.page_hero_main { padding-top: 3.5em; padding-bottom: 3em; align-items: end; }
.page_hero_cpt { grid-column: 1 / span 3; }
.page_hero_paragraph { grid-column: 7 / span 5; }
.page_hero_img { grid-column: 1 / -1; position: relative; overflow: hidden; aspect-ratio: 21 / 9; border-radius: 0.25em; }
.page_hero_bottom { padding-top: 5em; padding-bottom: 9em; align-items: start; }
.page_hero_bottom_cpt { grid-column: 1 / span 3; padding-top: 0.6em; }
.page_hero_bottom_text { grid-column: 5 / span 8; }

.page_intro { padding-bottom: 10em; row-gap: 3em; }
.page_intro_img { grid-column: 1 / span 5; aspect-ratio: 4 / 5; position: relative; overflow: hidden; border-radius: 0.25em; }
.page_intro_right { grid-column: 7 / span 6; display: flex; flex-direction: column; justify-content: space-between; gap: 3em; }
.page_intro_top { display: flex; flex-direction: column; gap: 1.6em; }
.page_intro_cpt { color: var(--color-light-gray); }
.page_intro_text { color: var(--color-light-gray); max-width: 30em; }
.page_intro_facts { display: flex; flex-direction: column; border-top: 1px solid var(--color-line); }
.page_intro_fact { display: flex; justify-content: space-between; gap: 1em; padding: 0.95em 0; border-bottom: 1px solid var(--color-line); }
.page_intro_fact > :last-child { color: var(--color-light-gray); text-align: right; }
.page_intro_bottom { display: flex; justify-content: space-between; align-items: end; gap: 2em; }

/* ---------- marquee ---------- */
.marquee { position: relative; overflow: hidden; padding: 2.4em 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.marquee_track { display: flex; width: max-content; will-change: transform; }
.marquee_item { display: flex; align-items: center; flex: none; }
.marquee_svg { height: 6.5em; width: auto; max-width: none; margin-right: 3em; }
.marquee_sep { width: 0.9em; height: 0.9em; background: currentColor; margin-right: 3em; flex: none; }

/* ---------- stacked cards ---------- */
.stack { position: relative; }
.stack_intro { padding-top: 10em; padding-bottom: 6em; align-items: start; row-gap: 3em; }
.stack_intro_cpt { grid-column: 1 / span 3; }
.stack_intro_text { grid-column: 4 / span 3; color: var(--color-light-gray); }
.stack_intro_svg { grid-column: 8 / span 5; width: 100%; height: auto; }
.stack_intro_svg rect { transform-box: fill-box; }
/* each card holds still for --dwell (progress bar fills), then the next slides over it */
.stack_cards { --dwell: 70svh; }
.card_wrap { position: sticky; top: 0; height: 100svh; margin-bottom: var(--dwell); }
/* the last card dwells on the spacer instead: sticky can't use its own margin */
.card_wrap:nth-last-child(2) { margin-bottom: 0; }
.stack_spacer { height: var(--dwell); }
.card { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 6.5em; padding-bottom: var(--gutter); background: var(--color-dark); overflow: hidden; }
.card_wrap:nth-child(even) .card { background: var(--color-paper); color: var(--color-black); }
.card_wrap:nth-child(even) .card .is-muted, .card_wrap:nth-child(even) .card_paragraph { color: #555; }
.card_wrap:nth-child(even) .card .u-separator { background: var(--color-line-dark); }
.card_wrap:nth-child(even) .card_bar_bg, .card_wrap:nth-child(even) .card_dot { background: var(--color-line-dark); }
.card_top { align-items: start; }
.card_name { grid-column: 1 / -1; text-transform: lowercase; }
.card_list { list-style: none; margin: 0; padding: 0; position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: calc((100% - 2 * var(--gutter) - 11 * var(--gap)) / 12 * 4 + 3 * var(--gap)); display: flex; flex-direction: column; gap: 0.8em; }
.card_list_item { display: grid; grid-template-columns: 3.5em 1fr; gap: 0.5em; }
.card_bottom { align-items: end; row-gap: 2em; }
.card_left { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 1.2em; align-items: start; }
.card_paragraph { color: var(--color-light-gray); max-width: 30em; }
.card_progress { grid-column: 7 / span 3; position: relative; height: 0.7em; margin-bottom: 1.1em; }
.card_bar_bg { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-line); }
.card_bar_fg { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; }
.card_dots { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; }
.card_dot { width: 0.55em; height: 0.55em; background: var(--color-line); transition: background 0.3s ease; }
.card_dot.is-on { background: currentColor; }
.card_cnt { grid-column: 10 / span 3; justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card_cnt small { font-size: 0.22em; letter-spacing: 0; margin-left: 0.2em; }
.card_shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.stack_note { padding-top: 5em; padding-bottom: 2em; align-items: end; row-gap: 1.5em; }
.stack_note_cpt { grid-column: 1 / span 3; }
.stack_note_text { grid-column: 4 / span 6; }
.stack_note_side { grid-column: 10 / span 3; justify-self: end; text-align: right; color: var(--color-light-gray); }

/* ---------- legal page ---------- */
.legal { padding-bottom: 10em; align-items: start; }
.legal_toc { grid-column: 1 / span 3; position: sticky; top: 6em; display: flex; flex-direction: column; gap: 0.7em; }
.legal_toc_title { color: var(--color-light-gray); margin-bottom: 0.6em; }
.legal_toc a { color: var(--color-light-gray); transition: color 0.3s ease; display: inline-flex; }
.legal_toc a:hover, .legal_toc a.is-active { color: var(--color-white); }
.legal_body { grid-column: 5 / span 7; display: flex; flex-direction: column; gap: 5em; }
.legal_lead { color: var(--color-white); }
.legal_section { display: flex; flex-direction: column; gap: 1.6em; scroll-margin-top: 6em; }
.legal_section_head { display: flex; align-items: baseline; gap: 1.2em; padding-top: 1.4em; border-top: 1px solid var(--color-line); }
.legal_section_head .u-text-sm { color: var(--color-light-gray); min-width: 2.5em; }
.legal_section p, .legal_section li { color: var(--color-light-gray); }
.legal_blocks { display: flex; flex-direction: column; border-top: 1px solid var(--color-line); }
.legal_block { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--gap); padding: 1.3em 0; border-bottom: 1px solid var(--color-line); }
.legal_block h3 { color: var(--color-white); }
.legal_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7em; }
.legal_list li { display: grid; grid-template-columns: 2.5em 1fr; }
.legal_list li span { font-size: 0.75em; padding-top: 0.35em; color: var(--color-light-gray); }
.legal_contact { display: flex; flex-direction: column; border-top: 1px solid var(--color-line); }
.legal_contact_row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 1.1em 0; border-bottom: 1px solid var(--color-line); flex-wrap: wrap; }
.legal_contact_row .u-text-sm { color: var(--color-light-gray); }

/* ---------- CTA ---------- */
.cta { position: relative; z-index: 2; padding-top: 12em; padding-bottom: 5em; background: var(--color-black); }
.cta_wrap { row-gap: 7em; align-items: start; }
.cta_text { grid-column: 1 / span 4; color: var(--color-light-gray); }
.cta_btn_wrap { grid-column: 9 / span 4; justify-self: end; }
.cta_headline { grid-column: 1 / -1; text-transform: lowercase; white-space: nowrap; }

/* ---------- footer (revealed from under the page) ---------- */
.page_main { position: relative; z-index: 2; background: var(--color-black); }
.footer { position: sticky; bottom: 0; z-index: 1; height: 100svh; min-height: 36em; background: var(--color-paper); color: var(--color-black); overflow: hidden; }
.footer_inner { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 6.5em; padding-bottom: var(--gutter); }
.footer_top { align-items: start; row-gap: 3em; }
.footer_links { display: flex; flex-direction: column; gap: 0.3em; align-items: start; }
.footer_links.is-nav { grid-column: 1 / span 3; }
.footer_links.is-social { grid-column: 4 / span 3; }
.footer_link_cpt { color: var(--color-gray); margin-bottom: 1.1em; }
.footer_link { transition: opacity 0.25s ease; }
.footer_links:has(.footer_link:hover) .footer_link { opacity: 0.4; }
.footer_links:has(.footer_link:hover) .footer_link:hover { opacity: 1; }
.footer_about { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: start; }
.footer_about_text { margin-bottom: 2.2em; }
.footer_about .footer_link_cpt { margin-bottom: 0.8em; }
.footer_bottom { row-gap: 1.2em; align-items: end; }
.footer_wordmark { grid-column: 1 / -1; width: 100%; height: auto; }
.footer_wordmark path { transform-box: fill-box; }
.footer_bottom_text { grid-column: 1 / span 6; display: flex; gap: 0.5em; flex-wrap: wrap; align-items: baseline; color: var(--color-gray); }
.footer_bottom_text .btn { color: var(--color-black); }
.footer_year { grid-column: 10 / span 3; justify-self: end; color: var(--color-gray); }
.footer_overlay { position: absolute; inset: 0; background: var(--color-black); pointer-events: none; }

/* ---------- responsive ---------- */
@media screen and (max-width: 991px) {
  .nav_links { grid-column: 6 / span 7; justify-content: flex-end; }
  .hero_heading { grid-column: 1 / span 7; }
  .hero_btn_wrap { grid-column: 1 / span 7; grid-row: 2; margin-top: 1.5em; }
  .hero_cpt { grid-row: 2; }
  .intro_text { grid-column: 6 / span 7; }
  .work_center { grid-column: 4 / span 6; }
  .work_titles { grid-column: 1 / span 3; }
  .svc_panel_text { grid-column: 5 / span 5; }
  .svc_panel_list { grid-column: 10 / span 3; }
  .card_left { grid-column: 1 / span 6; }
  .card_progress { grid-column: 8 / span 2; }
  .legal_body { grid-column: 4 / span 9; }
}

@media screen and (max-width: 767px) {
  .u-text-md { font-size: 1.45em; }
  .u-text-lg { font-size: 2.4em; }
  .u-text-xl { font-size: 4.6em; }
  .grid-col-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-col-12 > * { grid-column: 1 / -1 !important; }

  .nav_links { display: none; }
  .navbar .nav_menu_btn { display: inline-flex; grid-column: auto !important; }
  .navbar_wrap { display: flex; justify-content: space-between; }

  .hero_inner { padding-top: 5em; }
  .hero_word.is-3 { margin-left: 0; }
  .hero_bottom { row-gap: 1.6em; }
  .hero_btn_wrap { grid-row: auto; margin-top: 0; }
  .hero_cpt { display: none; }

  .intro { padding-top: 7em; padding-bottom: 8em; margin-bottom: -8em; }
  .hero_bg { width: 68vw; }
  .intro_main { row-gap: 2.5em; }
  .intro_cpt { justify-self: start; order: -1; }
  .intro_svg { width: 80%; }
  .intro .u-separator { margin-top: 6em; }

  .work_top { padding-top: 6em; row-gap: 2em; }
  .work_main { height: 300vh; }
  .work_content { padding-top: 5em; }
  .work_mid { align-content: center; row-gap: 1.2em; }
  .work_titles { order: 1; }
  .work_nums { justify-self: start; order: 2; }
  .work_center { order: 3; }
  .work_bottom { row-gap: 1em; }
  .work_meta { justify-self: start; text-align: left; }
  .work_tag_list { flex-direction: row; flex-wrap: wrap; gap: 0.3em 1em; }

  .svc { padding-top: 6em; padding-bottom: 14em; margin-bottom: -8em; }
  .svc_top { row-gap: 1.2em; padding-bottom: 3em; }
  .svc_item_name { white-space: normal; }
  .svc_item_arrow { opacity: 1; transform: none; margin-left: 0; margin-right: 0.2em; }
  .svc_item_row { row-gap: 0.4em; }

  .about { padding-bottom: 7em; }
  .about_top { margin-bottom: 4em; }
  .about_signal { display: none; }
  .about_mobile_text { display: block; text-transform: lowercase; }
  .about_arrow { grid-column: 1 / -1; justify-self: start; margin-top: 1.5em; width: 2.2em; }
  .about_text_wrap { grid-template-columns: 1fr; row-gap: 1.4em; }
  .about_cpt, .about_right { grid-column: 1 / -1; }

  .page_hero { padding-top: 6em; }
  .page_hero_line { flex-direction: column; align-items: flex-start; gap: 1.1em; }
  .page_hero_svg { width: calc(var(--wm) * 1%); }
  .hero_words { --hero-word-h: min(calc((100vw - 2 * var(--gutter)) * 0.98 / var(--r)), 12svh); }
  .page_hero_main { row-gap: 1.2em; }
  .page_hero_img { aspect-ratio: 4 / 3; }
  .page_hero_bottom { padding-bottom: 5em; row-gap: 1.2em; }
  .page_intro { padding-bottom: 6em; }
  .page_intro_bottom { flex-direction: column; align-items: start; }

  .marquee_svg { height: 3.6em; margin-right: 1.8em; }
  .marquee_sep { margin-right: 1.8em; width: 0.6em; height: 0.6em; }

  .stack_intro { padding-top: 6em; padding-bottom: 3em; row-gap: 1.5em; }
  .card { padding-top: 5em; }
  .card_list { position: static; transform: none; width: auto; margin-top: 1.5em; }
  .card_top { row-gap: 0; }
  .card_progress { display: none; }
  .card_cnt { justify-self: start; }
  .stack_note_side { justify-self: start; text-align: left; }

  .legal_toc { position: static; }
  .legal_block { grid-template-columns: 1fr; gap: 0.5em; }

  .cta { padding-top: 7em; }
  .cta_wrap { row-gap: 2.5em; }
  .cta_btn_wrap { justify-self: start; }
  .cta_headline { white-space: normal; }

  .footer { min-height: 0; height: auto; position: relative; }
  .footer_inner { padding-top: 5em; gap: 4em; }
  .footer_top { row-gap: 2.5em; }
  .footer_year { justify-self: start; }
  .footer_overlay { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* small additions */
.btn_label { display: inline-block; }
.u-mask { display: block; overflow: hidden; }
[data-unit] { display: block; }
.card { transform-origin: 50% 0%; }
.work_progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-white); transform: scaleX(0); transform-origin: left center; opacity: 0.6; }