/* Love the Code — the site's only stylesheet (r13 merged the old styles.css into it).
   One family (Archivo): headlines use its expanded width, body its normal width.
   Black, white and neon green; the one flourish is the voice waveform under the hero. */

:root {
  --black: #000000;
  --panel: #07120a;      /* raised surfaces: inputs, open accordion rows, footer */
  --white: #ffffff;
  --grey: #a6b9aa;      /* secondary text */
  --neon: #39ff14;       /* links, buttons, the waveform */
  --deep: #1f8a32;     /* button outlines, carousel arrows */
  --rule: #16331b;       /* hairlines between rows */

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wide: "wdth" 125;    /* expanded width for display type */

  /* Type scale (perfect fourth, 1.333) */
  --t-sm: .875rem; --t-base: 1.0625rem; --t-md: 1.333rem; --t-lg: 1.777rem; --t-xl: 2.369rem;
  --t-hero: clamp(2.75rem, 7.2vw, 6.25rem);

  color-scheme: dark;
}

/* Archivo variable (weight 100–900, width 62–125%), self-hosted. SIL OFL 1.1, see fonts/OFL.txt */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

[x-cloak] { display: none !important; }

/* ---------- Layout basics (from the old styles.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html, body { overflow-x: clip; }  /* nothing can push the page wider than the screen */  /* in-page links land below the sticky header */
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { max-width: 720px; }
img, video { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Base ---------- */
html, body { background: var(--black); color: var(--white); }
body {
  margin: 0; font-family: var(--font); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  opacity: 1;  /* the old styles.css hid the page until JS added .is-ready; never again */
}
h1, h2, h3 { color: var(--white); font-family: var(--font); font-variation-settings: var(--wide); margin: 0 0 .6em; }
h2 { font-size: var(--t-xl); font-weight: 800; line-height: 1.05; letter-spacing: -.015em; margin-bottom: 1rem; }
h3 { font-size: var(--t-md); font-weight: 700; line-height: 1.2; }
h2::after, h3::after { content: none; display: none; }
p, li { max-width: 68ch; }
a { color: var(--neon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--white); }
::selection { background: var(--neon); color: var(--black); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 2px; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(0, 0, 0, .82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .9rem; }
.brand {
  color: var(--white); text-decoration: none; font-size: 1.15rem; font-weight: 800;
  font-variation-settings: var(--wide); letter-spacing: -.01em;
}
.brand:hover { color: var(--neon); }
.nav { display: flex; gap: 1.5rem; margin-left: auto; }
.nav a { color: var(--grey); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.nav a:hover { color: var(--white); }
/* ---------- Mobile menu ----------
   Clicking the icon (top right) expands the header downward with the links full-width
   under the logo; the page moves down with it. Pure CSS: the hidden checkbox
   #menu-toggle holds the state, its <label> is the icon. app.js only adds extras. */
.menu-toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0;
}
.menu-btn { display: none; }

@media (max-width: 760px) {
  .topbar__inner { flex-wrap: wrap; row-gap: 0; }

  .menu-btn {
    display: inline-grid; place-content: center; gap: 6px; margin-left: auto; margin-right: -10px;
    width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; user-select: none;
  }
  .menu-btn span {
    display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--white);
    transition: transform .2s ease, background-color .2s ease;
  }
  .menu-toggle:focus-visible + .menu-btn { outline: 2px solid var(--neon); outline-offset: 2px; }
  .menu-toggle:checked + .menu-btn span { background: var(--neon); }
  .menu-toggle:checked + .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle:checked + .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }

  /* Links get a full row under the logo and icon; collapsed until the box is checked. */
  .nav {
    order: 3; flex-basis: 100%; position: static;
    display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .28s ease, visibility 0s linear .28s;
  }
  .menu-toggle:checked ~ .nav {
    max-height: 32rem; visibility: visible;
    transition: max-height .28s ease, visibility 0s;
  }
  .nav a {
    display: block; padding: .95rem 0; border-top: 1px solid var(--rule);
    font-size: var(--t-md); font-weight: 700; font-variation-settings: var(--wide);
    color: var(--white); text-decoration: none;
  }
  .nav a:first-child { margin-top: .5rem; }
  .nav a:hover, .nav a:active { color: var(--neon); }
  .nav a:focus-visible { outline-offset: -2px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .menu-btn span, .nav, .menu-toggle:checked ~ .nav { transition: none; }
}

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.btn {
  display: inline-block; padding: .8rem 1.4rem; border-radius: 6px;
  font: 600 var(--t-base)/1 var(--font); text-decoration: none; border: 1px solid transparent;
}
.btn--primary, .btn--call { background: var(--neon); color: var(--black); border-color: var(--neon); }
.btn--primary:hover, .btn--call:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.btn--secondary, .btn--ghost { background: transparent; color: var(--white); border-color: var(--deep); }
.btn--secondary:hover, .btn--ghost:hover { border-color: var(--neon); color: var(--neon); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(3rem, 9vw, 7rem) 0 clamp(7rem, 11vw, 8.5rem); overflow: hidden; }
.carousel .slide { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; min-height: 26rem; }
.slide__img { order: 2; }
@media (min-width: 960px) { .carousel .slide { grid-template-columns: 1.35fr 1fr; } }
.slide__img { width: 100%; height: auto; display: block; max-width: 460px; }
@media (min-width: 960px) { .slide__img { justify-self: end; } }
.slide h1, .slide h2 {
  font-size: var(--t-hero); font-weight: 900; line-height: .92; letter-spacing: -.025em;
  margin: 0; max-width: 14ch; text-wrap: balance;
}
.eyebrow { color: var(--neon); font-size: var(--t-base); font-weight: 600; margin: 0 0 1rem; text-transform: none; letter-spacing: 0; }
.lead { color: var(--grey); font-size: var(--t-md); line-height: 1.45; margin: 1.5rem 0 0; max-width: 38ch; }

/* The waveform: a voice signal under the hero, drawn left to right once. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1.25rem; height: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%2339ff14' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke' points='0,45.0 3,45.9 6,45.6 9,44.5 12,44.0 15,45.0 18,45.9 21,45.6 24,44.5 27,44.1 30,45.0 33,45.9 36,45.6 39,44.3 42,44.1 45,45.0 48,46.0 51,45.6 54,44.3 57,44.1 60,45.1 63,45.9 66,45.8 69,43.5 72,42.0 75,45.4 78,50.8 81,49.2 84,39.8 87,35.9 90,46.1 93,55.6 96,50.9 99,38.0 102,35.5 105,46.2 108,56.4 111,49.9 114,38.9 117,37.3 120,45.9 123,50.4 126,47.3 129,42.6 132,43.3 135,45.2 138,46.0 141,45.5 144,44.2 147,44.1 150,45.2 153,45.9 156,45.4 159,44.2 162,44.2 165,45.2 168,45.9 171,45.5 174,44.2 177,43.1 180,45.8 183,50.0 186,48.1 189,38.1 192,35.2 195,47.8 198,61.6 201,52.6 204,30.6 207,26.1 210,49.7 213,70.9 216,55.2 219,21.1 222,18.7 225,51.9 228,74.0 231,56.5 234,24.4 237,19.6 240,52.3 243,71.6 246,53.8 249,21.1 252,25.1 255,51.7 258,68.3 261,53.1 264,30.6 267,30.0 270,50.0 273,61.1 276,49.3 279,35.7 282,38.6 285,47.0 288,49.5 291,46.0 294,43.4 297,44.3 300,45.3 303,45.9 306,45.3 309,44.2 312,44.2 315,45.3 318,45.9 321,45.3 324,43.7 327,42.1 330,47.5 333,54.0 336,47.7 339,33.5 342,33.0 345,50.3 348,63.8 351,49.3 354,29.4 357,32.4 360,50.2 363,56.3 366,46.8 369,38.9 372,42.1 375,45.8 378,45.9 381,45.2 384,44.1 387,44.3 390,45.4 393,45.9 396,45.2 399,44.1 402,44.4 405,45.5 408,46.0 411,45.2 414,44.2 417,44.3 420,45.4 423,45.9 426,45.3 429,41.9 432,41.8 435,48.0 438,52.3 441,46.2 444,34.2 447,35.6 450,53.9 453,61.8 456,47.1 459,21.4 462,28.1 465,56.9 468,72.9 471,47.6 474,16.4 477,21.0 480,63.6 483,79.5 486,47.6 489,14.7 492,25.0 495,64.2 498,77.6 501,47.3 504,17.0 507,27.2 510,62.2 513,75.4 516,46.4 519,20.4 522,29.9 525,57.0 528,61.1 531,45.5 534,32.4 537,38.8 540,49.8 543,52.0 546,45.1 549,40.9 552,43.3 555,45.7 558,46.1 561,45.0 564,43.9 567,44.4 570,45.6 573,45.9 576,45.0 579,44.1 582,44.4 585,45.7 588,46.1 591,45.0 594,43.7 597,43.3 600,47.5 603,51.2 606,44.5 609,35.4 612,39.2 615,51.5 618,53.4 621,44.3 624,37.7 627,41.4 630,48.4 633,47.5 636,44.9 639,43.9 642,44.4 645,45.6 648,45.8 651,44.9 654,43.9 657,44.4 660,45.6 663,46.0 666,44.9 669,44.0 672,44.5 675,45.7 678,45.8 681,44.9 684,43.9 687,44.0 690,47.4 693,50.0 696,44.0 699,35.8 702,39.9 705,52.9 708,56.5 711,42.5 714,28.9 717,36.4 720,58.9 723,63.9 726,41.2 729,18.4 732,35.0 735,63.3 738,67.8 741,39.3 744,20.3 747,33.6 750,63.1 753,65.4 756,40.1 759,26.9 762,37.4 765,57.4 768,57.0 771,41.3 774,33.5 777,40.9 780,52.4 783,51.2 786,43.7 789,41.1 792,44.1 795,46.0 798,45.8 801,44.7 804,44.1 807,44.7 810,45.9 813,45.8 816,44.7 819,43.9 822,44.6 825,45.8 828,45.9 831,44.7 834,43.8 837,44.1 840,48.5 843,50.1 846,42.4 849,33.7 852,41.3 855,56.9 858,57.8 861,40.4 864,29.4 867,40.2 870,58.4 873,54.8 876,41.1 879,34.0 882,42.8 885,50.9 888,48.8 891,43.6 894,42.7 897,44.7 900,45.8 903,45.8 906,44.6 909,44.1 912,44.7 915,46.0 918,45.7 921,44.5 924,44.0 927,44.8 930,46.0 933,45.8 936,44.6 939,44.0 942,44.8 945,46.0 948,46.6 951,43.4 954,39.1 957,43.8 960,53.3 963,53.0 966,40.0 969,30.6 972,42.0 975,62.2 978,58.2 981,33.1 984,18.6 987,40.5 990,67.0 993,63.9 996,32.8 999,12.1 1002,41.1 1005,70.9 1008,66.7 1011,27.5 1014,10.5 1017,41.6 1020,70.6 1023,67.9 1026,30.1 1029,15.9 1032,42.6 1035,65.2 1038,61.4 1041,34.1 1044,28.0 1047,43.3 1050,60.3 1053,54.8 1056,39.5 1059,34.4 1062,44.5 1065,51.3 1068,47.8 1071,43.5 1074,43.4 1077,44.9 1080,45.9 1083,45.6 1086,44.4 1089,44.1 1092,45.0 1095,45.9 1098,45.5 1101,44.5 1104,44.1 1107,45.0 1110,46.0 1113,45.6 1116,43.9 1119,42.1 1122,45.0 1125,50.1 1128,49.0 1131,40.8 1134,36.4 1137,45.2 1140,51.9 1143,48.9 1146,41.0 1149,41.4 1152,45.1 1155,46.4 1158,45.6 1161,44.3 1164,44.1 1167,45.1 1170,46.0 1173,45.6 1176,44.4 1179,44.0 1182,45.1 1185,46.0 1188,45.5 1191,44.4 1194,44.2 1197,45.1 1200,45.9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, .55));
  pointer-events: none;
  animation: wave-draw 1.8s cubic-bezier(.6, .1, .3, 1) .2s both;
}
@keyframes wave-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }

.carousel__controls { display: flex; gap: .6rem; align-items: center; margin-top: 2.5rem; }
.carousel__arrow {
  background: transparent; border: 1px solid var(--deep); color: var(--white);
  border-radius: 6px; width: 2.4rem; height: 2.4rem; cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.carousel__arrow:hover { border-color: var(--neon); color: var(--neon); }
.dot { width: 1.5rem; height: 3px; border-radius: 2px; border: 0; background: var(--rule); padding: 0; cursor: pointer; }
.dot.active { background: var(--neon); }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--rule); }
.section--alt { background: var(--black); }
.section__intro { color: var(--grey); font-size: var(--t-md); line-height: 1.45; max-width: 46ch; margin: 0 0 3rem; }

/* ---------- Services: full-width rows, not a card grid ---------- */
#services .grid { display: block; }
.card {
  display: grid; grid-template-columns: 1fr; gap: .75rem 3rem;
  padding: 2rem 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0;
  background: none; box-shadow: none; scroll-margin-top: 5rem;
}
.card:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) {
  .card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .card > h3 { grid-row: 1 / span 3; }
}
.card__icon { display: none; }
.card h3 { font-size: var(--t-lg); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; }
.card:target h3 { color: var(--neon); }
.card p { color: var(--grey); margin: 0; }
.bullets {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1.5rem;
  font-size: var(--t-sm); color: var(--white);
}
.bullets li { position: relative; padding-left: 1rem; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--neon);
}

