/* ===========================
   Fonts
   =========================== */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueThin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeueHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ===========================
   Design Tokens
   =========================== */
:root {
  /* Brand - Navy */
  --brand-navy: #001436;
  --brand-navy-darker: #000b1f;
  --brand-navy-200: #142c55;
  --brand-navy-100: #34486c;
  /* Brand - Cloud */
  --brand-cloud: #f6f5f2;
  --brand-cloud-200: #dde3ed;
  --brand-cloud-100: #cbd3e0;
  /* Brand - Sky */
  --brand-sky: #a1c4ff;
  --brand-sky-200: #7ba3e4;
  --brand-sky-100: #6083be;
  /* Brand - Accent */
  --brand-gold: #ffc95d;
  --brand-green: #5cff85;

  /* Theme */
  --color-primary: var(--brand-sky);
  --color-primary-dark: var(--brand-sky-200);
  --color-text: var(--brand-cloud);
  --color-text-light: var(--brand-cloud-100);
  --color-bg: var(--brand-navy);
  --color-bg-alt: var(--brand-navy-darker);
  --color-border: var(--brand-navy-200);

  --font-sans: "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.5rem;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 5rem;

  --max-width: 1200px;
  --container-width: 720px;
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;

  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
  --blur-xl: blur(40px);

  --header-height: 4.5rem;
  --logo-grid-gap: 2px;
}

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

html {
  scroll-behavior: auto;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

/* @keep — Custom scrollbar (disabled, uncomment to restore)
html {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-gold) var(--brand-navy);
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--brand-navy); }
::-webkit-scrollbar-thumb { background: var(--brand-gold); border-radius: 5px; border: 2px solid var(--brand-navy); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-sky); }
*/

/* ===========================
   Loading Overlay
   =========================== */
html.is-loading {
  overflow: hidden;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--brand-navy);
}

.loading-overlay__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 12rem;
  aspect-ratio: 1600 / 951;
  background-color: var(--brand-navy-100);
  -webkit-mask-image: url("/assets/images/logos/company/stack-vertical-white.svg");
  mask-image: url("/assets/images/logos/company/stack-vertical-white.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.loading-overlay__bar {
  position: absolute;
  top: calc(50% + 7rem);
  left: 50%;
  transform: translateX(-50%);
  width: 646px;
  max-width: calc(100% - var(--spacing-xl));
  border-radius: 9999px;
  background-color: rgba(0,0,0, 0.1);
  overflow: hidden;
}

.loading-overlay__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background-color: var(--brand-navy-100);
  border-radius: 9999px;
  transition: width 0.3s ease-out;
}

.loading-overlay__percent {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--brand-navy-100);
  user-select: none;
  transition: color 0.3s ease;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding-top: var(--header-height);
  background-color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dark);
}

ul {
  list-style: none;
}

.skip-link {
  position: fixed;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 200;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 2px solid var(--brand-sky);
  border-radius: var(--border-radius);
  background: var(--brand-navy);
  font-size: var(--font-size-base);
  color: var(--brand-cloud);
  transition: transform 0.2s ease;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}

/* ===========================
   Background Video
   =========================== */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100lvw;
  height: 100lvh;
  object-fit: cover;
  opacity: 0.2;
  transition: opacity 1s ease;
}

.bg-video--zoomed {
  visibility: hidden;
  opacity: 0;
  transition: none;
}

/* ===========================
   Layout
   =========================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* ===========================
   Glass Panel
   =========================== */
.glass-panel {
  max-width: var(--container-width);
  margin: 0 auto;
  border-radius: var(--border-radius-xl);
  border-top: 2px solid var(--brand-sky-100);
  border-bottom: 2px solid var(--brand-navy-100);
  background: rgba(0, 20, 54, 0.5);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
}

.glass-panel + .glass-panel {
  margin-top: var(--spacing-xl);
}

/* ===========================
   Video Zoom Spacer
   =========================== */
.video-zoom-spacer {
  height: 100vh;
}

/* ===========================
   Reveal Animation
   =========================== */
.reveal {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
  transform: translateY(30px);
}

