*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Instrument Sans, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: JetBrains Mono, ui-monospace, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.visible {
  visibility: visible;
}
.fixed {
  position: fixed;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.flex-shrink {
  flex-shrink: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.border {
  border-width: 1px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ── CSS Custom Properties ──────────────────────────────────────────────── */

:root {
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Primitive ramps ───────────────────────────────────────────────────── */

  /* Neutral — 0 (white) through 975 (near-black) */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFD;
  --n-50:  #F3F5F9;
  --n-100: #EBEEF4;
  --n-150: #E2E6EF;
  --n-200: #CDD1DB;
  --n-300: #ABB2C0;
  --n-400: #8690A2;
  --n-500: #656C7C;
  --n-600: #4F5565;
  --n-700: #3D4350;
  --n-750: #30353F;
  --n-800: #272B34;
  --n-850: #1F222A;
  --n-900: #181A1E;
  --n-950: rgba(17, 18, 20, 1);
  --n-975: #0A0B0D;

  /* Amber */
  --amber-50:  #FEF3C7;
  --amber-100: #FDE68A;
  --amber-200: #FCD34D;
  --amber-300: #FBBF24;
  --amber-350: #ffc266; /* lighter orange-amber — hover state for dark themes */
  --amber-400: #ffa333; /* orange-amber — primary accent in dark themes */
  --amber-500: #F59E0B; /* Tailwind amber-500 — primary accent in light themes */
  --amber-600: #A8620D;
  --amber-700: #7C480A;
  --amber-800: #5C3407;
  --amber-900: #3D2204;

  /* Blue */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E3A8A;
  --blue-900: #172554;

  /* Teal */
  --teal-50:  #E8F9FA;
  --teal-100: #C8F1F4;
  --teal-200: #96E2E9;
  --teal-300: #62D0DA;
  --teal-400: #3CBDCA;
  --teal-500: #22AAB9;
  --teal-550: #1D95A3;
  --teal-600: #187A86;
  --teal-700: #135E68;
  --teal-800: #0F4850;
  --teal-900: #0B3238;

  /* Amber-tinted surface ramp — warm backgrounds for amber theme */
  --amber-tint-50:  #FAF6EA;
  --amber-tint-100: #F3ECD0;
  --amber-tint-200: #E0CE94;
  --amber-tint-300: #BFA148;
  --amber-tint-400: #917832;
  --amber-tint-500: #6B5828;
  --amber-tint-600: #483C22;
  --amber-tint-700: #342C1C;
  --amber-tint-800: #272218;
  --amber-tint-850: #221E16;
  --amber-tint-900: #1E1B13;
  --amber-tint-950: #18150F;

  /* Blue-tinted surface ramp — cool backgrounds for blue theme */
  --blue-tint-50:  #ECF1F8;
  --blue-tint-100: #D3E1F0;
  --blue-tint-200: #A2BEDA;
  --blue-tint-300: #5B82B6;
  --blue-tint-400: #3E5E8E;
  --blue-tint-500: #314668;
  --blue-tint-600: #27334C;
  --blue-tint-700: #1F283A;
  --blue-tint-800: #191F2E;
  --blue-tint-850: #161B28;
  --blue-tint-900: #131722;
  --blue-tint-950: #0E1119;

  /* Teal-tinted surface ramp — teal backgrounds for teal theme */
  --teal-tint-50:  #E6F2F3;
  --teal-tint-100: #C5DEE0;
  --teal-tint-200: #8FBBBE;
  --teal-tint-300: #55898F;
  --teal-tint-400: #3E6A6F;
  --teal-tint-500: #305054;
  --teal-tint-600: #253A3F;
  --teal-tint-700: #1E2D31;
  --teal-tint-800: #182326;
  --teal-tint-850: #161F22;
  --teal-tint-900: #131B1E;
  --teal-tint-950: #0F1517;

  /* Status */
  --color-success: #22C55E;
  --color-error:   #EF4444;

  /* Component utility */
  --btn-grid-overlay: color-mix(in srgb, var(--n-0) 3.5%, transparent);
  /* Card hover border — softer than a solid neutral; corners derive from this */
  --card-bracket-stroke: color-mix(in srgb, var(--n-300) 34%, transparent);
  /* L-corners: softer than hover stroke (see dark theme override) */
  --card-corner-stroke: color-mix(in srgb, var(--card-bracket-stroke) 78%, transparent);

  --page-texture: none;
  --page-texture-size: 240px;

  /* ── Typography scale ──────────────────────────────────────────────────── */
  --step-2xs:  0.75rem;
  --step-xs:   0.8125rem;
  --step-sm:   0.9375rem;
  --step-base: 1rem;
  --step-md:   1.125rem;
  --step-lg:   1.25rem;
  --step-xl:   1.5rem;
  --step-2xl:  1.875rem;
  --step-3xl:  clamp(2.25rem, 1.95rem + 1.2vw, 2.75rem);
  --step-4xl:  clamp(3.25rem, 2.7rem + 2.25vw, 4.25rem);
  --leading-display:   1.05;
  --leading-tight:     1.15;
  --leading-snug:      1.3;
  --leading-copy:      1.65;
  --leading-relaxed:   1.75;
  --tracking-display:  -0.035em;
  --tracking-headline: -0.028em;
  --tracking-title:    -0.018em;
  --tracking-label:    0.05em;
  --tracking-label-sm: 0.08em;
}

/* ── Semantic tokens ─────────────────────────────────────────────────────── */

:root,
[data-theme="amber-dark"] {
  /* Backgrounds — neutral dark surfaces */
  --bg-page:          var(--n-950);
  --bg-elevated:      var(--n-900);
  --bg-surface:       var(--n-850);
  --bg-surface-hover: var(--n-800);
  /* Card surfaces (links + static cards) — slightly above page */
  --bg-card:          #131416;
  --nav-bg:           color-mix(in srgb, var(--n-950) 88%, transparent);
  /* Text */
  --text-primary:     var(--n-150);
  --text-secondary:   var(--n-400);
  --text-muted:       var(--n-500);
  /* Borders */
  --border-default:   color-mix(in srgb, var(--n-400) 8%, transparent);
  --border-accent:    color-mix(in srgb, var(--n-400) 16%, transparent);
  --grid-line:        color-mix(in srgb, var(--n-400) 4%, transparent);
  /* Accent */
  --accent-primary:   var(--amber-400);
  --accent-emphasis:  var(--amber-300);
  --accent-secondary: var(--blue-400);
  --accent-on-btn:    var(--n-950);
  /* Interactive surfaces */
  --tint-hover:       var(--amber-tint-800);
  /* Buttons */
  --btn-primary-bg:       var(--amber-400);
  --btn-primary-bg-hover: var(--amber-350);
}

[data-theme="blue-dark"] {
  /* Backgrounds — neutral dark surfaces */
  --bg-page:          var(--n-950);
  --bg-elevated:      var(--n-900);
  --bg-surface:       var(--n-850);
  --bg-surface-hover: var(--n-800);
  --bg-card:          #131416;
  --nav-bg:           color-mix(in srgb, var(--n-950) 88%, transparent);
  /* Text */
  --text-primary:     var(--n-150);
  --text-secondary:   var(--n-400);
  --text-muted:       var(--n-500);
  /* Borders */
  --border-default:   color-mix(in srgb, var(--n-400) 8%, transparent);
  --border-accent:    color-mix(in srgb, var(--n-400) 16%, transparent);
  --grid-line:        color-mix(in srgb, var(--n-400) 4%, transparent);
  /* Accent */
  --accent-primary:   var(--blue-500);
  --accent-emphasis:  var(--blue-400);
  --accent-secondary: var(--amber-300);
  --accent-on-btn:    var(--n-0);
  /* Interactive surfaces */
  --tint-hover:       var(--blue-tint-800);
  /* Buttons */
  --btn-primary-bg:       var(--blue-500);
  --btn-primary-bg-hover: var(--blue-400);
}

[data-theme="amber-light"] {
  /* Backgrounds — neutral light surfaces, white cards */
  --bg-page:          var(--n-50);
  --bg-elevated:      var(--n-0);
  --bg-surface:       var(--n-100);
  --bg-surface-hover: var(--n-100);
  --bg-card:          var(--n-0);
  --nav-bg:           color-mix(in srgb, var(--n-50) 92%, transparent);
  /* Text */
  --text-primary:     var(--n-950);
  --text-secondary:   var(--n-600);
  --text-muted:       var(--n-400);
  /* Borders */
  --border-default:   color-mix(in srgb, var(--n-950) 8%, transparent);
  --border-accent:    color-mix(in srgb, var(--n-950) 16%, transparent);
  --grid-line:        color-mix(in srgb, var(--n-950) 5%, transparent);
  /* Accent */
  --accent-primary:   var(--amber-500);
  --accent-emphasis:  var(--amber-400);
  --accent-secondary: var(--blue-600);
  --accent-on-btn:    var(--n-0);
  /* Interactive surfaces */
  --tint-hover:       var(--amber-tint-100);
  /* Buttons */
  --btn-primary-bg:       var(--amber-500);
  --btn-primary-bg-hover: var(--amber-300);
}

[data-theme="blue-light"] {
  /* Backgrounds — neutral light surfaces, white cards */
  --bg-page:          var(--n-50);
  --bg-elevated:      var(--n-0);
  --bg-surface:       var(--n-100);
  --bg-surface-hover: var(--n-100);
  --bg-card:          var(--n-0);
  --nav-bg:           color-mix(in srgb, var(--n-50) 92%, transparent);
  /* Text */
  --text-primary:     var(--n-950);
  --text-secondary:   var(--n-600);
  --text-muted:       var(--n-400);
  /* Borders */
  --border-default:   color-mix(in srgb, var(--n-950) 8%, transparent);
  --border-accent:    color-mix(in srgb, var(--n-950) 16%, transparent);
  --grid-line:        color-mix(in srgb, var(--n-950) 5%, transparent);
  /* Accent */
  --accent-primary:   var(--blue-600);
  --accent-emphasis:  var(--blue-500);
  --accent-secondary: var(--amber-500);
  --accent-on-btn:    var(--n-0);
  /* Interactive surfaces */
  --tint-hover:       var(--blue-tint-100);
  /* Buttons */
  --btn-primary-bg:       var(--blue-600);
  --btn-primary-bg-hover: var(--blue-500);
}

[data-theme="teal-dark"] {
  /* Backgrounds — neutral dark surfaces */
  --bg-page:          var(--n-950);
  --bg-elevated:      var(--n-900);
  --bg-surface:       var(--n-850);
  --bg-surface-hover: var(--n-800);
  --bg-card:          #131416;
  --nav-bg:           color-mix(in srgb, var(--n-950) 88%, transparent);
  /* Text */
  --text-primary:     var(--n-150);
  --text-secondary:   var(--n-400);
  --text-muted:       var(--n-500);
  /* Borders */
  --border-default:   color-mix(in srgb, var(--n-400) 8%, transparent);
  --border-accent:    color-mix(in srgb, var(--n-400) 16%, transparent);
  --grid-line:        color-mix(in srgb, var(--n-400) 4%, transparent);
  /* Accent */
  --accent-primary:   var(--teal-500);
  --accent-emphasis:  var(--teal-400);
  --accent-secondary: var(--amber-400);
  --accent-on-btn:    var(--n-950);
  /* Interactive surfaces */
  --tint-hover:       var(--teal-tint-800);
  /* Buttons */
  --btn-primary-bg:       var(--teal-500);
  --btn-primary-bg-hover: var(--teal-400);
}

[data-theme="teal-light"] {
  /* Backgrounds — neutral light surfaces, white cards */
  --bg-page:          var(--n-50);
  --bg-elevated:      var(--n-0);
  --bg-surface:       var(--n-100);
  --bg-surface-hover: var(--n-100);
  --bg-card:          var(--n-0);
  --nav-bg:           color-mix(in srgb, var(--n-50) 92%, transparent);
  /* Text */
  --text-primary:     var(--n-950);
  --text-secondary:   var(--n-600);
  --text-muted:       var(--n-400);
  /* Borders */
  --border-default:   color-mix(in srgb, var(--n-950) 8%, transparent);
  --border-accent:    color-mix(in srgb, var(--n-950) 16%, transparent);
  --grid-line:        color-mix(in srgb, var(--n-950) 5%, transparent);
  /* Accent */
  --accent-primary:   var(--teal-600);
  --accent-emphasis:  var(--teal-500);
  --accent-secondary: var(--amber-500);
  --accent-on-btn:    var(--n-0);
  /* Interactive surfaces */
  --tint-hover:       var(--teal-tint-100);
  /* Buttons */
  --btn-primary-bg:       var(--teal-600);
  --btn-primary-bg-hover: var(--teal-550);
}

/*
 * Dark themes: nudge hover borders above default without a heavy solid ring.
 * Scoped to [data-theme] — not :root alone — so light themes keep :root tokens.
 */
[data-theme="amber-dark"],
[data-theme="blue-dark"],
[data-theme="teal-dark"] {
  --card-bracket-stroke: color-mix(in srgb, var(--n-300) 38%, transparent);
  --border-accent: color-mix(in srgb, var(--n-400) 26%, transparent);
  --card-corner-stroke: color-mix(in srgb, var(--card-bracket-stroke) 85%, transparent);
}

/* ── Base ───────────────────────────────────────────────────────────────── */

html {
  color-scheme: dark;
  background-color: var(--bg-page);
  overflow-x: clip; /* body carries the overflow-x:hidden fallback for iOS <16 */
}

[data-theme$="-light"] {
  color-scheme: light;
}

body {
  overflow-x: hidden; /* iOS <16 fallback: clip on html not supported */
  background-color: var(--bg-page);
  background-image: var(--page-texture);
  background-repeat: repeat;
  background-size: var(--page-texture-size) var(--page-texture-size);
  background-position: top left;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--step-base);
  line-height: var(--leading-copy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Color transitions for theme switching ──────────────────────────────── */

*,
*::before,
*::after {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    fill 0.35s ease;
}

/* ── Global link reset ──────────────────────────────────────────────────── */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Don't transition layout or transform properties */
button,
a,
.card {
  transition:
    background-color 0.35s ease,
    border-color 0.2s ease,
    color 0.35s ease,
    fill 0.35s ease,
    filter 0.2s ease,
    opacity 0.2s ease;
}

/* ── Focus states ───────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ── Skip to content ────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--accent-on-btn);
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  font-weight: 600;
  border-radius: 0px;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform 0.15s ease;
}

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

/* ── Container ──────────────────────────────────────────────────────────── */

.site-container {
  max-width: 1144px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-inline: clamp(16px, 3vw, 32px);
}

#main-content {
  box-sizing: border-box;
}

/* Blog post: center article column; remove extra horizontal padding on inner .site-container */
body.site-blog-post #main-content > div > .site-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Home: center main column (scoped so inner pages keep full-width blocks) */
body.site-home #main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Stretch fade sections to full main column width (flex + align-items: center otherwise sizes to content). */
body.site-home #main-content > .fade-section {
  width: 100%;
  align-self: stretch;
}

/* Home-specific typography override */
body.site-home {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--step-md);
  font-weight: 500;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── Typography ─────────────────────────────────────────────────────────── */

.type-display-xl {
  font-family: var(--font-sans);
  font-size: var(--step-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

h1.type-display-xl {
  width: 100%;
}

.type-display-xl span {
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  line-height: inherit;
}

.type-display-xl .site-hero__title-primary,
.type-display-xl .site-hero__title-silicon {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 58px;
}

.type-display-lg {
  font-family: var(--font-sans);
  font-size: var(--step-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-headline);
  line-height: var(--leading-tight);
}

.type-display-md {
  font-family: var(--font-sans);
  font-size: var(--step-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-tight);
}

.type-display-sm {
  font-family: var(--font-sans);
  font-size: var(--step-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-snug);
}

.type-title-lg {
  font-family: var(--font-sans);
  font-size: var(--step-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-snug);
}

.type-title-md {
  font-family: var(--font-sans);
  font-size: var(--step-md);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: var(--leading-snug);
}

.type-title-sm {
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.type-body-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 200;
  line-height: 24px;
}

.type-body {
  font-family: var(--font-sans);
  font-size: var(--step-base);
  font-weight: 400;
  line-height: var(--leading-copy);
}

.type-body-sm {
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 0;
}

.type-body-xs {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  font-weight: 400;
  line-height: 1.6;
}

p.type-body-xs {
  color: var(--text-secondary);
  font-size: 16px;
}

.section--building .card p.type-body-xs {
  height: 100%;
}

.type-label {
  font-family: var(--font-mono);
  font-size: var(--step-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

p.type-label {
  color: var(--accent-primary);
  font-weight: 600;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.type-label-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--tracking-label-sm);
  line-height: 1.4;
  text-transform: uppercase;
}

.type-stat-value {
  font-family: var(--font-sans);
  font-size: var(--step-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  line-height: 1.1;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn-primary {
  --btn-primary-detail: color-mix(in srgb, var(--accent-on-btn) 22%, transparent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 16px 20px;
  overflow: hidden;
  background-color: var(--btn-primary-bg);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--btn-primary-detail), var(--btn-primary-detail)),
    linear-gradient(var(--btn-primary-detail), var(--btn-primary-detail)),
    linear-gradient(var(--btn-primary-detail), var(--btn-primary-detail)),
    linear-gradient(var(--btn-primary-detail), var(--btn-primary-detail)),
    linear-gradient(var(--btn-primary-detail), var(--btn-primary-detail)),
    linear-gradient(var(--btn-primary-detail), var(--btn-primary-detail)),
    linear-gradient(var(--btn-primary-detail), var(--btn-primary-detail)),
    linear-gradient(var(--btn-primary-detail), var(--btn-primary-detail)),
    linear-gradient(135deg, var(--btn-primary-detail) 0 48%, transparent 49%);
  background-size:
    8px 1px,
    1px 8px,
    8px 1px,
    1px 8px,
    8px 1px,
    1px 8px,
    8px 1px,
    1px 8px,
    10px 10px;
  background-position:
    4px 4px,
    4px 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 4px),
    4px 4px;
  color: var(--accent-on-btn);
  font-family: var(--font-mono);
  font-size: var(--step-base);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: background-color 0.1s ease, color 0.1s ease, transform 0.08s ease;
}

a.btn-primary {
  width: -moz-fit-content;
  width: fit-content;
  gap: 0;
  color: var(--text-primary);
}

a.btn-primary:hover {
  color: var(--text-primary);
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
  color: var(--accent-on-btn);
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(1px) scale(0.97);
}

.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, transform 0.08s ease;
  --btn-corner: color-mix(in srgb, var(--text-primary) 40%, transparent);
  --btn-accent-wedge: var(--accent-primary);
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--btn-grid-overlay) 1px, transparent 1px),
    linear-gradient(90deg, var(--btn-grid-overlay) 1px, transparent 1px),
    linear-gradient(var(--btn-corner), var(--btn-corner)),
    linear-gradient(var(--btn-corner), var(--btn-corner)),
    linear-gradient(var(--btn-corner), var(--btn-corner)),
    linear-gradient(var(--btn-corner), var(--btn-corner)),
    linear-gradient(var(--btn-corner), var(--btn-corner)),
    linear-gradient(var(--btn-corner), var(--btn-corner)),
    linear-gradient(var(--btn-corner), var(--btn-corner)),
    linear-gradient(var(--btn-corner), var(--btn-corner)),
    linear-gradient(135deg, var(--btn-accent-wedge) 0 49%, transparent 50%);
  background-size:
    10px 10px,
    10px 10px,
    10px 1px,
    1px 10px,
    10px 1px,
    1px 10px,
    10px 1px,
    1px 10px,
    10px 1px,
    1px 10px,
    24px 24px;
  background-position:
    0 0,
    0 0,
    5px 5px,
    5px 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    5px calc(100% - 5px),
    5px calc(100% - 5px),
    0 0;
}

.btn-secondary:hover {
  background-color: var(--bg-surface);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  padding: 0;
  background-color: transparent;
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

a.btn-ghost {
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 1rem;
}

.btn-ghost:hover {
  opacity: 0.8;
}

span.btn-ghost {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent-primary);
  text-decoration: none;
}

span.btn-ghost:hover {
  text-decoration: none;
}

.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 40px;
  box-sizing: border-box;
  padding: 8px 16px;
  background-color: var(--accent-primary);
  color: var(--accent-on-btn);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  font-weight: 500;
  border-radius: 0px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

a.btn-nav {
  width: 120px;
}

.btn-nav:hover {
  background-color: var(--accent-emphasis);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card,
.stats-cell,
.service-bracket-card {
  position: relative;
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: 32px;
  margin: -1px 0 0 -1px;
  transition: border-color 0.2s ease;
}

a.card,
.service-bracket-card {
  color: var(--text-primary);
  text-decoration: none;
}

.card:hover,
.stats-cell:hover,
.service-bracket-card:hover {
  border-color: var(--card-bracket-stroke);
  /* Sit above grid neighbors so the bottom edge isn’t covered by the next row */
  z-index: 1;
}

.card.building-card-linked {
  display: flex;
  flex-direction: column;
}

.card.building-card-linked p.type-body-xs {
  height: 100%;
}

/* ── Services section header ─────────────────────────────────────────── */


/* ── Services bento ──────────────────────────────────────────────────── */

.services-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding-top: 24px;
  padding-left: 0;
  padding-right: 0;
}

/* ── Bracket card ────────────────────────────────────────────────────── */

.service-bracket-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* L-shaped corner marks — subtler than hover edge; match hover stroke on parent:hover */
.bc {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 1;
  transition: border-color 0.2s ease;
}

.bc--tl { top: -1px;    left: -1px;    border-top:    1px solid var(--card-corner-stroke); border-left:   1px solid var(--card-corner-stroke); }
.bc--tr { top: -1px;    right: -1px;   border-top:    1px solid var(--card-corner-stroke); border-right:  1px solid var(--card-corner-stroke); }
.bc--bl { bottom: -1px; left: -1px;    border-bottom: 1px solid var(--card-corner-stroke); border-left:   1px solid var(--card-corner-stroke); }
.bc--br { bottom: -1px; right: -1px;   border-bottom: 1px solid var(--card-corner-stroke); border-right:  1px solid var(--card-corner-stroke); }

.card:hover .bc,
.stats-cell:hover .bc,
.service-bracket-card:hover .bc {
  border-color: var(--card-bracket-stroke);
}

/* ── Service bracket card ────────────────────────────────────────────── */

.sbc__icon {
  color: var(--accent-primary);
  margin-bottom: 20px;
  line-height: 0;
}

.sbc__title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0;
}

.sbc__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--text-secondary);
  margin: 0;
  padding-top: 8px;
  height: -moz-fit-content;
  height: fit-content;
  flex: 1;
}

