/* ==========================================================================
   Riloq — colour tokens sampled from the logo (see README), not invented.
   Static CSS, no build step, no external font request (system stack, fast
   and keeps the site free of third-party calls).
   ========================================================================== */

:root {
  /* tokens:generated */
  --deep: #1d3fa8;
  --mid: #473fbe;
  --violet: #7a3db9;
  --accent: #8ee3f0;
  --ink: #15161c;
  --muted: #5b5f6b;
  --paper: #ffffff;
  /* /tokens:generated */

  /* role tokens: brand ink for kickers and the focus ring (remapped in dark mode) */
  --brand-ink: var(--mid);
  --focus: var(--mid);

  --grad: linear-gradient(120deg, var(--deep), var(--mid) 52%, var(--violet));
  /* h1 gradient text (large text, SC 1.4.3 >= 3:1 at every point): light mode stays on the
     dark brand stops (mid -> violet, >= 6.5:1 on white) */
  --grad-text: linear-gradient(100deg, var(--mid), var(--violet));

  /* light */
  --paper-2: #f7f7fb;
  --line: rgba(14, 15, 22, 0.1);
  --card: rgba(255, 255, 255, 0.72);
  --shadow: 0 1px 2px rgba(14, 15, 22, 0.04), 0 12px 32px -12px rgba(14, 15, 22, 0.14);
  --shadow-lift: 0 2px 4px rgba(14, 15, 22, 0.05), 0 28px 56px -20px rgba(29, 63, 168, 0.3);

  /* hero glow strength. The two glows are SEPARATE layers, so where they overlap the effective
     alpha is 1 - (1 - g)^2, not g: at 0.35 that was 0.58, and the lede fell to 3.21:1 against a
     4.5 target, the h1 gradient end to 2.35:1 against 3. The earlier "DOM audit, 375px" sign-off
     measured one layer, which is why it passed. 0.20 is also the cap ADR 0001 D11 already records.
     Both drift paths carry a glow core onto the h1 and the lede, so this is not a corner case.
     Only transform is animated, so a translate/scale cannot raise local alpha: 1 - (1 - g)^2 is a
     closed-form worst case over every frame. Animating opacity, filter or a colour stop voids it. */
  --glow-opacity: 0.2;

  --maxw: 72rem;
  --r: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-ink: var(--accent);
    --focus: var(--accent);
    /* dark mode: only the light end of the brand gradient (its 76% point, violet 60% + accent,
       then accent), so every point is >= 5.4:1 on --paper */
    --grad-text: linear-gradient(
      100deg,
      color-mix(in srgb, var(--violet) 60%, var(--accent)),
      var(--accent)
    );
    /* dark: 0.5 put the h1 gradient start (violet 60% + accent) at 2.73:1 over the overlap */
    --glow-opacity: 0.35;
    --paper: #0a0b11;
    --paper-2: #10121c;
    --ink: #f3f4f9;
    --muted: #9ba1b4;
    --line: rgba(255, 255, 255, 0.11);
    --card: rgba(255, 255, 255, 0.045);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 28px 60px -20px rgba(71, 63, 190, 0.5);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* sticky nav is 68px: keep anchor targets and focused elements clear of it (SC 2.4.11) */
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
}

a {
  color: inherit;
}

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

/* skip link: off-screen until keyboard focus, then a solid chip above the nav */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:not(:focus-visible) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: var(--shadow);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  /* solid fallback first: if color-mix() is unsupported the nav stays opaque, never transparent */
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 650;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  text-decoration: none;
  font-size: 15px;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.nav-links a:hover {
  color: var(--ink);
}
/* small screens: links stay visible, on a second row under the brand (no JS menu) */
@media (max-width: 560px) {
  html {
    scroll-padding-top: 124px;
  }
  .nav .wrap {
    flex-wrap: wrap;
    height: auto;
    min-height: 68px;
    padding-block: 8px;
    gap: 4px 12px;
  }
  .brand {
    min-height: 44px;
  }
  .nav-links {
    width: 100%;
    justify-content: space-between;
    gap: 4px;
  }
  .nav-links a {
    font-size: 14.5px;
  }
}

