/* ---------------------------------------------------------------------------
   Reley Fast Software Ltd — site stylesheet
   One file. No framework, no build step, no dependencies. Open index.html.

   Design intent: "instrument grade". A near-black field, hairline rules doing
   the structural work, purple used as a signal rather than a wash, and one
   motif carried all the way through — a horizontal light streak, taken from
   the approved RFS mark's own speed lines.

   THE APPROVED MARK IS NEVER EDITED. `assets/rfs-logo.png` is a 1536x1024
   emissive lockup on solid black. It is scaled and cropped with CSS only
   (see .mark below), and composited with mix-blend-mode:screen so its black
   ground drops out and the swoosh reads as light on the page rather than as a
   logo sitting in a black box. Same for assets/rfpg-mark.svg, which is the
   approved sonar mark, byte for byte.
   --------------------------------------------------------------------------- */

/* ============================================================ 1. RESET  === */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--sub);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  letter-spacing: -.011em;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
::selection { background: rgba(192, 90, 245, .32); color: #fff; }

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

/* ====================================================== 2. THE FIELD  === */
/* The mockup's defining background: a near-flat black ground with a sparse
   constellation across it. Fixed, so the page moves across the star map
   rather than dragging it along.

   CHANGED 10 Sep 2026 to match the approved mockup. The previous build put a
   68px technical grid and three strong purple washes here. The mockup has
   neither: its ground is essentially flat black, and the only real purple
   glow on the page is the one the RFS mark throws (.hero-aura). The washes
   below are kept but taken down from .17/.075/.10 to a third of that, so they
   lift the corners without becoming a colour field. */

.bg-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% -8%,   rgba(147, 51, 234, .055), transparent 64%),
    radial-gradient(760px 560px at -8% 26%,   rgba(192, 90, 245, .030), transparent 62%),
    radial-gradient(1100px 700px at 50% 118%, rgba(147, 51, 234, .040), transparent 66%),
    var(--void);
}

/* The constellation. Held in assets/constellation.svg — one file, so all four
   pages carry the same star map and it stays hand-editable. `cover` scales it
   proportionally and crops, which keeps the triangulated clusters pinned to
   the left and right margins at every viewport shape. */
.bg-field::before {
  content: "";
  position: absolute;
  inset: -4% -4%;                      /* headroom for the drift below */
  background: url("constellation.svg") center / cover no-repeat;
  opacity: .7;                         /* set by eye against the mockup */
}
/* A drift slow enough that you never catch it moving, only notice the map is
   not quite where you left it. 4% of a viewport over two minutes. */
@media (prefers-reduced-motion: no-preference) {
  .bg-field::before { animation: drift 150s ease-in-out infinite alternate; }
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-2.2%, -1.6%, 0); }
}

.bg-field::after {                        /* grain */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

/* ================================================== 3. TYPOGRAPHY  === */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.45rem, 6.1vw, 4.55rem);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -.042em;
  margin-bottom: .34em;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}

h3 {
  font-size: 1.09rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.022em;
  margin-bottom: .55em;
}

h4 {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-bottom: .4em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--ink); font-weight: 600; }
em { font-style: italic; color: var(--ink); }

.lead {
  font-size: clamp(1.06rem, 1.9vw, 1.28rem);
  line-height: 1.55;
  letter-spacing: -.017em;
  color: var(--sub);
  max-width: 60ch;
}

.prose { max-width: 68ch; }
.prose p + h3 { margin-top: 2em; }

a {
  color: var(--violet);
  text-decoration-color: rgba(192, 90, 245, .38);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
a:hover { color: #DFA8FF; text-decoration-color: currentColor; }

/* Figures — prices, company numbers, dates. Tabular so columns line up, tight
   so they read as data rather than as prose. */
.fig {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  color: var(--ink);
}

/* ==================================================== 4. LAYOUT  === */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.bay { padding-block: var(--bay); }
.bay-tight { padding-block: calc(var(--bay) * .6); }
.bay + .bay { padding-top: 0; }
/* The hero already carries its own bottom padding; a full bay on top of that
   opened a 270px hole between the fold and the first section. */
main > .bay:first-child { padding-top: clamp(14px, 2.4vw, 32px); }

.hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

/* The velocity rule — the site's signature divider. A hairline with a bright
   node riding along it, echoing the streaks in the RFS mark. Purely
   decorative; it is aria-hidden wherever it appears. */
.streak {
  position: relative;
  height: 3px;
  border: 0;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, #4a2f77 26%, #4a2f77 74%, transparent)
              center / 100% 1px no-repeat;
}
.streak::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--violet), #fff, var(--violet), transparent);
  filter: blur(.5px);
  opacity: 0;
}
.js .streak.in-view::after { animation: streakRun 4.6s var(--ease) .2s infinite; }

