/*
 * numericatech.co: the one stylesheet.
 *
 * The look is the Numerica Tech brand kit's (brand/README.md): its tokens and shared styles come
 * first, from the version site.brandKit names, and everything below takes colours, fonts, sizes,
 * weights, radii and shadows from them as var(--nt-…), never as values of its own
 * (tests/site-css.test.mjs refuses one). The page's base (text, links, headings, focus) is the kit's
 * .nt, on <body>; posts, job posts and legal pages are its .nt-prose; buttons, fields and badges are
 * its .nt-button, .nt-input and .nt-badge.
 *
 * Headings, one ladder for every page:
 *   banner title (h1 on a picture)  --nt-size-display     page title (h1)       --nt-size-title
 *   section title (h2)              --nt-size-section     card title            --nt-size-h2
 *   small title                     --nt-size-h3          lead text             --nt-size-lead
 * The sizes are fluid between a phone and a desktop, so few rules change them by breakpoint.
 *
 * The layout is the old Elementor site's, measured with tools/blueprint.mjs and read from Elementor's
 * CSS with tools/elementor-css.mjs: widths and spacing. It changes at the kit's two breakpoints only
 * (tokens.json `breakpoints`: a tablet up to 1024px, a phone up to 767px), as max-width at one or
 * min-width one pixel past it. CSS cannot read a custom property in a @media rule, so the numbers are
 * written out, and tests/site-css.test.mjs refuses any other width.
 * Built by Eleventy only so background images can point at optimised files ({% imageUrl %}).
 */

/* ===== Brand kit ================================================================================== */

/* Numerica Tech brand kit v1 (draft): tokens. Generated by tools/brand/make-kit.mjs. */
:root {
  --nt-blue-50: #eef2fe;
  --nt-blue-100: #dbe3fd;
  --nt-blue-400: #467ff7;
  --nt-blue-700: #1834bc;
  --nt-blue-900: #0f2278;
  --nt-slate-50: #f3f5f8;
  --nt-slate-100: #e3e8ef;
  --nt-slate-200: #c8d5dc;
  --nt-slate-500: #5c6f8a;
  --nt-slate-700: #324a6d;
  --nt-slate-900: #1c244b;
  --nt-orange-50: #fef3e7;
  --nt-orange-400: #f7a046;
  --nt-orange-700: #a8570a;
  --nt-coral-50: #f9e0e2;
  --nt-coral-400: #f76e79;
  --nt-coral-600: #e23125;
  --nt-coral-700: #a81c13;
  --nt-white: #ffffff;
  --nt-text: var(--nt-slate-700);
  --nt-heading: var(--nt-slate-900);
  --nt-muted: var(--nt-slate-500);
  --nt-link: var(--nt-orange-700);
  --nt-link-hover: var(--nt-blue-700);
  --nt-surface: var(--nt-white);
  --nt-surface-alt: var(--nt-slate-50);
  --nt-surface-tint: var(--nt-slate-100);
  --nt-surface-dark: var(--nt-slate-700);
  --nt-on-dark: var(--nt-white);
  --nt-accent-on-dark: var(--nt-orange-400);
  --nt-rule: var(--nt-slate-200);
  --nt-field-border: var(--nt-slate-500);
  --nt-focus: var(--nt-blue-700);
  --nt-primary: var(--nt-blue-700);
  --nt-primary-strong: var(--nt-blue-900);
  --nt-on-primary: var(--nt-white);
  --nt-accent: var(--nt-orange-400);
  --nt-accent-strong: var(--nt-orange-700);
  --nt-on-accent: var(--nt-slate-900);
  --nt-on-accent-strong: var(--nt-white);
  --nt-highlight: var(--nt-blue-400);
  --nt-warm: var(--nt-coral-50);
  --nt-warm-edge: var(--nt-coral-400);
  --nt-warm-text: var(--nt-coral-700);
  --nt-on-warm: var(--nt-slate-900);
  --nt-danger: var(--nt-coral-700);
  --nt-code-surface: var(--nt-slate-50);
  --nt-font-sans: "Poppins", sans-serif;
  --nt-font-mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  --nt-weight-light: 300;
  --nt-weight-regular: 400;
  --nt-weight-medium: 500;
  --nt-weight-semibold: 600;
  --nt-weight-bold: 700;
  --nt-size-display: clamp(34px, calc(34px + (100vw - 390px) * 26 / 1050), 60px);
  --nt-size-title: clamp(26px, calc(26px + (100vw - 390px) * 14 / 1050), 40px);
  --nt-size-section: clamp(25px, calc(25px + (100vw - 390px) * 10 / 1050), 35px);
  --nt-size-h2: clamp(21px, calc(21px + (100vw - 390px) * 5 / 1050), 26px);
  --nt-size-h3: clamp(18px, calc(18px + (100vw - 390px) * 2 / 1050), 20px);
  --nt-size-h4: clamp(16px, calc(16px + (100vw - 390px) * 1 / 1050), 17px);
  --nt-size-lead: clamp(17px, calc(17px + (100vw - 390px) * 1 / 1050), 18px);
  --nt-size-body: 16px;
  --nt-size-small: 14px;
  --nt-size-caption: 12px;
  --nt-leading-tight: 1.2;
  --nt-leading-normal: 1.5;
  --nt-leading-prose: 1.7;
  --nt-space-1: 4px;
  --nt-space-2: 8px;
  --nt-space-3: 12px;
  --nt-space-4: 16px;
  --nt-space-5: 24px;
  --nt-space-6: 32px;
  --nt-space-7: 48px;
  --nt-space-8: 64px;
  --nt-space-9: 96px;
  --nt-radius-sm: 3px;
  --nt-radius-md: 8px;
  --nt-radius-lg: 20px;
  --nt-radius-pill: 999px;
  --nt-shadow-card: 0 4px 44px 0 rgb(0 0 0 / 0.1);
  --nt-shadow-card-hover: 0 2px 25px 0 rgb(0 0 0 / 0.2);
  --nt-gradient-warm: radial-gradient(at top center, var(--nt-coral-50) 0%, var(--nt-coral-400) 100%);
}

/* Numerica Tech brand kit v1 (draft): shared styles. Generated by tools/brand/make-kit.mjs. */
/*
 * The Numerica Tech brand kit's shared styles (brand/README.md). Colours, fonts, sizes, spacing and
 * radii come only from the tokens (tokens.css); tools/brand/make-kit.mjs refuses a colour literal or
 * an undefined variable here.
 *
 *   .nt          a page or app that takes the kit's base: text, links, headings, focus. The base
 *                rules weigh nothing (:where), so any class of the app's own overrides them.
 *   .nt-prose    long-form text (posts, legal pages): one heading hierarchy, h2 > h3 > h4
 *   .nt-button   buttons: --primary, --accent, --outline, and --on-dark on a dark panel or picture
 *   .nt-field    a labelled form field; .nt-input for inputs, selects and text areas
 *   .nt-badge    a small label beside a name or a title
 */

/* ===== Base ===================================================================================== */

.nt {
  color: var(--nt-text);
  font-family: var(--nt-font-sans);
  font-size: var(--nt-size-body);
  font-weight: var(--nt-weight-light);
  line-height: var(--nt-leading-normal);
}
:where(.nt) a { color: var(--nt-link); }
:where(.nt) a:hover { color: var(--nt-link-hover); }
.nt :focus-visible { outline: 2px solid var(--nt-focus); outline-offset: 2px; }
:where(.nt) :where(h1, h2, h3, h4) { color: var(--nt-heading); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); }

/* ===== Prose: posts and legal pages ============================================================ */

