/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */

/* Layer order. Do not reorder this line unless you intentionally change cascade priority. */
@layer reset, tokens, base, components, layout, projects, moderncss, util;


/* ═══════════════════════════════════════════════════════════════
   01. TOKENS / COLORS / EASING
═══════════════════════════════════════════════════════════════ */
@layer tokens {
	@layer colors {
		:root {
			--palette-grey-900: #2F3034;
			--palette-grey-800: #45474D;
			--palette-grey-50: #E6EAF0;
			--palette-grey-0: #FFFFFF;
			--palette-grey-1000: #212226;
			--palette-grey-20: #EFF2F7;
			--palette-grey-1200: #121317;
			--palette-grey-1100: #18191D;
			--palette-grey-10: #F8F9FC;
			--palette-grey-100: #E1E6EC;
			--palette-grey-200: #CDD4DC;
			--palette-grey-300: #B2BBC5;
			--palette-grey-400: #B7BFD9;
			--palette-grey-600: #AAB1CC4D;
			--palette-grey-1000-12: #dedfe2;
			--palette-grey-50-20: #414347;
			--palette-grey-15: #F0F1F5;
			--palette-grey-0-rgb: 255, 255, 255;
			--palette-grey-50-rgb: 230, 234, 240;
			--palette-grey-400-rgb: 183, 191, 217;
			--palette-grey-600-rgb: 170, 177, 204;
			--palette-grey-1000-rgb: 33, 34, 38;
			--palette-grey-1200-rgb: 18, 19, 23;
			--theme-surface-surface: var(--palette-grey-0);
			--theme-surface-on-surface: var(--palette-grey-1200);
			--theme-surface-on-surface-variant: var(--palette-grey-800);
			--theme-surface-surface-container: var(--palette-grey-10);
			--theme-surface-surface-container-high: var(--palette-grey-20);
			--theme-surface-surface-container-higher: var(--palette-grey-50);
			--theme-surface-surface-container-highest: var(--palette-grey-100);
			--theme-surface-inverse-surface: var(--palette-grey-1200);
			--theme-surface-inverse-on-surface: var(--palette-grey-10);
			--theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
			--theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);
			--theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);
			--theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);
			--theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
			--theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01);
			--theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24);
			--theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72);
			--theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95);
			--theme-inverse-surface: var(--palette-grey-1200);
			--theme-outline: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12);
			--theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06);
			--theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06);
			--theme-outline-outline-variant: rgba(33, 34, 38, .06);
			--theme-primary-primary: var(--theme-surface-on-surface);
			--theme-primary-on-primary: var(--theme-surface-surface);
			--theme-tonal-tonal: var(--theme-surface-surface-container);
			--theme-tonal-on-tonal: var(--theme-surface-on-surface);
			--theme-outlined-outlined: var(--theme-surface-surface-transparent);
			--theme-outlined-on-outlined: var(--theme-surface-on-surface);
			--theme-protected-protected: var(--theme-surface-surface-container);
			--theme-protected-on-protected: var(--theme-surface-on-surface);
			--theme-text-text: var(--theme-surface-surface-transparent);
			--theme-text-on-text: var(--theme-surface-on-surface);
			--theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
			--theme-text-link-states-hovered: var(--palette-grey-1000);
			--theme-text-link-states-focused: var(--palette-grey-1100);
			--theme-text-link-states-pressed: var(--palette-grey-1000);
			--theme-text-link-states-disabled: #6A6A71;
			--theme-button-states-primary-enabled: var(--theme-primary-primary);
			--theme-button-states-primary-disabled: var(--palette-grey-10);
			--theme-button-states-primary-hovered: var(--palette-grey-900);
			--theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12);
			--theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2);
			--theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2);
			--theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1);
			--theme-button-secondary-hover: var(--palette-grey-15);
			--theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3);
			--theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
			--theme-button-states-tonal-disabled: var(--palette-grey-10);
			--theme-button-states-protected-enabled: var(--theme-protected-protected);
			--theme-button-states-protected-hovered: var(--palette-grey-20);
			--theme-button-states-protected-disabled: var(--palette-grey-100);
			--theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
			--theme-button-states-disabled: var(--palette-grey-100);
			--theme-button-states-on-disabled: #6A6A71;
			--theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04);
			--theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0);
			--theme-nav-button: rgba(var(--palette-grey-400-rgb), .09);
			--theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);
			--divider: var(--theme-outline-outline-variant);
		}
	}
		
	@layer animations {
		:root {
			--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
			--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
			--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
			--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
			--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
			--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
			--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
			--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
			--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
			--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
			--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
			--ease-out-circ: cubic-bezier(.075, .82, .165, 1);
			--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
			--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
			--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
			--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
			--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
			--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
			--ease-out-back: cubic-bezier(.34, 1.85, .64, 1);
		}
	}
}

