/*
 * The UK look, loaded after styles.css on every company page.
 *
 * styles.css is the layout the site shares with the original ENTRACCESS site.
 * Everything that makes this one ENTRACCESS UK sits here: the blue and
 * midnight palette from the LinkedIn page, a light header and hero, a sans
 * serif in place of Fraunces, pill buttons and rounder cards. Kept separate
 * so the layout can still be compared line for line with the original.
 */

:root {
  --navy-deep: #0b1220;
  --navy: #111a2e;
  --green: #2563eb;          /* the accent; the name is styles.css's */
  --green-bright: #60a5fa;
  --green-soft: #e8efff;
  --blue-ink: #1d4ed8;

  --ground: #ffffff;
  --ground-alt: #f5f8fe;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #64748b;
  --rule: #e2e8f3;
  --rule-strong: #cbd5e6;
  --on-dark: #eef3ff;
  --on-dark-soft: #a9b8d6;
  --shadow-lg: 0 28px 60px -24px rgb(15 23 42 / 0.28);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05), 0 2px 8px -4px rgb(15 23 42 / 0.06);

  --hero-ground: #eef4ff;
  --hero-grid: rgb(37 99 235 / 0.07);
  --head-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0b1220;
    --ground-alt: #0f1830;
    --surface: #131d36;
    --ink: #e8eefc;
    --ink-soft: #a9b8d6;
    --ink-faint: #7d8db0;
    --rule: #1f2b48;
    --rule-strong: #2b3b61;
    --green-soft: #15244a;
    --shadow-lg: 0 28px 60px -24px rgb(0 0 0 / 0.65);
    --shadow-sm: none;
    --hero-ground: #0e1730;
    --hero-grid: rgb(96 165 250 / 0.07);
  }
}
:root[data-theme="dark"] {
  --ground: #0b1220;
  --ground-alt: #0f1830;
  --surface: #131d36;
  --ink: #e8eefc;
  --ink-soft: #a9b8d6;
  --ink-faint: #7d8db0;
  --rule: #1f2b48;
  --rule-strong: #2b3b61;
  --green-soft: #15244a;
  --shadow-lg: 0 28px 60px -24px rgb(0 0 0 / 0.65);
  --shadow-sm: none;
  --hero-ground: #0e1730;
  --hero-grid: rgb(96 165 250 / 0.07);
}

/* ---------------- Type ---------------- */
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16.5px; }
h1, h2, h3,
.prose h1, .prose h2,
.assistant-head strong, .now-hiring strong, .lcgb-title, .app-step legend {
  font-family: var(--head-font); font-weight: 800; letter-spacing: -0.025em;
}
.card h3, .step h3, footer h4 { font-family: var(--head-font); }
.eyebrow { letter-spacing: 0.12em; }

/* ---------------- Header: light, not navy ---------------- */
.nav {
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  border-bottom: 1px solid var(--rule);
}
.brand img { width: 34px; border-radius: 9px; }
.brand span { font-family: var(--head-font); font-weight: 800; letter-spacing: 0.01em; color: var(--ink); }
.brand span b { color: var(--green); font-weight: 800; margin-left: 0.2em; }
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.theme-toggle { border-color: var(--rule-strong); color: var(--ink-soft); border-radius: 999px; }
.theme-toggle:hover { color: var(--ink); border-color: var(--green); }

/* ---------------- Buttons: pills ---------------- */
.btn { border-radius: 999px; }
.btn-primary { background: var(--green); box-shadow: 0 8px 20px -10px rgb(37 99 235 / 0.7); }
.btn-primary:hover { background: var(--blue-ink); }
.btn-outline { border: 1.5px solid var(--rule-strong); color: var(--ink); background: var(--surface); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-quiet { border-radius: 999px; }

/* ---------------- Hero: light, on the cover's blue grid ---------------- */
.hero {
  --on-dark: var(--ink);
  --on-dark-soft: var(--ink-soft);
  color: var(--ink);
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgb(96 165 250 / 0.22), transparent 60%),
    linear-gradient(var(--hero-grid) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--hero-ground);
  border-bottom: 1px solid var(--rule);
}
.hero h1 { color: var(--ink); }
.hero .eyebrow {
  display: inline-block; color: var(--blue-ink); background: var(--green-soft);
  padding: 0.35rem 0.8rem; border-radius: 999px;
}
.hero .hero-sub { color: var(--ink); }
.hero-tags li { border-color: var(--rule-strong); color: var(--ink-soft); background: var(--surface); }
.crumbs a { color: var(--green); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero .eyebrow { color: var(--green-bright); }
}
:root[data-theme="dark"] .hero .eyebrow { color: var(--green-bright); }