.nt-prose {
  color: var(--nt-text);
  font-family: var(--nt-font-sans);
  font-size: var(--nt-size-body);
  font-weight: var(--nt-weight-light);
  line-height: var(--nt-leading-prose);
}
.nt-prose > :first-child { margin-top: 0; }
.nt-prose > :last-child { margin-bottom: 0; }
.nt-prose p { margin: 0 0 1em; }
.nt-prose :is(h2, h3, h4) {
  color: var(--nt-heading);
  font-family: var(--nt-font-sans);
  font-weight: var(--nt-weight-semibold);
  line-height: var(--nt-leading-tight);
  text-transform: none;
}
/* More space above a heading than below: it belongs to the text it introduces. */
.nt-prose h2 { margin: 1.8em 0 0.6em; font-size: var(--nt-size-h2); }
.nt-prose h3 { margin: 1.6em 0 0.5em; font-size: var(--nt-size-h3); }
.nt-prose h4 { margin: 1.4em 0 0.4em; font-size: var(--nt-size-h4); }
.nt-prose :is(h2, h3, h4) + :is(h2, h3, h4) { margin-top: 0.8em; }
.nt-prose strong { font-weight: var(--nt-weight-semibold); }
.nt-prose a { color: var(--nt-link); text-decoration: underline; text-underline-offset: 0.15em; }
.nt-prose a:hover { color: var(--nt-link-hover); }
.nt-prose :is(ul, ol) { margin: 0 0 1em; padding-left: 1.4em; }
.nt-prose li { margin: 0.3em 0; }
/* A list item that only holds an indented list has no bullet of its own. */
.nt-prose li.is-plain { list-style: none; }
.nt-prose li > :is(ul, ol) { margin: 0.3em 0 0; }
.nt-prose :not(pre) > code {
  padding: 0.1em 0.35em; border-radius: var(--nt-radius-sm); background: var(--nt-code-surface);
  font-family: var(--nt-font-mono); font-size: 0.9em;
}
.nt-prose blockquote { margin: 1.4em 0; padding: 0 0 0 1em; border-left: 3px solid var(--nt-accent); }
.nt-prose img { max-width: 100%; height: auto; border-radius: var(--nt-radius-md); }
.nt-prose figure { margin: 1.4em 0; }
.nt-prose figcaption { margin-top: 0.5em; color: var(--nt-muted); font-size: var(--nt-size-small); }
.nt-prose table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: var(--nt-size-small); }
.nt-prose :is(th, td) { padding: 0.5em 0.75em; border: 1px solid var(--nt-rule); text-align: left; vertical-align: top; }
.nt-prose th { background: var(--nt-surface-alt); font-weight: var(--nt-weight-semibold); }
.nt-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--nt-rule); }

/* ===== Buttons ================================================================================== */

.nt-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  padding: 0.75em 1.4em; border: 1px solid transparent; border-radius: var(--nt-radius-sm);
  font-family: var(--nt-font-sans); font-size: var(--nt-size-body); font-weight: var(--nt-weight-medium); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.nt-button:disabled { opacity: 0.6; cursor: not-allowed; }
.nt-button--primary { background: var(--nt-primary); color: var(--nt-on-primary); }
.nt-button--primary:hover { background: var(--nt-primary-strong); color: var(--nt-on-primary); }
.nt-button--accent { background: var(--nt-accent); color: var(--nt-on-accent); }
.nt-button--accent:hover { background: var(--nt-accent-strong); color: var(--nt-on-accent-strong); }
.nt-button--outline { border-color: currentColor; background: transparent; color: var(--nt-primary); }
.nt-button--outline:hover { border-color: var(--nt-primary); background: var(--nt-primary); color: var(--nt-on-primary); }
.nt-button--on-dark { border-color: currentColor; background: transparent; color: var(--nt-on-dark); }
.nt-button--on-dark:hover { border-color: var(--nt-on-dark); background: var(--nt-on-dark); color: var(--nt-heading); }

/* ===== Form fields ============================================================================== */

/* One column that may be narrower than an input's natural width, so a field fits a phone. */
.nt-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nt-space-2); margin: 0 0 var(--nt-space-4); }
.nt-field > label { color: var(--nt-heading); font-weight: var(--nt-weight-regular); }
.nt-input {
  box-sizing: border-box; width: 100%; margin: 0; padding: 0.6em 0.9em; border: 1px solid var(--nt-field-border); border-radius: var(--nt-radius-sm);
  background: var(--nt-surface); color: var(--nt-heading);
  font-family: var(--nt-font-sans); font-size: var(--nt-size-body); font-weight: var(--nt-weight-regular); line-height: var(--nt-leading-normal);
}
textarea.nt-input { resize: vertical; }
.nt-input:focus { border-color: var(--nt-focus); outline: 2px solid var(--nt-focus); outline-offset: 0; }
.nt-input[aria-invalid="true"] { border-color: var(--nt-danger); }

/* ===== Badge ==================================================================================== */

.nt-badge {
  display: inline-block; padding: 0.15em 0.45em; border: 1px solid var(--nt-accent); border-radius: var(--nt-radius-sm);
  color: var(--nt-accent-strong); font-size: var(--nt-size-caption); font-weight: var(--nt-weight-medium); line-height: 1.2;
  vertical-align: middle;
}


/* ===== Layout ===================================================================================== */

:root {
  --content-width: 1350px;
  --header-height: 62px;
}

/* ===== Base ======================================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-height); }

body { margin: 0; background: var(--nt-surface); -webkit-font-smoothing: antialiased; }

img, svg, video { max-width: 100%; height: auto; }
img { border: 0; vertical-align: middle; }

a { text-decoration: none; transition: color 0.3s; }

h1, h2, h3, h4, h5, h6 { margin: 0.5rem 0 1rem; font-family: var(--nt-font-sans); }
h1 { font-size: var(--nt-size-title); }
h2 { font-size: var(--nt-size-section); }
h3 { font-size: var(--nt-size-h3); }
h4, h5, h6 { font-size: var(--nt-size-h4); }
p { margin: 0 0 0.9rem; }
/* As the old theme: bold is one step heavier than its text. */
b, strong { font-weight: bolder; }

button, input, select, textarea { font: inherit; }

.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
.nt-button .icon { width: 1em; height: 1em; }

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

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 24px; background: var(--nt-surface); color: var(--nt-text); }
.skip-link:focus { left: 8px; top: 8px; }

/* Entrance animations, as Elementor's fadeInUp / fadeInDown: site.js adds .is-revealed in view. */
[data-reveal] { opacity: 0; }
[data-reveal].is-revealed { animation: 1.25s both reveal-up; }
[data-reveal="down"].is-revealed { animation-name: reveal-down; }
@keyframes reveal-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes reveal-down { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-revealed { opacity: 1; animation: none; }
}

/* ===== Header ===================================================================================== */

.site-header { position: sticky; top: 0; z-index: 15; min-height: 60px; }
.site-header::before {
  content: ""; position: absolute; inset: 0;
  background: url(/img/21-sjlS2D-1024w.webp) top left;
  opacity: 0.9;
}
.site-header__inner {
  position: relative; display: flex; align-items: center;
  max-width: var(--content-width); margin: 0 auto; min-height: 60px;
}
.site-header__logo { flex: 0 0 22%; display: flex; }
.site-header__logo img { width: 100%; height: auto; }
/* The tools keep to their 78%: on a narrow desktop the search box gives up its width to the menu. */
.site-header__tools { flex: 0 0 78%; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
.site-header__login { padding: 8px 15px; }

/* Search: Elementor's "minimal" search form */
.search-box {
  flex: 0 1 16%; min-width: 0; max-width: 16%; padding: 0 15px; display: flex; align-items: stretch;
}
.search-box:focus-within { outline: 2px solid var(--nt-focus); outline-offset: -2px; }
.search-box__icon {
  box-sizing: content-box; width: 17px; height: 30px; padding-left: 10px;
  background: var(--nt-surface-alt); fill: var(--nt-text); opacity: 1;
}
.search-box__icon path { opacity: 0.6; }
.search-box__input {
  flex: 1 1 100%; min-width: 0; min-height: 30px; margin: 0; padding: 0 10px;
  border: 0; border-radius: var(--nt-radius-sm); background: var(--nt-surface-alt); color: var(--nt-text);
  font-size: var(--nt-size-small); font-weight: var(--nt-weight-light); line-height: var(--nt-leading-normal);
  -webkit-appearance: none; appearance: none;
}
.search-box__input::placeholder { color: inherit; opacity: 0.6; }
.search-box__input:focus { outline: 0; }

/* Main menu: horizontal from 1025px, a toggled panel below the header up to 1024px. The current and
   hovered items sit on the accent, in its dark text. */
.main-nav { position: static; }
.main-nav__list, .main-nav__sub { list-style: none; margin: 0; padding: 0; }
.main-nav__list { display: flex; }
.main-nav__item { position: relative; display: flex; align-items: center; }
.main-nav__link {
  position: relative; z-index: 0; display: flex; align-items: center;
  padding: 13px 20px; color: var(--nt-on-dark);
  font-size: var(--nt-size-lead); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight);
}
.main-nav__item--parent .main-nav__link { padding-right: 0; }
.main-nav__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--nt-accent); opacity: 0; transition: 0.3s;
}
.main-nav__link:hover, .main-nav__link:focus, .main-nav__link.is-active,
.main-nav__item--parent:hover > .main-nav__link { color: var(--nt-on-accent); }
.main-nav__link:hover::before, .main-nav__link:focus::before, .main-nav__link.is-active::before { opacity: 1; }

.main-nav__subtoggle {
  display: flex; align-items: center; align-self: stretch;
  padding: 0 20px 0 9px; border: 0; background: transparent; color: var(--nt-on-dark); cursor: pointer;
  font-size: var(--nt-size-caption);
}
.main-nav__item--parent:hover > .main-nav__subtoggle,
.main-nav__item--parent:has(> .main-nav__link.is-active) > .main-nav__subtoggle { background: var(--nt-accent); color: var(--nt-on-accent); }
.main-nav__item--parent:hover > .main-nav__link::before { opacity: 1; }