/* ═══════════════════════════════════════════════════════════════
   02. RESET
═══════════════════════════════════════════════════════════════ */
@layer reset {
	html, body {
		height: 100%;
	}
	
	* {
		box-sizing: border-box;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	ul[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	input, textarea, select, button {
		font-family: inherit;
		font-size: inherit;
	}
	
	a:focus-visible,
	button:focus-visible {
		outline-offset: 0.2rem;
	}
	
	figure {
		margin: 0;
	}
}

html {
    scroll-behavior: auto;
}
/* ═══════════════════════════════════════════════════════════════
   03. BASE / GLOBAL ELEMENTS
═══════════════════════════════════════════════════════════════ */
@layer base {
	html {
		background: var(--theme-surface-surface);
		font-family: "Google Sans Flex", sans-serif;
		font-weight: 400;
		
		font-size: 16px;
		
		color: var(--theme-surface-on-surface);
	}
	
	section {
		/* Make sections fullheight */
		min-height: 100dvh;
		
		&.center {
			/* Center their contents */
			place-content: safe center;
			justify-items: center;
		}
	}

	h2 {
		font-size: 2.5em;
		font-weight: 350;
		margin: 0.5rem 0;
		line-height: 1;

		@media (width >= 930px) {
			width: 50%;
			max-width: 25ch;
		}
	}
	
	p {
		color: var(--theme-surface-on-surface-variant);
	}
	
	@scope (.dark) {
		p {
			color: var(--theme-surface-surface);
		}
	}
}

/* ═══════════════════════════════════════════════════════════════
   04. UTILITIES
═══════════════════════════════════════════════════════════════ */
@layer util {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
	
	.not-sr-only {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

/* ═══════════════════════════════════════════════════════════════
   05. COMPONENTS
═══════════════════════════════════════════════════════════════ */
@layer components {
	
	/* ─────────────────────────────────────────────────────────────
	   BUTTONS
	───────────────────────────────────────────────────────────── */
@layer button {
  button,
  .button {
    background: var(--theme-primary-primary);
    color: var(--theme-primary-on-primary);

    border: 0;
    border-radius: 999px;

    padding: 0.6em 1.5em;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;

    font-family: inherit;
    font-size: 0.9em;
    text-decoration: none;

    cursor: pointer;

    transition: .15s background ease-out;
  }

  button:hover,
  button:focus-visible,
  .button:hover,
  .button:focus-visible {
    background: var(--theme-button-states-primary-hovered);
    color: var(--theme-primary-on-primary);
  }

  button:has(span + .material-symbols-outlined),
  .button:has(span + .material-symbols-outlined) {
    padding-inline-end: 1em;
  }

  button:has(.material-symbols-outlined + span),
  .button:has(.material-symbols-outlined + span) {
    padding-inline-start: 1em;
  }

  button.secondary,
  .button.secondary {
    color: var(--theme-surface-on-surface);
    background: var(--theme-secondary-button);
    border: 1px solid var(--theme-outline-variant);
  }

  button.secondary:hover,
  button.secondary:focus-visible,
  .button.secondary:hover,
  .button.secondary:focus-visible {
    background: var(--theme-button-secondary-hover);
    color: var(--theme-surface-on-surface);
  }
}
	
/* ─────────────────────────────────────────────────────────────
   HEADER / NAVIGATION
───────────────────────────────────────────────────────────── */
@layer navbar {
  @layer shared {
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .menu-checkbox {
      display: none;
    }

    nav a {
      color: var(--theme-surface-on-surface);
      text-decoration: none;
      transition:
        color .15s ease-out,
        background .15s ease-out;
    }

    nav a:hover,
    nav a:focus-visible {
      color: #000;
      background: var(--theme-button-states-hovered);
    }
  }

  @layer mobile {
    @media (width < 930px) {
      .menu-button {
        display: grid;
        flex: 0 0 3.25rem;
        width: 3.25rem;
        height: 3.25rem;
        margin-left: auto;
        place-content: center;
        z-index: 1002;

        border-radius: 999px;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(0,0,0,.08);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .menu-button:hover,
      .menu-button:focus-visible {
        background: var(--theme-button-states-hovered);
        transform: scale(1.04);
      }

      nav {
        position: fixed;
        top: 4.75rem;
        left: 1rem;
        right: 1rem;
        width: auto;

        display: block;
        padding: .75rem;

        border-radius: 1.5rem;
        border: 1px solid var(--theme-outline-variant);

        background: rgba(255, 255, 255, .9);
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);

        box-shadow: 0 30px 90px rgba(0, 0, 0, .14);

        z-index: 1001;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform-origin: top right;
        transform: translateY(-10px) scale(.88);

        transition:
          opacity .22s ease,
          transform .22s ease;
      }

      nav ul {
        display: flex;
        flex-direction: column;
        gap: .25rem;
      }

      nav li {
        border: 0;
        font-size: 1rem;
        font-weight: 450;
      }

      nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: .95rem 1.05rem;
        border-radius: 1rem;

        font-size: 1.08rem;
        font-weight: 500;

        color: var(--theme-surface-on-surface);

        opacity: 0;
        transform: translateY(8px);

        transition:
          opacity .22s ease,
          transform .22s var(--ease-out-cubic),
          background .2s ease;
      }

      nav a:hover,
      nav a:focus-visible {
        background: var(--theme-surface-surface-container-high);
        color: var(--theme-surface-on-surface);
        transform: translateY(0) translateX(3px);
      }

      nav a::after {
        content: "arrow_forward";
        font-family: "Material Symbols Outlined";
        font-size: 1.15rem;

        opacity: .35;
        transform: translateX(-4px);

        transition:
          opacity .2s ease,
          transform .2s var(--ease-out-cubic);
      }

      nav a:hover::after,
      nav a:focus-visible::after {
        opacity: 1;
        transform: translateX(3px);
      }

      .menu-checkbox:checked ~ nav {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        animation: bubbleMenu .34s cubic-bezier(.22, 1, .36, 1) forwards;
      }

		/* Stagger animation */

		.menu-checkbox:checked ~ nav a {
			opacity: 1;
			transform: translateY(0);
		}

		/* About */
		.menu-checkbox:checked ~ nav li:nth-child(1) a {
			transition-delay: .04s;
		}

		/* Projects */
		.menu-checkbox:checked ~ nav li:nth-child(2) a {
			transition-delay: .08s;
		}

		/* Expertise */
		.menu-checkbox:checked ~ nav li:nth-child(3) a {
			transition-delay: .12s;
		}

		/* Stack */
		.menu-checkbox:checked ~ nav li:nth-child(4) a {
			transition-delay: .16s;
		}

		/* FAQ */
		.menu-checkbox:checked ~ nav li:nth-child(5) a {
			transition-delay: .20s;
		}

		/* Contact */
		.menu-checkbox:checked ~ nav li:nth-child(6) a {
			transition-delay: .24s;
		}

		/* Download button */
		.menu-checkbox:checked ~ nav .mobile-download {
			opacity: 1;
			transform: translateY(0);
			transition-delay: .30s;
		}

      .menu-checkbox:checked ~ .menu-button {
        background: var(--theme-primary-primary);
        color: var(--theme-primary-on-primary);
      }

      .menu-checkbox:checked ~ .menu-button [data-show-when="closed"] {
        display: none !important;
      }

      .menu-checkbox:not(:checked) ~ .menu-button [data-show-when="open"] {
        display: none !important;
      }

      .mobile-download {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;

        margin-top: .75rem;
        padding: .95rem 1rem;

        border-radius: 1rem;

        background: var(--theme-primary-primary);
        color: var(--theme-primary-on-primary);

        text-decoration: none;
        font-weight: 500;

        opacity: 0;
        transform: translateY(8px);

        transition:
          opacity .22s ease,
          transform .22s var(--ease-out-cubic),
          background .2s ease;
      }

      .mobile-download::after {
        content: none;
      }

      .mobile-download:hover,
      .mobile-download:focus-visible {
        background: var(--theme-button-states-primary-hovered);
        color: var(--theme-primary-on-primary);
        transform: translateY(0);
      }

      header button,
      header .button {
        display: none;
      }
    }
  }

  .menu-checkbox:checked ~ nav.is-closing {
    visibility: visible;
    pointer-events: none;
    animation: bubbleMenuClose .24s cubic-bezier(.4,0,.2,1) forwards;
  }

  @layer large {
    @media (width >= 930px) {
      nav ul {
        display: flex;
        flex-direction: row;
        gap: .2rem;
        align-self: flex-start;
      }

      nav a {
        padding: .6em 1.2em;
        border-radius: 999px;
        color: var(--theme-surface-on-surface-variant);
        white-space: nowrap;
      }

      nav a:hover,
      nav a:focus-visible {
        color: #ffffff;
        background: black;
      }

      .menu-button {
        display: none;
      }

      .mobile-download {
        display: none;
      }
    }
  }
}

@keyframes bubbleMenu {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(.88);
    border-radius: 2rem;
  }

  70% {
    opacity: 1;
    transform: translateY(0) scale(1.015);
    border-radius: 1.5rem;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-radius: 1.5rem;
  }
}

@keyframes bubbleMenuClose {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-radius: 1.5rem;
  }

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(.88);
    border-radius: 2rem;
  }
}

	/* ─────────────────────────────────────────────────────────────
	   CARDS
	───────────────────────────────────────────────────────────── */
	@layer card {
		.card {
			border-radius: 2em;
			
			&.dark {
				background: var(--theme-primary-primary);
	   		color: var(--theme-surface-surface);
			}
		}
	}
}

