/* ==========================================================================
   Alziator — site design system
   Originally ported from a "Landing Page" Claude Design file.
   ========================================================================== */

:root {
  /* Page surfaces and text — these flip with the scroll theme. */
  --bg: #f4f2ed;
  --ink: #14140f;
  --body: #45453e;
  --muted: #6a6a62;
  --faint: #b4b2a9;
  --line: #dedbd2;
  --paper: #ffffff;
  --hatch-a: #edeae2;
  --hatch-b: #f6f4ef;
  --accent: #c13d34;

  /* The contact panel is always the opposite of the page, so its inner
       text/line colours flip too. Its background is var(--ink). */
  --inv-strong: #c9c7be;
  --inv-muted: #9a9890;
  --inv-line: #6a6a5f;
  --inv-divider: #3f3f36;
  --inv-accent: #ee7259;

  /* The menu overlay covers the whole viewport and has no surrounding page
       to contrast against, so it stays dark in both themes. Never flips. */
  --od-bg: #14140f;
  --od-fg: #f4f2ed;
  --od-muted: #9a9890;
  --od-faint: #b4b2a9;
  --od-accent: #ee7259;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg: #14140f;
  --ink: #f4f2ed;
  --body: #c9c7be;
  --muted: #9a9890;
  --faint: #b4b2a9;
  --line: #3f3f36;
  --paper: #292820;
  --hatch-a: #24231c;
  --hatch-b: #1b1a15;
  --accent: #ee7259;

  --inv-strong: #45453e;
  --inv-muted: #6a6a62;
  --inv-line: #8c8a80;
  --inv-divider: #dedbd2;
  --inv-accent: #c13d34;
}

/* The dark red is L=0.55, not the 0.58 first specified: 0.58 resolves to
   #CB473D, which is only 4.16:1 on cream — below AA both as accent text on the
   page and as the panel's error text once the page theme flips. 0.55 gives
   4.71:1 in both directions and is the same red to the eye. The hex fallbacks
   above are the sRGB values these oklch colours resolve to, so a browser
   without oklch support gets the same measured contrast. */
@supports (color: oklch(0.55 0.17 28)) {
  :root {
    --accent: oklch(0.55 0.17 28);
    --inv-accent: oklch(0.72 0.17 28);
    --od-accent: oklch(0.72 0.17 28);
  }
  :root[data-theme="dark"] {
    --accent: oklch(0.72 0.17 28);
    --inv-accent: oklch(0.55 0.17 28);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Theme cross-fade. Elements with their own `transition` shorthand override
   this, so every such rule below repeats these properties explicitly. */
body,
body * {
  transition:
    background-color 480ms var(--ease),
    border-color 480ms var(--ease),
    color 480ms var(--ease);
}

body.is-locked {
  overflow: hidden;
}

/* Hover feedback must stay immediate. The 480ms base fade above also lands on
   elements that only ever changed colour on hover, which makes them feel
   sluggish, so they get an explicit 160ms colour transition — the same
   duration .arrow-link and .lp-submit already use. `body a` keeps the
   specificity at 0,0,2, equal to `body *`, so it wins on source order. */
body a,
.menu-btn,
.lp-footer a,
.contact-meta-item a {
  transition:
    color 160ms var(--ease),
    background-color 160ms var(--ease),
    border-color 160ms var(--ease);
}

a {
  color: var(--ink);
  text-decoration: none;
}
a:hover {
  color: var(--accent);
}

/* --bg, not #fff: the accent flips with the theme, so a fixed white would sit
   on the light red of the dark theme at 2.67:1. --bg is always the opposite. */
::selection {
  background: var(--accent);
  color: var(--bg);
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* --------------------------------------------------------------- layout - */

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.rule {
  height: 1px;
  background: var(--line);
}

/* ------------------------------------------------------------ type bits - */

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.h-display {
  font-size: clamp(38px, 6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.h-section {
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.h-section .soft {
  color: var(--muted);
}

.lead {
  font-size: 19px;
  line-height: 1.45;
  color: var(--body);
  max-width: 380px;
}

.copy {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  max-width: 520px;
}

/* ---------------------------------------------------------------- links - */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition:
    color 160ms var(--ease),
    gap 240ms var(--ease),
    background-color 480ms var(--ease),
    border-color 480ms var(--ease);
}

.arrow-link:hover {
  color: var(--ink);
  gap: 14px;
}

.pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  transition:
    background-color 240ms var(--ease),
    color 240ms var(--ease),
    border-color 480ms var(--ease);
}

.pill:hover {
  background: var(--ink);
  color: var(--bg);
}

.pill--solid {
  background: var(--ink);
  color: var(--bg);
  padding: 18px 30px;
  font-size: 16px;
}

.pill--solid:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ------------------------------------------------------------------ hero - */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 0 64px;
}

/* A direct child of .wrap/main on every page, including the homepage — kept out of .hero
   precisely so it can stick: position: sticky only sticks within its own containing block, and
   .hero is one snap section among several, not the whole scrollable page. --bg is opaque and
   already the same colour as the page around it (and flips with it — see the theme cross-fade
   above), so this only needs to occlude what scrolls up underneath it, not to match a colour. */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 40px 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand:hover {
  color: var(--ink);
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 4px 0;
  color: var(--ink);
  cursor: pointer;
}

.menu-btn:hover {
  color: var(--accent);
}

.menu-btn-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}

.menu-btn-bars span {
  height: 1px;
  background: currentColor;
  display: block;
}

/* Hidden by default (the overlay menu covers phones/tablets) and swapped in for the hamburger
   once there is room for it inline — same breakpoint at which the rest of the layout drops its
   mobile single-column stacking (see the max-width: 900px block below). */
.topbar-right {
  display: none;
  align-items: center;
  gap: 32px;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.topbar-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.topbar-nav a:hover {
  color: var(--ink);
}
.topbar-nav a[aria-current="page"] {
  color: var(--ink);
}

.topbar-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
}

.topbar-cta:hover {
  background: var(--accent);
  color: var(--bg);
}

@media (min-width: 901px) {
  .topbar-right {
    display: flex;
  }
  .menu-btn {
    display: none;
  }
}

.hero-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
  padding: clamp(72px, 14vh, 168px) 0 0;
}

.hero-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 14px;
}