@keyframes streakRun {
  0%          { left: -12%; opacity: 0; }
  12%         { opacity: .85; }
  62%         { opacity: .85; }
  78%, 100%   { left: 100%; opacity: 0; }
}

/* Section heading block: 01 / CAPABILITY over the H2. Reads like a spec
   sheet, which is exactly the register this company trades in. */
.sec-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--dim);
}
.sec-label .idx {
  font-variant-numeric: tabular-nums;
  color: var(--violet);
  letter-spacing: .1em;
}
.sec-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.sec-head { max-width: 66ch; margin-bottom: clamp(32px, 4vw, 52px); }
/* On a wide screen a heading and its supporting sentence stacked in one 66ch
   column leaves half the page empty and makes the H2 wrap three times. Split
   puts the statement on the left and the qualification alongside it. */
@media (min-width: 900px) {
  .sec-head.split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(36px, 5vw, 80px);
    align-items: end;
    max-width: none;
  }
  .sec-head.split .sec-label { grid-column: 1 / -1; }
  .sec-head.split h2 { margin-bottom: 0; align-self: end; }
  .sec-head.split p  { max-width: 46ch; align-self: end; margin-bottom: 0; }
}
.sec-head h2 { margin-bottom: .42em; }
.sec-head p  { color: var(--sub); max-width: 62ch; }

/* ==================================================== 5. HEADER  === */

/* The scrim is not decoration. `position: sticky` always opens a stacking
   context, so a mix-blend-mode child inside the header has only the header's
   own painted background as its backdrop. With no background at all, the
   mark's black ground has nothing to screen against and renders as a visible
   black block. The scrim gives it that backdrop, and doubles as a legibility
   gradient over the hero. */
/* The mockup's bar is slim, sits on a permanent hairline, and is otherwise
   almost invisible: a small lockup on the left, three tracked labels, one
   filled pill. Changed 10 Sep 2026 from the previous build's 74px bar with a
   typographic wordmark beside the mark. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7, 4, 13, .96) 0%, rgba(7, 4, 13, .80) 70%, rgba(7, 4, 13, .55) 100%);
  transition: background .28s var(--ease), border-color .28s var(--ease),
              backdrop-filter .28s var(--ease);
}
.masthead.stuck {
  background: rgba(7, 4, 13, .80);
  border-bottom-color: var(--line-2);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
.masthead .shell {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  padding-block: 9px;
}

/* --- the mark ---------------------------------------------------------
   The approved PNG is scaled and cropped by positioning it inside a clipping
   window. Percentages are derived from a pixel measurement of the file:
   the RFS band occupies x 0.19-0.885, y 0.295-0.590 of the 1536x1024 source.
   The file itself is untouched. mix-blend-mode:screen drops its black ground.
   ---------------------------------------------------------------------- */
.mark {
  position: relative;
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
  line-height: 0;
  mix-blend-mode: screen;
}
/* max-width:none is load-bearing. The global `img { max-width: 100% }` in the
   reset would otherwise clamp the oversized crop back to the window width and
   show the wrong part of the file. */
.mark img { position: absolute; display: block; max-width: none; }

.mark-rfs {                       /* RFS band only, no strapline */
  width: 122px;
  aspect-ratio: 1067 / 284;
}
.mark-rfs img { width: 143.9%; left: -27.3%; top: -106.4%; }

.mark-lockup {                    /* full lockup, strapline included */
  width: min(430px, 74vw);
  aspect-ratio: 1183 / 456;
}
.mark-lockup img { width: 129.9%; left: -14.9%; top: -65.2%; }

