/* base.css — shared design system, bundled from modular partials
   to avoid a render-blocking @import chain. Edit sections in place. */

/* ============================================================ reset ============================================================ */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-family: var(--font-system);
}

/* Usually, I want to set my own type on these. */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
}

ul,
ul > li,
ol,
ol > li {
  margin: 0;
  padding: 0;
}

:is(ul, ol):not([role="list"]) {
  list-style: revert;
  padding-inline-start: var(--space-m);
}

:is(ul, ol):not([role="list"]) > li + li {
  margin-block-start: var(--space-s);
  margin-block-start: 0.5lh;
}

/* Set core body defaults */
body {
  font-size: var(--step-0);
  min-height: 100vh;
  margin: 0;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
  margin: 0;
}

/* picture is a transparent wrapper for webp/fallback sources: keep it out of
   layout so the inner img inherits the surrounding flex/grid styling directly */
picture {
  display: contents;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* ============================================================ colors ============================================================ */
:root {
  /**
     I have three color scales: neutral - for most UI elements, accent - to show interactivity and draw attention, highlight - to be used very sparingly to pick out a particular item in a page.
  
     Each scale has 12 hues, from 1 -- lightest, to 12 -- darkest. The names are deliberately neutral, but they are often used as follows:
     1,2 backgrounds -- page, cards, etc
     1 - a bright "white" surface" : for cards etc
     2 - a subdued surface : for the background or secondary cards
     3, 4, 5 interactive surfaces (buttons etc)
     3 - subdued
     4 - standard
     5 - active
     6, 7, 8 borders, dividers
     6 - subdued
     7 - standard
     8 - active
     9, 10 solid surfaces, with white text
     9 - a solid button for example
     10 - an solid active item (hovered button, active button, ...)
     11, 12 - text
     11 - subdued or tinted text
     12 - "black" standard text
     */
  /** Neutral colors -- for most UI components. */
  --neutral-1: #fcfcfd;
  --neutral-2: #f9f9fb;
  --neutral-3: #f0f0f3;
  --neutral-4: #e8e8ec;
  --neutral-5: #e0e1e6;
  --neutral-6: #d9d9e0;
  --neutral-7: #cdced6;
  --neutral-8: #b9bbc6;
  --neutral-9: #8b8d98;
  --neutral-10: #80838d;
  --neutral-11: #60646c;
  --neutral-12: #1c2024;

  --neutral-dark-1: #111113;
  --neutral-dark-2: #18191b;
  --neutral-dark-3: #212225;
  --neutral-dark-4: #272a2d;
  --neutral-dark-5: #2e3135;
  --neutral-dark-6: #363a3f;
  --neutral-dark-7: #43484e;
  --neutral-dark-8: #5a6169;
  --neutral-dark-9: #696e77;
  --neutral-dark-10: #777b84;
  --neutral-dark-11: #b0b4ba;
  --neutral-dark-12: #edeef0;

  /** Accent colors. Use these sparingly to draw attention to something. */
  /** Accent background colous.*/
  --accent-1: #fafefd;
  --accent-2: #f3fbf9;
  --accent-3: #e0f8f3;
  --accent-4: #ccf3ea;
  --accent-5: #b8eae0;
  --accent-6: #a1ded2;
  --accent-7: #83cdc1;
  --accent-8: #53b9ab;
  --accent-9: #12a594;
  --accent-10: #0d9b8a;
  --accent-11: #008573;
  --accent-12: #0d3d38;

  --accent-dark-1: #0d1514;
  --accent-dark-2: #111c1b;
  --accent-dark-3: #0d2d2a;
  --accent-dark-4: #023b37;
  --accent-dark-5: #084843;
  --accent-dark-6: #145750;
  --accent-dark-7: #1c6961;
  --accent-dark-8: #207e73;
  --accent-dark-9: #12a594;
  --accent-dark-10: #0eb39e;
  --accent-dark-11: #0bd8b6;
  --accent-dark-12: #adf0dd;

  /** Highlight colors. Use these to highlight attention to something special. Should usually appear at most once on a page. */
  /** highlight background colous.*/
  --highlight-1: #fffcfd;
  --highlight-2: #fff7f8;
  --highlight-3: #feeaed;
  --highlight-4: #ffdce1;
  --highlight-5: #ffced6;
  --highlight-6: #f8bfc8;
  --highlight-7: #efacb8;
  --highlight-8: #e592a3;
  --highlight-9: #e54666;
  --highlight-10: #dc3b5d;
  --highlight-11: #ca244d;
  --highlight-12: #64172b;

  --highlight-dark-1: #191113;
  --highlight-dark-2: #1e1517;
  --highlight-dark-3: #3a141e;
  --highlight-dark-4: #4e1325;
  --highlight-dark-5: #5e1a2e;
  --highlight-dark-6: #6f2539;
  --highlight-dark-7: #883447;
  --highlight-dark-8: #b3445a;
  --highlight-dark-9: #e54666;
  --highlight-dark-10: #ec5a72;
  --highlight-dark-11: #ff949d;
  --highlight-dark-12: #fed2e1;

  /**
     Semantic "ink" surface tokens for the dark editorial sections
     (nav, hero, CTA panels, footer). Built on the teal-tinted dark scales.
   */
  --ink: var(--accent-dark-1); /* deepest surface: hero, footer */
  --ink-2: var(--accent-dark-2); /* raised surface on ink */
  --ink-3: var(--accent-dark-3); /* interactive surface on ink */
  --ink-border: rgba(173, 240, 221, 0.14); /* hairlines on ink */
  --ink-text: #f2f5f4; /* headings on ink */
  --ink-text-dim: #9eb1ac; /* body copy on ink */

  /* The single luminous signal color used on dark surfaces */
  --signal: var(--accent-dark-11); /* #0bd8b6 */
  --signal-soft: rgba(11, 216, 182, 0.16);
}

/* ============================================================ type ============================================================ */
/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

@font-face {
  font-family: "Satoshi";
  src: url("/assets/Satoshi-Variable.woff2") format("woff2"),
    url("/assets/Satoshi-Variable.woff") format("woff"),
    url("/assets/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/Satoshi-VariableItalic.woff2") format("woff2"),
    url("/assets/Satoshi-VariableItalic.woff") format("woff"),
    url("/assets/Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}

:root {
  --font-family: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono",
    "Droid Sans Mono", "Consolas", "Courier New", monospace;
}

body {
  font-family: var(--font-family);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--neutral-12);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family);
  line-height: 1.2;
  font-weight: 600;
  margin-top: 0;
  color: var(--neutral-12);
}

h1 {
  font-size: var(--step-5);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-s);
  margin-bottom: 0.25lh;
}

