/**
 * Smart Choice IT Solution — design system.
 *
 * Only TOKENS change between dark and light. No component is restyled per
 * mode, so anything new built with these variables works in both without
 * extra work. Never hard-code a colour inside a component.
 *
 * Dark is the default. Light is applied with [data-theme="light"] on <html>.
 */

/* ---------- Tokens: dark (default) ---------- */
:root {
  --bg:            #060a18;
  --bg-2:          #0a1026;
  --surface:       #0e1631;
  --surface-2:     #121c3d;
  --surface-glass: rgba(18, 28, 61, 0.62);

  --line:          rgba(126, 160, 255, 0.15);
  --line-strong:   rgba(126, 160, 255, 0.30);

  --heading:       #eef3ff;
  --text:          #a6b4da;
  --text-dim:      #8192bd;

  --blue:          #4d7cfe;
  --blue-soft:     rgba(77, 124, 254, 0.16);
  --cyan:          #2bd9f0;
  --cyan-soft:     rgba(43, 217, 240, 0.14);
  --violet:        #9a6bff;
  --violet-soft:   rgba(154, 107, 255, 0.16);
  --amber:         #ff9a3c;

  --link:          #7ca5ff;
  --on-primary:    #050d22;
  --focus:         #6fe3f5;

  /* The dark feature bands. Identical in both modes by design: they are the
     navy punctuation that stops the light pages running together. */
  --ink:           #080d24;
  --ink-2:         #0d1538;
  --ink-line:      rgba(126, 160, 255, 0.18);
  --on-ink:        #f0f4ff;
  --on-ink-dim:    #a9b8e0;

  /* The page backdrop: wide, soft pools of colour. No grid, no pattern. */
  --backdrop:
    radial-gradient(1100px 760px at 12% -8%,  rgba(77, 124, 254, 0.26), transparent 62%),
    radial-gradient(900px 620px at 92% 2%,    rgba(154, 107, 255, 0.22), transparent 60%),
    radial-gradient(880px 700px at 72% 46%,   rgba(43, 217, 240, 0.12),  transparent 64%),
    radial-gradient(760px 560px at 6% 72%,    rgba(154, 107, 255, 0.10), transparent 62%);

  --shadow-sm: 0 2px 10px rgba(2, 6, 20, 0.45);
  --shadow-md: 0 14px 40px rgba(2, 6, 20, 0.55);
  --shadow-lg: 0 30px 80px rgba(2, 6, 20, 0.65);

  --radius:    16px;
  --radius-lg: 22px;

  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --wrap: 1200px;
  --header-h: 86px;
}

/* ---------- Tokens: light ---------- */
:root[data-theme="light"] {
  --bg:            #f6f9ff;
  --bg-2:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f1f5ff;
  --surface-glass: rgba(255, 255, 255, 0.78);

  --line:          #e0e8f7;
  --line-strong:   #c5d3ee;

  --heading:       #0a1230;
  --text:          #4a5880;
  --text-dim:      #65739c;

  --blue:          #1d4fd8;
  --blue-soft:     rgba(29, 79, 216, 0.08);
  --cyan:          #0b7a90;
  --cyan-soft:     rgba(11, 122, 144, 0.08);
  --violet:        #6d28d9;
  --violet-soft:   rgba(109, 40, 217, 0.08);
  --amber:         #c2621a;

  --link:          #1942bd;
  --on-primary:    #ffffff;
  --focus:         #1d4fd8;

  /* Light mode keeps its colour near the top of the page and fades out
     below, so the sections underneath read as white rather than as one
     continuous wash of pale blue. */
  --backdrop:
    radial-gradient(1100px 620px at 8% -14%,  rgba(198, 224, 255, 0.92), transparent 58%),
    radial-gradient(900px 540px at 96% -8%,   rgba(222, 215, 255, 0.85), transparent 56%),
    radial-gradient(760px 520px at 70% 18%,   rgba(201, 245, 252, 0.60), transparent 60%);

  --shadow-sm: 0 2px 8px rgba(15, 23, 55, 0.06);
  --shadow-md: 0 14px 36px rgba(15, 23, 55, 0.09);
  --shadow-lg: 0 28px 70px rgba(15, 23, 55, 0.12);
}

