/* Inter, self-hosted (latin subset, variable weight 300-700). Loaded by every page, so no font request leaves this site. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/inter-latin-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Navigation components shared by every page, including the homepage: breadcrumbs, "keep reading" and "where next" cards,
   the site footer, back-to-top and the reading-progress bar. Class-based only, with no element selectors, so it is safe next
   to the homepage's own CSS. Tokens (--card, --border, --text-2 ...) come from the page or from site.css. */

/* Breadcrumb */
.breadcrumb { margin-bottom: 28px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 13px; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--text-2); }
.breadcrumb li + li::before { content: '\203A'; margin: 0 9px; color: var(--text-3); }
.breadcrumb a { color: var(--text-2); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 500; }

/* Keep reading / where next */
.next-block { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--border); }
.next-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.next-head h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin: 0; }
.next-head a { font-size: 13px; font-weight: 500; color: var(--blue-hi); text-decoration: none; }
.next-head a:hover { color: var(--text); }
.next-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.next-grid.three { grid-template-columns: repeat(3, 1fr); }
.next-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius, 12px); text-decoration: none; color: var(--text); min-width: 0; transition: border-color .25s, transform .25s, background .25s; }
.next-card:hover { border-color: var(--border-hi); transform: translateY(-2px); background: #112039; }
.next-dir { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.next-title { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.next-blurb { font-size: 13px; line-height: 1.65; color: var(--text-2); }
.next-card.is-next { text-align: right; align-items: flex-end; }
.next-card .next-arrow { transition: transform .25s; display: inline-block; }
.next-card:hover .next-arrow { transform: translateX(3px); }
.next-card.is-prev:hover .next-arrow { transform: translateX(-3px); }
@media (max-width: 700px) { .next-grid, .next-grid.three { grid-template-columns: 1fr; } .next-card.is-next { text-align: left; align-items: flex-start; } .next-block { margin-top: 56px; } }

/* Site footer */
.site-footer { display: block; padding: 56px 40px 28px; border-top: 1px solid var(--border); background: var(--bg); }
.sf-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1fr; gap: 40px; }
.sf-brand { min-width: 0; }
.sf-logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; margin-bottom: 14px; }
.sf-logo b { font-size: 15px; font-weight: 700; color: var(--text); }
.sf-logo span { font-size: 9px; letter-spacing: .22em; color: var(--cyan); margin-top: 3px; }
.sf-brand p { font-size: 13px; line-height: 1.6; color: var(--text-2); max-width: 260px; margin: 0 0 12px; }
.sf-brand a.sf-mail { font-size: 13px; color: var(--blue-hi); text-decoration: none; }
.sf-brand a.sf-mail:hover { color: var(--text); }
.sf-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sf-col h2 { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 4px; }
.sf-col a { font-size: 13px; color: var(--text-2); text-decoration: none; line-height: 1.4; transition: color .2s; }
.sf-col a:hover { color: var(--text); }
.sf-col a[aria-current] { color: var(--text); }
.sf-base { max-width: 1100px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.sf-base a { color: var(--text-3); text-decoration: none; }
.sf-base a:hover { color: var(--text-2); }
.sf-base { align-items: center; }
/* Cyber Essentials badge: the registry widget draws a verification strip below the badge that its 132px frame
   clips and cannot be hidden from outside, so the frame is cropped above it and the verification text is our own
   tooltip on the link that sits over the badge. */
.sf-cert { position: relative; flex: 0 0 132px; width: 132px; }
.sf-cert-clip { height: 101px; overflow: hidden; }
.sf-cert-clip iframe { display: block; width: 132px; height: 132px; }
.sf-cert-link { position: absolute; inset: 0; border-radius: 14px; }
.sf-cert-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sf-cert-tip { position: absolute; right: 0; bottom: calc(100% + 8px); width: 232px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border-hi); border-radius: 8px; color: var(--text-2); font-size: 12px; line-height: 1.5; text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; z-index: 5; }
.sf-cert:hover .sf-cert-tip, .sf-cert-link:focus-visible ~ .sf-cert-tip { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 700px) { .sf-cert { flex-basis: 100%; width: auto; } .sf-cert-clip { width: 132px; } .sf-cert-link { right: auto; width: 132px; } .sf-cert-tip { right: auto; left: 0; max-width: calc(100vw - 48px); } }
@media (prefers-reduced-motion: reduce) { .sf-cert-tip { transition: none; } }
@media (max-width: 900px) { .site-footer { padding: 44px 24px 24px; } .sf-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .sf-inner { grid-template-columns: 1fr; } }

/* Back to top and reading progress (created by enhance.js) */
.to-top { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-hi); background: rgba(15,27,48,.92); backdrop-filter: blur(8px); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s, border-color .2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--cyan); }
.to-top:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.read-progress { position: fixed; top: 68px; left: 0; right: 0; height: 2px; z-index: 101; background: transparent; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform-origin: 0 50%; transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .to-top, .next-card, .next-card .next-arrow, .glance-tile, .stage-items a { transition: none; } a.glance-tile:hover, .next-card:hover { transform: none; } }