.sbc__learn-more {
  font-family: var(--font-mono);
  font-size: var(--step-base);
  font-weight: 600;
  color: var(--accent-primary);
  margin-top: 0;
}

/* ── Tags / Pills ───────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 3px 8px;
  background: unset;
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0px;
  border: 1px solid var(--n-200);
}

/* ── Section headers ────────────────────────────────────────────────────── */

.section-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  text-wrap: balance;
}

.section-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.section-header__left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
}

.section-header__right {
  margin-top: 8px;
}

.section-header__right .type-body-sm {
  max-width: 560px;
  margin: 0;
}

/* ── Section divider ────────────────────────────────────────────────────── */

.section-divider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1144px;
  height: 300px;
  margin-inline: auto;
  padding: 64px 0;
  box-sizing: border-box;
}

.section-divider::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--border-default);
}

/* ── Section spacing ────────────────────────────────────────────────────── */

.section {
  padding-top: 96px;
  padding-bottom: 96px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  color: var(--text-primary);
}


.section--services {
  padding-top: 0;
  padding-bottom: 0;
}

.section--services .site-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
  padding-inline: 0;
}

.section--services .section-header {
  width: 560px;
  max-width: 100%;
}


.section-sm {
  padding: 80px 0 0 0;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  box-sizing: border-box;
}