/* Same separator mechanic as .breadcrumbs: each li is its own flex row, so ::after renders as a
   trailing flex item spaced by the li's own gap, instead of a separate margin fighting the ul's. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.hero-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-facts li:not(:last-child)::after {
  content: "\00b7";
  color: var(--line);
}

.hero-tags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.hero-tags span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ------------------------------------------------------------- snapping - */

/* The document's scroll container is <html>, so scroll-snap-type has to live
   there — setting it on <body> does nothing. Only the home page emits
   class="snap", which keeps every other page scrolling normally. */
html.snap {
  scroll-snap-type: y proximity;
}

/* Mandatory only where every panel actually fits, which takes TWO bounds:

   - Height: with the padding drop below, the tallest text panel (FAQ, accordion
     closed) is about 796px, so 820px is the shortest viewport it still fits in.
   - Width: the `max-width: 1100px` block in the responsive section drops
     .industry-grid to two columns, and .industry's `aspect-ratio: 4/3` then makes
     #industries far taller than the viewport — about 1157px at 1024x820 and
     1189px at 1100x830, i.e. ~140% of the height. So mandatory has to start
     ABOVE that breakpoint, where the grid is still four columns and the panel
     fits in 100%; the old 1024px bound put the two-column reflow inside the
     mandatory band, and panel tops there stopped being viewport multiples.

   Everywhere else, proximity — it never fights momentum scrolling, a panel that
   has grown past the viewport, or an anchor jump. */
@media (min-width: 1101px) and (min-height: 820px) {
  html.snap {
    scroll-snap-type: y mandatory;
  }
}

.snap-section {
  min-height: 100vh; /* fallback for browsers without svh */
  min-height: 100svh; /* svh does not jump when the mobile URL bar hides */
  scroll-snap-align: start;
}

/* The footer sits after the last panel and is not a .snap-section, so without a
   snap position of its own it lands outside every snap area: under mandatory
   snapping the scroll cannot rest past the last snap position (.cta-block's
   start), and the footer — Privacy Policy, Terms, the registered entity and the
   copyright line — becomes literally unreachable on the home page. Aligning its
   END to the snapport's end puts a snap position at exactly the maximum scroll
   offset, so the bottom of the document is a legitimate resting place. Scoped to
   html.snap so the non-snapping pages are untouched, and .cta-block keeps its own
   full-screen snap position, so the closing panel still reads as one screen. */