.main-nav__sub {
  position: absolute; top: 100%; left: 0; z-index: 9997; width: 12em; display: none;
  background: var(--nt-primary);
}
.main-nav__item--parent:hover > .main-nav__sub,
.main-nav__item--parent:focus-within > .main-nav__sub,
.main-nav__sub.is-open { display: block; }
.main-nav__sublink {
  display: block; padding: 13px 20px; border-left: 8px solid transparent;
  color: var(--nt-on-dark); font-size: var(--nt-size-body); font-weight: var(--nt-weight-medium); line-height: var(--nt-leading-tight);
}
.main-nav__sublink:hover, .main-nav__sublink:focus, .main-nav__sublink.is-active { background: var(--nt-accent); color: var(--nt-on-accent); }

.main-nav__toggle {
  display: none; align-items: center; justify-content: center;
  margin-left: auto; padding: 0.25em; border: 0; border-radius: var(--nt-radius-sm);
  background: color-mix(in srgb, var(--nt-on-dark) 10%, transparent); color: var(--nt-on-dark); cursor: pointer;
  font-size: var(--nt-size-h2);
}
.main-nav__toggle:hover, .main-nav__toggle:focus { background: var(--nt-accent); color: var(--nt-on-accent); }
.main-nav__toggle .main-nav__close,
.main-nav__toggle[aria-expanded="true"] .main-nav__open { display: none; }
.main-nav__toggle[aria-expanded="true"] .main-nav__close { display: block; }

@media (max-width: 1024px) {
  .site-header__inner { max-width: none; }
  .site-header__logo { flex-basis: 30%; }
  .site-header__tools { flex-basis: 70%; align-items: flex-end; align-self: center; }
  .search-box { flex: 0 0 140px; max-width: 140px; }

  .main-nav { width: 56.325px; display: flex; }
  .main-nav__toggle { display: flex; }
  .main-nav__list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 9997;
    flex-direction: column; background: var(--nt-primary);
    max-height: 0; overflow: hidden; transform: scaleY(0); transform-origin: top;
    transition: max-height 0.3s, transform 0.3s;
  }
  .main-nav__toggle[aria-expanded="true"] + .main-nav__list { max-height: 100vh; transform: scaleY(1); overflow-y: auto; }
  .main-nav__item { flex-wrap: wrap; }
  .main-nav__link, .main-nav__item--parent .main-nav__link {
    flex: 1; padding: 10px 30px; border-left: 8px solid transparent;
    font-size: var(--nt-size-small); font-weight: var(--nt-weight-medium);
  }
  .main-nav__link::before { display: none; }
  .main-nav__link.is-active, .main-nav__link:hover { background: var(--nt-accent); color: var(--nt-on-accent); }
  .main-nav__item--parent:hover > .main-nav__link:not(.is-active, :hover) { color: var(--nt-on-dark); }
  .main-nav__item--parent:hover > .main-nav__subtoggle { background: transparent; color: var(--nt-on-dark); }
  .main-nav__subtoggle { padding: 10px 30px; }
  .main-nav__sub { position: static; width: 100%; display: none; background: transparent; }
  .main-nav__item--parent:hover > .main-nav__sub,
  .main-nav__item--parent:focus-within > .main-nav__sub { display: none; }
  .main-nav__sub.is-open { display: block; }
  .main-nav__sublink { padding: 10px 30px 10px 50px; font-size: var(--nt-size-small); }
}
@media (max-width: 767px) {
  .site-header__inner { flex-wrap: wrap; min-height: 60px; }
  .site-header__logo { flex-basis: 70%; align-self: flex-start; }
  .site-header__tools { flex-basis: 30%; align-self: flex-end; }
  .site-header__login { margin: 2px; padding: 7px; }
  .search-box { display: none; }
  .main-nav { width: auto; }
}

/* ===== Footer: dark text on the warm gradient ===================================================== */

.site-footer {
  display: flow-root;
  background: var(--nt-gradient-warm);
  color: var(--nt-on-warm);
}
.site-footer--cta { background: radial-gradient(at bottom center, var(--nt-warm) 0%, var(--nt-warm-edge) 100%); }
.site-footer a:not(.nt-button) { color: var(--nt-on-warm); }
.site-footer a:not(.nt-button):hover, .footer-links__link.is-active { color: var(--nt-on-warm); text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer .nt-button--outline { color: var(--nt-on-warm); }
.site-footer .nt-button--outline:hover { border-color: var(--nt-on-warm); background: var(--nt-on-warm); color: var(--nt-warm); }

.footer-cta { margin: 5% 0; text-align: center; }
/* The 780px column holds the content; percentages inside it resolve against it, as on the old site. */
.footer-cta__inner { max-width: 780px; margin: 0 auto; }
.footer-cta__eyebrow {
  margin: 0; font-size: var(--nt-size-body); font-weight: var(--nt-weight-bold); line-height: var(--nt-leading-normal);
  letter-spacing: 0.4em; text-transform: uppercase;
}
.footer-cta__title {
  margin: 0; color: var(--nt-on-warm);
  font-size: var(--nt-size-title); font-weight: var(--nt-weight-bold); line-height: var(--nt-leading-tight);
}
.footer-cta__text { margin: 0.5em 0 0; }
.footer-cta__action { margin: 2% 0 0; }

/* Elementor's 5% top padding resolved against a column 90% of the page wide: 4.5vw. */
.footer-main {
  display: flex; padding: 4.5vw 5% 0;
  border-top: 2px solid var(--nt-warm-text);
}
.footer-main__about { flex: 0 0 30%; padding-right: 5%; }
.footer-main__logo { width: 230px; height: 47px; object-fit: contain; object-position: center left; }
.footer-main__links { flex: 0 0 15.355%; }
.footer-main__contact { flex: 0 0 26.736%; }
.footer-main__newsletter { flex: 0 0 30%; display: flex; flex-direction: column; gap: 15px; }
.footer-main__newsletter p { margin: 0; }
.footer-main__heading {
  margin: 0; padding-bottom: 5px; color: var(--nt-on-warm);
  font-size: var(--nt-size-h3); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); text-transform: capitalize;
}
.footer-main__contact .footer-main__heading { padding-bottom: 8px; }
.footer-main__newsletter .footer-main__heading { padding-bottom: 0; text-transform: none; }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links__link { display: inline-flex; align-items: center; gap: 0.25em; padding: 2px 0; }
@media (min-width: 1025px) { .site-footer--cta .footer-links__link { padding: 0; } }

.contact-list { list-style: none; margin: 0; padding: 0 0 10px; }
.contact-list li + li { margin-top: 2.5px; }
.contact-list li:not(:last-child) { padding-bottom: 2.5px; }
.contact-list a { display: inline-flex; align-items: center; }
.contact-list .icon { width: 14px; height: 14px; margin-right: 3.5px; }
.contact-list span { padding-left: 5px; }
.contact-list li:last-child span { padding-left: 0; }

.newsletter-email { margin: 0; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin: 3% 0 2%; padding: 0 5%;
}
.footer-bottom__copyright { margin: 0; }
.social-links { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.social-links a { display: flex; font-size: var(--nt-size-h2); }
.social-links .icon { width: 1em; height: 1em; }

.footer-legal { display: flex; justify-content: center; padding: 0 5%; }
.footer-legal ul { list-style: none; display: flex; margin: 0; padding: 0; }
.footer-legal li { position: relative; }
/* Elementor's menu divider: a 2px bar, 35% of the item's height, between the links */
.footer-legal li:not(:last-child)::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; height: 35%; margin: auto 0;
  border-left: 2px solid var(--nt-warm-text);
}
.footer-legal a { display: block; padding: 13px 12.5px; font-size: var(--nt-size-small); line-height: var(--nt-leading-tight); }
.footer-legal li:first-child a { padding-left: 0; }
.footer-legal li:last-child a { padding-right: 0; }