/* Current-section highlight in the primary menu (homepage scrollspy; subpages use aria-current) */
.nav-links a[aria-current], .nav-mobile-menu a[aria-current] { color: var(--text); }

/* At a glance panels (Work on the homepage, Labs) */
.case-card, .card[id], .app-card[id], .stage-items a, [id^="work-"], [id^="lab-"], [id^="svc-"] { scroll-margin-top: 96px; }
.glance { margin: 36px 0 44px; padding: 26px; background: linear-gradient(180deg, #0e1a30, #0b1526); border: 1px solid var(--border); border-radius: 16px; }
.glance-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.glance-head h2, .glance-head h3 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin: 0; }
.glance-head p { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 0; max-width: 620px; }
.glance-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; }
.glance-col { min-width: 0; }
.glance-col-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.glance-kind { font-size: 14px; font-weight: 600; color: var(--text); }
.glance-note { font-size: 12px; color: var(--text-3); }
.glance-tiles { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; }
.glance-col + .glance-col .glance-tiles { grid-template-columns: 1fr; }
.glance-tile { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 14px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color .2s, transform .2s; }
/* Visible "View" cue: first-time visitors did not read the tiles as clickable. Static, so it also works with reduced motion. */
a.glance-tile::after { content: 'View \2192'; align-self: flex-end; margin-top: -2px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--blue-hi); transition: color .2s; }
a.glance-tile:hover { border-color: var(--cyan); transform: translateY(-2px); }
a.glance-tile:hover::after, a.glance-tile:focus-visible::after { color: var(--text); }
.glance-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.glance-what { font-size: 12px; line-height: 1.55; color: var(--text-2); }
.glance-badge { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; border: 1px solid; }
.glance-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.glance-tile .glance-what { margin-bottom: 4px; }
.b-live { color: #34d399; border-color: #134e3a; background: #0b2a22; }
.b-dev { color: #fbbf24; border-color: #5b4310; background: #2a2108; }
.b-sandbox { color: #22d3ee; border-color: #0f4a57; background: #0a2731; }
.b-anon { color: #a9b8d6; border-color: #2b3c5a; background: #111d33; }
.glance-foot { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-3); }
@media (max-width: 900px) { .glance-cols { grid-template-columns: 1fr; } .glance { padding: 20px; } }
@media (max-width: 520px) { .glance-tiles { grid-template-columns: 1fr; } }

/* Labs pipeline */
.pipeline { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; }
.stage { position: relative; padding-right: 22px; min-width: 0; }
.stage-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stage-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34,211,238,.15); flex: none; }
.stage-dev .stage-dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.15); }
.stage-empty .stage-dot { background: transparent; border: 2px dashed var(--text-3); box-shadow: none; }
.stage-line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--border-hi), var(--border)); }
.stage:last-child .stage-line { display: none; }
.stage-name { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 2px; }
.stage-sub { font-size: 12px; line-height: 1.5; color: var(--text-3); margin: 0 0 12px; min-height: 3em; }
.stage-items { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.stage-items a, .stage-items .stage-none { display: block; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 500; text-decoration: none; color: var(--text); transition: border-color .2s; }
.stage-items a:hover { border-color: var(--border-hi); }
.stage-items small { display: block; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--text-2); margin-top: 3px; }
.stage-items .stage-none { border-style: dashed; color: var(--text-3); font-weight: 400; }
@media (max-width: 700px) { .pipeline { grid-template-columns: 1fr; gap: 22px; } .stage { padding-right: 0; } .stage-line { display: none; } }