html.snap .lp-footer {
  scroll-snap-align: end;
}

/* Two classes, so this override does not depend on where it sits in the file. */
.section.snap-section,
.cta-block.snap-section {
  padding: 96px 0;
}

/* Centring is per-panel, matched to each panel's existing layout mode. A blanket
   `display: flex` here would collapse #about — it is .section-split, a two-column
   grid — and the two selectors have equal specificity, so the outcome would
   depend on rule order. The hero is deliberately absent: it pins .hero-tags with
   margin-top:auto, which centring would destroy. */
#about.snap-section {
  align-content: center;
}

#services.snap-section,
#technology.snap-section,
#faq.snap-section,
.cta-block.snap-section {
  justify-content: center;
}

/* The only panel whose display changes. It has two children in normal flow and
   .industry-grid keeps its margin-top, so flex column is visually equivalent. */
#industries.snap-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --------------------------------------------------------------- section - */

.section {
  padding: 128px 0;
}

.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.section-split .h-section {
  max-width: 560px;
}

.section-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 10px;
}

.section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-bottom: 64px;
}

.section-label .count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
}

/* -------------------------------------------------------------- services - */

.services {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Same card component as .card-grid, just four-up instead of three — a dedicated grid rather
   than reusing .card-grid's column count, so this doesn't leave an orphan fourth card. */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 64px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  transition:
    border-color 240ms var(--ease),
    transform 320ms var(--ease),
    background-color 480ms var(--ease),
    color 480ms var(--ease);
}

.card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}

.card-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.card-title {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.card-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

/* ------------------------------------------------------------ technology - */

.tech {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  transition:
    border-color 240ms var(--ease),
    background-color 480ms var(--ease),
    color 480ms var(--ease);
}

.step:hover {
  border-top-color: var(--ink);
}

.step-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.step-title {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.step-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}

/* ------------------------------------------------------------ industries - */

.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 64px;
}

.industry {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 4px;
  /* The hatch is split into an animatable layer and a static one: Chrome
       does not interpolate background-image, so the --hatch-b half is painted
       as background-color (which does fade) and the gradient only draws the
       --hatch-a stripes over it. Renders identically to the two-stop gradient
       it replaces — the stops are coincident, so there is no blend zone. */
  background-color: var(--hatch-b);
  background-image: repeating-linear-gradient(
    135deg,
    var(--hatch-a) 0 10px,
    transparent 10px 20px
  );
  display: flex;
  align-items: flex-end;
  padding: 20px;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  transition:
    background-color 320ms var(--ease),
    color 320ms var(--ease),
    border-color 320ms var(--ease);
}

.industry:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* ------------------------------------------------------------------- faq - */

.faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 20px;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item > summary {
  display: grid;
  grid-template-columns: 60px 1fr 24px;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  transition:
    padding-left 320ms var(--ease),
    background-color 480ms var(--ease),
    color 480ms var(--ease);
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-item > summary:hover {
  padding-left: 12px;
}

.faq-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.faq-q {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.faq-sign {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--muted);
  justify-self: end;
  transition:
    transform 320ms var(--ease),
    background-color 480ms var(--ease),
    color 480ms var(--ease),
    border-color 480ms var(--ease);
}

.faq-item[open] .faq-sign {
  transform: rotate(45deg);
}

.faq-a {
  display: grid;
  grid-template-columns: 60px 1fr 24px;
  gap: 24px;
  padding: 0 0 28px;
}

.faq-a p {
  grid-column: 2;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  max-width: 620px;
}

/* -------------------------------------------------------------- contact - */

.statement {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.statement span {
  font-size: clamp(30px, 4.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.statement span:nth-child(2) {
  padding-left: 8%;
}
.statement span:nth-child(3) {
  padding-left: 16%;
  color: var(--muted);
}

.contact-panel {
  padding: 48px;
  background: var(--ink);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 96px;
}

.contact-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-intro .mono {
  color: var(--inv-strong);
}

.contact-intro p {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--bg);
  max-width: 440px;
}

.next-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
}

.next-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--inv-divider);
}

.next-step .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--inv-muted);
}

.next-step .t {
  font-size: 15px;
  line-height: 1.55;
  color: var(--inv-strong);
}