.section--team {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: -moz-fit-content;
  height: fit-content;
  padding-top: 128px;
  padding-bottom: 0;
}

.section--team .site-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1144px;
  padding-inline: 0;
}

.section--team .section-header {
  width: 560px;
  max-width: 100%;
}

.section--team .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  width: 100%;
  padding-top: 24px;
  padding-left: 0;
  padding-right: 0;
}

.section--team .card {
  margin: -1px 0 0 -1px;
  padding: 24px;
}

/* Overrides responsive `.section { padding-bottom: … }` for the team block */
section.section.section--team {
  padding-bottom: 0;
}

.section--building {
  height: -moz-fit-content;
  height: fit-content;
  padding-top: 120px;
  padding-bottom: 0;
}

.section--building .site-container {
  margin-top: 0;
  padding-inline: 0;
}

.section--careers {
  padding-top: 160px;
  padding-bottom: 120px;
  width: 100%;
  margin-inline: auto;
}

.section--careers .site-container {
  box-sizing: border-box;
  padding-inline: 0;
}


/* ── Dev-toggled sections ───────────────────────────────────────────────── */

#stats-strip-section { display: none; }

/* ── Blog card thumbnail ────────────────────────────────────────────────── */

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  padding: 0;
  background-color: var(--bg-card);
}