@media (max-width: 1024px) {
  .footer-cta { padding: 0 5%; }
  .footer-main { flex-wrap: wrap; }
  .footer-main__about { flex-basis: 100%; margin-bottom: 6%; padding: 0 15%; text-align: center; }
  .footer-main__logo { width: 100%; height: 40px; object-position: center; }
  .footer-main__links, .footer-main__contact { flex-basis: 50%; }
  .footer-links__link { padding: 2px 0; }
  .footer-main__newsletter { flex-basis: 73.376%; margin-top: 6%; }
  .footer-bottom { margin: 10% 0 5%; }
}
@media (max-width: 767px) {
  .footer-cta { margin: 35% auto 20%; }
  .footer-cta .nt-button { width: 100%; }
  .footer-main { padding: 10.8vw 5% 0; }
  .footer-main__about { margin-bottom: 10%; padding: 0; }
  .footer-main__logo { width: 200px; height: 45px; }
  .footer-main__links { flex-basis: 36%; display: flex; flex-direction: column; gap: 10px; }
  .footer-main__contact { flex-basis: 64%; display: flex; flex-direction: column; gap: 10px; }
  .footer-main__contact .footer-main__heading { align-self: center; }
  .footer-links__link { padding: 4px 0; }
  .footer-main__newsletter { flex-basis: 100%; margin-top: 10%; text-align: center; }
  .footer-main__newsletter .footer-main__heading { align-self: center; }
  .footer-bottom { flex-direction: column; gap: 15px; margin: 12% 0 10%; text-align: center; }
}

/* ===== Shared: section titles, tabs ============================================================== */

.section-title {
  margin: 0; padding: 5px; text-align: center;
  color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight);
}

/* Tabs: a row of titles over the panels; from 767px down, each title sits above its own panel. */
.tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; }
.tabs__list { display: flex; gap: 10px; }
.tabs__tab {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 15px 35px; border: 1px solid var(--nt-surface-alt); border-radius: 0;
  background: var(--nt-surface-alt); color: var(--nt-text); cursor: pointer;
  font-family: var(--nt-font-sans); font-size: var(--nt-size-h3); font-weight: var(--nt-weight-medium); line-height: var(--nt-leading-tight); text-align: center;
}
.tabs__tab:hover { border: 2px solid var(--nt-surface-dark); }
/* The selected tab has no border but a 2px bottom one in its own colour (Elementor's), so both tabs are 48px. */
.tabs__tab[aria-selected="true"] { border: 0; border-bottom: 2px solid var(--nt-surface-dark); background: var(--nt-surface-dark); color: var(--nt-on-dark); }
.tabs__panel[hidden] { display: none; }
@media (max-width: 767px) {
  /* Space only around the open panel; closed titles stack edge to edge. */
  .tabs { row-gap: 0; }
  .tabs__panel { margin: var(--tabs-panel-margin, 10px 0); }
  .tabs__list { display: contents; }
  .tabs__tab[aria-selected="true"] { border-bottom: 0; }
  .tabs__tab:nth-child(1) { grid-row: 1; }
  .tabs__panel:nth-child(2) { grid-row: 2; }
  .tabs__tab:nth-child(2) { grid-row: 3; }
  .tabs__panel:nth-child(3) { grid-row: 4; }
  .tabs__tab:nth-child(3) { grid-row: 5; }
  .tabs__panel:nth-child(4) { grid-row: 6; }
  .tabs__tab:nth-child(4) { grid-row: 7; }
  .tabs__panel:nth-child(5) { grid-row: 8; }
  .tabs__tab:nth-child(5) { grid-row: 9; }
  .tabs__panel:nth-child(6) { grid-row: 10; }
  .tabs__tab:nth-child(6) { grid-row: 11; }
  .tabs__panel:nth-child(7) { grid-row: 12; }
}

/* Accordion: the browser's own <details>, with a plus that turns into a minus. */
.accordion__item { border: 1px solid var(--nt-rule); }
.accordion__item + .accordion__item { border-top: 0; }
.accordion__title {
  display: flex; align-items: center; gap: 10px; padding: 10px; cursor: pointer; list-style: none;
  color: var(--nt-heading); font-size: var(--nt-size-h3); font-weight: var(--nt-weight-medium); line-height: var(--nt-leading-normal);
  transition: color 0.3s;
}
.accordion__title::-webkit-details-marker { display: none; }
.accordion__title:hover, .accordion__item[open] > .accordion__title { color: var(--nt-primary); }
/* 15px tall and as wide as the glyph (13px for the plus and minus), as Elementor's icon font drew them. */
.accordion__title .icon { width: auto; height: 15px; }
.accordion__close, .accordion__item[open] .accordion__open { display: none; }
.accordion__item[open] .accordion__close { display: inline-block; }
.accordion__content { border-top: 1px solid var(--nt-rule); }
.accordion__content p { margin: 0 0 0.9rem; }

/* ===== Home ======================================================================================= */

.hero {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 88vh; padding: 0 8%;
  background: var(--nt-surface-alt) url(/img/numericatech-homepage-feature-background-AXMjuR-1920w.webp) no-repeat center right / cover;
}
@media (min-width: 1025px) { .hero { background-attachment: fixed; } }
/* Wide enough for the title's first line on one line at the kit's banner size. */
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 1100px; text-align: center; }
.hero__eyebrow {
  margin: 0; color: var(--nt-text);
  font-size: var(--nt-size-lead); font-weight: var(--nt-weight-regular); line-height: var(--nt-leading-normal);
  letter-spacing: 0.4em; text-transform: uppercase;
}
.hero__title {
  display: flex; flex-direction: column; gap: 20px; margin: 0;
  color: var(--nt-heading); font-size: var(--nt-size-display); line-height: var(--nt-leading-tight);
}
/* The rotating words in the primary blue: white on the orange picture read at under 3:1. */
.hero__rotating { color: var(--nt-primary); }
.hero__rotating-item[hidden] { display: none; }
.hero__tagline { margin: 0; color: var(--nt-text); font-size: var(--nt-size-lead); font-weight: var(--nt-weight-bold); line-height: var(--nt-leading-normal); }
.hero__actions { display: flex; justify-content: center; align-items: center; gap: 75px; }
@media (max-width: 1024px) { .hero { padding: 0 5%; } }
@media (max-width: 767px) {
  .hero { background-position: center center; }
  .hero__actions { flex-wrap: wrap; gap: 25px 75px; }
}

.why-cloud { padding: 60px 0 30px; background: var(--nt-surface-tint); }
.why-cloud > * { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.why-cloud__lead {
  width: fit-content; margin: 0 auto; padding: 30px 15px 25px;
  color: var(--nt-heading); font-size: var(--nt-size-lead); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight);
}
.why-cloud__more { margin: 0; text-align: center; }
@media (max-width: 767px) {
  .why-cloud { padding: 65px 0 30px; }
  .why-cloud__lead { text-align: center; }
}

.benefit-grid { display: flex; flex-wrap: wrap; background: color-mix(in srgb, var(--nt-surface) 50%, transparent); }
.benefit { display: flex; width: 50%; padding: 20px; }
.benefit picture { flex: 0 0 75px; margin-right: 40px; }
.benefit img { width: 75px; height: auto; }
.benefit__title { margin: 0 0 5px; color: var(--nt-heading); font-size: var(--nt-size-h3); line-height: var(--nt-leading-tight); }
.benefit__text { margin: 0; }
@media (max-width: 1024px) {
  .benefit picture { flex-basis: 56px; margin-right: 20px; }
  .benefit img { width: 56px; }
}
@media (max-width: 767px) {
  .benefit { display: block; width: 100%; padding: 10px; }
  .benefit picture { display: block; width: 15%; margin: 0 0 8px; }
  .benefit img { width: 100%; }
}

.help { background: linear-gradient(90deg, var(--nt-slate-100) 0%, var(--nt-slate-200) 100%); }
.help__title {
  margin: 0; padding: 15px 0 30px; text-align: center;
  color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight);
}
.help__cards { display: flex; justify-content: space-evenly; align-items: center; gap: 100px; padding: 50px 100px; }
.service-card {
  flex: 1 1 0; display: flex; flex-direction: column; align-self: stretch;
  min-height: 700px; padding: 25px; border-radius: var(--nt-radius-lg);
  background: var(--nt-surface-alt); transition: box-shadow 0.3s;
}
.service-card:hover { box-shadow: var(--nt-shadow-card-hover); }
.service-card picture { display: block; }
.service-card img { width: 100%; height: auto; border-radius: var(--nt-radius-lg); }
.service-card__title {
  margin: 0; padding: 10px 0; text-align: center;
  color: var(--nt-heading); font-size: var(--nt-size-h2); line-height: var(--nt-leading-tight);
}
.service-card__text { margin: 0 0 14.4px; }
.service-card__button { align-self: center; }
@media (max-width: 1024px) { .help__cards { gap: 100px 50px; padding: 50px; } }
@media (max-width: 767px) {
  .help__cards { flex-direction: column; gap: 50px; padding: 50px; }
  .service-card { flex: 0 0 auto; width: 100%; }
}