/* ---------- Base ---------- */
*, *::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(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The backdrop sits behind everything and never scrolls away. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--backdrop);
  background-color: var(--bg);
  pointer-events: none;
}

h1, h2, h3, h4 {
  color: var(--heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.75rem); }
h3 { font-size: 1.22rem; }

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

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }
img { height: auto; }

/* Icons are sized by whichever component holds them. This is the fallback,
   so one used on its own never renders at its natural size. Component rules
   come later in the file and win. */
.icon { width: 20px; height: 20px; flex: none; }

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

/* Component classes set `display`, which would otherwise beat the HTML
   hidden attribute. This keeps `hidden` meaning hidden. */
[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--blue);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }

.section { padding-block: clamp(56px, 7vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

/* The sticky masthead would otherwise sit on top of whatever an in-page link
   jumps to. */
.section, [id] { scroll-margin-top: 96px; }

/* ---- Section surfaces: the rhythm the page is built on ----
   plain  → the page's own surface (white in light mode)
   tint   → a faint blue wash, one step up from plain
   ink    → a dark navy feature band, the same in both modes */
.section--plain { background: var(--surface); border-block: 1px solid var(--line); }
.section--tint  { background: var(--surface-2); border-block: 1px solid var(--line); }
:root[data-theme="dark"] .section--plain { background: rgba(12, 19, 46, 0.55); }
:root[data-theme="dark"] .section--tint  { background: rgba(9, 14, 36, 0.55); }

.section--ink {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(168deg, var(--ink) 0%, var(--ink-2) 58%, #120f36 100%);
  border-block: 1px solid var(--ink-line);
  color: var(--on-ink-dim);
}
/* A single soft light in the corner, rather than a pattern. */
.section--ink::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -20%;
  height: 120%;
  background:
    radial-gradient(42% 46% at 22% 42%, rgba(43, 217, 240, 0.20), transparent 70%),
    radial-gradient(40% 44% at 82% 58%, rgba(154, 107, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.section--ink > * { position: relative; }
.section--ink h2, .section--ink h3, .section--ink b, .section--ink strong { color: var(--on-ink); }
.section--ink .lede, .section--ink p { color: var(--on-ink-dim); }
.section--ink .eyebrow { color: #6fe3f5; }
/* Dark bands always take the lighter focus ring. */
.section--ink :focus-visible { outline-color: #6fe3f5; }

/* Grids let their columns shrink below the longest word. */
:where(.grid, .cards, .wrap, .section) > * { min-width: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.lede {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  color: var(--text);
  max-width: 62ch;
}

.section__head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 54px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 13px;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 19px; height: 19px; flex: none; }

.btn--primary {
  position: relative;
  overflow: hidden;
  /* Twice as wide as the button, so hovering can slide the gradient along. */
  background-image: linear-gradient(118deg, var(--cyan) 0%, var(--blue) 30%, var(--violet) 58%, var(--cyan) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: #04142c;
  box-shadow: 0 10px 30px rgba(77, 124, 254, 0.32);
  transition: transform 0.18s ease, box-shadow 0.24s ease, background-position 0.55s ease;
}
:root[data-theme="light"] .btn--primary { color: #fff; }
.btn--primary:hover {
  transform: translateY(-2px);
  background-position: 70% 50%;
  box-shadow: 0 18px 44px rgba(77, 124, 254, 0.46);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--heading);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--blue); transform: translateY(-2px); }

.btn--small { min-height: 44px; padding: 10px 18px; font-size: 0.94rem; border-radius: 11px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transform: none; transition: none; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface-glass);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.masthead {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 86px;
}

.brand { display: inline-flex; align-items: center; flex: none; }
/* Height only, width auto: the logo is never stretched out of proportion. */
.brand img { display: block; width: auto; height: 42px; }
@media (min-width: 1000px) { .brand img { height: 50px; } }
/* Two logo files: dark lettering for light mode, white lettering for dark.
   These selectors must out-rank `.brand img` above, so they carry the
   element as well as the class. */
.brand img.brand__dark { display: none; }
:root[data-theme="dark"] .brand img.brand__light { display: none; }
:root[data-theme="dark"] .brand img.brand__dark  { display: block; }

.nav { display: none; margin-left: auto; }
@media (min-width: 1000px) { .nav { display: flex; align-items: center; gap: 2px; } }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border: 0;
  border-radius: 11px;
  background: none;
  font: inherit;
  color: var(--text);
  font-size: 0.97rem;
  font-weight: 550;
  cursor: pointer;
  transition: color 0.18s ease;
}
/* A quiet underline that grows from the middle, rather than a filled pill. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transition: transform 0.22s ease;
}
.nav__link:hover { color: var(--heading); text-decoration: none; }
.nav__link:hover::after,
.nav__link[aria-expanded="true"]::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--heading); }
@media (prefers-reduced-motion: reduce) { .nav__link::after { transition: none; } }

.nav__item { position: relative; }
.nav__caret { width: 14px; height: 14px; transition: transform 0.22s ease; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 310px;
  padding: 10px;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* Open on hover with a mouse, and whenever the button says it is open —
   which is how it works by keyboard and by touch. */
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover > .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
}
.nav__item > .nav__menu[data-open="true"],
.nav__item:focus-within > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 550;
}
.nav__menu a:hover { background: var(--surface-2); color: var(--heading); text-decoration: none; }
.nav__menu .icon { width: 19px; height: 19px; color: var(--cyan); flex: none; }

.header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 1000px) { .header__actions { margin-left: 0; } }

.header__phone { display: none; }
@media (min-width: 1280px) {
  .header__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--heading);
    font-weight: 650;
    font-size: 0.97rem;
    padding: 10px 12px;
  }
  .header__phone .icon { width: 18px; height: 18px; color: var(--cyan); }
}

.header__cta { display: none; }
@media (min-width: 560px) { .header__cta { display: inline-flex; } }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--heading);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.icon-btn .icon { width: 21px; height: 21px; }