h2 {
  font-size: var(--step-3);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-xs);
  margin-bottom: 0.25lh;
}

h3 {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2xs);
  margin-bottom: 0.25lh;
}

h4 {
  font-size: var(--step-0);
  margin-bottom: var(--space-3xs);
  margin-bottom: 0.5lh;
}

h5 {
  font-size: var(--step-0);
  font-weight: normal;
  font-style: italic;
  margin-bottom: var(--space-3xs);
  margin-bottom: 0.5lh;
}

p {
  margin-block-end: 0;
  margin-block-end: var(--space-s);
  margin-block-end: 0.5lh;
}

:is(h3, h4, h5) {
  margin-block-start: var(--space-m);
  margin-block-start: 1.5lh;
}

:is(h2, h3, h4) + :is(h3, h4, h5) {
  margin-block-start: var(--space-s);
  margin-block-start: 1lh;
}

ol,
ul {
  margin-bottom: var(--space-s);
  margin-bottom: 0.5lh;
}

a {
  color: var(--accent-11);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-10);
}

strong,
b {
  font-weight: 600;
}

code,
kbd {
  font-family: var(--font-mono);
}

kbd {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding-inline: var(--space-3xs);
}

kbd + kbd {
  margin-inline-start: var(--space-3xs);
}

.text-center {
  text-align: center;
}

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

.text-sm {
  font-size: var(--step--1);
}

.text-xs {
  font-size: var(--step--2);
}

.text-lg {
  font-size: var(--step-1);
}

.text-xl {
  font-size: var(--step-2);
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* ============================================================ space ============================================================ */
/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
}

.col {
  --row-gap: 0;
  display: flex;
  flex-direction: column;
  row-gap: var(--row-gap, 0);
  align-items: flex-start;
}

.col__gap_xs {
  --row-gap: var(--space-xs);
}

.col__gap_s {
  --row-gap: var(--space-s);
}

.col__gap_m {
  --row-gap: var(--space-m);
}

.col__gap_l {
  --row-gap: var(--space-l);
}

.col__gap_xl {
  --row-gap: var(--space-l);
}

.col__centred {
  align-items: center;
}

.col__stretch {
  align-items: stretch;
}

.row {
  --col-gap: 0;
  --row-gap: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  row-gap: var(--row-gap, 0);
  column-gap: var(--col-gap, 0);
}

.row__wrap {
  flex-wrap: wrap;
}

.row__gap__l {
  --col-gap: var(--space-l);
}

.row__gap_block__l {
  --row-gap: var(--space-l);
}

.mis__auto,
.mi__auto {
  margin-inline-start: auto;
}

.mie__auto,
.mi__auto {
  margin-inline-end: auto;
}

.mis__s,
.mi__s,
.m__s {
  margin-inline-start: var(--space-s);
}

.mie__s,
.mi__s,
.m__s {
  margin-inline-end: var(--space-s);
}