/* In the mockup the header carries the full lockup, small, with no wordmark
   set beside it. The strapline is illegible at that size by design: it reads
   as a mark, and the lockup is the approved artwork rather than a rebuild. */
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  min-width: 0;
}
.brand:hover { text-decoration: none; }
.brand .mark-lockup { width: 86px; transition: opacity .2s var(--ease); }
.brand:hover .mark-lockup { opacity: .82; }

/* --- nav: small caps, widely tracked, exactly as drawn --- */
.nav { display: flex; align-items: center; gap: clamp(2px, 1.4vw, 8px); }
.nav a {
  position: relative;
  padding: 9px 13px;
  font-family: var(--font-display);
  font-size: .70rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--sub);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: rgba(192, 90, 245, .07); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--grad);
}
/* the filled pill on the right */
.nav .nav-cta {
  margin-left: 10px;
  padding: 9px 19px;
  border-radius: 999px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 6px 20px rgba(147, 51, 234, .34);
  transition: box-shadow .25s var(--ease), transform .2s var(--ease);
}
.nav .nav-cta::after { content: none; }
.nav .nav-cta:hover {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 8px 26px rgba(147, 51, 234, .52);
  transform: translateY(-1px);
}

/* --- the menu button: phones and small tablets only, and only when the
   script has run. Without scripting the links simply wrap, as before. --- */
.menu-btn { display: none; }
@media (max-width: 860px) {
  .js .menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--line-2); border-radius: 999px;
    background: rgba(28, 17, 48, .55); color: var(--ink);
    font: 600 .72rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
    cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
  }
  .js .menu-btn:hover { border-color: var(--violet); background: rgba(192, 90, 245, .12); }
  .menu-icon { position: relative; width: 16px; height: 10px; }
  .menu-icon span { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px;
    background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
  .menu-icon span:first-child { top: 0; }
  .menu-icon span:last-child { top: 8.5px; }
  .masthead.open .menu-icon span:first-child { top: 4.25px; transform: rotate(45deg); }
  .masthead.open .menu-icon span:last-child { top: 4.25px; transform: rotate(-45deg); }

  .js .masthead .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 22px;
    background: rgba(7, 4, 13, .94);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line-2);
    box-shadow: var(--lift);
  }
  .js .masthead.open .nav { display: flex; }
  .js .masthead .nav a { padding: 14px 4px; font-size: .82rem; border-radius: 0;
    border-bottom: 1px solid var(--line); }
  .js .masthead .nav a[aria-current="page"]::after { left: 4px; right: auto; width: 28px; bottom: 8px; }
  .js .masthead .nav .nav-cta { margin: 14px 0 0; padding: 14px 18px; text-align: center;
    border-radius: 999px; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .menu-icon span { transition: none; } }

@media (max-width: 760px) {
  html:not(.js) .masthead .shell { flex-wrap: wrap; gap: 6px 16px; min-height: 0; }
  html:not(.js) .brand { width: 100%; }
  /* flex-wrap is load-bearing, not tidiness: without it the four items are one
     nowrap row and the Start a project pill hung 15px past the right edge of a
     320px screen. Measured, not guessed. With it the pill drops to its own
     line, still ranged right, at the widths where it cannot fit. */
  html:not(.js) .nav { width: 100%; flex-wrap: wrap; row-gap: 4px;
         justify-content: flex-start; margin-left: -13px; padding-bottom: 4px; }
  html:not(.js) .nav a { padding: 7px 11px; font-size: .66rem; letter-spacing: .14em; }
  html:not(.js) .nav .nav-cta { margin-left: auto; padding: 8px 15px; }
}
@media (max-width: 400px) {
  .brand .mark-lockup { width: 74px; }
  html:not(.js) .nav a { padding: 7px 8px; font-size: .62rem; letter-spacing: .1em; }
}

/* ==================================================== 6. HERO  === */

/* CENTRED, 10 Sep 2026, to match the approved mockup. The previous build set
   the whole hero left-ranged against a signals table. The mockup is a single
   centred column: mark, headline, two lines of lead, two pills, status bar. */
.hero { position: relative; overflow: hidden; text-align: center;
        padding: clamp(46px, 7.5vw, 96px) 0 clamp(30px, 4.5vw, 56px); }
.hero .shell { display: flex; flex-direction: column; align-items: center; }