.menu-btn { display: inline-flex; }
@media (min-width: 1000px) { .menu-btn { display: none; } }

:root[data-theme="dark"] .theme-toggle__sun  { display: none; }
:root:not([data-theme="dark"]) .theme-toggle__moon { display: none; }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg-2);
}
.mobile-menu__top {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__body { overflow-y: auto; padding-block: 24px 40px; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--heading);
  font-size: 1.12rem;
  font-weight: 600;
}
.mobile-menu__list a:hover { color: var(--cyan); text-decoration: none; }
.mobile-menu__sub { list-style: none; margin: 0; padding: 0 0 0 16px; }
.mobile-menu__sub a { font-size: 0.99rem; font-weight: 500; color: var(--text); }
.mobile-menu__foot { margin-top: 28px; display: grid; gap: 12px; }

body.menu-open { overflow: hidden; }

/* Without JavaScript the menu button cannot work, so it is hidden and the
   navigation falls back to the footer links. */
.no-js .menu-btn { display: none; }

/* ---------- Footer ---------- */
/* The footer is a dark navy band in both modes, so every page closes the
   same way. It sets its own text colours rather than relying on the tokens. */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  background-image: linear-gradient(168deg, var(--ink) 0%, var(--ink-2) 100%);
  border-top: 1px solid var(--ink-line);
  color: var(--on-ink-dim);
  padding-block: clamp(52px, 5vw, 80px) 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 90%;
  background: radial-gradient(40% 50% at 18% 50%, rgba(43, 217, 240, 0.14), transparent 70%),
              radial-gradient(40% 50% at 84% 50%, rgba(154, 107, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.site-footer > * { position: relative; }
.site-footer :focus-visible { outline-color: #6fe3f5; }
.footer__grid {
  display: grid;
  gap: 40px 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

/* The footer always sits on navy, so it always takes the white-lettering
   logo, whichever mode the page is in. */
.footer__brand img { height: 46px; width: auto; display: block; margin-bottom: 20px; }
.footer__brand img.brand__light { display: none; }
.footer__brand img.brand__dark  { display: block; }
.footer__brand p { color: var(--on-ink-dim); }

.footer h4 {
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-ink);
  margin-bottom: 18px;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer__list a {
  color: var(--on-ink-dim);
  font-size: 0.96rem;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.footer__list a:hover { color: #6fe3f5; padding-left: 4px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .footer__list a:hover { padding-left: 0; } }

.footer__contact { display: grid; gap: 16px; font-size: 0.96rem; }
.footer__contact div { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact .icon { width: 19px; height: 19px; color: #6fe3f5; flex: none; margin-top: 3px; }
.footer__contact a { color: var(--on-ink); font-weight: 550; }
.footer__contact a:hover { color: #6fe3f5; }
.footer__contact span { color: var(--on-ink-dim); }

.footer__bar {
  margin-top: clamp(40px, 4vw, 60px);
  border-top: 1px solid var(--ink-line);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 0.88rem;
  color: var(--on-ink-dim);
}
.footer__bar a { color: var(--on-ink-dim); }


/* ==========================================================================
   Shared components used by more than one page: the service cards and the
   closing call-to-action band. They started on the home page and moved here
   when the services index began using them too.
   ========================================================================== */

/* ---------- Service cards ---------- */
.cards {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Seven services plus a closing card is eight tiles, which would leave two
   stranded on a third row. A six-column grid lets the first six take two
   columns each (three per row) and the last two take three each. */
@media (min-width: 1040px) {
  .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards > * { grid-column: span 2; }
  .cards > :nth-last-child(-n + 2) { grid-column: span 3; }
}

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.svc:hover { transform: translateY(-7px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }

/* The illustration. Fixed 16:10 so every card lines up whatever the artwork. */
.svc__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 11.5;
  overflow: hidden;
  background: #0b1330;
  border-bottom: 1px solid var(--line);
}
.svc__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.svc:hover .svc__figure img { transform: scale(1.07); }

/* The service's icon rides on the bottom edge of the picture. It lives in the
   body and is pulled upwards, so the picture can clip its own zoom without
   clipping the badge as well. */
.svc__icon {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: -52px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--svc-ink, var(--blue));
  box-shadow: var(--shadow-md);
}
.svc__icon .icon { width: 25px; height: 25px; }

.svc__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }

.svc--cyan   { --svc-ink: var(--cyan); }
.svc--blue   { --svc-ink: var(--blue); }
.svc--violet { --svc-ink: var(--violet); }

.svc h3 { margin-bottom: 12px; }
.svc p { font-size: 0.96rem; line-height: 1.62; margin-bottom: 20px; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.svc__tags li {
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
}
/* `margin-top: auto` is what pins this to the bottom of every card, so the
   links line up across a row however long the descriptions are. */
.svc__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  width: 100%;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--svc-ink, var(--blue));
}
.svc__more .icon { width: 17px; height: 17px; transition: transform 0.24s ease; }
.svc:hover .svc__more .icon { transform: translateX(5px); }

/* The closing tile: an invitation rather than a service. */
.svc--cta {
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
  box-shadow: none;
}
/* No picture on this one, so its contents group together and sit in the
   middle rather than being pushed to the two ends of a tall card. */
/* Same bottom padding as a normal card, so its link lands on exactly the
   same line as its neighbour's. */
.svc--cta .svc__body { justify-content: center; padding: 34px 28px 28px; }
.svc--cta:hover { background: var(--surface); }
.svc--cta .svc__icon { margin-top: 0; margin-bottom: 20px; box-shadow: none; }
/* The closing tile keeps its link on the bottom line too, so every link
   in a row sits at the same height. */
.svc--cta p { max-width: 42ch; }

@media (prefers-reduced-motion: reduce) {
  .svc, .svc:hover, .svc__more .icon, .svc:hover .svc__figure img { transform: none; transition: none; }
}


/* ---------- Closing CTA ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(40px, 5.5vw, 76px);
  background-image: linear-gradient(126deg, #081038 0%, #122a78 42%, #3a1f7c 100%);
  border: 1px solid rgba(126, 160, 255, 0.3);
  box-shadow: 0 34px 80px rgba(6, 12, 40, 0.42);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto auto;
  width: 70%; height: 180%;
  background: radial-gradient(48% 48% at 50% 50%, rgba(43, 217, 240, 0.30), transparent 70%);
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: auto auto -70% -16%;
  width: 60%; height: 170%;
  background: radial-gradient(48% 48% at 50% 50%, rgba(154, 107, 255, 0.34), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band .eyebrow { color: #6fe3f5; }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: #ccd8ff; max-width: 54ch; font-size: 1.06rem; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.42); }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.cta-band .btn--primary { color: #04142c; }
.cta-band :focus-visible { outline-color: #6fe3f5; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }


/* ---------- Process timeline ---------- */
.steps { display: grid; gap: 0; grid-template-columns: 1fr; }

/* Phones and tablets: a vertical line down the left with the markers on it. */
.step {
  position: relative;
  padding: 0 0 34px 56px;
}
.step::before {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: -4px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  opacity: 0.3;
}
.step:last-child { padding-bottom: 0; }
.step:last-child::before { display: none; }

.step__no {
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.step b { display: block; color: var(--heading); font-size: 1.08rem; margin: 10px 0 7px; }
.step p { font-size: 0.94rem; margin: 0; max-width: 46ch; }

/* Desktop: the same five stages laid out along a horizontal line. */
@media (min-width: 1040px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .step { padding: 64px 0 0; }
  .step::before {
    left: 44px; right: -24px; top: 21px; bottom: auto;
    width: auto; height: 2px;
  }
  .step__no { top: 0; left: 0; }
  .step b { margin-top: 0; }
}



/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 880px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 0;
  color: var(--heading);
  font-weight: 650;
  font-size: 1.03rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq p { padding-bottom: 22px; font-size: 0.96rem; margin: 0; max-width: 72ch; }


/* Same for the footer's contact details. */
.footer__contact a,
.footer__contact span { overflow-wrap: anywhere; }


/* ==========================================================================
   Forms and messages. Shared by the public contact form and the admin, so
   they live here rather than in either page's own file.
   ========================================================================== */

/* ---------- The contact form ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: 0.95rem; color: var(--heading); }
.field .hint { font-size: 0.86rem; color: var(--text-dim); }
.field input,
.field select,
.field textarea {
  width: 100%;
  /* 16px on phones, or iPhones zoom the page in when the field is tapped. */
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  color: var(--heading);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.field--error input,
.field--error select,
.field--error textarea { border-color: #d1455c; }
.field__error { font-size: 0.88rem; font-weight: 600; color: #c22f47; }
:root[data-theme="dark"] .field__error { color: #ff9aa8; }

.field--check {
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.field--check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--blue); }
.field--check label { font-weight: 500; font-size: 0.94rem; color: var(--text); line-height: 1.55; }

.form__row { display: grid; gap: 20px; }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The honeypot. Hidden from people and from screen readers, but a script
   filling every field in the form will still find it. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid;
  font-size: 0.97rem;
}
.alert--error {
  background: rgba(209, 69, 92, 0.08);
  border-color: rgba(209, 69, 92, 0.4);
  color: #a32238;
}
:root[data-theme="dark"] .alert--error { color: #ffb3bd; }
.alert--good {
  background: rgba(16, 160, 110, 0.08);
  border-color: rgba(16, 160, 110, 0.38);
  color: #0a6b4a;
}
:root[data-theme="dark"] .alert--good { color: #8ff0c6; }