/* Cross-links between services, work and insights */
.svc-links { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.svc-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 6px; }
.svc-links .lbl { color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 600; }
.svc-links a, .case-related a, .related-line a, .trigger-link { color: var(--blue-hi); text-decoration: none; }
.svc-links a:hover, .case-related a:hover, .related-line a:hover, .trigger-link:hover { color: var(--text); }
.trigger-link { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 500; }
.case-related { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.related-line { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.case-related .lbl, .related-line .lbl { color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 600; }
.related-line { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }

/* Shared page opening for subpages: the same gradient and grid as Who we are, toned down */
.page-hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 560px; z-index: 0; pointer-events: none; background: radial-gradient(circle at 78% 26%, rgba(18,57,102,.7) 0, transparent 42%), linear-gradient(180deg, #0b1730 0%, var(--bg) 100%); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.page-hero-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%); }
.page-hero-bg + main { position: relative; z-index: 1; }
@media (max-width: 700px) { .page-hero-bg { height: 420px; } }

/* IQ story on the homepage (Work) */
.story-heading { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin: 34px 0 14px; }
.iq-firstlook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.iq-firstlook figure { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.iq-firstlook img, .story-step img { display: block; width: 100%; height: auto; }
.iq-firstlook figcaption { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; font-size: 12px; color: var(--text); border-top: 1px solid var(--border); }
.story-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.story-step { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 26px; align-items: start; }
.story-step figure { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.story-step figcaption { padding: 9px 12px; font-size: 12px; border-top: 1px solid var(--border); }
.story-step figcaption a { color: var(--cyan); text-decoration: none; font-weight: 600; }
.story-step figcaption a:hover { text-decoration: underline; }
.story-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 4px; }
.story-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cyan); color: var(--cyan); font-size: 13px; font-weight: 700; }
.story-beat { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.story-app { font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.2; }
.story-text p { font-size: 13px; line-height: 1.7; color: var(--text-2); margin: 4px 0 0; }
@media (max-width: 800px) { .iq-firstlook { grid-template-columns: 1fr; } .story-step { grid-template-columns: 1fr; gap: 14px; } }

/* Images inside Labs cards */
.app-shot .work-image-link { display: block; cursor: zoom-in; }
.app-shot .work-image-link:hover img { opacity: .88; }
.app-shot .work-image-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.app-shot { margin: 16px 0 0; }
.app-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
.app-shot figcaption { margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--text-3); }
.phone-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.phone-strip .work-image-link { flex: 1 1 0; min-width: 0; }
.phone-strip figcaption { flex-basis: 100%; margin-top: 4px; }

/* Skip link (also defined in site.css for subpages; the homepage only loads this file) */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--card); color: var(--text); border: 1px solid var(--border-hi); border-radius: 6px; padding: 10px 16px; font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 12px; }
/* Text for screen readers only (e.g. "opens in a new tab"). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Shareable link under each Work case title */
.case-permalink { display: flex; align-items: center; gap: 12px; margin: -6px 0 16px; font-size: 12px; }
.case-permalink a { color: var(--cyan); text-decoration: none; font-weight: 600; }
.case-permalink a:hover { text-decoration: underline; }
.case-permalink a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }
.case-permalink span { color: var(--text-3); }
.case-card:target { border-color: var(--cyan); }

/* Walkthrough video inside a Work case */
.work-video { margin: 16px 0 24px; }
.work-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border); border-radius: 8px; }
.work-video figcaption { margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--text-3); }
.work-transcript { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.work-transcript summary { cursor: pointer; color: var(--cyan); font-weight: 600; }
.work-transcript summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }
.work-transcript p { margin: 10px 0 0; }