/* The light the mark throws onto the page. Taken down hard on 10 Sep 2026:
   at .26 with a 72% stop it rendered as a distinct purple oval with a visible
   edge sitting behind the logo, which is not what the mockup shows and read
   as a smudge rather than as glow. Lower alpha, a stop that runs all the way
   out, and more blur, so it has no edge to see. */
.hero-aura {
  position: absolute;
  left: 50%;
  top: clamp(20px, 5vw, 64px);
  width: min(1020px, 100%);
  height: 480px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(147, 51, 234, .15), rgba(147, 51, 234, .05) 55%, transparent 100%);
  filter: blur(40px);
}

/* Both sizes below are measured off the mockup rather than chosen: in it the
   lockup occupies ~21% of the viewport width and the headline ~47%. The first
   render had them at 30% and 57%, which crowded the hero. */
.hero .mark-lockup { width: min(346px, 70vw); margin: 0 0 clamp(18px, 2.4vw, 28px); }

/* Sized to hold "Software, engineered at speed." on ONE line at desktop,
   which is how the mockup draws it, at the mockup's own proportion of the
   viewport rather than as large as will fit. */
.hero h1 { font-size: clamp(2.05rem, 4.7vw, 3.45rem); max-width: 26ch; }
.hero h1 .tint {
  background: linear-gradient(96deg, var(--violet) 8%, #E8CBFF 52%, var(--violet) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 46ch is chosen, not inherited: it is what breaks the subhead onto the two
   lines the mockup draws, at "...booking systems / that run real businesses." */
.hero .lead { margin-top: 0; max-width: 46ch; text-wrap: balance; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  margin: 0 0 26px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(192, 90, 245, .05);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--sub);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 3px rgba(192, 90, 245, .16);
  flex: 0 0 auto;
}
.js .eyebrow .dot { animation: pip 2.8s var(--ease) infinite; }
@keyframes pip {
  0%, 100% { box-shadow: 0 0 0 3px rgba(192, 90, 245, .16); }
  50%      { box-shadow: 0 0 0 6px rgba(192, 90, 245, .04); }
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .actions { justify-content: center; margin-top: clamp(26px, 3.4vw, 40px); }

/* ---------------------------------------------------- the status bar ----
   The thin fact strip under the hero. Small caps, widely tracked, separated
   by the mockup's ▸ markers, inside a hairline capsule. Everything in it is
   checkable: the year of incorporation and the company number are on the
   Companies House record, and the other two are statements of where we are
   and what we are doing, not claims about the product.

   STATIC, not a marquee. The first build of this bar scrolled, and the render
   showed why that was wrong: at any given moment the leading item was cut in
   half by the edge mask ("MS ONLINE"), so a strip of checkable facts became a
   strip of fragments. The mockup draws it still, with all five readable at
   once. Still is also quieter, which is the brief. */
.statusbar {
  position: relative;
  width: 100%;
  /* 920px, not 760: the mockup's strip is ~720px, but it is set in a narrow
     techno face. In Baloo 2 the same five items need more room, and at 760 the
     company number wrapped onto a second line. Matching the drawn width would
     have broken the drawn layout. */
  max-width: 920px;
  margin: clamp(22px, 2.6vw, 36px) auto 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(28, 17, 48, .55), rgba(20, 11, 34, .35));
  box-shadow: var(--inner-top);
  overflow: hidden;
}
.statusbar ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 9px clamp(10px, 1.6vw, 18px);
  list-style: none;
  row-gap: 2px;
}
.statusbar li {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--violet);
  white-space: nowrap;
}
/* The mockup puts a ▸ after every item, the last one included, so the strip
   reads as a running feed rather than as a finished sentence. */
.statusbar li::after {
  content: "\25B8";
  margin-inline: clamp(8px, 1.3vw, 17px);
  color: var(--dim);
  letter-spacing: 0;
  opacity: .65;
}

/* --- the signal strip: three checkable facts, not three adjectives --- */
.signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(46px, 6vw, 74px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(28, 17, 48, .55), rgba(11, 6, 22, .35));
  overflow: hidden;
  box-shadow: var(--inner-top);
}
.signals div { padding: 20px clamp(16px, 2.4vw, 26px); border-left: 1px solid var(--line); }
.signals div:first-child { border-left: 0; }
.signals dt {
  font-size: .66rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 7px;
}
.signals dd { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ink);
  font-family: var(--font-display); letter-spacing: -.028em;
  font-variant-numeric: tabular-nums; }
