/* =========================================================================
   IRVx Softlabs : base.css
   Site foundation for the redesign: a deep navy "black", white, and one blue
   (in three working tints so small text passes contrast on light and on dark).
   Manrope for display, Inter for text, Caveat for the handwritten lines.
   Flat colour only, no gradients. Stands on its own: no Bootstrap on pages
   that load it, so it carries its own small reset and the few utilities the
   shared navbar and footer need.

   Owns: tokens, reset, header (transparent over the hero, a floating pill
   once the page scrolls), buttons and focus states, labels, footer, back-to-top,
   progress bar. Page stylesheets (home.css, hero.css) add their sections.
   ========================================================================= */

:root {
  /* The three colours */
  --ink:   #0b1220;   /* the "black": deep navy */
  --white: #ffffff;
  --blue:  #2563eb;   /* the blue for text, buttons and links: 5.2:1 on white */

  /* Working tints of those three */
  --blue-bright: #2f7cf6;   /* the mockup's brighter blue: headline words, dots, rules */
  --blue-700:    #1d4ed8;   /* blue, pressed */
  --blue-on-dark: #6ea8ff;  /* small blue text on navy: 7.8:1 */
  --blue-050:    #eaf1fe;   /* blue at 8% on white */
  --blue-100:    #d5e3fd;
  --ink-2:    #111a2c;   /* dark surface, one step up */
  --ink-3:    #182238;   /* dark surface, two steps up */
  --ink-700:  #27304a;
  --body:     #3d4557;   /* navy at 78% */
  --muted:    #5d6579;   /* navy at 62%: 5.4:1 on the soft background */
  --bg:       var(--white);
  --bg-soft:  #f3f6fb;   /* white with a breath of blue */
  --line:     #e4e8ef;   /* navy at 10% */
  --line-strong: #c5ccd8;
  --on-dark:  rgba(255, 255, 255, .78);
  --on-dark-muted: rgba(255, 255, 255, .6);
  --line-dark: rgba(255, 255, 255, .12);
  --danger:     #b3261e;   /* form errors: the one colour outside the palette, 6.4:1 on white */
  --danger-100: #e3b2ae;

  /* Type */
  --display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script:  "Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* Shape */
  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 50rem;
  --shadow:    0 12px 32px -16px rgba(11, 18, 32, .28);
  --shadow-lg: 0 32px 64px -30px rgba(11, 18, 32, .35);

  /* Layout */
  --container: 1400px;
  --header-h: 76px;
}

/* ----------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 .5rem;
}
h1, h2 { letter-spacing: -0.035em; line-height: 1.06; }
.blue { color: var(--blue-bright); }
a { color: var(--blue); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--blue-700); }
p { margin: 0 0 1rem; }
img, svg { max-width: 100%; vertical-align: middle; }
picture { display: contents; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 700; }
small { font-size: .85em; }
::selection { background: var(--blue); color: var(--white); }

/* Inline SVG icons (x-icon): 1em, current colour, sit on the text baseline */
svg.bi { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; fill: currentColor; }

/* Keyboard focus: one ring for every control, visible on light and on dark */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Skip link: the first tab stop on every page, visible only while it has focus */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1050; padding: .7rem 1.1rem; border-radius: var(--radius-pill); background: var(--ink); color: var(--white); font-weight: 600; font-size: .9rem; transition: top .2s ease; }
.skip-link:focus { top: 1rem; outline-color: var(--white); }

/* ----------------------------------------------------------------- Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
main [id], main section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.section { padding: clamp(64px, 7.5vw, 112px) 0; }
.bg-soft { background: var(--bg-soft); }
.script { font-family: var(--script); font-weight: 600; }

/* Small blue section label */
.label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .9rem;
}
.label::before { content: ""; width: 18px; height: 2px; background: var(--blue-bright); }
.label--light { color: var(--white); }

/* Section heading block */
.sec-head { max-width: 760px; }
.sec-head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin: 0 0 .8rem; }
.sec-head p { font-size: 1.06rem; margin: 0; max-width: 58ch; }
.sec-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.sec-head--row > div { max-width: 760px; }
.sec-head--row .btn { flex: 0 0 auto; margin-bottom: .35rem; }

/* --------------------------------------------------------------- Buttons */
.btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--radius-pill);
  padding: .8rem 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border: 1px solid transparent;
  line-height: 1.3;
  text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-appearance: none; appearance: none;
  background: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-sm { padding: .6rem 1.1rem; font-size: .88rem; }