/* ---------- Videos ---------- */
.videos { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .videos { grid-template-columns: 2fr 1fr; } }
.video { margin: 0; }
.video video { width: 100%; height: auto; display: block; border-radius: 8px; background: #000; border: 1px solid var(--rule); }
.video--landscape video { aspect-ratio: 16 / 9; }
.video--portrait video { aspect-ratio: 9 / 16; max-height: 70vh; margin-inline: auto; }
.video figcaption { font-size: var(--t-sm); color: var(--grey); margin-top: .6rem; }
.yt { margin-top: 2rem; }
.yt a { display: inline-flex; gap: .5rem; align-items: center; font-weight: 600; }

/* ---------- Technologies: accordion rows ---------- */
.techs { display: block; border-bottom: 1px solid var(--rule); }
.tech { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 0; background: none; }
.tech summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 0;
}
.tech summary::-webkit-details-marker { display: none; }
.tech__icon { display: none; }
.tech summary h3 { font-size: var(--t-lg); font-weight: 800; letter-spacing: -.015em; }
.tech summary::after {
  content: "+"; margin-left: auto; color: var(--neon); font-size: 1.75rem; font-weight: 300; line-height: 1;
  transition: transform .2s ease;
}
.tech[open] summary::after { transform: rotate(45deg); }
.tech summary:hover h3 { color: var(--neon); }
.tech p { color: var(--grey); margin: 0 0 1rem; }
.tech[open] { padding-bottom: 1rem; }
@media (min-width: 860px) { .tech p { margin-left: calc(41.6% + 1.5rem); } }

