/* ==========================================================================
   Base
   Reset, document defaults, shared typography and page-level decoration.
   ========================================================================== */

* { box-sizing: border-box; }

html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: radial-gradient(circle at 9% 2%, rgba(0, 168, 132, .09), transparent 25rem), var(--app-bg);
  font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* Twelve-column pinstripe drawn over the whole viewport. */
body::before {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; content: ""; opacity: .32;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(8.333vw - 1px), rgba(37, 50, 65, .025) calc(8.333vw - 1px), rgba(37, 50, 65, .025) 8.333vw);
}

::selection { color: #fff; background: var(--accent); }

/* Elements ---------------------------------------------------------------- */
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { border: 0; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, ul, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
p { line-height: 1.7; }

/* Layout helpers ---------------------------------------------------------- */
.wrapper { width: min(100% - (var(--page-gutter) * 2), var(--content)); margin-inline: auto; }

/* Shared typography ------------------------------------------------------- */
.section-title.main { max-width: 18ch; margin-bottom: clamp(2.5rem, 4vw, 4rem); font-family: inherit; font-size: var(--type-section); font-weight: 750; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.section-kicker { margin-bottom: 12px !important; color: #77d7c2 !important; font: 700 .8125rem/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace !important; letter-spacing: .08em; text-transform: uppercase; }

/* Accessibility ----------------------------------------------------------- */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; color: #fff; background: var(--text); border-radius: var(--radius-control); transform: translateY(-140%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

@media (max-width: 720px) {
  body::before { display: none; }
  .section-title.main { font-size: clamp(2.35rem, 11vw, 3rem); }
}