.signals dd small { display: block; font-family: var(--font-body); font-size: .78rem;
  font-weight: 400; letter-spacing: -.01em; color: var(--dim); margin-top: 3px; }
@media (max-width: 720px) {
  .signals { grid-template-columns: 1fr; }
  .signals div { border-left: 0; border-top: 1px solid var(--line); }
  .signals div:first-child { border-top: 0; }
}

/* Page hero for the inner pages — same furniture, less of it, and ranged left
   again: a centred column is right for one landing page and wrong for three
   pages of reading. */
.hero-page { padding: clamp(44px, 6.5vw, 86px) 0 clamp(28px, 4vw, 46px);
             text-align: left; }
.hero-page .shell { display: block; }
.hero-page h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); max-width: 20ch; }
.hero-page .lead { max-width: 60ch; }
.hero-page .actions { justify-content: flex-start; }

/* ==================================================== 7. BUTTONS  === */

/* Pills, small caps, widely tracked — the mockup's SEE OUR WORK / START A
   PROJECT pair. Changed 10 Sep 2026 from sentence-case body text. */
.btn {
  --btn-bg: rgba(20, 11, 34, .55);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              border-color .2s var(--ease), background .2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  border-color: transparent;
  background: var(--grad);
  color: #fff;
  box-shadow: var(--glow);
}
.btn-primary:hover { color: #fff; box-shadow: var(--glow-strong); }

.btn-ghost:hover { border-color: var(--violet); background: rgba(192, 90, 245, .10); }

/* The arrow is body-font so it does not inherit the display face's tracking
   and float away from the label. */
.btn .arw { font-family: var(--font-body); letter-spacing: 0; }

.btn .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* An inline text link that behaves like a control */
.tlink {
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
  gap: 7px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--violet);
  text-decoration: none;
}
.tlink:hover { text-decoration: none; }
.tlink .arw { transition: transform .22s var(--ease); }
.tlink:hover .arw { transform: translateX(3px); }

/* ================================================ 7b. PORTFOLIO  === */

.work-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}