/* ---------- About ---------- */
#about p { color: var(--grey); font-size: var(--t-md); line-height: 1.5; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; display: grid; gap: .25rem; }
.contact-list li { max-width: 100%; }
.contact-list a {
  color: var(--white); text-decoration: none; font-weight: 800;
  font-size: clamp(1.15rem, 5.2vw, var(--t-xl));   /* shrinks on phones so a long email fits */
  font-variation-settings: var(--wide); letter-spacing: -.015em;
  overflow-wrap: anywhere;                          /* and wraps rather than overflow if it still can't */
}
.contact-list a:hover { color: var(--neon); }
.form { display: grid; gap: 1rem; }
.form label { display: grid; gap: .35rem; color: var(--white); font-size: var(--t-sm); font-weight: 600; }
.form input, .form textarea {
  background: var(--panel); color: var(--white); border: 1px solid var(--rule); border-radius: 6px;
  padding: .8rem .9rem; font: 400 var(--t-base)/1.4 var(--font);
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(57, 255, 20, .2); }
.form input:-webkit-autofill { -webkit-text-fill-color: var(--white); box-shadow: 0 0 0 100px var(--panel) inset; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.footer { background: var(--panel); border-top: 1px solid var(--rule); color: var(--grey); font-size: var(--t-sm); }
.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding-block: 3rem 2rem; }
.footer__title { font-size: var(--t-base); font-weight: 700; color: var(--white); margin: 0 0 .9rem; text-transform: none; letter-spacing: 0; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__col a { color: var(--grey); text-decoration: none; }
.footer__col a:hover { color: var(--neon); }
.footer__legal { padding-block: 1.25rem; border-top: 1px solid var(--rule); color: var(--grey); }

/* ---------- Status message (from the old styles.css) ---------- */
.state { text-align: center; padding: 48px 16px; color: var(--grey); }