/* ═══════════════════════════════════════════════════════════════
   06. LAYOUT BY HTML SECTION
═══════════════════════════════════════════════════════════════ */
@layer layout {
	
	/* ─────────────────────────────────────────────────────────────
	   PAGE GRID
	───────────────────────────────────────────────────────────── */
	@layer grid {
		body {
			margin: 0;
			display: grid;
			grid-template-columns:
				[fullbleed-start]
				3rem
				[main-start]
				1fr
				[main-end]
				3rem
				[fullbleed-end];
			grid-auto-rows: min-content;
		}
		
    body > * {
      grid-column: fullbleed;
    }

    body > main {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: fullbleed;
    }

    main > section {
      grid-column: fullbleed;
    }
	}
	
	
	/* ─────────────────────────────────────────────────────────────
	   HEADER WRAPPER
	───────────────────────────────────────────────────────────── */
	@layer navigation {
    .header-wrapper {
      position: fixed;
      top: 0.3rem;
      left: 0;
      right: 0;

      background: transparent;
      z-index: 1000;
      pointer-events: none;
    }
		
		header {
			display: flex;
			flex-direction: row;
			gap: 2rem;
			align-items: center;
			
			padding-inline: 3rem; /* @TODO: Figure out if we can subgrid for this */
			padding-block: 0.5rem;
			pointer-events: auto;

      button,
      .button,
      .menu-button {
        margin-left: auto;
      }
		}
	}
	
	
	/* ─────────────────────────────────────────────────────────────
	   HERO / WELCOME (#welcome)
	───────────────────────────────────────────────────────────── */
@layer welcome {
  #welcome {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: subgrid;
    min-height: 100dvh;
    align-content: center;
    justify-items: center;
    text-align: center;
  }

  #welcome > :not(#welcome-wave-canvas) {
    grid-column: main;
  }

  #welcome-wave-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    z-index: 0;
    pointer-events: none;
    opacity: .65;
  }

  .welcome-content {
    position: relative;
    z-index: 2;
  }

  #welcome p {
    font-size: 4.5em;
    text-align: center;
    font-weight: 500;
    color: var(--theme-surface-on-surface);
  }

  #welcome p span {
    display: block;
    font-size: 0.7em;
    color: var(--theme-surface-on-surface-variant);
  }

  @media (width < 768px) {
    #welcome p {
      font-size: 2.6em;
    }
  }
}
	
	/* ─────────────────────────────────────────────────────────────
	ABOUT (#about)
	───────────────────────────────────────────────────────────── */
	@layer about {

  #about {
    display: grid;
    grid-template-columns: subgrid;
    align-content: center;

    min-height: auto;
    padding-block: 5rem 3rem;
  }

	#about > * {
		grid-column: main;
	}

	.section-header {
		margin-bottom: 3rem;
	}

	.section-label {
		font-size: 0.9rem;
		color: var(--theme-surface-on-surface-variant);
		margin-bottom: 0.75rem;
	}

	.section-header h2 span {
		color: var(--theme-surface-on-surface-variant);
	}

  .about-grid {
    width: min(100%, 1180px);
    margin-inline: auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
  }

	.about-text {
		max-width: 720px;
	}

	.about-lead {
		font-size: 1.15em;
		font-weight: 400;
		line-height: 1.6;
		color: var(--theme-surface-on-surface);
		margin-bottom: 1rem;
	}

	.about-text p:not(.about-lead) {
		color: var(--theme-surface-on-surface-variant);
		line-height: 1.7;
		max-width: 65ch;
	}

	.about-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;

    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid var(--theme-outline-variant);

    text-align: center;
    }

	.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
	}

	.stat-number {
		font-size: 2.2rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: -0.03em;
		color: var(--theme-surface-on-surface);
	}

	.stat-label {
		font-size: 0.8rem;
		color: var(--theme-surface-on-surface-variant);
	}

	.about-photo {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.about-image {
		width: 100%;
		max-width: 340px;
		aspect-ratio: 3 / 4;

		object-fit: cover;
		object-position: center;

		display: block;

		border-radius: 2rem;
		border: 1px solid var(--theme-outline-variant);

		transition:
		transform .35s var(--ease-out-cubic),
		box-shadow .35s var(--ease-out-cubic);
	}

  @media (width >= 930px) {
    .about-grid {
      grid-template-columns: minmax(0, 620px) 340px;
      justify-content: space-between;
      align-items: center;
      gap: clamp(4rem, 8vw, 8rem);
    }
  }

  @media (width >= 1500px) {
    .about-grid {
      width: min(100%, 1120px);
      gap: 6rem;
    }
	}
	}
	
	
#expertise {
    display: grid;
    grid-template-columns: subgrid;
    padding-block: 6rem;
    border-top: 1px solid var(--theme-outline-variant);
}

#expertise > * {
    grid-column: main;
}

#expertise .section-header {
    max-width: 760px;
    margin-bottom: 4rem;
}

#expertise .section-header h2 span {
    color: var(--theme-surface-on-surface-variant);
}

#expertise .intro {
    max-width: 60ch;
    line-height: 1.7;
}