.btn svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.btn:hover svg.bi-arrow-right { transform: translateX(4px); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }

.btn-brand { background: var(--blue); color: var(--white); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--blue-700); color: var(--white); }

.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover, .btn-dark:focus-visible { background: var(--ink-700); color: var(--white); }

.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover, .btn-light:focus-visible { background: var(--blue-050); color: var(--ink); }

.btn-outline { color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover, .btn-outline:focus-visible { border-color: var(--ink); color: var(--ink); }

.btn-outline-light { color: var(--white); border-color: rgba(255, 255, 255, .42); }
.btn-outline-light:hover, .btn-outline-light:focus-visible { border-color: var(--white); color: var(--white); }
.btn-outline-light:focus-visible, .btn-light:focus-visible { outline-color: var(--white); box-shadow: 0 0 0 3px var(--ink); }

/* ----------------------------------------------------------------- Header */
/* The same bar on every page. At the very top it is transparent over the hero (white text
   over a dark hero, on pages with body.dark-top); once the page scrolls, and while the phone
   menu is open, it is one solid white pill with dark text (app.js sets .is-solid). The pill
   is opaque and has no backdrop filter, so nothing behind it shows through in any browser
   and the phone menu inside it is placed against the bar, never trapped by a filter.
   Without JavaScript (no html.js) the bar is the white pill from the start. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding-top: 14px;
  transition: padding-top .3s ease;
}
.site-header.is-solid { padding-top: 10px; }

.nav-shell {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 0 .5rem 0 .25rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, padding .3s ease;
}
html:not(.js) .nav-shell,
.site-header.is-solid .nav-shell {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 18px 44px -26px rgba(11, 18, 32, .45);
  padding-left: .85rem;
}

/* Brand: the wordmark with "Softlabs" set beneath it, as in the mockup. White over
   dark, the original blue over light. */
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .15rem; padding: .35rem .6rem; min-height: 44px; line-height: 1; flex: 0 0 auto; }
.brand img { height: 26px; width: auto; display: block; transition: filter .3s ease; }
.brand .brand-suffix {
  font-family: var(--sans);
  font-weight: 700; font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink); transition: color .3s ease; padding-left: .1em;
}

/* Links: small caps, an underline for the current page */
.main-nav { display: flex; align-items: center; gap: .1rem; white-space: nowrap; }
.main-nav a {
  position: relative;
  color: var(--ink-700);
  font-weight: 600; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem .85rem;
  border-radius: var(--radius-pill);
  transition: color .2s ease, background-color .2s ease;
}
.main-nav a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 2px;
  background: var(--blue-bright); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.main-nav a:hover, .main-nav a.active { color: var(--ink); }
.main-nav a.active::after, .main-nav a:hover::after { transform: scaleX(1); }
.main-nav a.btn { font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--white); }
.main-nav a.btn::after { display: none; }
.main-nav a:focus-visible { outline-offset: -3px; }