/* Home page: the four portfolio screenshots as a strip, each shown whole. */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shot { display: block; color: var(--sub); text-decoration: none; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
.shot span { display: block; margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.shot:hover { text-decoration: none; }
.cta-panel { text-align: center; }

/* ==================================================== 8. PANELS  === */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.panel {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(28, 17, 48, .6), rgba(11, 6, 22, .5));
  box-shadow: var(--inner-top);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.panel > * { position: relative; z-index: 1; }

/* The cursor spotlight. --mx/--my are written by site.js on pointer move.
   Falls back to a static, centred wash if the script never runs. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(192, 90, 245, .13), transparent 70%);
  transition: opacity .32s var(--ease);
}
.panel:hover { border-color: var(--line-2); transform: translateY(-2px); }
.panel:hover::before { opacity: 1; }

.panel h3 { margin-top: 0; }
.panel p  { font-size: .95rem; }
.panel .tlink { margin-top: 14px; }

/* Panel with a leading index number, for "what we build" style lists */
.panel .pn {
  display: block;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--dim);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

.panel-feature {
  background:
    radial-gradient(700px 320px at 88% -20%, rgba(147, 51, 234, .22), transparent 62%),
    linear-gradient(155deg, rgba(42, 26, 69, .7), rgba(11, 6, 22, .55));
  border-color: var(--line-2);
}

/* ============================================ 9. CAPABILITY LEDGER  === */
/* A dense, checkable list. Deliberately not six identical marketing cards —
   this is a company that sells its precision, so the list should look like a
   register rather than a brochure. */

.ledger { border-top: 1px solid var(--line); }
.ledger li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px 20px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  list-style: none;
  transition: background .22s var(--ease), padding-left .22s var(--ease);
}
.ledger { margin: 0; padding: 0; }
.ledger li:hover { background: rgba(192, 90, 245, .045); padding-left: 12px; }
.ledger .what { color: var(--ink); font-weight: 500; letter-spacing: -.014em; }
.ledger .meta { color: var(--dim); font-size: .82rem; letter-spacing: -.004em; text-align: right; }
@media (max-width: 560px) {
  .ledger li { grid-template-columns: 1fr; }
  .ledger .meta { text-align: left; }
}

/* Status chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip-live  { color: var(--good);   border-color: rgba(74, 222, 128, .35); }
.chip-dev   { color: var(--neon);   border-color: rgba(56, 189, 248, .38); }
.chip-pilot { color: var(--violet); border-color: rgba(192, 90, 245, .38); }

/* ==================================================== 10. PRICING  === */

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, rgba(21, 12, 36, .7), rgba(11, 6, 22, .45)); }
.plan { padding: clamp(22px, 2.4vw, 28px); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; }
.plan:first-child { border-left: 0; }
.plan h3 { font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.plan .amount { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 700; line-height: 1; letter-spacing: -.045em; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.plan .amount .per { font-size: .8rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--dim); font-family: var(--font-body); margin-left: 4px; }
.plan p { margin: 14px 0 0; font-size: .89rem; color: var(--sub); }
.plan.is-lead { background: linear-gradient(160deg, rgba(42, 26, 69, .78), rgba(20, 11, 34, .5)); }
@media (max-width: 900px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(3) { border-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .plans { grid-template-columns: 1fr; }
  .plan { border-left: 0; border-top: 1px solid var(--line); }
  .plan:first-child { border-top: 0; } }

/* Engagement blocks — no invented numbers, so they carry a shape instead */
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .terms { grid-template-columns: 1fr; } }
.term .basis { display: block; font-family: var(--font-display); font-size: 1.42rem;
  font-weight: 600; letter-spacing: -.035em; color: var(--ink); margin: 2px 0 10px; }

/* ================================================== 11. STATEMENT  === */
/* The one place the site raises its voice. The house rule, set large. */

.statement {
  position: relative;
  padding: clamp(48px, 7vw, 86px) clamp(24px, 4vw, 60px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background:
    radial-gradient(900px 400px at 12% -30%, rgba(147, 51, 234, .22), transparent 62%),
    linear-gradient(140deg, rgba(31, 17, 54, .8), rgba(9, 5, 18, .6));
  overflow: hidden;
}
.statement::after {              /* a light bar along the top edge. It used to
                                    sit at 46% and read as a strike-through
                                    across the headline. */
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 90, 245, .55), transparent);
}
.statement blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.62rem, 4.1vw, 3.05rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.042em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}
.statement blockquote .tint { color: var(--violet); }
.statement .after { position: relative; z-index: 1; margin: 28px 0 0; max-width: 56ch;
  color: var(--sub); }

/* ================================================== 12. DISCLOSURE  === */
/* Where the site says what the software will not do. Given real weight —
   this is the company's actual differentiator, not small print to hide. */

.note {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--violet);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(100deg, rgba(28, 17, 48, .58), rgba(11, 6, 22, .28));
  font-size: .95rem;
}
.note p, .note h3 { max-width: 78ch; }   /* a note that spans 1160px is unreadable */
.note h3 { font-size: .96rem; }
.note-silver { border-left-color: var(--silver); }

/* Definition list for company facts */
.facts { display: grid; grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 0; margin: 0; border-top: 1px solid var(--line); }
.facts dt, .facts dd { padding: 13px 0; border-bottom: 1px solid var(--line); margin: 0; }
.facts dt { font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); padding-right: 20px; }
.facts dd { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 2px; border-bottom: 0; }
}

/* ================================================== 13. PRODUCT  === */

.product { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 34px);
  align-items: start; }
@media (max-width: 620px) { .product { grid-template-columns: 1fr; } }

.orb {
  position: relative;
  width: clamp(96px, 12vw, 132px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: radial-gradient(closest-side, rgba(147, 51, 234, .2), rgba(7, 4, 13, .9));
  padding: 14px;
}
.orb img { width: 100%; height: auto; display: block; }
.js .orb::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(192, 90, 245, .34);
  animation: sonar 4.2s var(--ease) infinite;
  pointer-events: none;
}
@keyframes sonar {
  0%        { box-shadow: 0 0 0 0 rgba(192, 90, 245, .30); }
  70%, 100% { box-shadow: 0 0 0 22px rgba(192, 90, 245, 0); }
}

/* ================================================== 14. CONTACT  === */