.mbs__3xs,
.mb__3xs,
.m__3xs {
  margin-block-start: var(--space-3xs);
}

.mbs__2xs,
.mb__2xs,
.m__2xs {
  margin-block-start: var(--space-2xs);
}

.mbs__xs,
.mb__xs,
.m__xs {
  margin-block-start: var(--space-xs);
}

.mbs__s,
.mb__s,
.m__s {
  margin-block-start: var(--space-s);
}

.mbs__m,
.mb__m,
.m__m {
  margin-block-start: var(--space-m);
}

.mbs__l,
.mb__l,
.m__l {
  margin-block-start: var(--space-l);
}

.mbs__xl,
.mb__xl,
.m__xl {
  margin-block-start: var(--space-xl);
}

.mbs__2xl,
.mb__2xl,
.m__2xl {
  margin-block-start: var(--space-2xl);
}

.mbe__2xs,
.mb__2xs,
.m__2xs {
  margin-block-end: var(--space-2xs);
}

.mbe__xs,
.mb__xs,
.m__xs {
  margin-block-end: var(--space-xs);
}

.mbe__s,
.mb__s,
.m__s {
  margin-block-end: var(--space-s);
}

.mbe__m,
.mb__m,
.m__m {
  margin-block-end: var(--space-m);
}

.mbe__l,
.mb__l,
.m__l {
  margin-block-end: var(--space-l);
}

.mbe__xl,
.mb__xl,
.m__xl {
  margin-block-end: var(--space-xl);
}

.mbe__2xl,
.mb__2xl,
.m__2xl {
  margin-block-end: var(--space-2xl);
}

.content {
  width: 100%;
  max-width: 64ch;
}

.content__wide {
  width: 100%;
  max-width: 80ch;
}

.pis__s,
.pi__s,
.p__s {
  padding-inline-start: var(--space-s);
}

.pie__s,
.pi__s,
.p__s {
  padding-inline-end: var(--space-s);
}

.pis__m,
.pi__m,
.p__m {
  padding-inline-start: var(--space-m);
}

.pie__m,
.pi__m,
.p__m {
  padding-inline-end: var(--space-m);
}

/* ============================================================ borders ============================================================ */
:root {
  --border-radius-sm: var(--space-2xs, 6px);
  --border-radius-md: var(--space-xs, 12px);
  --border-radius-lg: var(--space-s, 20px);
  --border-radius-xl: 1.75rem;
  --border-radius-pill: 999px;

  --border-thin: 1px;
  --border-normal: 2px;
  --border-thick: 3px;
}

/* ============================================================ shadows ============================================================ */
:root {
  --shadow-color: 0deg 0% 59%;
  --box-shadow-sm: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --box-shadow-md: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  --box-shadow-lg: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

/* ============================================================ transitions ============================================================ */
:root {
  --transition-fast: 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-medium: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============================================================ actions ============================================================ */
/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75rem 1.75rem;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast), background-color var(--transition-fast),
    box-shadow var(--transition-fast);
  cursor: pointer;
  font-family: var(--font-family);
}

.button:focus-visible {
  outline: 2px solid var(--accent-9);
  outline-offset: 3px;
}

/* Primary: bright signal surface with deep-ink text. Pops on light and dark. */
.button-primary,
.button__solid {
  background-color: var(--accent-9);
  color: var(--accent-dark-1);
  border: none;
  box-shadow: 0 1px 2px rgba(4, 17, 15, 0.2);
}

.button-primary:hover,
.button__solid:hover {
  background-color: var(--accent-dark-10);
  color: var(--accent-dark-1);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(11, 216, 182, 0.35),
    0 10px 28px -10px rgba(18, 165, 148, 0.65);
}

.button-outline {
  --text-color: var(--accent-11);
  --outline-color: var(--accent-8);
  --highlight-border: var(--accent-9);
  --highlight-background: var(--accent-2);
  --highlight-text: var(--accent-11);
  background-color: transparent;
  color: var(--text-color);
  border: var(--border-thin) solid var(--outline-color);
}

.button-outline:hover {
  color: var(--highlight-text);
  background-color: var(--highlight-background);
  border-color: var(--highlight-border);
  transform: translateY(-1px);
}

/* Ghost button for dark ink surfaces */
.button-ghost {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--ink-text);
  border: var(--border-thin) solid var(--ink-border);
}

.button-ghost:hover {
  background-color: rgba(255, 255, 255, 0.09);
  color: white;
  border-color: rgba(173, 240, 221, 0.35);
  transform: translateY(-1px);
}

.button-sm,
.button__small {
  padding: 0.5rem 1.25rem;
  font-size: var(--step--1);
}

.button-disabled,
.button__disabled,
.button:disabled {
  background-color: var(--neutral-5);
  color: var(--neutral-9);
  cursor: not-allowed;
  border: none;
  transform: none !important;
  box-shadow: none !important;
}