.expertise-grid {
    display: grid;
    gap: 2rem;
}

.expertise-card {
    display: grid;
    overflow: hidden;

    border-radius: 2rem;
    border: 1px solid var(--theme-outline-variant);

    background: var(--theme-surface-surface-container);

    transition:
        transform .35s var(--ease-out-cubic),
}

.expertise-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.expertise-image img {
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .6s var(--ease-out-cubic);
}

.expertise-content {
    padding:2rem;
}

.expertise-number{
    font-size:.8rem;
    letter-spacing:.15em;
    color:var(--theme-surface-on-surface-variant);
}

.expertise-content h3{
    margin:.7rem 0 1rem;
    font-size:2rem;
    font-weight:450;
    letter-spacing:-.04em;
}

.expertise-content p{
    line-height:1.7;
}

.expertise-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;

    margin:2rem 0;
    padding:0;
    list-style:none;
}

.expertise-tags li{
    padding:.45rem .9rem;

    border-radius:999px;

    background:var(--theme-surface-surface-container-higher);

    border:1px solid var(--theme-outline-variant);

    font-size:.82rem;
}

@media (width >= 1100px){

    .expertise-card{
        grid-template-columns:1.15fr 1fr;
        align-items:center;
        min-height:520px;
    }

    .expertise-image{
        aspect-ratio:auto;
        height:100%;
    }

    .expertise-card:nth-child(even) .expertise-image{
        order:2;
    }

    .expertise-card:nth-child(even) .expertise-content{
        order:1;
    }

}


/* ─────────────────────────────────────────────────────────────
   FAQ (#faq)
───────────────────────────────────────────────────────────── */
@layer faq {

  #faq {
    display: grid;
    grid-template-columns: subgrid;
    padding-block: 7rem;
    border-top: 1px solid var(--theme-outline-variant);
  }

  #faq > * {
    grid-column: main;
  }

  #faq .section-header {
    max-width: 720px;
    margin: 0 auto 4rem;
    text-align: center;
  }

  #faq .section-header h2 {
    width: auto;
    max-width: none;
    margin-inline: auto;
  }

  #faq .section-header h2 span {
    color: var(--theme-surface-on-surface-variant);
  }

  #faq .intro {
    max-width: 58ch;
    margin: 1.5rem auto 0;
    line-height: 1.7;
  }

  #faq .faq-list {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;

    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #faq .faq-item {
    border: 1px solid var(--theme-outline-variant);
    border-radius: 22px;
    background: var(--theme-surface-surface-container);
    overflow: hidden;

    transition:
      transform .25s var(--ease-out-cubic),
      box-shadow .25s ease,
      border-color .25s ease;
  }

  #faq .faq-item:hover {
    transform: translateY(-3px);
    border-color: var(--theme-outline);
    box-shadow: 0 20px 50px rgba(0,0,0,.06);
  }

  #faq .faq-question {
    width: 100%;
    padding: 1.5rem 2rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--theme-surface-on-surface);

    cursor: pointer;
    text-align: left;

    font-size: 1.08rem;
    font-weight: 500;
  }

  #faq .faq-question:hover {
    background: transparent;
  }

  #faq .faq-icon {
    flex: 0 0 auto;
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1;
    color: var(--theme-surface-on-surface-variant);

    transition: transform .3s var(--ease-out-cubic);
  }

  #faq .faq-item.is-open .faq-icon {
    transform: rotate(45deg);
  }

  #faq .faq-answer {
    height: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(-6px);

    transition:
      height .35s var(--ease-out-cubic),
      opacity .25s ease,
      transform .25s ease;
  }

  #faq .faq-item.is-open .faq-answer {
    opacity: 1;
    transform: translateY(0);
  }

  #faq .faq-answer p {
    margin: 0;
    max-width: 65ch;
    padding: 0 2rem 2rem;
    line-height: 1.8;
    color: var(--theme-surface-on-surface-variant);
  }

  @media (width < 768px) {
    #faq {
      padding-block: 5rem;
    }

    #faq .section-header {
      text-align: left;
      margin-inline: 0;
    }

    #faq .section-header h2 {
      margin-inline: 0;
    }

    #faq .intro {
      margin-inline: 0;
    }

    #faq .faq-list {
      max-width: 100%;
    }

    #faq .faq-question {
      padding: 1.25rem 1.4rem;
      font-size: 1rem;
    }

    #faq .faq-answer p {
      padding: 0 1.4rem 1.4rem;
    }
  }
}



	
	/* ─────────────────────────────────────────────────────────────
	   WHO / CTA SPLIT (#who)
	───────────────────────────────────────────────────────────── */
	@layer who {
		#who {
			display: flex;
			flex-direction: column;
    	align-items: center;
			text-align: center;
			
			@media (width >= 930px) {
				flex-direction: row;
				justify-content: space-around;
			}
			
			> div {
				height: 40vh;
				
				display: grid;
				place-content: center;
				gap: 1em;
			
				@media (width >= 930px) {
					height: 80vh;
				}
			}
			
			h3 {
				font-weight: 400;
				font-size: 1.75em;
		    line-height: 1.1;
				
				@media (width >= 930px) {
					font-size: 2.5em;
				}
				
				span {
					color: var(--theme-surface-on-surface-variant);
				}
			}
			
			button {
				font-size: 1.15em;
				justify-self: center;
			}
		}
	}
	
	
	/* ─────────────────────────────────────────────────────────────
	   BEFORE YOU GO / DOWNLOAD CARD (#beforeyougo)
	───────────────────────────────────────────────────────────── */
	@layer beforeyougo {
		#beforeyougo {
			display: grid;
			grid-template-columns: subgrid;
			
			height: min-content;

			> * {
				grid-column: main;
			}
			
			.card {
				width: 100%;
				height: auto;
				aspect-ratio: 4/3;
				max-height: 80vh;
				
				display: grid;
				padding: 4em;
				gap: 1rem;
				
				align-content: center;	
			}	
			
			p {
				font-size: 2em;
				text-wrap: pretty;
				margin: 0;
				max-width: 20ch;
				
				@media (width > 930px) {
					font-size: 3em;
				}
			}
			
			.buttons {
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
				font-size: 1.2em;
				align-items: start;
				
				@media (width > 930px) {
					flex-direction: row;
				}
			}
		}
	}
}

