body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, .display {
  font-family: "Exo 2", "Inter", ui-sans-serif, system-ui, sans-serif;
}

@layer components {
  .form-consent {
    --check-bg: #ffffff;
    --check-border: #cbcbcd;
    --check-selected: #1945ff;
    --check-mark: #ffffff;
    --check-focus: #1945ff;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
  }
  .form-consent-dark {
    --check-bg: rgb(255 255 255 / 0.08);
    --check-border: rgb(255 255 255 / 0.4);
    --check-selected: #ffffff;
    --check-mark: #3536b0;
    --check-focus: #b9c6ff;
  }
  .form-consent-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid var(--check-border);
    border-radius: 6px;
    background: var(--check-bg);
    color: var(--check-mark);
  }
  .form-consent-box svg { width: 16px; height: 16px; opacity: 0; }
  .form-consent-text { flex: 1; min-width: 0; }
  .form-consent-input:checked + .form-consent-box {
    background: var(--check-selected);
    border-color: var(--check-selected);
  }
  .form-consent-input:checked + .form-consent-box svg { opacity: 1; }
  .form-consent-input:focus-visible + .form-consent-box {
    outline: 2px solid var(--check-focus);
    outline-offset: 3px;
  }
  .btn-white {
    transition: background-color 180ms ease, box-shadow 220ms ease;
  }
  .btn-white:hover,
  .btn-white:focus-visible {
    box-shadow: 0 0 18px rgb(255 255 255 / 0.3), 0 0 42px rgb(202 212 255 / 0.18);
  }
  .btn-white:disabled { box-shadow: none; }
  .form-status-dark {
    background: rgb(255 255 255 / 0.1);
    color: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(12px);
  }
  /* Standard gap from a section heading to its text, list or cards. */
  .section-copy { margin-top: 40px; }
  @media (min-width: 1024px) {
    .section-copy { margin-top: 48px; }
  }
  .display {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
  }
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-mesh {
  --hero-mesh:
    radial-gradient(ellipse 50% 55% at 6% 0%, rgb(44 80 240 / 0.7) 0%, transparent 68%),
    radial-gradient(ellipse 75% 65% at 50% 50%, rgb(86 72 222 / 0.7) 0%, transparent 72%),
    radial-gradient(ellipse 110% 50% at 35% 112%, #12105a 0%, transparent 70%),
    linear-gradient(135deg, #2c3fd4 0%, #3e36c6 42%, #221d8c 100%);
  --hero-spot: radial-gradient(ellipse 45% 50% at 92% 8%, rgb(200 80 200 / 0.35) 0%, rgb(200 80 200 / 0.1) 45%, transparent 72%);
  background-color: #3434bf;
  background-image: var(--hero-spot), var(--hero-mesh);
}
@media (min-width: 1024px) {
  .hero-mesh {
    --hero-spot: radial-gradient(ellipse 42% 58% at 84% 28%, rgb(206 82 204 / 0.5) 0%, rgb(180 72 200 / 0.2) 40%, transparent 74%);
  }
}

/* Darker than the hero (2026-10-13): same layout of spots, deeper base and softer lights. */
.footer-mesh {
  /* dark mesh (2026-10-14), leaning violet: indigo-violet base, the magenta-violet
     spot on the right a touch stronger, blue kept as a corner glow */
  background-color: #120c3c;
  background-image:
    radial-gradient(ellipse 40% 72% at 82% 30%, rgb(150 64 190 / 0.34) 0%, rgb(125 52 175 / 0.12) 45%, transparent 72%),
    radial-gradient(ellipse 30% 55% at 64% 95%, rgb(100 72 220 / 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 45% 75% at 8% 10%, rgb(48 58 200 / 0.36) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 30% 85%, rgb(70 34 150 / 0.48) 0%, transparent 72%),
    radial-gradient(ellipse 60% 90% at 50% 40%, rgb(34 22 96 / 0.6) 0%, transparent 75%),
    linear-gradient(160deg, #1a1560 0%, #130e46 55%, #0a072c 100%);
}

.btn-brand {
  background-image: linear-gradient(100deg, #1945ff 0%, #6b4cc4 100%);
  color: #fff;
  box-shadow: 0 10px 28px -14px rgb(91 62 198 / 0.7);
}
.btn-brand:hover {
  background-image: linear-gradient(100deg, #143aeb 0%, #5d40b0 100%);
  box-shadow: 0 14px 32px -12px rgb(91 62 198 / 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .btn-brand { transition: none; }
  .btn-white { transition: none; }
}

details[open] .plus { transform: rotate(90deg); color: #1945ff; }
summary:hover .plus { color: #1945ff; }
summary::-webkit-details-marker { display: none; }

.tick { color: #1945ff; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}

details[open] > summary ~ * {
  animation: details-reveal 0.28s ease-out;
}
@keyframes details-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  details[open] > summary ~ * { animation: none; }
}

.rich-text h2 {
  font-family: "Exo 2", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 1.375rem;
  line-height: 1.2;
  color: #1b1b1d;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #dddddf;
}
.rich-text h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rich-text p {
  font-size: 15px;
  line-height: 1.75;
  color: #505054;
  margin-top: 1.25rem;
}
.rich-text ul {
  margin-top: 1.25rem;
  border-top: 1px solid #dddddf;
}
.rich-text li {
  font-size: 15px;
  line-height: 1.7;
  color: #505054;
  padding: 1rem 0 1rem 1.75rem;
  border-bottom: 1px solid #dddddf;
  position: relative;
}
.rich-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 1em;
  height: 1em;
  background-color: #1945ff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rich-text strong { color: #1b1b1d; font-weight: 600; }
.rich-text a { color: #1945ff; text-decoration: underline; text-underline-offset: 3px; }
.rich-text a:hover { text-decoration-color: transparent; }
.rich-text .table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid #dddddf;
  border-radius: 1rem;
}
.rich-text table { width: 100%; min-width: 560px; border-collapse: collapse; }
.rich-text th,
.rich-text td {
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid #dddddf;
}
.rich-text th { background: #f6f6f6; color: #1b1b1d; font-weight: 600; }
.rich-text td { color: #505054; }
.rich-text tbody tr:last-child td { border-bottom: 0; }
.rich-text td:first-child { color: #1b1b1d; font-weight: 500; }

.select-arrow {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231945ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
}


/* Hairline grid (What we care about and the like): cells on one white card,
   divided by short centred strokes (20% of the cell) instead of full rules.
   Columns follow the grid: 1 -> 2 (sm) -> 4 (lg). */
.hairline-grid > * { position: relative; }
.hairline-grid > *::before,
.hairline-grid > *::after { content: ""; position: absolute; background: rgb(80 80 84 / 0.16); display: none; pointer-events: none; }
/* horizontal stroke above a cell */
.hairline-grid > *::before { top: 0; left: 40%; width: 20%; height: 1px; }
/* vertical stroke on the right of a cell */
.hairline-grid > *::after { right: 0; top: 40%; height: 20%; width: 1px; }

.hairline-grid > *:not(:first-child)::before { display: block; }
@media (min-width: 640px) {
  .hairline-grid > *:not(:first-child)::before { display: none; }
  .hairline-grid > *:nth-child(n+3)::before { display: block; }
  .hairline-grid > *:nth-child(odd)::after { display: block; }
}
@media (min-width: 1024px) {
  .hairline-grid > *:nth-child(n+3)::before { display: none; }
  .hairline-grid > *:nth-child(odd)::after { display: none; }
  .hairline-grid > *:not(:nth-child(4n))::after { display: block; }
}
/* Full-length dividers instead of the short centred strokes (Working with us: What we offer). */
.hairline-grid.hairline-grid-full > *::before { left: 0; width: 100%; }
.hairline-grid.hairline-grid-full > *::after { top: 0; height: 100%; }
/* 3-column variant from lg (Working with us: What we offer, 6 cells). */
@media (min-width: 1024px) {
  .hairline-grid.hairline-grid-3 > *::after { display: none; }
  .hairline-grid.hairline-grid-3 > *:not(:nth-child(3n))::after { display: block; }
  .hairline-grid.hairline-grid-3 > *:nth-child(n+4)::before { display: block; }
}

/* Typewriter caret (assets/js/typewriter.js). Negative right margin cancels its
   width, so the caret never pushes the text it walks along. */
.tw-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.04em;
  margin-right: -0.1em;
  vertical-align: -0.04em;
  background: currentColor;
  animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
/* Dark variant (photo sections): light dividers. */
.hairline-grid-dark > *::before,
.hairline-grid-dark > *::after { background: rgb(255 255 255 / 0.16); }

/* Photo section (trial 2026-10-13): photo background + brand tint, white text.
   Markup: <section class="photo-bg ..."><img class="photo-bg-img" ...><div class="photo-bg-tint"></div>...
   The photo file is never edited; tone it here. */
.photo-bg { position: relative; isolation: isolate; overflow: hidden; background-color: #13186c; color: #fff; }
.photo-bg-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photo-bg-tint {
  position: absolute; inset: 0; z-index: -1;
  /* closer to the hero mesh: saturated blue to violet, a magenta glow top right */
  background:
    radial-gradient(ellipse 45% 60% at 92% 10%, rgb(206 82 204 / 0.38) 0%, rgb(180 72 200 / 0.12) 45%, transparent 72%),
    linear-gradient(100deg, rgb(24 30 140 / 0.9) 0%, rgb(44 56 205 / 0.8) 55%, rgb(78 58 205 / 0.72) 100%);
}
/* Dark form (contact-form.php, $formTone = 'dark'): pale arrow, readable options. */
.select-arrow-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.select-arrow-light option { color: #1b1b1d; background: #fff; }

/* One gradient across separate tiles, any layout (row, list, bento).
   The grid paints the gradient; every tile is transparent and draws a white
   ring exactly as wide as the gap (box-shadow spread), so the gaps read as page
   background and the tiles share one continuous gradient. Set --tint-gap to the
   grid gap and give the grid the same radius as its tiles. White pages only.
   Variants: .tint-soft (Our philosophy, About: What we do), .tint-blue (bento),
   .tint-violet and .tint-pink (spare, more saturated),
   .tint-blue (What we build: bento). */
.tint-grid { overflow: hidden; background: var(--tint); }
.tint-grid > * { background: transparent; box-shadow: 0 0 0 var(--tint-gap, 1rem) #fff; }
/* Large radii (36px+): the white ring leaves grey wedges where rounded corners
   meet the grid edge. .tint-tiles drops the shared gradient instead: every tile
   paints the tint itself, the grid stays transparent. */
.tint-grid.tint-tiles { overflow: visible; background: none; }
.tint-grid.tint-tiles > * { background: var(--tint); box-shadow: none; }
.tint-violet {
  --tint:
    radial-gradient(ellipse 45% 90% at 85% 0%, rgb(196 182 246 / 0.75) 0%, transparent 70%),
    radial-gradient(ellipse 40% 80% at 10% 100%, rgb(186 196 250 / 0.55) 0%, transparent 70%),
    linear-gradient(110deg, #f2f1f8 0%, #e9e6f6 55%, #e0daf4 100%);
}
.tint-pink {
  --tint:
    radial-gradient(ellipse 60% 70% at 90% 0%, rgb(240 190 214 / 0.6) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgb(226 200 232 / 0.5) 0%, transparent 70%),
    linear-gradient(160deg, #f5f1f3 0%, #f0e7ed 55%, #ebe0e8 100%);
}
.tint-blue {
  /* lighter, more neutral grey-blue (2026-10-13) */
  --tint:
    radial-gradient(ellipse 60% 70% at 90% 0%, rgb(204 218 242 / 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgb(218 226 240 / 0.5) 0%, transparent 70%),
    linear-gradient(160deg, #f6f7f9 0%, #f0f3f7 55%, #eaeef5 100%);
}
/* Lighter, more neutral violet-grey (About: What we do). */
.tint-soft {
  --tint:
    radial-gradient(ellipse 60% 70% at 90% 0%, rgb(214 208 240 / 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgb(222 222 238 / 0.5) 0%, transparent 70%),
    linear-gradient(160deg, #f6f6f9 0%, #f1f0f6 55%, #ecebf3 100%);
}

/* Subtle blue-violet fill for Our philosophy cards. */
.tint-philosophy {
  --tint:
    radial-gradient(ellipse 60% 75% at 95% 0%, rgb(211 200 247 / 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 50% 85% at 0% 100%, rgb(200 215 252 / 0.4) 0%, transparent 70%),
    linear-gradient(130deg, #f0f3ff 0%, #edf0fc 55%, #eee9fb 100%);
}

/* Cool variant of the photo tint:
   slate blue-grey instead of the blue-to-violet brand wash, no magenta glow. */
.photo-bg-cool { background-color: #14205a; }
.photo-bg-cool .photo-bg-tint {
  background:
    radial-gradient(ellipse 50% 60% at 90% 8%, rgb(90 130 240 / 0.28) 0%, transparent 70%),
    linear-gradient(100deg, rgb(8 14 52 / 0.93) 0%, rgb(14 28 88 / 0.86) 55%, rgb(24 42 116 / 0.78) 100%);
}

/* Layered section: big rounded top corners, slides up over the previous
   section by the same radius. Used point by point, see /design-system. */
.layer-up {
  --layer-radius: 24px;
  position: relative;
  z-index: 10;
  margin-top: -24px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
@media (min-width: 640px) {
  .layer-up { --layer-radius: 48px; margin-top: -48px; border-top-left-radius: 48px; border-top-right-radius: 48px; }
}
@media (min-width: 1024px) {
  .layer-up { --layer-radius: 75px; margin-top: -75px; border-top-left-radius: 75px; border-top-right-radius: 75px; }
}
/* Rounded bottom for a layered sheet (same radii as .layer-up). */
.layer-round-bottom { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
@media (min-width: 640px) {
  .layer-round-bottom { border-bottom-left-radius: 48px; border-bottom-right-radius: 48px; }
}
@media (min-width: 1024px) {
  .layer-round-bottom { border-bottom-left-radius: 75px; border-bottom-right-radius: 75px; }
}


/* Any section (or the footer) with .layer-up rounds its top and slides over the
   previous one; the previous one gets the matching extra bottom room here, so
   its own background shows in the rounded corners. No manual padding needed. */
:has(+ .layer-up)::after { content: ""; display: block; height: 24px; }
@media (min-width: 640px) {
  :has(+ .layer-up)::after { height: 48px; }
}
@media (min-width: 1024px) {
  :has(+ .layer-up)::after { height: 75px; }
}