.button__cta {
  font-size: var(--step-1);
  padding: 0.8rem 2.25rem;
}

/* ============================================================ nav ============================================================ */
.topnav {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--ink-border);
}

/*
  The blur lives on a pseudo-element, NOT on .topnav itself.
  backdrop-filter creates a containing block for position:fixed
  descendants, putting it on .topnav traps the full-screen mobile
  menu inside the header bar. The pseudo-element has no descendants,
  so the menu positions against the viewport as intended.
*/
.topnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(13, 21, 20, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo a {
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink-text);
  transition: color var(--transition-fast);
}

/* The signal dot, full stop after the wordmark */
.logo a::after {
  content: "";
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background-color: var(--signal);
  margin-left: 0.12em;
  vertical-align: 0.04em;
}

.logo a:hover {
  color: white;
}

.logo img {
  display: inline-block; /* the global reset makes img block-level */
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.45em;
  margin-top: -0.15em; /* optical centering against the wordmark */
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.nav-links--button {
  text-decoration: none;
  color: var(--ink-text-dim);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  transition: color var(--transition-fast);
}

.nav-links--button:hover {
  color: white;
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 102;
}

.hamburger-icon {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background-color: var(--ink-text);
  transition: all 0.3s ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--ink-text);
  transition: all 0.3s ease-in-out;
}

.hamburger-icon::before {
  transform: translateY(-8px);
}

.hamburger-icon::after {
  transform: translateY(8px);
}

.mobile-menu-toggle.active .hamburger-icon {
  background-color: transparent;
}

.mobile-menu-toggle.active .hamburger-icon::before {
  transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-icon::after {
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }

  /* Full-screen ink overlay menu */
  .nav-links {
    display: flex;
    position: fixed;
    inset: 0;
    height: 100dvh;
    background-color: rgba(13, 21, 20, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-m);
    z-index: 101;
    padding: var(--space-2xl) var(--space-l);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .nav-links.active {
    visibility: visible;
    opacity: 1;
  }

  /* Prevent background scroll while the full-screen menu is open */
  body.menu-open {
    overflow: hidden;
  }

  .nav-links .nav-links--button {
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-text);
  }

  .nav-links .nav-links--button:hover {
    color: var(--signal);
  }

  .nav-links .button {
    margin-top: var(--space-s);
    font-size: var(--step-1);
    padding: 0.8rem 2.5rem;
  }

  /* Staggered rise of menu items */
  .nav-links li {
    opacity: 0;
    transform: translateY(18px);
  }

  .nav-links.active li {
    animation: menu-item-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .nav-links.active li:nth-child(1) {
    animation-delay: 0.06s;
  }
  .nav-links.active li:nth-child(2) {
    animation-delay: 0.12s;
  }
  .nav-links.active li:nth-child(3) {
    animation-delay: 0.18s;
  }
  .nav-links.active li:nth-child(4) {
    animation-delay: 0.24s;
  }
  .nav-links.active li:nth-child(5) {
    animation-delay: 0.3s;
  }
  .nav-links.active li:nth-child(6) {
    animation-delay: 0.36s;
  }
}

@keyframes menu-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================ footer ============================================================ */
footer {
  background-color: var(--ink);
  color: var(--ink-text-dim);
  padding: var(--space-2xl) 0 var(--space-l);
  border-top: 1px solid var(--ink-border);
  position: relative;
  overflow: hidden;
}

/* Faint signal glow rising from the bottom edge */
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    50rem 18rem at 50% 115%,
    rgba(18, 165, 148, 0.14),
    transparent 65%
  );
}

footer .container {
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  row-gap: var(--space-xl);
  column-gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.footer-logo {
  font-size: var(--step-3);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink-text);
}

.footer-logo::after {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background-color: var(--signal);
  margin-left: 0.1em;
}

.footer-brand p {
  color: var(--ink-text-dim);
  font-size: var(--step--1);
  max-width: 28ch;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.footer-links h3 {
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  margin: 0.35rem 0 0;
  color: var(--ink-text-dim);
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--step--1);
}

.footer-links ul li a {
  color: var(--ink-text);
  opacity: 0.82;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.footer-links ul li a:hover {
  color: var(--signal);
  opacity: 1;
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-l);
  border-top: 1px solid var(--ink-border);
  color: var(--ink-text-dim);
  font-size: var(--step--2);
}

.legal-notice {
  font-size: var(--step--1);
  opacity: 0.8;
  margin-block: var(--space-2xl);
  text-align: center;
}

.legal-notice a {
  font: inherit;
  text-decoration: none;
  color: var(--neutral-11);
  transition: color var(--transition-fast);
}

.legal-notice a:hover {
  color: var(--accent-11);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}