/* ═══════════════════════════════════════════════════════════════
   07. MODERN CSS EFFECTS
═══════════════════════════════════════════════════════════════ */
@layer moderncss {
	
	
	/* ─────────────────────────────────────────────────────────────
	   MISC MODERN BEHAVIOR
	───────────────────────────────────────────────────────────── */
	@layer misc {
		/* To make the bouncy scroll effect work when the page is shown in an iframe and when the user is already at the edges and nudging the scroller */
		:root {
			overscroll-behavior-y: contain;
		}
	}
	
	
	/* ─────────────────────────────────────────────────────────────
	   MODERN LAYOUT EFFECTS
	───────────────────────────────────────────────────────────── */
	@layer layout {
		
		/* Draw a particles ring in the background of the welcome screen */
		/* I am using Houdini PaintWorklets for this */
		/* I am using Houdini PaintWorklets for this */
		@layer speckled-backgrounds {
			@supports (background: paint(something)) {
				#beforeyougo .card,
				#who > div {
			    --extra-confettiNumber: 250;
  			  --extra-confettiLengthVariance: 1;
			    --extra-confettiWeightVariance: 1;
    			background-image: paint(extra-confetti);
				}
			}
		}
	}
	
	
	/* ─────────────────────────────────────────────────────────────
	   MODERN COMPONENT EFFECTS
	───────────────────────────────────────────────────────────── */
	@layer components {
		@layer button {
			
			/* Buttons in .dark containers have inverted colors */
			@scope (.dark) {
				button {
					color: var(--theme-surface-on-surface);
					background: var(--theme-primary-on-primary);
					border: 1px solid var(--theme-outline-variant);

					&:hover,
					&:focus-visible {
						background: var(--theme-button-secondary-hover);
					}
					
					&.secondary {						
						color: var(--theme-surface-surface);
				    background: var(--theme-nav-button-hover);
			
						&:hover,
						&:focus-visible {
							background: var(--theme-button-secondary-inverse-hover);
						}
					}
				}
			}
		}
		
		@layer navbar {	
			/* Anchor the mobile nav underneath the header */
			@layer mobile {
				@media (width < 930px) {
					header {
						anchor-name: --header;
					}
				}
			}
			
			/* Don’t scroll page when menu is open */
			@media (width < 930px) {
				header:has(.menu-checkbox:checked) {
					&,
					& nav {
						overflow: auto;
						overscroll-behavior: contain;
					}
				}
			}
		}

    .header-wrapper {
      opacity: 1;
      transform: translateY(0);

      transition:
        transform 1.1s cubic-bezier(.45, 0, .25, 1),
        opacity .9s ease;
    }

    .header-wrapper.is-hidden {
      transform: translateY(calc(-100% - 2rem));
      opacity: 0;

      transition:
        transform 1.1s cubic-bezier(.45, 0, .25, 1),
        opacity .9s ease;
    }

		@layer carousel {
			@layer scroll-snapping {
				@layer base-setup {
					@supports (scroll-padding-inline: 3rem) {
						.carousel {
							scroll-padding-inline: 3rem;
							scroll-snap-type: x mandatory;

							> * {
								scroll-snap-align: start;
							}

							/* @NOTE: On the orignal page the last item also snaps to the left */
							/* To get this working, I’d manually add some padding to the right */
							/* Defining that “some” is tricky and requires manual calculation */
							/* Here I am calculating 40vi (because the entries are 60vi) minus gap */
							/* So maybe we should have `auto` on scroll-padding do something? */
							@media (width >= 930px) {
								padding-inline: 3rem calc(40vi - 3rem);
							}
						}
					}
				}
				
				@layer snapped-effects {
					/* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */	
					
					.carousel > * {
						container-type: scroll-state;
						
						@supports (container-type: scroll-state) {
							/* The images */
							> figure {
								opacity: .25;								
								transition: opacity .5s ease;

								@container scroll-state(snapped: x) {
									opacity: 1;
								}
							}
							
							/* The bylines */
							> *:not(figure) {
								transition: opacity .5s ease, translate .5s ease;
								transition-delay: 0s;
								opacity: 0;			
								translate: 0 calc(0.5rem * (sibling-index() - 1)) 0;

								@container scroll-state(snapped: x) {
									transition-delay: 0.2s; /* NOTE: It feels like CSS snapped is triggering while it’s still scrolling, so we delay it a bit */
									opacity: 1;
									translate: 0 0 0;
								}
							}
						}
					}
				}
			}
			
			@layer niceties {
				.carousel {
					scrollbar-width: none;
					overscroll-behavior-x: contain;
				}
			}
			
			@layer scroll-buttons {
				/* @note: https://chrome.dev/carousel-configurator/ really helps here */
				.carousel {
					position: relative;
					scroll-behavior: smooth;
					anchor-name: --carousel;
				
					&::scroll-button(*) {
						position: fixed;
						position-anchor: --carousel;
						position-visibility: always;
						font-family: "Material Symbols Outlined";
						
						color: var(--theme-surface-on-surface);
						background: var(--theme-tonal-tonal);
						border: none;
						block-size: 2em;
						font-size: 1.3em;
						inline-size: 2.5em;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						border-radius: 999px;
						
						transition: opacity 0.25s ease;
					}
					
					/* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */
					&::scroll-button(*):hover {
						background: #eff0f3;
					}
					&::scroll-button(*):disabled {
						cursor: not-allowed;
						opacity: 0.25;
					}

					/* @note: We deviate from the antigravity site here, because CSS carousel does not offer a wrapper around both scroll buttons … */
					&::scroll-button(left) {
						translate: -50% 0;
						content: 'arrow_back' / 'Previous';
					}
					&::scroll-button(right) {
						translate: 50% 0;
						content: 'arrow_forward' / 'Next';
					}
					
					@media (width < 930px) {
						&::scroll-button(left),
						&::scroll-button(right) {
							position-area: center center;
							align-self: end;
						}
					}
					
					@media (width >= 930px) {
						&::scroll-button(left),
						&::scroll-button(right) {
							position-area: center center;
							align-self: start;
							justify-self: start;
							/* Magic numbers … these rely on the flex-basis of the slides + the aspect-ratio of the photos. Nasty, but it works. */
							left: calc(60vi - 1em);
							top: calc((60vi + 1em) * 9 / 16);
						}
					}
				}
			}
		}
	}
	
	
	/* ─────────────────────────────────────────────────────────────
	   ANIMATIONS / SCROLL EFFECTS
	───────────────────────────────────────────────────────────── */
	@layer animations {
		@layer revealing-welcome-items {
			#welcome {
				svg, .cta {
					transition: translate 0.5s ease, opacity 0.5s ease;
					@starting-style {
						translate: 0 50% 0;
						opacity: 0;
					}
				}
			}
		}
				
		
		@layer scroll-driven-animations {
			/* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */
			@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
				@keyframes scale-up {
					from {
						scale: 0.85;
					}
				}
				#beforeyougo .card {
					animation: scale-up linear both;
					animation-timeline: view();
					animation-range: entry 50% entry 100%;
				}
			}
		}
	}
}