/* "Why choose Numerica?": a dark panel; its icons in the accent, its text light. */
.why-numerica { display: flex; flex-direction: column; align-items: center; margin-top: 75px; padding: 15px 0 30px; }
.why-numerica__title, .why-numerica__grid { width: 98%; max-width: calc(var(--content-width) * 0.98); background: var(--nt-surface-dark); }
.why-numerica__title {
  margin: 0; padding: 30px 0; border-radius: var(--nt-radius-lg) var(--nt-radius-lg) 0 0; text-align: center;
  color: var(--nt-on-dark); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight);
}
.why-numerica__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start; gap: 50px 100px; padding: 50px 80px; }
.reason {
  display: flex; flex-direction: column; width: 30%; min-height: 280px; padding: 25px;
  border: 1px solid var(--nt-on-dark); border-radius: var(--nt-radius-lg); transition: box-shadow 0.3s;
}
.reason:hover { box-shadow: var(--nt-shadow-card-hover); }
.reason__icon { align-self: center; width: 50px; height: 50px; margin-bottom: 8px; fill: var(--nt-accent-on-dark); }
.reason__title { margin: 0; text-align: center; color: var(--nt-on-dark); font-size: var(--nt-size-h3); line-height: var(--nt-leading-tight); }
.reason__text { margin: 0; padding: 5px 5px 19.4px; color: var(--nt-on-dark); }
.reason__link {
  display: inline-flex; align-items: center; gap: 0.4em; align-self: flex-start; min-height: 30px; padding: 5px;
  color: var(--nt-on-dark); font-weight: var(--nt-weight-medium); text-decoration: underline; text-underline-offset: 0.2em;
}
.reason__link:hover, .reason__link:focus { color: var(--nt-on-dark); text-decoration-thickness: 2px; }
@media (max-width: 1024px) {
  .why-numerica__grid { gap: 50px; }
  .reason { width: 40%; padding: 15px; }
}
@media (max-width: 767px) {
  .why-numerica { padding: 5px; }
  .why-numerica__title, .why-numerica__grid { width: 100%; }
  .why-numerica__title { padding: 15px; }
  .reason { width: 100%; }
}

.technologies { background: linear-gradient(180deg, var(--nt-warm) 0%, var(--nt-warm-edge) 100%); }
.technologies__title {
  margin: 0; padding: 25px; text-align: center;
  color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight);
}
.technologies__list {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  max-width: var(--content-width); margin: 0 auto; padding: 50px;
}
.technologies__list img { display: block; width: auto; height: 60px; }
@media (max-width: 1024px) { .technologies__list { flex-wrap: wrap; padding: 10px; } }
@media (max-width: 767px) { .technologies__list { flex-direction: column; gap: 25px; } }

/* ===== Shared: call-to-action panel, photo cards, carousel ======================================= */

/* "Take your business to new heights.": a photo behind centred text; the photo zooms in on hover. */
.cta-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 280px; text-align: center;
}
.cta-banner picture, .cta-banner__bg { position: absolute; inset: 0; }
.cta-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s; }
.cta-banner:hover img { transform: scale(1.2); }
.cta-banner__content { position: relative; padding: 35px; }
.cta-banner__title { margin: 0 0 15px; color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight); transition: color 1s; }
.cta-banner__text { margin: 0 0 25px; color: var(--nt-text); font-size: var(--nt-size-lead); font-weight: var(--nt-weight-medium); line-height: var(--nt-leading-normal); transition: color 1s; }
.cta-banner:hover .cta-banner__title, .cta-banner:hover .cta-banner__text { color: var(--nt-primary); }
.cta-section { max-width: var(--content-width); margin: 0 auto; padding: 60px 0 30px; }

/* A post as a photo with its title and date over it (the services carousel). */
.photo-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding-top: 25%; overflow: hidden; color: var(--nt-on-dark);
}
.photo-card picture, .photo-card__bg { position: absolute; inset: 0; }
/* Cover from the top-left corner, as Elementor's background images. */
.photo-card img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.photo-card__title, .photo-card__date { position: relative; padding: 5px; }
.photo-card__title {
  background: color-mix(in srgb, var(--nt-surface-dark) 73%, transparent);
  font-size: var(--nt-size-h2); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight);
}
.photo-card__date { font-size: var(--nt-size-small); font-weight: var(--nt-weight-medium); line-height: var(--nt-leading-normal); }
.photo-card:hover { color: var(--nt-on-dark); }

/* Carousel: three slides across, two on a tablet, one on a phone; arrows over the ends, dots below. */
.carousel { --per-view: 3; --gap: 15px; position: relative; padding: 15px 0 0; }
.carousel__track {
  list-style: none; display: flex; gap: var(--gap); margin: 0; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); scroll-snap-align: start; }
.carousel__arrow {
  position: absolute; top: calc(15px + (100% - 61px) / 2); transform: translateY(-50%); z-index: 1;
  display: flex; padding: 0; border: 0; background: none; cursor: pointer;
  color: color-mix(in srgb, var(--nt-on-dark) 90%, transparent); font-size: var(--nt-size-h2);
}
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__dots { display: flex; justify-content: center; gap: 12px; height: 6px; margin-top: 40px; }
.carousel__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--nt-heading); opacity: 0.2; cursor: pointer; }
.carousel__dot[aria-current="true"] { opacity: 1; }
@media (max-width: 1024px) { .carousel { --per-view: 2; } }
@media (max-width: 767px) { .carousel { --per-view: 1; } }

/* ===== Services =================================================================================== */

.showcase {
  padding: 50px 0;
  background: url(/img/21-1-sjlS2D-1024w.webp) top left;
}
@media (min-width: 1025px) { .showcase { background-attachment: fixed; } }
.showcase__title {
  margin: 4px; padding: 20px; text-align: center;
  color: var(--nt-on-dark); font-size: var(--nt-size-section); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight);
}
.showcase__row {
  display: flex; max-width: var(--content-width); margin: 0 auto; padding: 25px;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.showcase__row:hover { background-color: color-mix(in srgb, var(--nt-surface-alt) 50%, transparent); box-shadow: var(--nt-shadow-card-hover); }
.showcase__row--reverse { flex-direction: row-reverse; }
.showcase__row picture { flex: 0 0 35.583%; }
.showcase__row img { display: block; width: 100%; height: auto; }
.showcase__text { flex: 0 0 38.613%; display: flex; flex-direction: column; align-items: flex-start; }
.showcase__heading {
  margin: 20px; padding: 10px 0; color: var(--nt-on-dark);
  font-size: var(--nt-size-title); line-height: var(--nt-leading-tight);
}
.showcase__button { margin: 0 20px; }

.from-blog { max-width: var(--content-width); margin: 0 auto; }
.from-blog__title { padding: 15px; }

@media (max-width: 1024px) {
  .showcase__heading { margin: 8px; }
  .showcase__button { margin: 0 0 0 10px; }
}
@media (max-width: 767px) {
  .showcase { padding: 0; }
  .showcase__row, .showcase__row--reverse { flex-direction: column; }
  .showcase__row picture { flex: none; width: 294.325px; }
  .showcase__text { flex: none; width: 100%; }
  .showcase__heading { width: 62.766%; }
}

/* ===== Service pages (Cloud Engineering, Data and Models) ======================================== */

.service-hero {
  display: flex; align-items: flex-start; padding: 50px max(0px, (100% - var(--content-width)) / 2);
  background: var(--nt-surface) no-repeat 0 0;
}
@media (min-width: 1025px) { .service-hero { background-attachment: fixed; } }
.service-hero--clouds { background-image: url(/img/white-clouds-on-blue-SRqwZl-2121w.webp); }
.service-hero--data { background-image: url(/img/iStock-1353486264-BwmiCS-2235w.webp); }
/* The title's column width includes its inset from the edge (padding, not margin), as the old widget's
   width included its margin. Cloud Engineering's title is inset at every width, the others' from
   tablets down. */
.service-hero__title {
  flex: 0 0 34.115%; margin: 0; color: var(--nt-on-dark);
  font-size: var(--nt-size-display); line-height: var(--nt-leading-tight);
}
.service-hero--clouds .service-hero__title { padding-left: 10px; }
.service-hero__media { flex: 1; text-align: center; }
/* Data and Models has no picture: its empty column still sets the hero's height, as on the old page. */
.service-hero__media--empty { min-height: 450px; }
.service-hero__media img { width: 750px; max-width: 100%; height: auto; }

.service-tabs { max-width: var(--content-width); margin: 0 auto; }
.tabs--service { gap: 20px; padding: 0; --tabs-panel-margin: 20px 0 0; }
.tabs--service .tabs__list { gap: 0; overflow-x: auto; scrollbar-width: thin; }
.tabs--service .tabs__tab {
  flex: 1 0 auto; padding: 30px 15px; border: 1px solid var(--nt-surface-alt);
  background: var(--nt-surface-dark); color: var(--nt-on-dark); white-space: nowrap;
  font-weight: var(--nt-weight-semibold); text-transform: capitalize;
}
.tabs--service .tabs__tab:hover, .tabs--service .tabs__tab[aria-selected="true"] {
  border: 1px solid var(--nt-accent); background: var(--nt-accent); color: var(--nt-on-accent);
}
.service-panel { display: flex; gap: 15px; padding: 20px; }
.service-panel__intro { flex: 0 0 33%; margin: 5px; color: var(--nt-text); font-size: var(--nt-size-lead); font-weight: var(--nt-weight-medium); line-height: var(--nt-leading-normal); }
.service-panel .accordion { flex: 1; }

.cta-section--classic { padding: 60px 0 0; }
.cta-banner--classic { display: block; min-height: 0; }
.cta-banner--classic picture { position: relative; display: block; height: 200px; overflow: hidden; }
.cta-banner--classic .cta-banner__content { background: var(--nt-surface-alt); }

@media (max-width: 1024px) {
  .service-hero__title { padding-left: 10px; }
  .service-hero--clouds .service-hero__title { flex-basis: 40%; }
  .service-hero__media img { width: 60%; }
  .service-hero__media--empty { min-height: 160px; }
}
@media (max-width: 767px) {
  .service-hero { flex-direction: column; }
  .service-hero__title { flex: none; width: 219px; }
  .service-hero--clouds .service-hero__title { padding: 10px 10px 10px 20px; }
  .service-hero__media { width: 100%; }
  .tabs--service { row-gap: 0; }
  .service-panel { flex-direction: column; }
  .service-panel__intro { flex: none; width: 301px; max-width: 100%; }
}

/* ===== Page hero (About, Contact, Careers, …): the page's name on the gradient ==================== */

.page-hero {
  display: flex; flex-direction: column; align-items: center; padding: 50px 0; text-align: center;
  background: url(/img/21-1-sjlS2D-1024w.webp) top left;
}
@media (min-width: 1025px) { .page-hero { background-attachment: fixed; } }
.page-hero__eyebrow {
  margin: 0; padding-bottom: 10px; color: var(--nt-on-dark);
  font-size: var(--nt-size-lead); font-weight: var(--nt-weight-medium); line-height: var(--nt-leading-tight); text-transform: uppercase;
}
.page-hero__title { margin: 0; color: var(--nt-on-dark); font-size: var(--nt-size-display); line-height: var(--nt-leading-tight); }
/* About, Blog and the legal pages leave a 20px gap under the title. */
.page-hero--spaced { padding-bottom: 70px; }

/* The blog's and careers' line under the title: "— Latest posts —". */
.page-hero__divider {
  display: flex; align-items: center; justify-content: center; width: 50%; margin: 0; padding: 15px 0;
  color: var(--nt-on-dark); font-size: var(--nt-size-h2); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); text-transform: capitalize;
}
.page-hero__divider::before, .page-hero__divider::after { content: ""; flex: 1; border-top: 2px solid var(--nt-on-dark); }
.page-hero__divider span { margin: 0 10px; }
@media (max-width: 767px) { .page-hero__divider { width: 100%; } }