.next-step .t b {
  display: block;
  color: var(--bg);
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-meta {
  padding: 64px 0 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.contact-meta-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.contact-meta-item p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.contact-meta-item a {
  color: var(--ink);
}
.contact-meta-item a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------ form - */

.lp-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--inv-line);
  padding: 14px 0 10px;
  transition:
    border-color 240ms var(--ease),
    background-color 480ms var(--ease),
    color 480ms var(--ease);
}

.lp-field:focus-within {
  border-bottom-color: var(--bg);
}

.lp-field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inv-strong);
}

.lp-field label .opt {
  color: var(--inv-muted);
}

.lp-field input,
.lp-field select,
.lp-field textarea {
  font-family: var(--sans);
  font-size: 18px;
  background: transparent;
  border: 0;
  color: var(--bg);
  outline: none;
  padding: 0;
  width: 100%;
  resize: vertical;
}

.lp-field textarea {
  min-height: 84px;
  line-height: 1.5;
}

.lp-field input::placeholder,
.lp-field textarea::placeholder {
  color: var(--inv-muted);
}

/* Custom-drawn chevron, not a background-image icon — matches the rest of the
   site's type-only iconography (the &rarr;/&#8599; arrows used elsewhere). */
.lp-select {
  position: relative;
}

.lp-select select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 24px;
}

.lp-select::after {
  content: '\25BE';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--inv-muted);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

.lp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
}

.lp-submit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  color: var(--bg);
  cursor: pointer;
  padding: 0;
  transition: color 160ms var(--ease);
}

.lp-submit:hover {
  color: var(--inv-accent);
}

.lp-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--inv-muted);
}

.lp-note.is-ok {
  color: var(--inv-strong);
}
.lp-note.is-error {
  color: var(--inv-accent);
}

/* ---------------------------------------------------------------- footer - */

.lp-footer {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0 56px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.6;
}

.lp-footer .brand,
.lp-footer .brand:hover {
  color: var(--ink);
  font-family: var(--sans);
}

.lp-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.lp-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-footer-h {
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lp-footer a {
  color: var(--muted);
}
.lp-footer a:hover {
  color: var(--ink);
}

.lp-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------- overlay - */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--od-bg);
  color: var(--od-fg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  overflow-y: auto;
  transform: translateY(-101%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 640ms cubic-bezier(0.7, 0, 0.2, 1),
    opacity 320ms var(--ease);
}

.overlay.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.overlay-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

.overlay .brand,
.overlay .brand:hover {
  color: var(--od-fg);
}

.overlay .brand-mark {
  background: var(--od-fg);
}

.overlay-close {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  color: var(--od-fg);
  cursor: pointer;
  padding: 4px 0;
}

.overlay-close:hover {
  color: var(--od-accent);
}

.overlay-nav {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

.overlay-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overlay-links a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-size: clamp(32px, 5.4vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--od-fg);
  transition:
    color 160ms var(--ease),
    padding-left 320ms var(--ease);
}

.overlay-links a:hover {
  color: var(--od-accent);
  padding-left: 16px;
}

.overlay-links .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--od-muted);
}

.overlay-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--od-faint);
  padding-bottom: 12px;
}

.overlay-aside .h {
  color: var(--od-muted);
}
.overlay-aside a {
  color: var(--od-faint);
}
.overlay-aside a:hover {
  color: var(--od-fg);
}

/* -------------------------------------------------------- cookie banner - */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  max-width: 1040px;
}

.cookie-banner-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
}
.cookie-banner-copy a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cookie-banner-copy a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex: none;
  margin-left: auto;
}

.cookie-banner-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    color 160ms var(--ease),
    border-color 160ms var(--ease);
}

.cookie-banner-btn-decline {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.cookie-banner-btn-decline:hover {
  background: var(--ink);
  color: var(--bg);
}

.cookie-banner-btn-accept {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--bg);
}
.cookie-banner-btn-accept:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

@media (min-width: 641px) {
  .cookie-banner-copy {
    font-size: 15px;
  }
  .cookie-banner-btn {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }
  /* Two classes' worth of specificity, not source order, is what has to win here: .wrap's
       own `padding: 0 24px` (max-width: 900px) sets padding-top back to 0 via that shorthand,
       and it sits later in the file than this rule. */
  .cookie-banner .cookie-banner-inner {
    padding: 24px;
  }
  .cookie-banner-actions {
    flex-direction: column-reverse;
  }
  .cookie-banner-btn {
    justify-content: center;
  }
}