/* ─────────────────────────────────────────────────────────────
   FEATURED PROJECTS (#projects)
───────────────────────────────────────────────────────────── */
@layer projects {

  #projects {
    display: grid;
    grid-template-columns: subgrid;
    padding-block: 6rem;
    align-content: start;
  }

  #projects > * {
    grid-column: main;
  }

  #projects .section-header {
    max-width: 760px;
    margin-bottom: 3rem;
  }

  #projects .section-header h2 span {
    color: var(--theme-surface-on-surface-variant);
  }

  #projects .intro {
    max-width: 62ch;
    font-size: 1.05em;
    line-height: 1.6;
  }

  .featured-project {
    display: grid;
    gap: 2rem;
    padding: 1.25rem;
    border-radius: 2rem;
    border: 1px solid var(--theme-outline-variant);
    background: var(--theme-surface-surface-container);
    overflow: hidden;
    margin-bottom: 2rem;
  }

  .featured-project-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .project-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-surface-on-surface-variant);
  }

  .featured-project h3 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 6vw, 4.25rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    font-weight: 450;
    color: var(--theme-surface-on-surface);
  }

  .featured-project-content > p:not(.project-eyebrow) {
    max-width: 58ch;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
  }

	.featured-project-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	display: block;
	border-radius: 1.2rem;

	}

  .project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1.5rem;
  }

  .project-tech span {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--theme-surface-surface-container-higher);
    border: 1px solid var(--theme-outline-variant);
    color: var(--theme-surface-on-surface-variant);
  }

  .project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }

  .project-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--theme-primary-primary);
    color: var(--theme-primary-on-primary);
    transition:
      transform .2s var(--ease-out-cubic),
      background .2s ease;
  }

  .project-link:hover {
    transform: translateY(-2px);
    background: var(--theme-button-states-primary-hovered);
  }

  .project-link-secondary {
    background: var(--theme-secondary-button);
    color: var(--theme-surface-on-surface);
    border: 1px solid var(--theme-outline-variant);
  }

  .project-link-secondary:hover {
    background: var(--theme-button-secondary-hover);
  }


/* ─────────────────────────────────────────────────────────────
   ENGINEERING QUALITY
───────────────────────────────────────────────────────────── */

#engineering-quality{
    display:grid;
    grid-template-columns:subgrid;

    padding-block:5rem 3rem;

    border-top:1px solid var(--theme-outline-variant);
}

#engineering-quality>*{
    grid-column:main;
}

.quality-header{

    max-width:760px;

    margin-inline:auto;
    margin-bottom:4rem;

    text-align:center;

}

.quality-header h2{

    width:auto;
    max-width:none;

    margin-inline:auto;

}

.quality-header h2 span{

    color:var(--theme-surface-on-surface-variant);

}

.quality-header .intro{

    max-width:62ch;

    margin:1.5rem auto 0;

    line-height:1.75;

}

/* ───────────────────────── */

.quality-dashboard{

    width:min(100%,1100px);

    margin-inline:auto;

}

/* ───────────────────────── */

.quality-dashboard-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:1rem;

    padding-inline:.15rem;

    font-size:.82rem;
    font-weight:500;

    letter-spacing:.16em;
    text-transform:uppercase;

    color:var(--theme-surface-on-surface-variant);

}

/* ───────────────────────── */

.quality-dashboard-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    border:1px solid var(--theme-outline-variant);

    border-radius:2rem;

    overflow:hidden;

}

/* ───────────────────────── */

.quality-score{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    min-height:300px;

    padding:2rem;

    text-align:center;

}

.quality-score:not(:last-child){

    border-right:1px solid var(--theme-outline-variant);

}

/* ───────────────────────── */

.quality-score-number{

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:1rem;

}

.quality-score-value {
  transform: translateX(-0.04em);
}

.quality-score-value {
  display: block;

  width: 3ch;

  text-align: center;

  font-size: clamp(4.5rem, 8vw, 6.8rem);
  font-weight: 330;
  line-height: .82;

  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;

  color: var(--theme-surface-on-surface);
}

/* ───────────────────────── */

.quality-score h3{

    margin:0 0 .8rem;

    font-size:1.05rem;
    font-weight:520;

    letter-spacing:-.03em;

}

.quality-score p{

    max-width:22ch;

    margin:0;

    line-height:1.65;

    color:var(--theme-surface-on-surface-variant);

}

/* ───────────────────────── */

.quality-dashboard-footer{

    padding-top:1.4rem;

    text-align:center;

    font-size:.95rem;

    color:var(--theme-surface-on-surface-variant);

}

/* ───────────────────────── */

@media(width<1000px){

    .quality-dashboard-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .quality-score{

        min-height:250px;

    }

    .quality-score:nth-child(1),
    .quality-score:nth-child(2){

        border-bottom:1px solid var(--theme-outline-variant);

    }

    .quality-score:nth-child(2){

        border-right:none;

    }

}

@media(width<560px){

    #engineering-quality{

        padding-block:4rem 2rem;

    }

    .quality-header{

        text-align:left;

        margin-inline:0;

    }

    .quality-header h2{

        margin-inline:0;

    }

    .quality-header .intro{

        margin-inline:0;

    }

    .quality-dashboard-header{

        flex-direction:column;
        align-items:flex-start;

        gap:.35rem;

    }

    .quality-dashboard-grid{

        grid-template-columns:1fr;

        border-radius:1.5rem;

    }

    .quality-score{

        min-height:220px;

        border-right:none!important;

        border-bottom:1px solid var(--theme-outline-variant);

    }

    .quality-score:last-child{

        border-bottom:none;

    }

    .quality-score-value{

        font-size:5rem;

    }

}