.reveal.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ===========================
   Scroll Progress Bar
   =========================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 201;
  width: 0%;
  height: 2px;
  background: linear-gradient(to right, var(--brand-sky-100), var(--brand-sky));
  pointer-events: none;
}

/* ===========================
   Header
   =========================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-height);
  background: linear-gradient(to bottom, rgba(0, 20, 54, 1), rgba(0, 20, 54, 0));
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.site-header.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-header__logo {
  display: flex;
  align-items: center;
}

.site-header__logo-img {
  display: block;
  height: 2.5rem;
  width: 10rem;
  background-color: var(--brand-cloud);
  transition: background-color 0.3s ease;
  -webkit-mask-image: url("/assets/images/logos/company/stack-horizontal-white.svg");
  mask-image: url("/assets/images/logos/company/stack-horizontal-white.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.site-header__logo:hover .site-header__logo-img {
  background-color: var(--brand-gold);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ===========================
   Content
   =========================== */
.hero-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hero-logo__img {
  height: 12rem;
  aspect-ratio: 1600 / 951;
  background-color: white;
  -webkit-mask-image: url("/assets/images/logos/company/stack-vertical-white.svg");
  mask-image: url("/assets/images/logos/company/stack-vertical-white.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.scroll-indicator {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(100vh - 13rem);
  margin-bottom: -5px;
  transition: opacity 0.4s ease;
}

.scroll-indicator__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
}

.scroll-indicator__text {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-sky);
  animation: fade-pulse 4s ease-in-out infinite;
}

@keyframes fade-pulse {
  0% { opacity: 0; }
  25% { opacity: 0; }
  50% { opacity: 0.6; }
  75% { opacity: 0.6; }
  100% { opacity: 0; }
}

.scroll-indicator__chevron {
  width: 2rem;
  height: 2rem;
  border-right: 3px solid var(--brand-sky);
  border-bottom: 3px solid var(--brand-sky);
  opacity: 0.4;
  transition: border-color 0.3s ease, opacity 0.3s ease;
  animation: bounce 2s ease infinite;
  transform: rotate(45deg);
}

.scroll-indicator__btn:hover .scroll-indicator__text {
  color: var(--brand-gold);
}

.scroll-indicator__btn:hover .scroll-indicator__chevron {
  border-color: var(--brand-gold);
  opacity: 1;
}

.scroll-indicator__btn:hover .scroll-indicator__chevron + .scroll-indicator__chevron {
  opacity: 0.5;
}

.scroll-indicator__chevron + .scroll-indicator__chevron {
  margin-top: -1rem;
  opacity: 0.2;
  animation-delay: 0.15s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translate(0, 0); }
  40% { transform: rotate(45deg) translate(5px, 5px); }
  60% { transform: rotate(45deg) translate(2.5px, 2.5px); }
}

.content {
  padding: calc(var(--spacing-2xl) * 0.667) var(--spacing-2xl);
}

.content p {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-lg);
  font-weight: 300;
  line-height: 1.8;
  color: var(--brand-cloud-200);
}




/* Variable opacity — earlier paragraphs brighter */
.content p:first-of-type { color: var(--brand-cloud); }
.content p:nth-of-type(2) { color: var(--brand-cloud); }
.content p:nth-of-type(3) { color: var(--brand-cloud-200); }
.content p:nth-of-type(4) { color: var(--brand-cloud-200); }
.content p:nth-of-type(5) { color: var(--brand-cloud-100); }

.highlight {
  font-weight: 400;
  color: var(--brand-gold);
}


.content p.content__closer {
  max-width: 100%;
  margin-top: var(--spacing-xl);
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-sky), var(--brand-gold));
  background-size: 200% 100%;
  font-size: var(--font-size-2xl);
  font-weight: 300;
  text-align: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 4s ease infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ===========================
   Pillars
   =========================== */
.pillars {
  padding: var(--spacing-xl);
}

.section-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brand-cloud);
}

.section-heading::before {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brand-cloud));
  opacity: 0.3;
  content: "";
}

.section-heading::after {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--brand-cloud));
  opacity: 0.3;
  content: "";
}

.pillars__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
}

