/* ===========================================================================
   custom.css — every hand-written rule for this site lives here.

   Loaded AFTER the template's compiled stylesheet, so anything in this file
   wins. Edit this file, never _astro/_slug_.B97dlsMJ.css (that one is minified
   build output and is painful to work with by hand).
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. THEMIS MARK  —  the pinned image on /legal/

   To move it, change the three values in the block marked "TUNE THESE".
   Nothing else needs touching.

     --themis-left     distance from the left edge of the screen
     --themis-bottom   distance from the bottom edge of the screen
     --themis-width    how wide the image is

   Handy values for --themis-left / --themis-bottom:

     0                    flush into the very corner of the screen
     var(--header-padding) lines up with the site's own left margin
                           (2rem on desktop, 3rem on very wide screens)
     2rem, 40px, 5vh       any normal CSS length works

   To pin it to a different corner, swap the property names:
     bottom -> top    moves it to the top of the screen
     left   -> right  moves it to the right-hand side
   (If you switch to `right`, also change `left:` to `right:` on line ~60.)
   --------------------------------------------------------------------------- */

.themis-mark {
  /* ---- TUNE THESE ---- */
  --themis-left: 0rem;
  --themis-bottom: 0rem;
  --themis-width: clamp(260px, 26vw, 480px);
  /* -------------------- */

  position: fixed;
  left: var(--themis-left);
  bottom: var(--themis-bottom);
  width: var(--themis-width);

  /* Above the fixed chapter rail, which shares this corner and would otherwise
     draw its dots over the image. Below the header (z-index 10) so the nav and
     the menu overlay still sit on top. */
  z-index: 2.5;

  margin: 0;
  padding: 0;

  /* It is decoration, not a control — never swallow a click meant for the
     page behind it. */
  pointer-events: none;

  /* Hidden until the controller script says the hero is behind us. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s linear, visibility 0.6s linear;
}

.themis-mark.is-visible {
  opacity: 1;
  visibility: visible;
}

.themis-mark img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Below 1024px it would cover the content rather than sit beside it. */
@media (max-width: 63.99em) {
  .themis-mark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .themis-mark {
    transition: none;
  }
}


/* ---------------------------------------------------------------------------
   2. WORDMARK FILL

   The template coloured its logo with `.logo path { fill: #fff }`. Our wordmark
   is live <text>, not vector outlines, so that selector no longer matches — and
   it was wrong anyway, since the footer's default background is white. These
   mirror it onto `text`, theme-correct.
   --------------------------------------------------------------------------- */

footer[data-astro-cid-rhv6ztfp] .logo text {
  fill: #2d628c;
}

footer[data-astro-cid-rhv6ztfp][data-theme='dark'] .logo text {
  fill: #fff;
}

footer[data-astro-cid-rhv6ztfp][data-theme='light'] .logo text {
  fill: #2d628c;
}

main[data-astro-cid-gtokf5xm] .legal-info-container .logo text {
  fill: #fff;
}

/* ---------------------------------------------------------------------------
   Chapter-transition strip (the draggable page-name carousel)

   Each .title is a fixed-width slot with its text centred, so the gap between
   two names is only whatever slack their two half-slots leave. The template was
   built for short names ("the original template", "Trading"); ours are much longer, and at a
   flat 3.875rem the two longest neighbours - AI AUTOMATION (12.45em) and
   CYBERSECURITY (12.14em) - left a gap of -2px at a 1520px viewport, i.e. they
   touched. "THE OLYMPUS AI COMPANY" (20.99em) overflowed its slot at every
   width and wrapped to two lines.

   Both the 50vw slot and the 3.875rem type start at the same 64em breakpoint,
   so a 1024px laptop got desktop-sized text in a 512px slot. Fix: widen the
   slot and let the type scale with the viewport, capped at the original
   3.875rem so large displays are untouched. 2.75vw is the largest coefficient
   at which the longest title still fits on one line (58vw / 20.99em).
   --------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .hero-transition[data-astro-cid-3rse3tms] {
    --title-width: 58vw;
  }

  /* Must track --title-width: the first title is centred by (100vw - slot)/2. */
  .hero-transition[data-astro-cid-3rse3tms] .inner[data-astro-cid-3rse3tms] {
    padding-left: 21vw;
  }

  .hero-transition[data-astro-cid-3rse3tms]
  .title[data-astro-cid-3rse3tms]
  p[data-astro-cid-3rse3tms] {
    font-size: min(3.875rem, 2.75vw);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   "More info" links under each expandable paragraph on /cybersecurity/.
   Reuses the template's .link-block component; this only adds spacing so the
   link clears the read-more chevron above it.
   --------------------------------------------------------------------------- */
.link-block.more-info-link {
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
   Contact form (/contact/)

   The template shipped no form at all — a mailto: link was the only
   interactive element on the page. This styles a real one against the page's
   existing dark theme, borrowing the template's type scale (fs-cta-s for
   labels) rather than introducing a new one.
   --------------------------------------------------------------------------- */
.cf {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 34rem;
  margin-top: 2.5rem;
}

.cf-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 40em) {
  .cf-row { grid-template-columns: 1fr 1fr; }
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.cf-label {
  color: #fff;
  opacity: .65;
  letter-spacing: .08em;
}

.cf-input {
  width: 100%;
  padding: .7rem 0;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;                      /* iOS rounds inputs by default */
  transition: border-color .25s linear;
}
.cf-input:focus {
  border-bottom-color: #fff;
  outline: none;
}
.cf-input.is-invalid { border-bottom-color: #e2725b; }

.cf-textarea {
  resize: vertical;
  min-height: 7rem;
}

.cf-error {
  min-height: 1rem;                      /* reserve space so nothing jumps */
  color: #e2725b;
  font-size: .75rem;
  line-height: 1.3;
}

.cf-submit {
  align-self: flex-start;
  padding: .85rem 2.25rem;
  color: #0a1b2c;
  letter-spacing: .1em;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 2rem;
  cursor: pointer;
  transition: background .25s linear, color .25s linear, opacity .25s linear;
}
.cf-submit:hover:not(:disabled) { color: #fff; background: transparent; }
.cf-submit:disabled { cursor: default; opacity: .5; }

.cf-status { min-height: 1.25rem; font-size: .875rem; }
.cf-status.is-ok  { color: #7fd1ae; }
.cf-status.is-err { color: #e2725b; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Homepage FAQ ("Common questions")

   Restores the topical depth the old Themis homepage carried — Mauritius, the
   corpus figures, the data-training question — without turning the page back
   into a product landing page. The questions are Olympus's, answered as the
   company rather than as the product.

   Note on FAQPage markup: since Google's August 2023 change, FAQ rich results
   are limited to authoritative government and health sites, so this is unlikely
   to render as a rich result. It is kept because the visible Q&A is genuinely
   useful, is eligible for People Also Ask, and costs nothing if the policy
   changes back.
   --------------------------------------------------------------------------- */
.section-faq { padding: 6rem 0; }

.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 3rem;
  margin-top: 3rem;
}
@media (min-width: 48em) {
  .faq-list { grid-template-columns: 1fr 1fr; }
}

.faq-item { max-width: 32rem; }

.faq-q {
  margin-bottom: .75rem;
  color: #fff;
  letter-spacing: .06em;
}

.faq-a {
  color: #fff;
  opacity: .74;
}

.faq-more {
  margin-top: 3.5rem;
  color: #fff;
  opacity: .74;
}
.faq-more a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.faq-more a:hover { opacity: .7; }

/* ---------------------------------------------------------------------------
   CHAPTER RAIL VISIBILITY

   The template hides the left-hand chapter rail on anything but very wide
   monitors:

       @media (max-width: 105em) { .chapters-navigation { display: none } }

   105em is 1680px, so on a normal laptop — or on any screen with DevTools
   docked — the rail simply never appeared. Nothing else hides it; that is the
   only `display` rule targeting it.

   The rail is not a wide-screen-only component by design: the markup carries
   authored grid placements at every breakpoint down to 48em
   (`tb:col-start-1 dk:col-start-2 ml:col-start-3 lg:col-start-3`), so it was
   built to work at these widths and then blanket-hidden.

   This re-shows it from 80em (1280px) up — a real breakpoint in the template's
   scale (48 / 64 / 80 / 105 / 120em), and the one where the rail switches to
   `ml:col-start-3`.

   ---- TUNE THIS ----
   80em = 1280px  covers most laptops        <- current
   64em = 1024px  covers small laptops too
   105em          restores the template default (wide monitors only)
   -------------------

   On specificity: the template rule is `.chapters-navigation[data-astro-cid-…]`,
   which is (0,2,0). The doubled class below matches that exactly without
   depending on the Astro scope hash — that hash changes if the template is ever
   re-scraped, and an attribute selector would silently stop matching. Equal
   specificity means source order decides, and custom.css is linked after
   _slug_.css on every page, so this wins with no !important.

   Note: on /legal/ the Themis mark shares this corner and is stacked above the
   rail (z-index 2.5, see above). They overlap at every viewport width, which is
   already true today at 1680px+ — this change does not introduce it, it just
   makes it visible at more sizes. If it bothers you, shrink --themis-width.
   --------------------------------------------------------------------------- */

@media (min-width: 80em) {
  .chapters-navigation.chapters-navigation { display: block; }
}

/* ---------------------------------------------------------------------------
   CHAPTER RAIL POSITION (80em–105em only)

   Showing the rail below 105em exposed a collision the template never had to
   solve. The section headings are placed like this:

       <h2 class="fs-h2 dk:col-start-3 ... lg:col-start-7 ...">

   There is no `ml:` variant, so between 80em and 105em the heading falls back
   to `dk:col-start-3` — the very column the rail occupies (`ml:col-start-3`),
   plus the rail's own 3rem padding-left, which lands it right on top of the
   text. Above 105em the heading moves out to `lg:col-start-7` and the
   template's placement is correct, so this override is scoped to the band and
   leaves wide screens untouched.

   Pulling the rail to column 1 and dropping the padding moves it ~123px left,
   clear of the heading's left edge.

   Specificity: `.chapters-navigation.chapters-navigation .chapters-list` is
   (0,3,0), which beats both `.ml\:col-start-3` (0,1,0) and the template's
   `.chapters-list[data-astro-cid-…]` (0,2,0), so it wins outright rather than
   relying on source order.
   --------------------------------------------------------------------------- */

@media (min-width: 80em) and (max-width: 105em) {
  .chapters-navigation.chapters-navigation .chapters-list {
    grid-column-start: 1;
    padding-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   SEO / a11y: crawlable page headings
   ---------------------------------------------------------------------------
   Every hero on this site renders its page name as SVG <text> inside a .logo
   element. That is a picture of a word: it carries no heading semantics, so
   these pages shipped with no <h1> at all — nothing for a crawler to read as
   the page's subject, and nothing for a screen reader to land on.

   `.seo-h1` supplies the real <h1>. It is clipped to a 1px box rather than
   `display:none` or `visibility:hidden`, both of which drop the element from
   the accessibility tree as well as the page — the text must stay available to
   assistive technology, and must describe the same thing the visible hero says.

   Keep the wording honest: it is the page's actual subject, not a keyword
   dump. Hidden text that does not match the visible content is cloaking, and
   Google treats it as spam.
   --------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   Service-page FAQ panels
   ---------------------------------------------------------------------------
   The homepage FAQ inherits its contrast from the WebGL scene behind it, which
   happens to be dark at that scroll position. The service pages run straight
   from `</main>` into a `data-theme="light"` footer, so `.faq-q`/`.faq-a`
   (hard-coded #fff) would be white-on-light there — invisible.

   `.section-faq--panel` therefore paints its own ground instead of borrowing
   one. Any new FAQ section outside the homepage must carry this modifier.

   Q&A copy is duplicated in a FAQPage JSON-LD block on each page. Google
   requires the marked-up text to be visible on the page, so if you edit a
   question here, edit it in that block too or the markup becomes invalid.
   --------------------------------------------------------------------------- */

.section-faq--panel {
  background: #0a1b2c;
  color: #fff;
}

.section-faq--panel .faq-intro {
  margin-top: 1rem;
  color: #fff;
  opacity: .74;
}

/* ---------------------------------------------------------------------------
   Footer: Themis legal-research links
   ---------------------------------------------------------------------------
   This second list in the footer was added carrying only `legal-research-links`,
   a class with no rule anywhere in the compiled CSS or here. With nothing
   matching it, the items lost the flex column, the 0.75rem gap and the muted
   link colour, so they rendered black and bunched together directly under
   "Terms of use".

   The fix is to let them inherit the list styling that already exists rather
   than restating it: the <ul> now carries `legals-links legal-research-links`.
   That brings the layout, the light/dark link colours and the hover state with
   it, and keeps them hidden below 64em like the list above.

   The only thing overridden is the leading margin. `.legals-links` sets
   `margin-top: 3.5rem`, which is right for separating the block from the main
   nav above it but too much between two adjacent lists; these read as a
   related second group.
   --------------------------------------------------------------------------- */

.legals-links.legal-research-links {
  margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Restores heading styling lost when each page's first <h2> became the <h1>
   ---------------------------------------------------------------------------
   The Astro build styles these headings by TAG plus scope id, e.g.
   `h2[data-astro-cid-va4abrey] { margin-bottom: 8.75rem; color: #2d628c }`.

   Promoting each page's first heading from <h2> to <h1> (so that every page has
   a real, crawlable top-level heading instead of a visually hidden one) means
   those selectors no longer match. The headings silently lost their bottom
   margin and, on two pages, their colour, which collapsed the space between the
   heading and the copy beneath it.

   These rules re-apply the same declarations to <h1> at the same scope ids and
   the same breakpoints. Values are copied verbatim from the compiled
   stylesheet; if that file is ever regenerated, re-check them against it.

   Breakpoints in the build are 64em and 105em.
   --------------------------------------------------------------------------- */

/* Homepage: WhoWeAre */
h1[data-astro-cid-va4abrey] { margin-bottom: 8.75rem; color: #2d628c; }
/* Legal */
h1[data-astro-cid-q53qi7p3] { margin-bottom: 8.75rem; color: #ffffff4d; }
/* Finance, AI automation, Cybersecurity + Our offerings */
h1[data-astro-cid-fd3kjnv4],
h1[data-astro-cid-ifygeblv],
h1[data-astro-cid-qcvovfap] { margin-bottom: 8.75rem; }
/* About: scoped to .team-block in the build */
.team-block[data-astro-cid-mkqeshlr] h1[data-astro-cid-mkqeshlr] {
  max-width: 49.375rem;
  margin-top: 6.25rem;
  margin-bottom: 6.25rem;
}

@media (min-width: 64em) {
  h1[data-astro-cid-va4abrey] { margin-bottom: 12.5rem; color: #81a0bb; }
  h1[data-astro-cid-q53qi7p3],
  h1[data-astro-cid-fd3kjnv4],
  h1[data-astro-cid-ifygeblv],
  h1[data-astro-cid-qcvovfap] { margin-bottom: 12.5rem; }
  /* the AI-automation heading also carries .low-width */
  h1[data-astro-cid-ifygeblv].low-width { max-width: 30.125rem; }
  .team-block[data-astro-cid-mkqeshlr] h1[data-astro-cid-mkqeshlr] {
    margin-top: 0;
    margin-bottom: 8.75rem;
  }
}

@media (min-width: 105em) {
  h1[data-astro-cid-va4abrey],
  h1[data-astro-cid-q53qi7p3],
  h1[data-astro-cid-fd3kjnv4],
  h1[data-astro-cid-ifygeblv],
  h1[data-astro-cid-qcvovfap] { margin-bottom: 15rem; }
}