.mail-sink {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  visibility: hidden;
}

/* ------------------------------------------------------------- breadcrumbs - */

.breadcrumbs {
  padding-top: 32px;
}

.breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs li:not(:last-child)::after {
  content: "/";
}
.breadcrumbs a {
  color: var(--muted);
}
.breadcrumbs a:hover {
  color: var(--ink);
}
.breadcrumbs li[aria-current="page"] {
  color: var(--ink);
}

/* ------------------------------------------------------------- page head - */

/* Breadcrumbs already add their own top gap below the topbar, so the page-head's usual 88px
   would stack on top of it and blow out the rhythm. */
.breadcrumbs + .page-head {
  padding-top: 40px;
}

.page-head {
  padding: 88px 0 72px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
  border-bottom: 1px solid var(--line);
}

.page-head-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 12px;
}

.page-head + .section,
.page-head + .contact-meta {
  padding-top: 72px;
}

.page-head + .prose {
  padding-top: 56px;
}

.page-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* -------------------------------------------------------- service rows - */

.service-rows {
  display: flex;
  flex-direction: column;
}

/* Only when it follows a .section-split intro (About's industries list) — on /services and
   /technology .service-rows sits right after a bare .section-label, which already has its own
   spacing, so this must not apply there too. */
.section-split + .service-rows {
  margin-top: 64px;
}

.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.1fr;
  gap: 48px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.service-row .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 8px;
}

.service-row h2,
.service-row h3 {
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.service-row p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  max-width: 560px;
}

/* -------------------------------------------------------------- measures - */

.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cta-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 112px 0;
}

/* ----------------------------------------------------------------- prose - */

.prose {
  max-width: 860px;
  padding: 64px 0 96px;
}

.prose > .intro {
  font-size: 19px;
  line-height: 1.6;
  color: var(--body);
  padding-bottom: 8px;
}

.prose h2 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.prose p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  margin: 0 0 18px;
}

.prose p strong {
  color: var(--ink);
  font-weight: 600;
}

.prose ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.prose ul li {
  position: relative;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  padding: 0 0 10px 22px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 1px;
  background: var(--faint);
}

.prose dl {
  margin: 0;
}
.prose dl dt:empty {
  display: none;
}

.prose dl dt {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.prose dl dd {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
}

.prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.prose a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* ----------------------------------------------------------- responsive - */

@media (max-width: 1100px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .step-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .wrap {
    padding: 0 24px;
  }
  .section {
    padding: 96px 0;
  }
  .hero-head {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 64px;
    align-items: start;
  }
  .hero-aside {
    padding-bottom: 0;
  }
  .lead {
    max-width: none;
  }
  .hero-tags {
    grid-template-columns: repeat(2, 1fr);
  }
  .h-display br {
    display: none;
  }
  .section-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px 24px;
  }
  .overlay {
    padding: 24px;
  }
  .overlay-nav {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .page-head {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    padding: 56px 0 48px;
  }
  .page-head-aside {
    padding-bottom: 0;
  }
  .service-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 0;
  }
  .service-row .num {
    padding-top: 0;
  }
  /* Second class only to match the specificity of `.cta-block.snap-section`
       in the snapping section; without it the home page keeps 96px on phones
       while the identical block on the subpages drops to 80px. */
  .cta-block,
  .cta-block.snap-section {
    padding: 80px 0;
  }
  .prose {
    padding: 48px 0 72px;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding: 0 0 56px;
  }
  .topbar {
    padding-top: 24px;
  }
  .card-grid,
  .step-grid,
  .industry-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }
  .industry {
    aspect-ratio: auto;
    padding: 20px;
  }
  .contact-meta {
    grid-template-columns: 1fr;
    padding: 40px 0 64px;
  }
  .hero-tags {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .faq-item > summary {
    grid-template-columns: 1fr 24px;
    gap: 16px;
  }
  .faq-num {
    display: none;
  }
  .faq-a {
    grid-template-columns: 1fr;
  }
  .faq-a p {
    grid-column: 1;
  }
  .statement span:nth-child(2),
  .statement span:nth-child(3) {
    padding-left: 0;
  }
  .lp-footer-cols {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  html.snap {
    scroll-snap-type: none;
  }
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}