/* ===== About ====================================================================================== */

/* A legal page's text (layouts/legal.njk) sits in the same column; the kit's .nt-prose draws it. */
.text-section, .legal { max-width: calc(var(--content-width) + 60px); margin: 0 auto; padding: 50px 30px 30px; }
.text-section:first-of-type, .page-hero + .text-section { padding-top: 30px; }
.text-section--tabs { padding-top: 60px; }
.text-section__title { margin: 0; padding: 5px; color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight); }
.text-section p { margin: 0 0 14.4px; padding: 0 5px; }
/* Each run of text between headings was one Elementor text block, padded 5px all round: the first
   paragraph or list has the top padding, the last one (before a heading, or ending the section) the
   bottom. */
.text-section > :is(p, ul:not([class])):is(:first-child, :is(h1, h2, h3) + *) { padding-top: 5px; }
.text-section > :is(p, ul:not([class])):is(:last-child, :has(+ h2, + h3)) { padding-bottom: 5px; }
.value-list { list-style: none; margin: 0; padding: 5px; }
.value-list li { display: flex; align-items: center; }
.value-list li + li { margin-top: 5px; }
.value-list .icon { width: 20px; height: 20px; margin-right: 10px; fill: var(--nt-primary); }

.tabs--side { grid-template-columns: 25% 1fr; gap: 0; padding: 10px 0 0; }
.tabs--side .tabs__list { flex-direction: column; justify-content: center; gap: 0; grid-row: 1 / span 9; }
.tabs--side .tabs__tab {
  flex: none; justify-content: flex-start; padding: 15px 35px; border: 0;
  background: var(--nt-surface-dark); color: var(--nt-on-dark); text-align: start;
  font-size: var(--nt-size-lead); font-weight: var(--nt-weight-regular);
}
.tabs--side .tabs__tab:hover { border: 0; }
.tabs--side .tabs__tab[aria-selected="true"] { border: 0; background: var(--nt-accent); color: var(--nt-on-accent); }
.tabs--side .tabs__panel { grid-column: 2; }
.tabs--side .tabs__panel p { margin: 5px 10px; padding: 0; }
@media (max-width: 1024px) {
  .text-section, .text-section--tabs, .page-hero + .text-section, .legal { padding: 15px; }
}
@media (max-width: 767px) {
  .tabs--side { grid-template-columns: 1fr; }
  .tabs--side .tabs__list { grid-row: auto; }
  .tabs--side .tabs__panel { grid-column: 1; }
}

/* ===== Contact ==================================================================================== */

.contact-intro { display: flex; gap: 30px; max-width: var(--content-width); margin: 0 auto; padding-top: 15px; }
.contact-intro__text { flex: 0 0 39.129%; display: flex; flex-direction: column; gap: 10px; margin: 10px; padding: 5px; }
.contact-intro__text > p { margin: 0; padding: 5px; }
.contact-intro__text > p:has(.nt-button) { padding: 0 0 10px; }
.contact-intro__title { margin: 0; padding: 5px; color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight); }
.contact-intro__notes { padding: 10px 5px 5px; }
.contact-intro__notes p { margin: 0 0 14.4px; }
.contact-intro__form { flex: 1; padding: 25px 25px 25px 40px; }
.contact-email__label { margin: 0; font-weight: var(--nt-weight-medium); }
.contact-email__address { margin: 0 0 15px; font-size: var(--nt-size-section); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); overflow-wrap: anywhere; }
.contact-email__address a { color: var(--nt-heading); }

.other-ways { max-width: var(--content-width); margin: 0 auto; padding: 60px 0 30px; }
.accordion--dark .accordion__title { background: var(--nt-surface-dark); color: var(--nt-on-dark); transition: background-color 0.3s; }
.accordion--dark .accordion__title:hover, .accordion--dark .accordion__item[open] > .accordion__title { background: var(--nt-accent); color: var(--nt-on-accent); }
.accordion--dark .accordion__content { padding: 20px; border: 0; }
.other-ways__big { margin: 0; padding: 0 0 10px; font-size: var(--nt-size-section); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); overflow-wrap: anywhere; }
.other-ways__big a { color: var(--nt-heading); }
.other-ways__small { margin: 0; padding: 0 0 10px; color: var(--nt-heading); font-size: var(--nt-size-h3); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); }
.other-ways__text { margin: 5px 5px 10px; color: var(--nt-text); font-weight: var(--nt-weight-regular); }
.other-ways__text--qr { margin-top: 20px; }
.other-ways__office { margin: 0 0 3px; font-size: var(--nt-size-h3); font-weight: var(--nt-weight-bold); line-height: var(--nt-leading-tight); text-transform: capitalize; }
.other-ways__address { font-style: normal; }
.other-ways__address p { margin: 0 0 3px; }
.other-ways .nt-button { gap: 15px; }
.other-ways .nt-button img { width: 20px; height: 20px; }

.tabs--chat { gap: 40px; margin: 25px; padding: 0; }
.tabs--chat .tabs__list { gap: 0; }
.tabs--chat .tabs__tab {
  flex: none; padding: 15px 35px; border: 0; border-radius: var(--nt-radius-sm) 0 0 0; background: transparent;
}
.tabs--chat .tabs__tab:hover { border: 0; background: var(--nt-surface-tint); }
.tabs--chat .tabs__tab[aria-selected="true"] { border: 0; border-bottom: 2px solid var(--nt-surface-dark); background: var(--nt-surface-alt); }
.tabs--chat .tabs__tab img { width: 50px; height: 50px; }
.social-links--contact a { color: var(--nt-link); }

@media (max-width: 1024px) {
  .contact-intro__form { flex-basis: 50%; }
  .tabs--chat { gap: 10px; }
}
@media (max-width: 767px) {
  .contact-intro { flex-direction: column; gap: 30px; }
  .contact-intro__form { padding: 20px; }
  .other-ways__big--email { font-size: var(--nt-size-h3); }
  .tabs--chat .tabs__list { display: flex; }
}