.nav-cta { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.nav-only-mobile { display: none; }

/* The menu button (phones and tablets) shows a cross while the menu is open */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; border: 0; background: transparent;
  font-size: 1.5rem; color: var(--ink); line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav-toggle .ic-close { display: none; }
.nav-toggle[aria-expanded="true"] .ic-open { display: none; }
.nav-toggle[aria-expanded="true"] .ic-close { display: inline-block; font-size: 1.2rem; }

/* At the very top of a page that opens on a dark hero: white wordmark, links and button */
.js .dark-top .site-header:not(.is-solid) .brand img { filter: brightness(0) invert(1); }
.js .dark-top .site-header:not(.is-solid) .brand-suffix,
.js .dark-top .site-header:not(.is-solid) .nav-toggle { color: var(--white); }
.js .dark-top .site-header:not(.is-solid) :focus-visible { outline-color: var(--white); }
@media (min-width: 992px) {
  .js .dark-top .site-header:not(.is-solid) .main-nav a:not(.btn) { color: rgba(255, 255, 255, .84); }
  .js .dark-top .site-header:not(.is-solid) .main-nav a:not(.btn):hover,
  .js .dark-top .site-header:not(.is-solid) .main-nav a.active { color: var(--white); }
}

@media (min-width: 1280px) {
  /* Wide: the links sit dead centre; width: max-content keeps them on one line */
  .main-nav { position: absolute; left: 50%; top: 50%; width: max-content; transform: translate(-50%, -50%); }
}
@media (max-width: 1279.98px) and (min-width: 992px) {
  /* Not enough room to centre the links: they flow between the brand and the button,
     at full size (four links fit) with a little less padding */
  .main-nav a { padding: .55rem .6rem; }
  .main-nav a::after { left: .6rem; right: .6rem; }
}
/* Touch screens wide enough for the full bar (tablets in landscape): 44px tall links */
@media (pointer: coarse) and (min-width: 992px) {
  .main-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 991.98px) {
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  /* The menu: a white panel hanging under the bar (on phones exactly as wide as the bar), the
     same at the top of the page and after a scroll. Closed, it is hidden for everyone: visibility
     keeps its links out of the tab order and away from screen readers. On a short screen
     (a phone on its side) the panel scrolls inside itself. */
  .main-nav {
    position: absolute;
    top: calc(100% + 8px); left: -1px; right: -1px;   /* the bar's outer edge, past its 1px border */
    flex-direction: column;
    align-items: stretch;
    gap: 0; white-space: normal;
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: .35rem .8rem .9rem;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .main-nav.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
  /* The page behind the open menu dims; the backdrop sits under the header (z 1030) and
     takes the tap that closes the menu. On touch screens the page also stays still. */
  body::after { content: ""; position: fixed; inset: 0; z-index: 1020; background: rgba(5, 8, 15, .5); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  html.nav-open body::after { opacity: 1; visibility: visible; transition-delay: 0s; }
  .main-nav a { display: flex; align-items: center; min-height: 52px; padding: .2rem .8rem; border-radius: 0; font-size: .84rem; }
  .main-nav a.active:not(.btn) { color: var(--blue); font-weight: 700; }   /* the current page */
  .main-nav a::after { display: none; }
  .main-nav a:not(.btn) { border-bottom: 1px solid var(--line); }
  .main-nav .nav-only-mobile { display: flex; justify-content: center; margin-top: .9rem; min-height: 50px; border-radius: var(--radius-pill); }
  .main-nav a:focus-visible { outline-offset: -3px; outline-color: var(--blue); }
}
/* Tablets: a narrower panel under the menu button rather than one as wide as the screen */
@media (min-width: 576px) and (max-width: 991.98px) {
  .main-nav { left: auto; width: 340px; }
}
@media (max-width: 991.98px) and (pointer: coarse) {
  html.nav-open { overflow: hidden; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .main-nav { transform: none; }
}

/* ------------------------------------------------------ Scroll progress */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 1040;
  height: 3px; background: var(--blue-bright);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ----------------------------------------------------------------- Footer */
/* One slim row (brand, links, the group line, the handwritten tagline) and a
   small second line, as in the mockup. */
.site-footer { background: #070c16; color: var(--on-dark); padding: 40px 0 26px; font-size: .9rem; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.site-footer :focus-visible { outline-color: var(--white); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; }
.site-footer .brand { padding: 0; }
.site-footer .brand img { height: 24px; filter: brightness(0) invert(1); }
.site-footer .brand .brand-suffix { color: var(--white); }
.foot-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.foot-links a { font-weight: 500; }
.foot-group { margin: 0; color: var(--on-dark-muted); }
.foot-group b { color: var(--white); font-weight: 600; }
.foot-script { font-size: 1.35rem; color: var(--white); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; border-top: 1px solid var(--line-dark); margin-top: 1.5rem; padding-top: 1.1rem; font-size: .82rem; color: var(--on-dark-muted); }
.foot-bottom > * { white-space: nowrap; }
@media (min-width: 768px) { .foot-bottom { padding-right: 4.5rem; } }   /* clear of the back-to-top button */
.foot-cities i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-bright); margin: 0 .5rem; vertical-align: middle; }
@media (max-width: 767.98px) {
  .foot-row { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: .25rem; }
  /* Phones: every footer link is a full 44px tap target */
  .foot-links { gap: 0 1.5rem; }
}
/* Phones and any touch screen (tablets too): every footer link is a full 44px tap target */
@media (max-width: 767.98px), (pointer: coarse) {
  .foot-links { column-gap: 1.5rem; row-gap: 0; }
  .foot-links a, .foot-bottom a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}

/* ------------------------------------------------------------ Back to top */
.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: var(--white); border: none; font-size: 1.1rem; cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, background-color .2s ease, visibility 0s linear .3s; z-index: 1030;
}
.back-to-top.show { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.back-to-top:hover { background: var(--ink); color: var(--white); }
/* Phones: the button would sit over the reading column, so it stays hidden there */
@media (max-width: 575.98px) { .back-to-top { display: none; } }

/* ------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}