.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .channels { grid-template-columns: 1fr; } }
.channel .val { display: block; font-family: var(--font-display); font-size: 1.16rem;
  font-weight: 600; letter-spacing: -.028em; margin: 4px 0 10px; word-break: break-word; }
.channel .val a { display: inline-block; padding-block: 2px; text-decoration: none; }
.channel .val a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The real enquiry form. Added 14 Sept 2026 — RFS carries no public email
   address any more, so this is the only way a visitor reaches us. Built out
   of the same tokens as .panel and .btn so it reads as part of the site, not
   a bolted-on widget. */
.enquiry-form { max-width: var(--narrow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--sub); margin-bottom: 7px; }
.field .opt { font-weight: 400; color: var(--dim); text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  background: rgba(7, 4, 13, .55); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 12px 14px; transition: border-color .18s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(192, 90, 245, .16);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-status { margin-top: 16px; font-size: .9rem; display: none; padding: 12px 16px;
  border-radius: var(--r-sm); border: 1px solid var(--line); }
.form-status.is-visible { display: block; }
.form-status.ok { color: var(--good); border-color: rgba(74, 222, 128, .35);
  background: rgba(74, 222, 128, .08); }
.form-status.err { color: var(--bad); border-color: rgba(248, 113, 113, .35);
  background: rgba(248, 113, 113, .08); }
.enquiry-form button[type="submit"]:disabled { opacity: .6; cursor: default; transform: none; }

/* ================================================== 15. FOOTER  === */

.foot {
  margin-top: 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 6, 22, 0), rgba(18, 10, 31, .6));
  padding: clamp(44px, 5vw, 66px) 0 clamp(34px, 4vw, 48px);
  font-size: .875rem;
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr; } }
.foot .mark-rfs { width: 104px; margin-bottom: 16px; }
.foot-brand p { max-width: 44ch; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 480px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-h { margin: 0 0 10px; font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.foot-nav { margin: 0; padding: 0; }
.foot-nav li { list-style: none; }
.foot-nav a { display: inline-block; padding-block: 6px; color: var(--sub);
  text-decoration: none; font-weight: 500; transition: color .2s var(--ease); }
.foot-nav a:hover, .foot-nav a[aria-current="page"] { color: var(--ink); }
.legal { margin-top: 30px; color: var(--dim); font-size: .8rem; line-height: 1.62; }
.legal p { max-width: 92ch; margin-bottom: .75em; }
.legal strong { color: var(--sub); font-weight: 600; }

/* ================================================== 16. MOTION  === */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.js .reveal.in-view { opacity: 1; transform: none; }
.js .reveal[data-d="1"] { transition-delay: .07s; }
.js .reveal[data-d="2"] { transition-delay: .14s; }
.js .reveal[data-d="3"] { transition-delay: .21s; }
.js .reveal[data-d="4"] { transition-delay: .28s; }
.js .reveal[data-d="5"] { transition-delay: .35s; }

/* The hero headline lifts out from under a clip rather than fading, so the
   first thing the page does reads as deliberate rather than as a loading
   artefact. Two elements: the mask clips, the inner element travels. */
.js .lift { display: block; overflow: hidden; padding-bottom: .08em; }
.js .lift > span { display: block; transform: translateY(105%);
  transition: transform .95s var(--ease); }
.js .lift.in-view > span { transform: none; }
.js .lift.in-view[data-d="1"] > span { transition-delay: .09s; }
.js .lift.in-view[data-d="2"] > span { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .lift > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .streak.in-view::after,
  .js .orb::after,
  .js .eyebrow .dot { animation: none !important; }
  .btn:hover, .panel:hover { transform: none; }
}

/* ================================================== 17. UTILITY  === */

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: fixed;
  left: 14px; top: 14px;
  z-index: 90;
  padding: 11px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}

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

.dim { color: var(--dim); }
.small { font-size: .875rem; }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: clamp(28px, 3.4vw, 44px); }
.mb-l { margin-bottom: clamp(28px, 3.4vw, 44px); }
.center { text-align: center; margin-inline: auto; }

.bullets { margin: 0; padding: 0; list-style: none; }
.bullets li { position: relative; padding-left: 22px; margin: .48em 0; }
.bullets li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 1px;
  background: var(--violet);
}