.btn,
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--grad);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}
.btn {
  padding: 15px 28px;
  font-size: 16.5px;
  box-shadow: 0 10px 30px -10px rgba(71, 63, 190, 0.7);
}
.btn-sm {
  padding: 9px 18px;
  min-height: 44px;
  font-size: 14.5px;
}
.btn:hover,
.btn-sm:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 16px 40px -12px rgba(71, 63, 190, 0.75);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--mid) 60%, transparent);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding: clamp(72px, 13vw, 140px) 0 clamp(64px, 10vw, 112px);
  isolation: isolate;
  overflow: hidden;
}
/* soft gradient field behind the hero */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--glow-opacity);
  pointer-events: none;
}
.hero::before {
  width: 46rem;
  height: 46rem;
  top: -22rem;
  left: 50%;
  translate: -62% 0;
  background: radial-gradient(circle, var(--mid), transparent 68%);
  animation: drift-a 13s var(--ease) infinite alternate;
}
.hero::after {
  width: 34rem;
  height: 34rem;
  top: -10rem;
  right: -8rem;
  background: radial-gradient(circle, var(--violet), transparent 66%);
  animation: drift-b 17s var(--ease) infinite alternate-reverse;
}
/* Two paths, not one shared path run backwards. The glows previously differed only in duration and
   direction, so they moved as one object; separate paths read as two lights at different depths.
   Travel and cycle length are set so the motion is actually perceptible — the earlier 5%/7% over
   22s worked out to about 2px per second through a 90px blur, which reads as a static gradient.
   Only transform and opacity are animated, so this stays on the compositor and costs no layout. */
@keyframes drift-a {
  to {
    transform: translate3d(13%, 9%, 0) scale(1.2);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(-11%, 13%, 0) scale(1.16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after {
    animation: none;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 26px;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

h1 {
  font-size: clamp(38px, 7.2vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 22px;
  max-width: 16ch;
}
h1 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(17.5px, 2.2vw, 21px);
  line-height: 1.55;
  /* sits on the hero glow: --muted alone drops to 3.9:1 there in light mode (DOM audit, 683px);
     a 30% step toward --ink keeps >= 4.5:1 over the glow in both schemes */
  color: color-mix(in srgb, var(--muted) 70%, var(--ink));
  max-width: 50ch;
  margin: 0 0 36px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* -------------------------------------------------------------- sections */
section {
  padding: clamp(64px, 9vw, 112px) 0;
}
.section-alt {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}

.kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 14px;
}
h2 {
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 16px;
  max-width: 22ch;
}
.section-intro {
  color: var(--muted);
  max-width: 54ch;
  margin: 0 0 48px;
  font-size: 17.5px;
}

/* ---------------------------------------------------------------- cards */
.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  position: relative;
  padding: 30px 28px 32px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--mid) 45%, transparent);
}
.card .ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--grad);
  margin-bottom: 18px;
  box-shadow: 0 8px 20px -8px rgba(71, 63, 190, 0.8);
}
.card .ico svg {
  width: 21px;
  height: 21px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 {
  font-size: 19.5px;
  letter-spacing: -0.02em;
  margin: 0 0 9px;
  font-weight: 650;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* services grid: 1 / 2 / 3 equal columns, six cards, no orphan (DOM order = visual order) */
.grid-services { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card-list {
  margin: 14px 0 0;
  padding-left: 1.15em;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
.card-list li { margin: 0 0 4px; }
.card-list li::marker { color: var(--brand-ink); }
/* advisory: outlined icon instead of the filled gradient tile */
.card-advisory .ico {
  background: transparent;
  border: 1.5px solid var(--brand-ink);
  box-shadow: none;
}
.card-advisory .ico svg { stroke: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* -------------------------------------------------------------- process */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: step;
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 22px;
  padding-bottom: 36px;
}
.steps li:last-child {
  padding-bottom: 0;
}
/* connecting line */
.steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--line), transparent);
}
.steps .num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 8px 20px -8px rgba(71, 63, 190, 0.8);
}
.steps h3 {
  margin: 10px 0 6px;
  font-size: 19px;
  letter-spacing: -0.02em;
  font-weight: 650;
}
.steps p {
  margin: 0;
  color: var(--muted);
  max-width: 56ch;
}