.blog-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--bg-elevated);
  background-image: url('/images/bg-tile.svg');
  background-size: 48px 48px;
  margin: 0;
  flex-shrink: 0;
}

.blog-card__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 16px 32px 32px;
  margin-top: 16px;
}

.blog-card__meta {
  margin-bottom: 0;
}

.blog-card__title {
  color: var(--text-primary);
  margin-bottom: 0;
  text-wrap: balance;
}

.blog-card__footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0;
  padding-top: 20px;
  height: -moz-fit-content;
  height: fit-content;
}

.blog-card__author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: -moz-fit-content;
  height: fit-content;
}

.blog-card__avatar {
  width: 40px;
  height: 40px;
  border: 1px solid var(--card-border, var(--border-default));
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background-color: var(--bg-elevated);
  flex-shrink: 0;
}

.blog-card__author-name {
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* ── Blog preview section ───────────────────────────────────────────────── */

.section.blog-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 0;
}

.blog-preview .site-container {
  width: 100%;
  padding-inline: 0;
  height: -moz-fit-content;
  height: fit-content;
}

.blog-preview a.card p.type-body-xs {
  font-size: var(--step-base);
  font-weight: 400;
  line-height: var(--leading-copy);
  margin-bottom: 0;
}

.blog-preview__heading-col {
  margin-top: 0;
  margin-right: 0;
}