/* ============================================ 18. FINISH (Oct 2026)  === */
/* One layer on top of everything above: more air, a firmer type scale, glass
   panels with a gradient edge, a shared page header and crisp hover states.
   Colours and fonts all come from brand-tokens.css. */

:root { --bay: clamp(72px, 9vw, 136px); }

h2 { font-size: clamp(1.85rem, 3.9vw, 3.05rem); letter-spacing: -.04em; }
.sec-head h2 { text-wrap: balance; }
.sec-label { letter-spacing: .2em; }

/* Shared page header: left aligned, a soft glow behind the title and a
   gradient rule underneath, the same on every inner page. */
.hero-page { padding: clamp(64px, 9vw, 128px) 0 clamp(40px, 5vw, 64px); }
.hero-page::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; top: -40%; width: min(900px, 100%); height: 140%;
  background: radial-gradient(closest-side, rgba(147, 51, 234, .16), transparent 100%);
  filter: blur(30px);
}
.hero-page::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0;
  max-width: calc(var(--shell) - 2 * var(--gutter)); margin-inline: auto;
  height: 1px; background: linear-gradient(90deg, var(--purple), rgba(192, 90, 245, .35) 40%, transparent);
}
.hero-page h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); max-width: 22ch; }
.hero-page .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); }

/* Headline masks: room above and below so no letter is ever clipped. */
.js .lift { padding: .16em 0 .34em; margin: -.16em 0 -.34em; }

/* Glass panels with a gradient edge that lights up on hover. */
.panel {
  background: linear-gradient(155deg, rgba(28, 17, 48, .55), rgba(11, 6, 22, .35));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(192, 90, 245, .7), rgba(147, 51, 234, .1) 45%, rgba(192, 90, 245, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease);
}
.panel:hover::after { opacity: 1; }
.panel:hover { box-shadow: var(--inner-top), 0 18px 50px rgba(0, 0, 0, .45); }

/* Buttons: a light sweep across the primary, a firm edge on the ghost. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { left: 120%; }
.btn-ghost { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Nav: an underline that draws in on hover. */
@media (min-width: 861px) {
  .nav a:not(.nav-cta)::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1.5px;
    border-radius: 2px; background: var(--grad);
    transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
  }
  .nav a:not(.nav-cta):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav a:hover { background: transparent; }
}

/* Portfolio images: always the whole screenshot, never cropped. */
.work-card img { object-fit: contain; background: var(--bg); transition: transform .5s var(--ease), border-color .3s var(--ease); }
.work-card > a { display: block; overflow: hidden; border-radius: var(--r-md); margin-bottom: 18px; }
.work-card > a img { margin-bottom: 0; }
.work-card:hover img { border-color: var(--line-2); }
.shot img { transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.shot:hover img { transform: translateY(-4px); border-color: var(--violet); box-shadow: var(--glow); }
.shot:hover span { color: #DFA8FF; }

/* Closing call to action: a gradient wash so it reads as the end of the page. */
.cta-panel {
  padding: clamp(36px, 6vw, 72px) clamp(22px, 4vw, 48px);
  background: radial-gradient(120% 140% at 50% 0%, rgba(147, 51, 234, .28), rgba(11, 6, 22, .4) 70%);
  border-color: var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .panel::after, .shot img, .work-card img,
  .nav a::after { transition: none !important; }
  .shot:hover img { transform: none; }
}

/* ------------------------------------------------------------- founder -- */
.founder-photo { position: relative; margin: 0 0 28px; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(223, 227, 236, .18); box-shadow: 0 30px 80px -30px rgba(147, 51, 234, .55); }
.founder-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.founder-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 18px;
  background: linear-gradient(transparent, rgba(7, 4, 13, .92)); }
.founder-photo strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); }
.founder-photo span { display: block; font-size: .88rem; color: var(--silver); }
.li-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .45); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem;
  transition: background .3s, border-color .3s; }
.li-link svg { color: var(--neon); }
.li-link:hover, .li-link:focus-visible { background: rgba(56, 189, 248, .12); border-color: var(--neon); }
.founder { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.founder .founder-photo { margin: 0; }
@media (max-width: 820px) { .founder { grid-template-columns: 1fr; } .founder .founder-photo { max-width: 420px; } }