/* Forms from the forms service (partials/form-embed.njk): the service's frame draws the form, and the
   message shows until it has. The newsletter's form opens in a pop-up (partials/newsletter-dialog.njk). */
.form-embed__loading { margin: 0 0 var(--nt-space-4); color: var(--nt-text); }
.form-embed iframe { display: block; }
.form-dialog {
  width: min(560px, 100% - 32px); padding: var(--nt-space-5); border: 0; border-radius: var(--nt-radius-md);
  background: var(--nt-surface); color: var(--nt-text); box-shadow: var(--nt-shadow-card);
}
.form-dialog::backdrop { background: var(--nt-surface-dark); opacity: 0.6; }
.form-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nt-space-4); margin-bottom: var(--nt-space-4); }
.form-dialog__title { margin: 0; color: var(--nt-heading); font-size: var(--nt-size-h3); line-height: var(--nt-leading-tight); }
.form-dialog__close {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: var(--nt-radius-sm); background: none; color: var(--nt-heading); cursor: pointer;
}
.form-dialog__close:hover { background: var(--nt-surface-alt); }
.form-dialog__close .icon { width: 18px; height: 18px; }

/* ===== Post cards, grids and paging (blog index, careers, archives) ============================== */

.post-grid-section { max-width: var(--content-width); margin: 0 auto; }
.post-grid-section--jobs { padding: 60px 0 30px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 30px; }

.post-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 20px 20px 55px; border-radius: var(--nt-radius-lg);
  box-shadow: var(--nt-shadow-card); color: var(--nt-text); transition: box-shadow 0.3s;
}
.post-card:hover { box-shadow: var(--nt-shadow-card-hover); color: var(--nt-text); }
.post-card picture { display: block; }
.post-card img { display: block; width: 100%; height: 260px; object-fit: cover; transition: filter 0.3s; }
.post-card:hover img { filter: brightness(105%) saturate(105%); }
.post-card__date {
  margin: 15px 0; padding: 6px 0; color: var(--nt-muted);
  font-size: var(--nt-size-small); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-normal); text-transform: uppercase;
}
.post-card__title { color: var(--nt-heading); font-size: var(--nt-size-h2); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); }

/* Job posts: on the gradient (at half strength), a larger title. */
.post-card--job { position: relative; isolation: isolate; overflow: hidden; }
.post-card--job::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background: url(/img/21-sjlS2D-1024w.webp) top left;
}
.post-card--job .post-card__date { color: var(--nt-heading); }
.post-card--job .post-card__title { font-size: var(--nt-size-title); font-weight: var(--nt-weight-medium); }

.pager { margin-top: 12px; text-align: center; font-size: var(--nt-size-lead); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); text-transform: capitalize; }
.pager__link { margin: 0 5px; }
.pager__link--off { color: var(--nt-text); }

@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-card img { height: 200px; }
  .pager { margin-top: 20px; }
}
@media (max-width: 767px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card img { height: 168px; }
  .pager { margin-top: 15px; }
}

/* ===== Posts ====================================================================================== */

.post__header, .post__body, .related, .post-comments {
  max-width: calc(970px + 16%); margin-left: auto; margin-right: auto; padding-left: 8%; padding-right: 8%;
}
.post__header { display: flex; flex-direction: column; gap: 10px; }
.post__title { margin: 0; padding: 20px 5px 5px; color: var(--nt-heading); font-size: var(--nt-size-title); line-height: var(--nt-leading-tight); }
.post__meta { list-style: none; display: flex; flex-wrap: wrap; margin: 15px 0 0; padding: 0; color: var(--nt-heading); }
.post__meta li { position: relative; }
.post__meta li + li { margin-left: 15.5px; padding-left: 15.5px; border-left: 1px solid var(--nt-rule); }
.post__meta a { color: var(--nt-heading); }
.post__body { display: flex; flex-direction: column; gap: 50px; margin-top: 2%; }
.post__image, .post__body > picture { display: block; }
.post__body > picture img { display: block; width: 100%; height: auto; }
.post__excerpt { margin: 0; color: var(--nt-heading); font-size: var(--nt-size-lead); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-tight); }
/* The post's text is the kit's .nt-prose (brand/src/ui.css): one hierarchy for every post. */

.share { display: flex; align-items: center; gap: 30px; }
.share__label { margin: 0; color: var(--nt-text); }
.share__links { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.share__links a { display: flex; color: var(--nt-primary); font-size: var(--nt-size-h3); transition: color 0.3s; }
.share__links a:hover { color: var(--nt-accent-strong); }

.post-nav { display: flex; justify-content: space-between; margin-top: 3%; padding-top: 30px; border-top: 1px solid var(--nt-rule); }
.post-nav__link {
  color: var(--nt-heading); font-weight: var(--nt-weight-regular); font-style: italic;
  text-decoration: underline; text-transform: capitalize;
}
.post-nav__link:hover { color: var(--nt-primary); }
.post-nav__link--next { margin-left: auto; }

.related { margin-top: 72px; }
.related__title { margin: 0 0 100px; padding: 20px 5px 5px; color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight); }
.related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 60px; }
.related-post__image { position: relative; display: block; padding-bottom: 80%; overflow: hidden; }
.related-post__image picture, .related-post__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.related-post__title { margin: 20px 0 8px; font-size: var(--nt-size-h3); line-height: var(--nt-leading-tight); }
.related-post__title a { color: var(--nt-heading); }
.related-post { display: flex; flex-direction: column; }
.related-post__excerpt { margin: 0 0 20px; color: var(--nt-muted); }
.related-post__more { align-self: flex-start; margin-bottom: 20px; font-style: italic; text-decoration: underline; line-height: 1; }
/* The date sits at the foot of each card, under a rule, level across the row. */
.related-post__meta { margin: auto 0 0; padding: 10px 0; border-top: 1px solid var(--nt-rule); color: var(--nt-muted); font-size: var(--nt-size-small); font-weight: var(--nt-weight-medium); line-height: var(--nt-leading-tight); }

.post-comments { padding-top: 5%; }

/* Comments and their form (partials/comments.njk), laid out as the Hello Elementor theme drew them;
   the fields, the button and the author's badge are the kit's. The section shows once
   assets/js/comments.js has drawn it. */
.comments { color: var(--nt-text); }
.comments[hidden], .comments [hidden] { display: none; }
.comments__title, .comment-respond__title { margin: 8px 0 16px; color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list--replies { position: relative; padding-left: 30px; }
.comment-list--replies::before { content: "↪"; position: absolute; left: 0; top: 45px; font-size: 1em; line-height: 1; }
.comment__body { position: relative; display: flex; flex-direction: column; padding: 30px 0 30px 60px; border-bottom: 1px solid var(--nt-rule); }
.comment__meta { display: flex; justify-content: space-between; margin-bottom: 0.9rem; }
.comment__author { line-height: 1; }
.comment__name { color: var(--nt-heading); font-weight: var(--nt-weight-semibold); }
.comment__avatar {
  position: absolute; left: 0; top: 30px; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--nt-surface-tint); color: var(--nt-heading);
  font-weight: var(--nt-weight-semibold);
}
.comment__date, .comment__reply { font-size: var(--nt-size-caption); line-height: 1; }
.comment__content p { margin: 0 0 0.9rem; }

.comment-respond__title small { font-size: 80%; }
.comment-form p { margin: 0 0 0.9rem; }
.comment-form__field label { display: block; margin-bottom: 0.3em; color: var(--nt-heading); font-weight: var(--nt-weight-regular); }
.comment-form input[type="checkbox"] { margin: 0; vertical-align: middle; }
/* The trap for bots: out of sight, out of the tab order, hidden from screen readers. */
.comment-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.comment-form .nt-button:disabled { cursor: wait; }
.comment-form__status:empty { display: none; }

/* Code samples: Prism's default theme (as the old site), with line numbers and a Copy button. */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	/* This background color was intended by the author of this theme. */
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

pre[class*="language-"].line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: relative;
	white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #999;
			display: block;
			padding-right: 0.8em;
			text-align: right;
		}

div.code-toolbar {
	position: relative;
}

div.code-toolbar > .toolbar {
	position: absolute;
	z-index: 10;
	top: .3em;
	right: .2em;
	transition: opacity 0.3s ease-in-out;
	opacity: 0;
}

div.code-toolbar:hover > .toolbar {
	opacity: 1;
}