.pillars__card {
  flex: 0 1 calc((100% - var(--spacing-md) * 2) / 3);
  padding: var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--brand-sky);
  border-radius: var(--border-radius);
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  transition: transform 0.3s ease, border-top-color 0.3s ease, background-color 0.3s ease, opacity 0.6s ease, filter 0.6s ease;
}

.pillars__card:hover {
  border-top-color: var(--brand-gold);
  background: rgba(0, 0, 0, 0.55);
  transform: translateY(-8px);
}

.pillars__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--spacing-sm);
  color: var(--brand-gold);
}

.pillars__text {
  font-size: var(--font-size-lg);
  font-weight: 300;
  line-height: 1.4;
  color: var(--brand-cloud);
}

/* ===========================
   Experience
   =========================== */
.experience {
  padding: calc(var(--spacing-2xl) * 0.667) var(--spacing-2xl);
}


.experience__text {
  font-size: var(--font-size-lg);
  font-weight: 300;
  line-height: 1.8;
  color: var(--brand-cloud-200);
}

/* ===========================
   Call to Action
   =========================== */
.cta {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) var(--spacing-lg);
  background: rgba(0, 20, 54, 0.8);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  text-align: center;
  opacity: 0;
}

.cta__text {
  max-width: var(--container-width);
  margin: 0 auto var(--spacing-xl);
  font-size: var(--font-size-lg);
  font-weight: 300;
  line-height: 1.8;
  color: var(--brand-cloud);
}

/* ===========================
   Logo Grid
   =========================== */
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--logo-grid-gap);
  max-width: var(--container-width);
  margin: var(--spacing-xl) auto 0;
}

.logo-grid__card {
  display: flex;
  flex: 0 1 calc((100% - var(--logo-grid-gap) * 3) / 4);
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--brand-sky);
  border-radius: var(--border-radius);
  background: rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, border-top-color 0.3s ease, opacity 0.6s ease, filter 0.6s ease;
}

.logo-grid__card:hover {
  border-top-color: var(--brand-gold);
}

.logo-grid__img {
  width: 100%;
  height: 3rem;
  background-size: 80% auto;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1) brightness(0.87);
}

.logo-grid__img--tesla    { background-image: url("/assets/images/logos/third-party/tesla.svg"); }
.logo-grid__img--nvidia   { background-image: url("/assets/images/logos/third-party/nvidia.svg"); background-size: 88% auto; }
.logo-grid__img--amazon   { background-image: url("/assets/images/logos/third-party/amazon.svg"); }
.logo-grid__img--spacex   { background-image: url("/assets/images/logos/third-party/spacex.svg"); background-size: 88% auto; }
.logo-grid__img--apple    { background-image: url("/assets/images/logos/third-party/apple.svg"); }
.logo-grid__img--amd      { background-image: url("/assets/images/logos/third-party/amd.svg"); }
.logo-grid__img--intel    { background-image: url("/assets/images/logos/third-party/intel.svg"); background-size: 62% auto; }
.logo-grid__img--qualcomm { background-image: url("/assets/images/logos/third-party/qualcomm.svg"); background-size: 88% auto; }

/* ===========================
   Content Page
   =========================== */
.content-page {
  padding: calc(var(--spacing-2xl) / 2) 0 var(--spacing-2xl);
  background-color: var(--brand-navy-darker);
}

.breadcrumb {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 300;
  color: var(--brand-cloud-200);
}

.breadcrumb a {
  color: var(--brand-sky);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb__sep {
  margin: 0 0.4em;
}

.content-page__header {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.content-page__title {
  font-size: var(--font-size-3xl);
  font-weight: 300;
  color: var(--brand-cloud);
}

.content-page__subtitle {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--brand-cloud-100);
}

.content-page__content h2 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xl);
  font-weight: 500;
  color: var(--brand-cloud);
}

.content-page__content h2 span {
  margin-right: 0.25em;
  color: inherit;
}

.content-page__content h3 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xs);
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--brand-cloud);
}

.content-page__content h3 span {
  margin-right: 0.25em;
  color: inherit;
}

.content-page__content p {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.8;
  color: var(--brand-cloud-200);
}