/* ── Hero grid pattern ──────────────────────────────────────────────────── */

.hero-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Stats strip ────────────────────────────────────────────────────────── */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stats-cell {
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  padding: 20px 24px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 72px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  background-color: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-default);
}

/*
 * The home page adds 24px of horizontal padding on <body>, which the navbar
 * inherits on top of its own 24px — putting the logo at a 48px gutter. Inner
 * pages have no body padding, so add the matching 24px here so the logo lands
 * in the same place on every page.
 */
body:not(.site-home) .navbar {
  padding-left: 48px;
  padding-right: 48px;
}

.navbar .site-container {
  max-width: 1144px;
  width: 100%;
  margin-inline: auto;
  /* Let .navbar__inner span the full 1144px; gutters live on the inner row + mobile menu */
  padding-inline: 0;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1144px;
  padding-inline: 0;
}

.navbar__brand,
.navbar__links,
.navbar__actions {
  display: flex;
  align-items: center;
}

.navbar__brand {
  flex-shrink: 0;
  text-decoration: none;
}

.navbar__links {
  gap: 32px;
}

.navbar__actions {
  justify-content: center;
  gap: 12px;
  min-height: 56px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active,
.mobile-nav-link.active {
  color: var(--text-primary);
}

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

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 16px clamp(16px, 4vw, 24px);
  border-top: 1px solid var(--border-default);
}