/* Separate line b/c rules are thrown out if selector is invalid.
   IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
	opacity: 1;
}

div.code-toolbar > .toolbar > .toolbar-item {
	display: inline-block;
}

div.code-toolbar > .toolbar > .toolbar-item > a {
	cursor: pointer;
}

div.code-toolbar > .toolbar > .toolbar-item > button {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	line-height: normal;
	overflow: visible;
	padding: 0;
	-webkit-user-select: none; /* for button */
	-moz-user-select: none;
	-ms-user-select: none;
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
	color: #bbb;
	font-size: .8em;
	padding: 0 .5em;
	background: #f5f2f0;
	background: rgba(224, 224, 224, 0.2);
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: .5em;
}

div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
	color: inherit;
	text-decoration: none;
}

/* Each sample at full length, as on the old site; in a job post or a legal page too. */
.nt-prose pre[class*="language-"] { margin: 0 0 20px; }

@media (max-width: 1024px) {
  .post__header { padding: 2% 8% 0; }
  .post__title { padding: 0; }
  .share__links { gap: 16px; }
  .post__excerpt { text-align: left; }
  .post-nav { padding-top: 0; }
  .related { padding-left: 5%; padding-right: 5%; }
  .related__title { margin-bottom: 50px; padding: 0; text-align: center; }
  .related__grid { row-gap: 71px; }
  .post-comments { padding: 5% 5% 0; }
}
/* On tablets the title and byline sit in a narrower column than the post. */
@media (min-width: 768px) and (max-width: 1024px) {
  .post__header { max-width: 620px; padding: 2% 0 0; }
}
@media (max-width: 767px) {
  .post__header { padding: 2% 5% 0; }
  .post__body { gap: 25px; padding-left: 5%; padding-right: 5%; }
  .post-comments { padding-left: 2%; padding-right: 2%; }
  .related__grid { grid-template-columns: 1fr; }
  /* On phones the picture sits beside the name rather than in a margin. */
  .comment__body { padding-left: 0; }
  .comment__avatar { position: static; float: left; margin-right: 10px; }
  .comment__author { line-height: 1.5; }
  .comment-list--replies { padding-left: 20px; }
}

/* ===== Job posts ================================================================================== */

.job { max-width: calc(var(--content-width) + 60px); margin: 0 auto; padding: 50px 30px 30px; }
.job__title { margin: 0; padding-bottom: 15px; color: var(--nt-heading); font-size: var(--nt-size-title); line-height: var(--nt-leading-tight); }
.job__share .share { gap: 12px; }
.job__share .share__links { gap: 10px; }
.job__share .share__links a {
  align-items: center; justify-content: center; width: 36px; height: 36px;
  background: var(--nt-surface-dark); color: var(--nt-on-dark); font-size: var(--nt-size-h3);
}
.job__share .share__links a:hover { background: var(--nt-accent); color: var(--nt-on-accent); }
.job__rule { margin: 15px 0; border: 0; border-top: 1px solid var(--nt-rule); }
.job__terms, .job__equal { margin: 0; padding: 5px; }
/* The job's text is the kit's .nt-prose, as a post's is. */
.job__content { margin: 10px 0; }
.job__heading { margin: 0; padding: 5px; color: var(--nt-heading); font-size: var(--nt-size-h2); line-height: var(--nt-leading-tight); }
.job__interested { margin: 0; color: var(--nt-primary); font-size: var(--nt-size-lead); font-weight: var(--nt-weight-semibold); line-height: var(--nt-leading-normal); }
@media (max-width: 1024px) { .job { padding: 15px; } }

/* ===== Databricks ================================================================================= */

.service-hero--databricks {
  background-image: url(/img/databricks-services-at-numerica-tech-modern-blue-white-pastel-color-wUVy4s-2448w.webp);
  background-size: auto;
}
/* The old page's empty spacer beside the title gave the hero its height: 450px, 160px from tablets
   down, and on phones it sits below the title. */
.service-hero--databricks::after { content: ""; flex: 1; height: 450px; }
.service-hero--databricks .service-hero__title { color: var(--nt-primary); }
.databricks { max-width: var(--content-width); margin: 0 auto; }
.databricks p { margin: 0 0 14.4px; }
.databricks__title { margin: 0; padding: 15px 5px 5px 0; color: var(--nt-heading); font-size: var(--nt-size-section); line-height: var(--nt-leading-tight); }
.databricks__faq-title { width: fit-content; margin: 0; padding: 30px 30px 30px 0; color: var(--nt-heading); font-size: var(--nt-size-h3); line-height: var(--nt-leading-tight); }
/* The FAQ's questions are long: body size, in the heading's colour, open or closed. */
.accordion--faq .accordion__title,
.accordion--faq .accordion__title:hover,
.accordion--faq .accordion__item[open] > .accordion__title { color: var(--nt-heading); font-size: var(--nt-size-body); font-weight: var(--nt-weight-regular); }
@media (max-width: 1024px) {
  .service-hero--databricks::after { height: 160px; }
  .databricks__title { text-align: center; }
}
@media (max-width: 767px) {
  .service-hero--databricks::after { flex: none; width: 100%; }
  .service-hero--databricks .service-hero__title { width: auto; }
  .databricks__faq-title { text-align: center; }
}

/* ===== Archives (tags, categories, author, days): the old theme's plain listing ================= */

/* A 1140px column on a desktop and 800px on a tablet, never closer than 10px to the window's edges. */
.archive { width: min(1140px, 100% - 20px); margin: 0 auto; padding-bottom: 30px; }
.archive__title { margin: 8px 0 16px; font-size: var(--nt-size-title); line-height: var(--nt-leading-tight); }
.archive__description { margin: 0 0 14.4px; font-size: var(--nt-size-lead); }
.archive-post__title { margin: 8px 0 16px; font-size: var(--nt-size-h2); line-height: var(--nt-leading-tight); }
.archive-post__image, .archive-post__image picture { display: block; }
.archive-post__image img { display: block; width: 100%; height: 500px; object-fit: cover; }
.archive-post__excerpt { margin: 8px 0 14.4px; }
.archive__pager { text-align: left; }
@media (max-width: 1024px) {
  .archive { width: min(800px, 100% - 20px); }
  /* Below desktop the pictures keep their own proportions; only the desktop crops them to 500px. */
  .archive-post__image img { height: auto; }
}
@media (max-width: 767px) { .archive__title { padding: 0 10px; } }

/* ===== Search page ================================================================================ */

.search-page-form { display: flex; gap: 10px; margin: 0 0 30px; }
.search-page-form__input { flex: 1; min-height: 44px; }
.search .archive-post__excerpt mark { background: color-mix(in srgb, var(--nt-accent) 35%, transparent); color: inherit; }
.search__none { font-size: var(--nt-size-lead); }

/* ===== Admin (/admin/: docs/COMMENTS.md, docs/FORM-ENTRIES.md) ===================================== */

.admin { color: var(--nt-text); }
.admin [hidden] { display: none; }
.admin a { color: var(--nt-primary); }
.admin__tools { padding-left: 1.2em; font-size: var(--nt-size-lead); }
.admin__status { padding: 10px 14px; border-left: 3px solid var(--nt-accent); background: var(--nt-surface-alt); }
.admin__heading { margin: 30px 0 10px; font-size: var(--nt-size-h2); }
.admin-comments { list-style: none; margin: 0; padding: 0; }
.admin-comment { padding: 16px 0; border-bottom: 1px solid var(--nt-rule); }
.admin-comment__meta { margin: 0 0 8px; }
.admin-comment__text p { margin: 0 0 0.6em; }
.admin-comment__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.admin-comment__delete { color: var(--nt-danger); }
.admin-comment__delete:hover { border-color: var(--nt-danger); background: var(--nt-danger); color: var(--nt-on-dark); }
.admin-comment__reply { display: grid; gap: 10px; max-width: 700px; margin-top: 12px; }
.admin-comment__reply textarea { display: block; margin-top: 6px; }
.admin-comment__reply .nt-button { justify-self: start; }
/* Form entries: a table that scrolls sideways inside its box, never the page. A long answer, such as a
   message, wraps in a column of its own width (assets/js/admin-entries.js). */
.admin__pick select { width: auto; margin-left: var(--nt-space-2); }
.admin__note { margin-top: var(--nt-space-3); color: var(--nt-muted); font-size: var(--nt-size-small); }
.admin-table { overflow-x: auto; border: 1px solid var(--nt-rule); border-radius: var(--nt-radius-md); background: var(--nt-surface); }
.admin-table table { border-collapse: collapse; min-width: 100%; font-size: var(--nt-size-small); }
.admin-table caption { padding: 10px 12px; font-weight: var(--nt-weight-semibold); text-align: left; }
.admin-table th, .admin-table td { padding: 6px 10px; border-top: 1px solid var(--nt-rule); text-align: left; vertical-align: top; white-space: nowrap; }
.admin-table th { background: var(--nt-surface-alt); }
.admin-table td.admin-table__long { min-width: 30ch; max-width: 48ch; white-space: pre-line; overflow-wrap: break-word; }