/* ═══════════════════════════════════════════════════════════════
   PROJECTS DIVIDER
═══════════════════════════════════════════════════════════════ */

  .projects-divider{

      display:flex;
      align-items:center;
      gap:1.5rem;

      margin:4rem 0 1rem;

      color:var(--theme-surface-on-surface-variant);

      font-size:.9rem;
      letter-spacing:.08em;
      text-transform:uppercase;

  }

  .projects-divider::before,
  .projects-divider::after{

      content:"";

      flex:1;

      height:1px;

      background:var(--theme-outline-variant);

  }

  @media (width >= 930px) {
    .featured-project {
      grid-template-columns: 0.9fr 1.1fr;
      min-height: 560px;
      padding: 1.5rem;
    }

    .featured-project-content {
      padding: 2.5rem;
    }

    .featured-project-visual,
    .project-image-placeholder {
      min-height: 100%;
    }
  }

  @media (width >= 1200px) {
    .projects-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (width < 640px) {
    #projects {
      padding-block: 4rem;
    }

    .featured-project {
      border-radius: 1.5rem;
      padding: 1rem;
    }

    .featured-project-content {
      padding: 0.5rem;
    }

    .featured-project h3 {
      font-size: 2.4rem;
    }

    .featured-project-visual,
    .project-image-placeholder {
      min-height: 240px;
    }

    .project-card {
      min-height: auto;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM OVERRIDES
═══════════════════════════════════════════════════════════════ */
.brand {
    margin: 0;
    font-size: 2.3rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #202124;
    font-family:
        "Google Sans",
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE HEADER FIX
═══════════════════════════════════════════════════════════════ */

@media (width < 930px) {
  .header-wrapper {
    top: 0.4rem;
    background: transparent;
    z-index: 1000;
    pointer-events: none;
  }

  header {
    width: 100%;
    max-width: 100vw;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    gap: 1rem;
    pointer-events: none;
  }

  .brand,
  .menu-button,
  nav {
    pointer-events: auto;
  }

  .brand {
    font-size: clamp(1.45rem, 7vw, 2rem);
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL FIX
═══════════════════════════════════════════════════════════════ */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (width < 930px) {
  body {
    grid-template-columns:
      [fullbleed-start] 1rem
      [main-start] 1fr
      [main-end] 1rem
      [fullbleed-end];
  }

  #developers .carousel {
    padding-inline: 1rem;
    max-width: 100vw;
    box-sizing: border-box;
  }

  header {
    max-width: 100vw;
  }
}


/* ─────────────────────────────────────────────────────────────
   CONTACT (#contact)
───────────────────────────────────────────────────────────── */
@layer contact {

  #contact {
    display: grid;
    grid-template-columns: subgrid;
    padding-block: 7rem;
    border-top: 1px solid var(--theme-outline-variant);
  }

  #contact > * {
    grid-column: main;
  }
  .contact-card {
    min-height: 520px;
    padding: clamp(2rem, 6vw, 5rem);
    border-radius: 2.5rem;

    background: #000;

    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .contact-card .section-label {
    color: rgba(255,255,255,.65);
  }

  .contact-card h2 {
    width: auto;
    max-width: none;
    margin: 1rem 0;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: .9;
    letter-spacing: -.07em;
    color: var(--theme-primary-on-primary);
  }

  .contact-card h2 span {
    color: rgba(255,255,255,.55);
  }

  .contact-intro {
    max-width: 58ch;
    margin: 1.5rem auto 0;
    line-height: 1.7;
    color: rgba(255,255,255,.72);
  }

  .contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 2.5rem;
  }

  .contact-button {
    min-height: 3rem;
    padding: 0 1.2rem;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    gap: .45rem;

    background: #fff;
    color: #111;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;

    transition:
      transform .2s var(--ease-out-cubic),
      background .2s ease;
  }

  .contact-button:hover {
    transform: translateY(-2px);
    background: #eff0f3;
  }

  .contact-button.secondary {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
  }

  .contact-button.secondary:hover {
    background: rgba(255,255,255,.16);
  }

  .contact-button .material-symbols-outlined {
    font-size: 1.2rem;
  }

  @media (width < 768px) {
    #contact {
      padding-block: 5rem;
    }

    .contact-card {
      border-radius: 2rem;
      min-height: 460px;
    }

    .contact-actions {
      flex-direction: column;
      width: 100%;
    }

    .contact-button {
      justify-content: center;
      width: 100%;
    }
  }
}

.contact-card{
    position:relative;
    overflow:hidden;
}

.contact-content{
    position:relative;
    z-index:2;
}

#contact-wave-canvas{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    z-index:0;

    pointer-events:none;

    opacity:.65;
}

/* ─────────────────────────────────────────────
   FOOTER
──────────────────────────────────────────── */
#footer {
  position: relative;
  display: grid;
  grid-template-columns: subgrid;

  min-height: 100svh;
  min-height: 100vh;

  overflow: hidden;
  background: #050505;
}

#footer > :not(#footer-wave-canvas) {
  grid-column: main;
}

#footer-wave-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .55;
  pointer-events: none;
}

.footer-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 7rem 0;
}

.footer-label {
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
}

.footer-content h2 {
  width: auto;
  max-width: none;
  margin: 1rem 0;
  color: #fff;
  font-size: clamp(5rem, 16vw, 13rem);
  line-height: .82;
  letter-spacing: -.08em;
}

.footer-content h2 span {
  color: rgba(255,255,255,.35);
}

.footer-text {
  max-width: 55ch;
  line-height: 1.8;
  color: rgba(255,255,255,.7);
}

.footer-links {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a,
.footer-social a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: opacity .25s ease;
}

.footer-links a:hover,
.footer-social a:hover {
  opacity: 1;
  color: #fff;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
}

/* ─────────────────────────────────────────────
   FOOTER TECHNOLOGY STACK
──────────────────────────────────────────── */

.footer-tech {
  width: 100%;
  max-width: 760px;

  margin-top: 3rem;
  padding-top: 2.5rem;

  border-top: 1px solid rgba(255,255,255,.08);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.footer-tech-label {
  margin: 0;

  font-size: .78rem;
  font-weight: 500;

  text-transform: uppercase;
  letter-spacing: .18em;

  color: rgba(255,255,255,.45);
}

.footer-tech-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: .65rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-tech-list li {
  padding: .55rem .9rem;

  border-radius: 999px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);

  color: rgba(255,255,255,.78);

  font-size: .82rem;
  font-weight: 500;

  transition:
    transform .25s var(--ease-out-cubic),
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.footer-bottom {
  margin-top: 5rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  color: rgba(255,255,255,.35);
  font-size: .85rem;
}

@media (width < 768px) {
  .footer-content h2 {
    font-size: 5rem;
  }

  .footer-tech {
    margin-top: 2.5rem;
    padding-top: 2rem;
  }

  .footer-tech-list {
    gap: .5rem;
  }
  .footer-links,
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ─────────────────────────────────────────────
   BACK TO TOP BUTTON
──────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 4vw, 3rem);
  z-index: 9999;

  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;

  display: grid;
  place-items: center;

  color: #000000;
  background: rgb(255, 255, 255);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.92);

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(140, 236, 255, .65);
}