/* -------------------------------------------------------------- contact */
.panel {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: clamp(40px, 6vw, 68px);
  background: var(--grad);
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 70px -30px rgba(29, 63, 168, 0.8);
}
.panel::after {
  content: '';
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(142, 227, 240, 0.2), transparent 70%);
  pointer-events: none;
}
.panel h2 {
  position: relative;
  z-index: 1;
  color: #fff;
  margin: 0 auto 14px;
  max-width: 18ch;
}
.panel p {
  position: relative;
  z-index: 1;
  color: #fff;
  max-width: 48ch;
  margin: 0 auto 32px;
  font-size: 17.5px;
}
.panel .btn-white {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--deep) !important;
  text-decoration: none;
  font-weight: 650;
  padding: 15px 30px;
  border-radius: 999px;
  position: relative;
  z-index: 1;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.panel .btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
}
.panel .lines {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  font-size: 15.5px;
}
.panel .lines a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #fff;
  text-decoration: none;
}
.panel .lines a:hover {
  text-decoration: underline;
}
/* postal address: full white, not a translucent white — the panel is a gradient, so any opacity
   below 1 reopens the contrast question that was already settled for .lines a at this colour. */
.panel .postal {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  font-size: 14.5px;
  font-style: normal;
  line-height: 1.6;
  color: #fff;
}

/* focus inside the panel: the gradient passes through --mid/--accent tones, so the global ring
   vanishes there. White ring (>= 4.8:1 on every panel point incl. the glow) with a --deep inner
   ring filling the offset gap (>= 9:1 against both the white ring and .btn-white). SC 2.4.7/1.4.11 */
.panel :focus-visible {
  --focus-inner: var(--deep);
  outline-color: #fff;
  box-shadow: 0 0 0 3px var(--focus-inner);
}

/* --------------------------------------------------------------- footer */
footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14.5px;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
}
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- about
   The one section on the page that is about a person, so it gets a surface of
   its own rather than sitting loose in the --section-alt band: same card recipe
   as .card (--card / --line / --shadow / --r), one size up. It is not
   interactive, so it has no hover lift — a surface that moves but cannot be
   clicked reads as a broken affordance (SC 3.2 spirit), and .card's lift is
   what tells you the service tiles are a grid, not a link. */
.about {
  display: grid;
  gap: 26px;
  justify-items: start;
  /* the text is one short paragraph: across the full 72rem wrap the card ran to
     a half-empty right side. Capped and centred, the portrait and the copy read
     as one object and the band around it is deliberate, not leftover. */
  max-width: 56rem;
  margin-inline: auto;
  padding: clamp(26px, 4.4vw, 48px);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
/* 720px, not the 560px nav breakpoint: below this the 168px portrait plus a
   readable measure no longer fit side by side without the text dropping under
   ~34ch, where the paragraph starts to rag badly. */
@media (min-width: 720px) {
  .about {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(34px, 5vw, 58px);
    align-items: center;
  }
  .about-portrait {
    justify-self: start;
  }
}
.about-text {
  min-width: 0;
}
/* inside the card the intro is the last element: the 48px section-intro gutter
   would leave a dead band above the card edge. */
.about .section-intro {
  margin-bottom: 0;
  max-width: 48ch;
}
.about h2 {
  max-width: 17ch;
}

/* The portrait sits in a brand-gradient ring — the same --grad as the service
   icons and the process numbers. It is the only photograph on the site, and the
   ring is what makes it read as part of the system instead of a dropped-in
   asset. Decorative only: the <img> keeps its own alt text, and the ring carries
   no information, so it needs no contrast floor of its own. */
.about-portrait {
  padding: 4px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 14px 34px -14px rgba(71, 63, 190, 0.75);
  line-height: 0;
  /* stacked single column: centred. Left-aligned over a left-aligned paragraph
     it read as an orphan in the corner rather than the subject of the section.
     The two-column layout below puts it back to start, where the grid column
     already does the aligning. */
  justify-self: center;
}
.portrait {
  display: block;
  width: clamp(116px, 17vw, 168px);
  height: clamp(116px, 17vw, 168px);
  border-radius: 50%;
  object-fit: cover;
}