.content-page__content ul {
  margin-bottom: var(--spacing-sm);
  padding-left: calc(var(--spacing-lg) * 2);
}

.content-page__content li {
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.8;
  color: var(--brand-cloud-200);
  list-style: disc;
}

.content-page__content a {
  color: var(--brand-sky);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-page__content a:hover {
  color: var(--brand-sky-200);
}

/* ===========================
   Site Footer
   =========================== */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
  background: #000;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

.site-footer__heading {
  display: none;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__grid > :last-child {
  grid-column: span 2;
}

.site-footer__links--legal {
  display: block;
  columns: 2;
  column-gap: var(--spacing-lg);
}

.site-footer__links a {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--brand-cloud-100);
  transition: color 0.2s;
}

.site-footer__links a:hover {
  color: var(--brand-cloud);
}

.site-footer__brand {
  display: flex;
  align-items: flex-start;
}

.site-footer__logo {
  height: 1.25rem;
  width: auto;
}

.site-footer__tm {
  margin-left: 2px;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--brand-cloud-100);
}

.site-footer__info {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--brand-cloud-100);
  transition: color 0.2s;
}

a.site-footer__info:hover {
  color: var(--brand-cloud);
}

.site-footer__copy {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--brand-cloud-100);
}

.site-footer__copy + .site-footer__copy {
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: none;
}

/* ===========================
   Buttons
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  cursor: pointer;
}

.btn:active {
  transform: scale(0.96);
}

.btn--primary {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
}

.btn--primary:hover {
  background-color: var(--brand-sky);
  border-color: var(--brand-sky);
  color: var(--brand-navy);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--brand-sky);
  color: var(--brand-sky);
}

.btn--outline:hover {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
}

.btn__icon {
  height: 0.875rem;
  width: 0.875rem;
}


/* ===========================
   Responsive — Glass Panel (<=720px)
   =========================== */
@media (max-width: 720px) {
  .glass-panel {
    border-radius: 0;
  }
}

/* ===========================
   Responsive — Tablet (<=1024px)
   =========================== */
@media (max-width: 1024px) {
  .pillars__card {
    flex: 0 1 calc((100% - var(--spacing-md)) / 2);
  }

  .logo-grid__card {
    flex: 0 1 calc((100% - var(--logo-grid-gap) * 2) / 3);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__grid > :last-child {
    grid-column: span 1;
  }

  .site-footer__links--legal {
    columns: 1;
  }
}

/* ===========================
   Responsive — Mobile (<=640px)
   =========================== */
@media (max-width: 640px) {
  :root {
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --spacing-2xl: 3rem;
  }

  .site-header__logo-img {
    height: 2rem;
  }

  .scroll-indicator {
    padding-top: calc(100vh - 18rem);
  }


  .hero-logo__img {
    height: 7rem;
  }

  .loading-overlay__logo {
    height: 7rem;
  }

  .loading-overlay__bar {
    top: calc(50% + 6rem);
  }

  .content {
    padding: var(--spacing-lg) var(--spacing-md);
  }


  .content__closer {
    font-size: var(--font-size-xl);
  }

  .pillars {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .pillars__card {
    flex: 1 1 100%;
  }

  .logo-grid__card {
    flex: 0 1 calc((100% - var(--logo-grid-gap)) / 2);
  }

  .experience {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .cta {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .site-footer__grid {
    gap: var(--spacing-md);
  }
}

/* ===========================
   Responsive — QHD / Ultrawide (>=2560px)
   =========================== */
@media (min-width: 2560px) {
  html {
    font-size: 150%;
  }

  :root {
    --max-width: 1800px;
    --container-width: 1080px;
    --header-height: 5.5rem;
  }

  .scroll-indicator {
    padding-top: calc(100vh - 13rem - 14px);
    margin-bottom: -15px;
  }
}

/* ===========================
   Responsive — 4K (>=3800px)
   =========================== */
@media (min-width: 3800px) {
  html {
    font-size: 200%;
  }

  :root {
    --max-width: 2800px;
    --container-width: 1440px;
    --header-height: 6rem;
  }

  .scroll-indicator {
    padding-top: calc(100vh - 13rem - 14px);
    margin-bottom: -15px;
  }
}