.back-to-top:active {
  transform: translateY(-1px) scale(.98);
}

.back-to-top .material-symbols-outlined {
  position: relative;
  z-index: 2;
  font-size: 1.45rem;
}

.back-to-top-progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.back-to-top-progress circle {
  fill: none;
  stroke: black;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
  opacity: .95;
}

@media (width < 768px) {
  .back-to-top {
    width: 2.35rem;
    height: 2.8rem;
  }
}


/* ═══════════════════ TECHNOLOGY STACK (#skills) ═══════════════════ */

#skills {
    display: grid;
    grid-template-columns: subgrid;
    padding-block: 6rem;
    border-top: 1px solid var(--theme-outline-variant);
}

#skills > * {
    grid-column: main;
}

#skills .section-header {
    max-width: 760px;
    margin-bottom: 4rem;
}

#skills .section-header h2 span {
    color: var(--theme-surface-on-surface-variant);
}

#skills .intro {
    max-width: 60ch;
    line-height: 1.7;
}

/* ───────────────────────── */

.stack-rows{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.stack-row{

    display:grid;
    grid-template-columns:
        70px
        320px
        1fr;

    gap:2.5rem;

    align-items:center;

    padding:2rem;

    border-radius:2rem;

    border:1px solid var(--theme-outline-variant);

    background:var(--theme-surface-surface-container);

    transition:
        transform .3s var(--ease-out-cubic),
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.stack-row:hover{

    transform:translateY(-3px);

    border-color:var(--theme-outline);

    background:var(--theme-surface-surface-container-high);

    box-shadow:0 24px 70px rgba(0,0,0,.08);

}

/* ───────────────────────── */

.stack-number{

    font-size:3rem;
    font-weight:350;
    letter-spacing:-.06em;

    color: rgba(0, 0, 0, .45);

    user-select:none;

}

/* ───────────────────────── */

.stack-info h3{

    margin:0 0 .7rem;

    font-size:1.6rem;
    font-weight:500;
    letter-spacing:-.04em;

    color:var(--theme-surface-on-surface);

}

.stack-info p{

    margin:0;

    line-height:1.7;

    color:var(--theme-surface-on-surface-variant);

}

/* ───────────────────────── */

.stack-list{

    display:flex;
    flex-wrap:wrap;

    gap:.65rem;

    margin:0;
    padding:0;

    list-style:none;

}

.stack-list li{

    padding:.55rem .9rem;

    border-radius:999px;

    border:1px solid var(--theme-outline-variant);

    background:var(--theme-surface-surface-container-higher);

    color:var(--theme-surface-on-surface-variant);

    font-size:.82rem;
    font-weight:500;

    transition:
        transform .25s var(--ease-out-cubic),
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}

.stack-list li:hover{

    transform:translateY(-2px);

    background:var(--theme-primary-primary);

    color:var(--theme-primary-on-primary);

    border-color:var(--theme-primary-primary);

}

/* ───────────────────────── */

@media (width < 980px){

    .stack-row{

        grid-template-columns:1fr;

        gap:1.5rem;

        padding:1.5rem;

    }

    .stack-number{

        font-size:2.2rem;

    }

}

@media (width < 640px){

    #skills{

        padding-block:5rem;

    }

    #skills .section-header{

        margin-bottom:2rem;

    }

    .stack-row{

        padding:1.3rem;

        border-radius:1.5rem;

    }

    .stack-info h3{

        font-size:1.35rem;

    }

}

/* ═══════════════════ DOOR PRELOADER ═══════════════════ */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  pointer-events: none;
  visibility: visible;
}

.loader-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;

  background: #fff;

  will-change: transform;

  transition:
    transform 1.35s cubic-bezier(.22, 1, .36, 1);
}

.loader-door-left {
  left: 0;
  transform: translateX(0);
  border-right: 1px solid rgba(0,0,0,.08);
}

.loader-door-right {
  right: 0;
  transform: translateX(0);
  border-left: 1px solid rgba(0,0,0,.08);
}

/* Opened */
body.is-loaded:not(.is-leaving) .loader-door-left {
  transform: translateX(-100%);
}

body.is-loaded:not(.is-leaving) .loader-door-right {
  transform: translateX(100%);
}

body.is-loaded:not(.is-leaving) .page-loader {
  visibility: hidden;
  transition: visibility 0s linear 1.35s;
}

/* Closing */
body.is-leaving .page-loader {
  visibility: visible;
  transition: none;
}

body.is-leaving .loader-door-left {
  transform: translateX(0) !important;
}

body.is-leaving .loader-door-right {
  transform: translateX(0) !important;
}




/* ─────────────────────────────────────────────
   VERTICAL SCROLL INDICATOR
──────────────────────────────────────────── */

.scroll-indicator {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  top: 50%;
  z-index: 9998;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  transform: translateY(-50%);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .3s ease,
    visibility .3s ease,
    color .3s ease;
}

.scroll-indicator.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ───────── Number ───────── */

.scroll-indicator-number {
  display: flex;
  flex-direction: column;
  align-items: center;

  font-size: 1rem;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;

  color: #000;
  opacity: .45;

  transition:
    color .3s ease,
    opacity .3s ease;
}

.scroll-indicator-number span {
  display: block;
  min-height: .8em;
}

/* ───────── Line ───────── */

.scroll-indicator-line {
  width: 1px;
  height: 150px;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .9),
    transparent
  );

  opacity: .22;

  transition:
    background .3s ease,
    opacity .3s ease;
}

/* ───────── Dark Sections ───────── */

.scroll-indicator.is-dark .scroll-indicator-number {
  color: #fff;
  opacity: .55;
}

.scroll-indicator.is-dark .scroll-indicator-line {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.95),
    transparent
  );

  opacity: .35;
}

/* ───────── Mobile ───────── */

@media (width < 929px) {
  .scroll-indicator {
    display: none;
  }
}

#welcome-wave-canvas,
#contact-wave-canvas,
#footer-wave-canvas,
#ecocube-next-wave,
#weather-next-wave,
#c32-next-wave,
#nexoraai-next-wave,
#smeco-next-wave {
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

@media (width < 768px) {
  #welcome {
    min-height: 100svh;
  }

  #welcome-wave-canvas {
    height: 100svh;
  }
}