.mobile-menu.open {
  display: flex;
}

.mobile-nav-link {
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-default);
  transition: color 0.2s ease;
}

.mobile-nav-link:last-of-type {
  border-bottom: none;
}

.mobile-nav-link:hover {
  color: var(--text-primary);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border-default);
  padding: 100px 24px 80px;
}

.footer .site-container {
  padding-inline: 0;
}

.footer-col-heading {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.footer-link {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 3px 0;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--text-primary);
}

/* ── Code blocks ────────────────────────────────────────────────────────── */

pre,
code {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  color: var(--accent-secondary);
  line-height: 1.8;
}

pre {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 0px;
  padding: 24px;
  overflow-x: auto;
}

/* ── Prose (blog posts) ─────────────────────────────────────────────────── */

.prose {
  max-width: 680px;
  color: var(--text-secondary);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-tight);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.prose h1 { font-size: var(--step-2xl); }
.prose h2 { font-size: var(--step-xl); }
.prose h3 { font-size: var(--step-lg); }

.prose p {
  font-size: var(--step-base);
  line-height: var(--leading-copy);
  margin-bottom: 1.25em;
}

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

.prose a:hover {
  text-decoration: none;
}

.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 2em 0;
}

.prose-media {
  margin: 2em 0;
}

.prose-media img,
.prose img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  background-color: var(--bg-elevated);
}