/* The reader mock-up stays dark, as a phone would be, in the UK blues. */
.device { background: #0a1122; border-color: rgb(96 165 250 / 0.25); box-shadow: 0 30px 70px -28px rgb(29 78 216 / 0.55); }
.device-screen { background: #111a2e; }
.device-bar .dot { background: var(--green-bright); }
.device-bar .lbl { color: #dbe6ff; }
.device-window { color: #93c5fd; background: rgb(59 130 246 / 0.14); }
.verdict { background: rgb(59 130 246 / 0.16); border-color: rgb(96 165 250 / 0.35); }
.verdict .tick { background: #3b82f6; }
.verdict .t { color: #bcd3ff; }

/* Careers: the open-role card, light on the light hero. */
.now-hiring {
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lg);
}
.now-hiring:hover { border-color: var(--green); }
.now-hiring strong { color: var(--ink); }
.now-hiring-tag { color: var(--green); }
.now-hiring-tag .dot { background: var(--green); box-shadow: 0 0 0 4px rgb(37 99 235 / 0.18); }
.now-hiring li::before { border-color: var(--green); }
.now-hiring-go { color: var(--green); }

/* ---------------- Proof strip: cards, not a navy band ---------------- */
.proof { background: var(--ground); border: 0; }
.proof .wrap { padding-block: 0; transform: translateY(-1.9rem); gap: 0.9rem; }
.proof div {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
  padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
}
.proof .k { color: var(--green); }
.proof .v { color: var(--ink-soft); }

/* ---------------- Sections ---------------- */
section { padding: 4.5rem 0; }
.head .eyebrow { color: var(--green); }
.card { border-radius: 18px; padding: 1.6rem; transition: border-color .15s ease, transform .15s ease; }
.card:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--rule)); transform: translateY(-2px); }
.card .mark {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 14px;
  margin-bottom: 0.6rem; background: var(--green-soft);
}
/* The arch from the logo, drawn small. */
.card .mark::after {
  content: ""; position: absolute; left: 12px; top: 11px; width: 20px; height: 24px;
  border: 3.5px solid var(--green); border-bottom: 0; border-radius: 10px 10px 0 0;
}

/* Numbered steps as blue badges rather than serif numerals. */
.step { grid-template-columns: 2.6rem 1fr; border-color: var(--rule); }
.step:last-child { border-color: var(--rule); }
.step .n, .stages span {
  font-family: var(--head-font); font-weight: 800; font-size: 1rem; color: #fff;
  width: 2.3rem; height: 2.3rem; border-radius: 999px; background: var(--green);
  display: grid; place-items: center;
}

/* Mission and vision as cards with a blue cap. */
.statement {
  border-left: 0; border-top: 4px solid var(--green); padding: 1.4rem 1.5rem;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.statement .who { color: var(--green); }

/* ---------------- Pricing ---------------- */
.tier { border-radius: 20px; }
.tier.featured { border: 2px solid var(--green); box-shadow: 0 30px 60px -30px rgb(37 99 235 / 0.45); }
.tier-tag { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.compare .yes { background: rgb(59 130 246 / 0.16); color: var(--green); }
.faq details { border-radius: 14px; }

/* ---------------- Contact: blue, not navy ---------------- */
.contact-panel {
  border-radius: 24px;
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgb(96 165 250 / 0.35), transparent 60%),
    linear-gradient(135deg, #1d4ed8 0%, #172554 70%, #0b1220 100%);
  box-shadow: 0 40px 80px -40px rgb(29 78 216 / 0.6);
}
.contact-panel .eyebrow, .mailbox a.addr, .field > span b { color: #bfdbfe; }
.field input, .field textarea, .contact-panel .field select { border-radius: 12px; }
.contact-panel .field select {
  background-color: rgb(255 255 255 / 0.08); color: #fff; border-color: rgb(255 255 255 / 0.22);
}
.contact-panel .field select option { color: #0f172a; }

/* ---------------- Assistant ---------------- */
.assistant-head { background: linear-gradient(135deg, #1d4ed8, #172554); }
.assistant-open { box-shadow: 0 12px 30px -10px rgb(37 99 235 / 0.65); }

/* ---------------- Footer and bands ---------------- */
footer {
  background: var(--navy-deep);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb) 1;
}
.cta-band { background: linear-gradient(135deg, #172554, #0b1220); }
.lcgb { background: #111a2e; }
a.channel:hover { background: rgb(59 130 246 / 0.18); }
a:focus-visible, button:focus-visible { outline-color: var(--green-bright); }

/* "ENTRACCESS UK" is wider than the original wordmark, so the links give way
   sooner rather than wrapping onto two lines. */
.nav-links a { white-space: nowrap; }
@media (max-width: 62rem) { .nav-links { display: none; } }
/* On a phone the whole wordmark fits if it is set a little smaller; cutting it
   to "ENTRACCESS…" would drop the one word that says which company this is. */
@media (max-width: 30rem) {
  .brand span { font-size: 0.86rem; overflow: visible; }
  .brand img { width: 30px; }
  .nav .btn { padding-inline: 0.85rem; font-size: 0.88rem; }
}
/* `.prose` resets the padding `.wrap` gives it, which put the privacy notice
   flush against the screen edge on a phone. */
.wrap.prose { padding-inline: 1.25rem; }