.prose-media figcaption,
.prose figcaption {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  line-height: 1.6;
}

/* ── Fade-in scroll animation ───────────────────────────────────────────── */

.fade-section {
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ── Contact CTA (home) ─────────────────────────────────────────────────── */

.contact-cta {
  width: 100%;
  max-width: 1144px;
  margin: 0 auto 40px;
  padding: 80px 0;
  box-sizing: border-box;
  background-color: var(--bg-elevated);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.contact-cta .site-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-inline: 0;
}

.contact-cta .type-display-md {
  color: var(--text-primary);
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 0;
}

.contact-cta .type-body-sm {
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  padding-top: 16px;
}

.contact-cta .btn-primary {
  margin-top: 24px;
}

/* ── Site hero (home) ───────────────────────────────────────────────────── */

.site-hero {
  position: relative;
  overflow: visible;
  padding: 120px 0 96px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  box-sizing: border-box;
}

.site-hero__art-wrap {
  transform: translateY(-60%);
}

.site-hero__container {
  position: relative;
  z-index: 1;
  width: min(1144px, 100%);
  max-width: 650px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Hero inherits .site-container gutters; remove horizontal padding so hero aligns with layout intent */
.site-container.site-hero__container {
  padding-inline: 0;
  font-size: var(--step-base);
}

.site-hero .type-body-lg {
  width: 100%;
}

.site-hero__ctas {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 32px;
  box-sizing: border-box;
}

.site-hero .btn-primary {
  width: 160px;
  height: 48px;
  font-size: var(--step-base);
}

.site-hero a.btn-ghost {
  width: 160px;
  height: 48px;
  transition: color 0.1s ease;
}

.site-hero a.btn-ghost:hover {
  opacity: 1;
  color: var(--btn-primary-bg-hover);
}

.site-hero__img {
  width: 900px;
  height: 600px;
  display: block;
}

.site-hero__title {
  margin-bottom: 24px;
  width: 100%;
  text-wrap: balance;
}

.site-hero__title-primary {
  display: block;
  padding-top: 8px;
  color: var(--accent-primary);
  width: 100%;
}

.site-hero__title-silicon {
  color: var(--text-primary);
  width: 100%;
}

/* ── Theme toggle button ────────────────────────────────────────────────── */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0px;
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Show sun in dark mode, moon in light mode */
[data-theme$="-dark"] .icon-sun { display: block; }
[data-theme$="-dark"] .icon-moon { display: none; }
[data-theme$="-light"] .icon-sun { display: none; }
[data-theme$="-light"] .icon-moon { display: block; }

/* Logo theme switching */
.logo-dark svg,
.logo-light svg {
  height: 24px;
  width: auto;
  display: block;
}

/* Default: dark logo visible */
.logo-dark {
  display: block;
  width: 118px;
  height: 30px;
}
.logo-light { display: none; }

[data-theme$="-light"] .logo-dark { display: none; }
[data-theme$="-light"] .logo-light { display: block; }

/* Hamburger icon */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hamburger:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints: 1024px · 768px · 480px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1024px: compact desktop/tablet ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-hero__art-wrap {
    display: none;
  }

  .site-hero {
    overflow: hidden; /* contain any stray positioned elements once art is hidden */
  }

}

/* ── 768px: tablet ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-container {
    padding-inline: 24px;
  }

  /* Hero */
  .site-hero {
    padding: 96px 0 80px;
  }

  /* Section spacing — tablet */
  .section {
    padding: 64px 0;
  }

  .section.blog-preview {
    padding-top: 64px;
  }

  .section-sm {
    padding-top: 48px;
  }

  .section--team {
    padding-top: 64px;
    padding-bottom: 0;
  }

  .section--services {
    padding-top: 64px;
    padding-bottom: 0;
  }

  .section--services .site-container {
    padding-top: 0;
    padding-inline: 0;
  }

  .section--careers {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section--building {
    padding: 64px 0;
  }

  .section--building .site-container {
    margin-top: 0;
  }


  /* Stats: 2 columns */
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Building grid: 1 column */
  .section--building .site-container > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer grid: 2 columns */
  footer .site-container > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* Footer */
  .footer {
    padding: 64px 24px 48px;
  }

  /* Contact CTA */
  .contact-cta {
    padding: 64px 0;
    margin-bottom: 48px;
  }

  .contact-cta .site-container {
    padding-inline: 24px;
  }

  .section-header {
    gap: 8px;
    margin-bottom: 32px;
  }

  /* Cards — tablet */
  .card,
  .stats-cell,
  .service-bracket-card {
    padding: 24px;
  }

  .blog-card {
    padding: 0;
  }

  .blog-card__thumb {
    margin: 0;
  }

  .blog-card__body {
    padding: 16px 24px 24px;
  }

  /* Hamburger / nav: already handled */
}

/* ── 480px: mobile ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .site-container {
    padding-inline: 16px;
  }

  body.site-blog-post #main-content > div > .site-container {
    padding-inline: 0;
  }

  .navbar__inner {
    gap: 8px;
  }

  .navbar__actions {
    gap: 8px;
  }

  .logo-dark svg,
  .logo-light svg {
    height: 20px;
  }

  /* Hero */
  .site-hero {
    padding: 80px 0 64px;
  }

  .type-display-xl .site-hero__title-primary,
  .type-display-xl .site-hero__title-silicon {
    font-size: 48px;
  }

  /* Stats: 1 column */
  .stats-strip {
    grid-template-columns: 1fr;
  }

  /* Team grid: force single column (overrides inline minmax(400px)) */
  .team-grid {
    grid-template-columns: 1fr !important;
  }

  /* Section spacing — mobile */
  .section {
    padding: 48px 0;
  }

  .section.blog-preview {
    padding-top: 48px;
  }

  .section-sm {
    padding-top: 32px;
  }

  .section--team {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .section--services {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .section--services .site-container {
    padding-top: 0;
    padding-inline: 0;
  }

  .section--careers {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section--building {
    padding: 48px 0;
  }

  .section--building .site-container {
    margin-top: 0;
  }


  /* Footer grid: 1 column */
  footer .site-container > div:first-child {
    grid-template-columns: 1fr !important;
  }

  /* Blog preview grid: 1 column */
  .blog-preview .site-container > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Blog card thumbnail: smaller aspect on narrow screens */
  .blog-card__thumb {
    aspect-ratio: 2 / 1;
  }

  /* Contact CTA */
  .contact-cta {
    padding: 48px 0;
    margin-bottom: 32px;
  }

  .contact-cta .site-container {
    padding-inline: 16px;
  }

  /* Footer */
  .footer {
    padding: 48px 24px 32px;
  }

  /* Reduce btn-primary size slightly */
  .btn-primary {
    height: 40px;
    font-size: var(--step-xs);
  }

  /* Hiring CTAs: stack vertically */
  .section--careers > .site-container > div[style*="gap:24px"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px !important;
  }

  .services-bento {
    grid-template-columns: 1fr;
    padding-top: 24px;
  }

  /* Cards — mobile */
  .card,
  .stats-cell,
  .service-bracket-card {
    padding: 20px;
  }

  .blog-card {
    padding: 0;
  }

  .blog-card__thumb {
    margin: 0;
  }

  .blog-card__body {
    padding: 16px 20px 20px;
  }

  .section-header {
    gap: 8px;
    margin-bottom: 24px;
  }

}

/* --- Hero accent — single inline SVG recolors via these vars (no file swap) --- */
:root                      { --hero-accent: #3bebff; --hero-accent-2: #00e5ff; } /* fallback: teal dark */
[data-theme="amber-dark"]  { --hero-accent: #ffbd6c; --hero-accent-2: #ffbd6c; }
[data-theme="amber-light"] { --hero-accent: #f28600; --hero-accent-2: #ffbd6c; }
[data-theme="blue-dark"]   { --hero-accent: #3b82f6; --hero-accent-2: #3b82f6; }
[data-theme="blue-light"]  { --hero-accent: #3b82f6; --hero-accent-2: #3b82f6; }
[data-theme="teal-dark"]   { --hero-accent: #3bebff; --hero-accent-2: #00e5ff; }
[data-theme="teal-light"]  { --hero-accent: #00b2c6; --hero-accent-2: #00e5ff; }