/*
 * adeptive.com.au — the theme. Plain CSS, tokens first (Design Standards): the raw palette
 * is the WordPress site's Elementor kit, expressed in OKLCH; components use only the
 * semantic tokens below it. No hardcoded colours past this block.
 *
 * Like for like (Geoff, 14 Oct 2026): the 2024 design carried across as it was, so the page
 * is light only and keeps its stock illustrations and device mockups — recorded waivers in
 * docs/features/adeptive.md ("Design Standards").
 */

:root {
  color-scheme: light;

  /* Raw palette — the Elementor kit's global colours. */
  --ept-indigo:      oklch(0.524 0.166 282);  /* #5F57C5 Primary */
  --ept-indigo-deep: oklch(0.449 0.157 281);  /* #4A43A8, hover */
  --ept-indigo-mist: oklch(0.957 0.015 294);  /* #F1EFFA Indigo S2 — BG */
  --ept-periwinkle:  oklch(0.811 0.073 259);  /* #A5C3F1 Indigo S1 — Hover */
  --ept-sinbad:      oklch(0.825 0.060 185);  /* #9AD3CB Accent */
  --ept-cinder:      oklch(0.145 0.013 300);  /* #0B090F Text */
  --ept-whisper:     oklch(0.979 0.004 271);  /* #F7F8FB Alt BG */
  --ept-panel:       oklch(0.944 0.003 286);  /* #ECECEE Panel BG */
  --ept-slate:       oklch(0.410 0.023 295);  /* #4B4856, quiet text */
  --ept-berry:       oklch(0.570 0.191 6);  /* #CC3366, the kit's link colour: post links */
  --ept-rose:        oklch(0.594 0.139 24);   /* #C55757, the off-shore comparison's colour */
  --ept-white:       oklch(1 0 0);

  /* Semantic tokens — the only names components use. Validated pairs (WCAG 2.2):
     --text on --surface 19.8:1, on --surface-tinted 18.7:1, on --surface-mist 17.4:1 ·
     --text-quiet on --surface 8.9:1, on --surface-tinted 8.4:1 ·
     --signal on --surface 5.7:1, on --surface-tinted 5.4:1, on --surface-mist 5.1:1 ·
     --on-signal on --signal 5.7:1, on --signal-strong 7.9:1 · --on-dark on --surface-dark 19.8:1 ·
     --link-post on --surface 4.9:1. */
  --surface:         var(--ept-white);
  --surface-tinted:  var(--ept-whisper);
  --surface-mist:    var(--ept-indigo-mist);
  --surface-panel:   var(--ept-panel);
  --surface-dark:    var(--ept-cinder);
  --text:            var(--ept-cinder);
  --text-quiet:      var(--ept-slate);
  --signal:          var(--ept-indigo);
  --signal-strong:   var(--ept-indigo-deep);
  --warn:            var(--ept-rose);
  --accent-soft:     var(--ept-periwinkle);
  --surface-stripe:  oklch(0.973 0 0);       /* #F6F6F6, a table's every other row */
  --on-signal:       var(--ept-white);
  --on-dark:         var(--ept-white);
  --link-post:       var(--ept-berry);
  --border:          oklch(0.86 0.01 286);
  --border-strong:   var(--ept-slate);
  --danger:          oklch(0.5 0.17 27);     /* a field to fix: 5.6:1 on white */
  --surface-danger:  oklch(0.975 0.012 20);  /* behind what to fix */
  --focus:           var(--ept-indigo-deep);
  --shadow-raised:   0 0.25rem 1.5rem oklch(0.145 0.013 300 / 0.10);
  --shadow-overlay:  0 0.75rem 2.5rem oklch(0.145 0.013 300 / 0.22);

  /* Type — Greycliff CF (Adobe Fonts, which can't be self-hosted) gives way to a vendored
     face: Plus Jakarta Sans (Geoff, 29 Oct 2026). */
  --font-brand:   "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --weight-text:  300; /* Greycliff CF's 400 drew lighter than this font's (Geoff, 7 Nov 2026) */
  /* The kit's body was 18px of Greycliff CF; this face's x-height is 0.526em to its 0.49em, so
     16.8px draws the same size and sets the same line lengths (measured 7 Nov 2026). */
  --text-base:    1.05rem;
  --text-small:   0.875rem;                                  /* 14px labels and buttons */
  --text-lead:    1.25rem;                                   /* 20px pre-headers, sub-titles */
  --text-lead-body: 1.1625rem; /* 18.6px: the old 20px running text, by the same x-height as --text-base */
  --text-h1:      3.375rem;  /* 54px: Hero H1 */
  --text-banner:  3.125rem;  /* 50px: an inner page's title */
  --text-h2:      2.25rem;   /* 36px: section headings */
  --text-title:   2.2rem;    /* 35px: a service's title, Get in Touch */
  --text-h3:      1.8rem;    /* 29px: card titles */
  --text-h4:      1.3rem;
  --leading:      1.5;
  --leading-lead: 1.35;      /* 27px at 20px */
  --leading-tight: 1.25;
  --tracking-text:    0.02em;  /* this face sets tighter than Greycliff CF's body text did */
  --tracking-eyebrow: 0.225em;                               /* 4.5px at 20px */
  --tracking-caps:    0.1em;

  /* Space and shape */
  --wide:          71.25rem;  /* Elementor's 1140px container */
  --measure:       44rem;
  --gutter:        1.25rem;
  --gap:           2.5rem;
  --gap-large:     2.75rem;
  --space-section: 8.5rem;
  --space-section-end: 8.125rem;
  --space-after-band: 7.25rem;  /* the next section's top, after a coloured band */
  --radius-small:  0.3125rem; /* 5px */
  --radius-button: 0.4375rem; /* 7px */
  --radius:        0.9375rem; /* 15px cards */
  --radius-large:  1.875rem;

  /* Motion (Design Standards §2): user-started, and only without a reduced-motion preference. */
  --motion-fast:   120ms;
  --motion-base:   200ms;
  --motion-scroll: 6s;
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);

  /* The gem's Markdown styles, in this theme. */
  --rc-text:          var(--text);
  --rc-text-muted:    var(--text-quiet);
  --rc-accent:        var(--signal);
  --rc-accent-strong: var(--signal-strong);
  --rc-border:        var(--border);
  --rc-border-subtle: var(--surface-panel);
  --rc-surface-alt:   var(--surface-tinted);
  --rc-info:          var(--signal);
  --rc-success:       oklch(0.52 0.12 160);
  --rc-warning:       oklch(0.56 0.13 70);
  --rc-error:         oklch(0.52 0.17 25);
}

/* Elementor's breakpoints: the kit steps at tablet and at mobile rather than scaling. */
@media (max-width: 64rem) {
  :root { --text-h1: 3.4875rem; --leading: 1.6; --leading-lead: 1.44; --gap: 1.25rem; --space-section: 6rem; --space-section-end: 1.3rem; --space-after-band: 0rem; }
}
@media (max-width: 47.94rem) {
  :root { --text-h1: 2.5rem; --text-title: 1.5rem; --text-h3: 1.3rem; --space-section: 5.5rem; --space-after-band: 1.8rem; }
}

/* The face, self-hosted (SIL Open Font License — OFL-*.txt beside the files): Plus Jakarta
   Sans's variable fonts, upright and italic, from its own repository (tokotype/PlusJakartaSans
   at 18d1cd2). Nothing is fetched from a font service. */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/sites/adeptive/plus-jakarta-sans-0e9d665d.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/assets/sites/adeptive/plus-jakarta-sans-italic-ff811e4a.woff2") format("woff2");
}

/* --- base ---------------------------------------------------------------- */

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

html { scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-brand);
  font-size: var(--text-base);
  font-weight: var(--weight-text);
  line-height: var(--leading);
  letter-spacing: var(--tracking-text);
}
/* Named, because "bolder" from a light weight only reaches 400. */
strong, b { font-weight: 700; }

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

/* The body's tracking is for running text; headings keep the face's own. */
h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); letter-spacing: normal; text-wrap: balance; }
p { margin: 0; }
p, li { text-wrap: pretty; }

a { color: var(--signal); text-underline-offset: 0.15em; }
a:hover { color: var(--signal-strong); }

:focus-visible { outline: 0.1875rem solid var(--focus); outline-offset: 0.1875rem; border-radius: 0.125rem; }

.ept-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;
}

.ept-skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
  padding: 0.75rem 1rem; background: var(--signal); color: var(--on-signal);
  font-weight: 700; border-radius: var(--radius-small);
}
.ept-skip-link:focus { top: var(--gutter); color: var(--on-signal); }

.ept-wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }

.ept-icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* --- buttons and labels -------------------------------------------------- */

.ept-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.75rem 0.9375rem;
  background: var(--signal); color: var(--on-signal);
  border: 0; border-radius: var(--radius-button);
  font: 600 var(--text-small) / 1 var(--font-brand);
  letter-spacing: 0.4px; text-align: center; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
}
.ept-button:hover, .ept-button:focus-visible { background: var(--signal-strong); color: var(--on-signal); }
.ept-button--light { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.ept-button--light:hover, .ept-button--light:focus-visible { background: var(--surface-mist); color: var(--text); }
.ept-button--block { display: flex; width: 100%; }
/* The thin button: no height beyond its text, on a solution page's services grid. */
.ept-button--thin, .ept-service .ept-button--thin { padding: 0 0.625rem; border-radius: var(--radius-small); }

.ept-label {
  font-size: var(--text-small); font-weight: 600; line-height: 1; text-transform: uppercase;
  color: var(--signal);
}

/* --- headings ------------------------------------------------------------ */

.ept-heading { display: grid; gap: 0.75rem; }
.ept-heading--center { text-align: center; justify-items: center; }
.ept-eyebrow {
  font-size: var(--text-lead); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--signal);
}
.ept-heading__title { font-size: var(--text-h2); font-weight: 700; }
.ept-heading__accent { color: var(--signal); }
.ept-heading__sub { font-size: var(--text-base); font-weight: var(--weight-text); line-height: 1; }
.ept-heading__text, .ept-heading .ept-heading__text.ept-prose { color: var(--text); font-size: var(--text-lead-body); line-height: var(--leading-lead); }

/* Markdown fields inside sections. The gem's Markdown has its own rhythm for an article; a
   section's text is the kit's. */
.ept-prose, .markdown-body.ept-prose { line-height: var(--leading); }
.ept-prose { display: grid; gap: 0.875rem; }
.ept-prose > *, .markdown-body.ept-prose > * { margin: 0; }
.ept-prose ul, .ept-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ept-prose ul li, .ept-list li { position: relative; margin: 0; padding-left: 1.375rem; }
.ept-prose ul li::before, .ept-list li::before {
  content: ""; position: absolute; left: 0.2em; top: 0.5em;
  width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--text);
}
.ept-prose ol { margin: 0; padding-left: 1.4em; }
/* Articles and the privacy policy: the kit's headings, with no rule under them. */
.markdown-body { line-height: var(--leading); }
.markdown-body h2, .markdown-body h3 { margin-block: 1rem 0.5rem; padding: 0; border: 0; font-size: var(--text-title); font-weight: 700; line-height: var(--leading-tight); }
.markdown-body hr { margin-block: 1rem; border: 0; border-top: 1px solid var(--text-quiet); }
.markdown-body a { color: var(--text); text-decoration-color: var(--signal); }
.ept-post__body.markdown-body li a { color: var(--link-post); }
.ept-post__body.markdown-body :is(ul, ol) { padding-left: 2.5rem; }
.ept-single { padding-inline: 0.625rem; }
.ept-prose strong { font-weight: 700; }

/* --- the header and its menu --------------------------------------------- */

.ept-header { position: relative; z-index: 5; background: var(--surface); }
.ept-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  min-height: 10.25rem; padding-inline: 1.375rem 0.625rem;
}
.ept-logo { display: block; flex: none; }
.ept-logo img { width: 15rem; height: auto; }

.ept-nav__toggle { display: none; }
.ept-nav__list, .ept-nav__sub { margin: 0; padding: 0; list-style: none; }
.ept-nav { padding-top: 0.9rem; }
.ept-nav__list { display: flex; align-items: center; gap: 0; }
.ept-nav__item { position: relative; }
.ept-nav__link {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 3rem; padding: 0.8rem 1.25rem;
  background: none; border: 0; cursor: pointer;
  color: var(--text); font: 700 1rem / 1.5 var(--font-brand);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none;
}
.ept-nav__link:hover, .ept-nav__link[aria-current="page"] { color: var(--signal); }
.ept-nav__caret { width: 0.6em; height: 0.6em; }
.ept-nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 16rem;
  padding: 0.5rem 0; background: var(--surface); box-shadow: var(--shadow-overlay);
  border-radius: var(--radius-small);
  display: none;
}
.ept-nav__sub .ept-nav__link { display: flex; width: 100%; font-weight: 600; letter-spacing: 0.04em; font-size: var(--text-small); }
.ept-nav__item:hover > .ept-nav__sub,
.ept-nav__item:focus-within > .ept-nav__sub,
.ept-nav__item.is-open > .ept-nav__sub { display: block; }

/* Below desktop, as the old site drew it: the bare menu mark centred over a larger logo. */
@media (max-width: 64rem) {
  .ept-header__inner { flex-direction: column-reverse; justify-content: flex-end; gap: 1.25rem; min-height: 12.875rem; padding: 2rem 0 0; }
  .ept-logo img { width: 18.75rem; }
  .ept-nav { position: static; padding-top: 0; }
  .ept-nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; background: none; border: 0;
    color: var(--signal); cursor: pointer; font-size: 2.5rem;
  }
  .ept-nav__list {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem var(--gutter) 1rem; background: var(--surface); box-shadow: var(--shadow-overlay);
  }
  .ept-nav.is-closed .ept-nav__list { display: none; }
  .ept-nav__link { width: 100%; justify-content: space-between; }
  .ept-nav__sub { position: static; display: block; box-shadow: none; padding: 0 0 0.5rem 1rem; min-width: 0; }
}

@media (max-width: 47.94rem) {
  .ept-logo img { width: 17.5rem; }
  .ept-header__inner { gap: 1.625rem; min-height: 13.1875rem; padding-top: 2.5rem; }
}

/* --- the footer ----------------------------------------------------------- */

.ept-footer { background: var(--surface-dark); color: var(--on-dark); padding-block: 2.625rem 2.4rem; text-align: center; }
.ept-footer__inner { display: grid; gap: 1.8rem; justify-items: center; }
.ept-footer__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.ept-footer a { color: var(--on-dark); font-size: 1rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.ept-footer a:hover { color: var(--ept-periwinkle); }
.ept-footer__note { font-size: 1.125rem; font-weight: 600; line-height: 1.25; letter-spacing: 1px; }
@media (max-width: 47.94rem) { .ept-footer__note { font-size: 1rem; } }

/* --- sections -------------------------------------------------------------- */

.ept-section { padding-block: var(--space-section) var(--space-section-end); }
.ept-section--tinted { background: var(--surface-tinted); }
.ept-section + .ept-section:not(.ept-section--tinted):not(.ept-section--dark):not(.ept-section--testimonials) { padding-top: 0; }
.ept-section.ept-section--tinted + .ept-section:not(.ept-section--tinted):not(.ept-section--dark):not(.ept-section--testimonials),
.ept-section.ept-section--dark + .ept-section:not(.ept-section--tinted):not(.ept-section--dark):not(.ept-section--testimonials) { padding-top: var(--space-after-band); }
.ept-section--split.ept-section--tinted { padding-block: 3.75rem; }
.ept-section--testimonials { padding-top: var(--space-after-band); }
.ept-section__inner { display: grid; gap: var(--gap-large); }
/* Grid children may shrink below their content (a carousel's row of slides), so nothing pushes the page sideways. */
.ept-section__inner > *, .ept-split > *, .ept-profile > *, .ept-contact > *, .ept-testimonial > *, .ept-showcase > *, .ept-carousel { min-width: 0; }

/* The hero: the home page's and every service page's opening, over the kit's hexagons. */
.ept-hero { position: relative; display: grid; align-content: end; min-height: 31.25rem; margin-bottom: 3.75rem; padding-block: 2rem 0.25rem; text-align: center; }
.ept-hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/sites/adeptive/hexagons-975be785.svg") center / min(60rem, 120%) no-repeat;
  opacity: 0.15; pointer-events: none;
}
.ept-hero__inner { position: relative; display: grid; gap: 0.625rem; justify-items: center; }
.ept-hero__title { font-size: var(--text-h1); font-weight: 700; line-height: 1.2; letter-spacing: 1px; }
.ept-hero__text, .ept-hero__text.ept-prose { font-size: var(--text-lead-body); line-height: var(--leading-lead); }
/* The mouse: fades down on load, then floats 27px and back, on desktop only, as the old site's did. */
.ept-hero__scroll { width: auto; height: 5.625rem; margin-top: 2.5rem; opacity: 0.27; }
@media (max-width: 64rem) { .ept-hero__scroll { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ept-hero__scroll { animation: ept-mouse-in 1.25s both, ept-mouse-float 1s var(--ease-in-out-sine) infinite alternate; }
}
@keyframes ept-mouse-in { from { opacity: 0; translate: 0 -100%; } }
@keyframes ept-mouse-float { to { transform: translateY(27px); } }
.ept-inner-page .ept-hero__title { max-width: 36rem; }
@media (max-width: 64rem) { .ept-hero__title { max-width: 26rem; } }

/* The banner: an inner page's header. */
.ept-banner { display: grid; align-items: center; min-height: 18.75rem; margin-bottom: 3.5rem; background: var(--surface-tinted); padding-block: 1.25rem; }
.ept-banner__inner { display: flex; align-items: center; gap: 1.875rem; }
.ept-banner__art { width: 21.375rem; flex: none; }
.ept-banner__title { font-size: var(--text-banner); font-weight: 600; letter-spacing: 1px; }
.ept-banner__sub { margin-top: 0.3rem; }
/* With no illustration (the privacy policy): no band, a rule above a larger title. */
.ept-banner--plain { min-height: 0; margin-bottom: 0; padding-block: 0 4rem; background: none; }
.ept-banner--plain .ept-banner__inner { padding-top: 1.5rem; border-top: 2px solid var(--text-quiet); }
.ept-banner--plain .ept-banner__title { font-size: var(--text-h1); font-weight: 700; line-height: 1.2; }
.ept-banner--plain .ept-banner__sub { margin-top: 1.5rem; color: var(--signal); line-height: 1; }
.ept-banner--plain .ept-banner__inner { margin-top: 1.5rem; }
.ept-banner + .ept-section { padding-top: 4rem; }
.ept-banner--plain + .ept-section { padding-top: 0; }
.ept-banner + .ept-section--grid { padding-top: 5.1rem; }
.ept-banner + .ept-section--portfolio { padding-top: 0; }
@media (max-width: 47.94rem) {
  .ept-banner { margin-bottom: 1.5rem; }
  .ept-banner__inner { flex-direction: column; gap: 1rem; text-align: center; }
  .ept-banner__art { width: min(100%, 19.375rem); }
  .ept-banner__sub { margin-top: 1rem; }
  .ept-heading__title { line-height: 1.1; }
}

/* Text and media. */
.ept-split { display: grid; gap: var(--gap-large); align-items: center; }
@media (min-width: 52rem) {
  .ept-split { grid-template-columns: 1fr 1fr; }
  .ept-split--reverse > .ept-split__aside { order: -1; }
  .ept-split--titled { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}
.ept-split__main { display: grid; gap: 1.25rem; align-content: start; }
.ept-split__aside { display: grid; gap: 1.25rem; justify-items: center; }
.ept-split__aside .ept-heading { justify-items: center; text-align: center; }
.ept-split__call { display: grid; gap: 1.25rem; justify-items: center; }
.ept-split__title { font-size: var(--text-h2); font-weight: 700; }
.ept-split--titled .ept-split__title { font-size: var(--text-h3); }
.ept-pictures { display: grid; gap: 1.25rem; width: 100%; }
.ept-pictures img { width: 100%; border-radius: 0.25rem; }
.ept-pictures--row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: center; }
.ept-art { width: min(100%, 26rem); }
.ept-split__aside .ept-pictures img { width: auto; max-width: 100%; max-height: 26rem; margin-inline: auto; object-fit: contain; }
.ept-box {
  width: 100%; display: grid; gap: 1rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--surface-mist); border-radius: var(--radius);
}
.ept-box .ept-heading { justify-items: start; text-align: start; }

/* A service's checklist: ticked boxes instead of bullets. */
.ept-split__main .ept-list { font-size: var(--text-lead-body); font-weight: 400; }
.ept-split__main .ept-list ul { gap: 1.2rem; }
.ept-split__main .ept-list li { min-height: 2.25rem; padding-left: 3.4rem; }
.ept-split__main .ept-list li::before {
  left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 0; background: var(--signal-strong);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M2 3h19v19H2zM6 12l4 5L23 1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The image-scroll frame: a tall screenshot that scrolls inside its device on hover or focus. */
.ept-scroll { position: relative; width: 100%; height: clamp(18rem, 12rem + 20vw, 37.5rem); overflow: auto; border-radius: 0.25rem; box-shadow: var(--shadow-raised); }
.ept-scroll img { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .ept-scroll { overflow: hidden; }
  .ept-scroll img { transition: transform var(--motion-scroll) var(--ease-in-out); }
  .ept-scroll:hover img, .ept-scroll:focus-visible img { transform: translateY(calc(-100% + clamp(18rem, 12rem + 20vw, 37.5rem))); }
}

/* Grids: cards, services, features, columns, figures. */
.ept-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 46rem) { .ept-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 64rem) {
  .ept-grid--features { grid-template-columns: minmax(0, 1fr); padding-inline: 3rem; }
  .ept-grid--features .ept-feature { gap: 1rem; padding-block: 1.875rem; }
  .ept-section--why { padding-top: 6rem; }
}
@media (max-width: 47.94rem) { .ept-grid--features { padding-inline: 0; } }
.ept-grid__head { display: grid; gap: var(--gap-large); align-items: center; }
@media (min-width: 52rem) { .ept-grid__head--pictured { grid-template-columns: 1fr 1fr; } }
.ept-grid__head-art { width: min(100%, 28rem); justify-self: center; }
.ept-grid__outro { text-align: center; font-size: var(--text-lead); font-weight: 600; line-height: 1; }
@media (min-width: 48rem) { .ept-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The six-up services, set in from the section's edge under a ruled eyebrow. */
.ept-grid__head--services { padding-left: 1.25rem; }
.ept-grid__head--services .ept-eyebrow { padding-bottom: 0.8rem; border-bottom: 2px solid var(--text); color: var(--text); line-height: 1.25; }
.ept-grid__head--services .ept-heading { gap: 2rem; }
.ept-grid__head--services .ept-heading__title { line-height: 1; }
.ept-grid__head--services .ept-grid__head-art { width: min(100%, 26rem); justify-self: center; }
@media (min-width: 48rem) { .ept-grid__head--services .ept-grid__head-art { margin-block: -2rem -3rem; } }
.ept-grid--services { padding-left: 2.5rem; column-gap: 4.75rem; row-gap: 3.7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 48rem) { .ept-grid__head--services.ept-grid__head--pictured { grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); gap: 1.25rem; align-items: start; } }
@media (min-width: 64.01rem) { .ept-grid__head--services.ept-grid__head--pictured { grid-template-columns: minmax(0, 1fr) 33.75rem; } }
@media (max-width: 64rem) {
  .ept-section--grid:has(.ept-grid--services) { padding-bottom: 7.5rem; }
  .ept-grid__head--services { padding-left: 3.125rem; }
  .ept-grid--services { padding-left: 4.375rem; column-gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.94rem) {
  .ept-grid__head--services { padding-left: 0.625rem; }
  .ept-grid--services { padding-left: 1.875rem; grid-template-columns: minmax(0, 1fr); }
}

.ept-card {
  display: grid; gap: 0.5rem; align-content: start; justify-items: center; text-align: center;
  padding: 1.875rem; background: var(--surface); border-radius: var(--radius);
}
@media (max-width: 64rem) { .ept-card { padding: 0.625rem; } }
.ept-card__art { height: 10rem; width: auto; }
.ept-card__title { font-size: var(--text-h3); font-weight: 600; }
.ept-card .ept-button { margin-top: 1rem; align-self: end; width: 100%; }
.ept-card--cards { grid-template-rows: auto auto 1fr auto; }

.ept-service { display: grid; gap: 0.8rem; align-content: start; }
.ept-service__title { font-size: var(--text-title); font-weight: 700; }
.ept-service .ept-list { margin-top: 0.25rem; }
.ept-service .ept-button { justify-self: start; margin-top: 0.25rem; border-radius: var(--radius-small); }

.ept-feature {
  display: grid; gap: 0.75rem; align-content: start;
  padding: 1.25rem 1.875rem; background: var(--signal); color: var(--on-signal); border-radius: 0;
  border-bottom: 0.5rem solid var(--accent-soft);
}
.ept-feature .ept-prose { color: inherit; }
.ept-feature__icon { width: 1.875rem; height: 1.875rem; }
.ept-feature__title { font-size: 2.1375rem; font-weight: 600; line-height: 1.1; }
.ept-feature .ept-label { color: var(--on-signal); line-height: 1.3; letter-spacing: 1px; }
.ept-feature a { color: var(--on-signal); }

.ept-column { display: grid; gap: 0.75rem; align-content: start; }
.ept-column__title { font-size: var(--text-h3); font-weight: 600; }
.ept-figure { display: grid; gap: 1rem; align-content: start; }
.ept-figure__title { font-size: var(--text-h4); font-weight: 600; }

/* Why choose Adeptive — the block most pages end with. */
.ept-section--why .ept-eyebrow { color: var(--text); }
.ept-section--why .ept-section__inner { padding-inline: 0.625rem; }
.ept-why { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ept-why__item { display: grid; grid-template-rows: auto 1fr; background: var(--surface-tinted); }
.ept-why__title { border-radius: 0.875rem 0.875rem 0 0; padding: 0.8rem 0.9375rem; background: var(--signal); color: var(--on-signal); font-size: var(--text-lead); font-weight: 600; }
.ept-why__text { padding: 1rem 1.25rem 1.25rem; }
@media (max-width: 47.94rem) {
  .ept-section--why .ept-section__inner { padding-inline: 0; }
  .ept-why { gap: 6.25rem; padding-inline: 1.875rem; }
  .ept-why__title { padding-block: 0.9rem; }
  .ept-why__text { padding-bottom: 2.5rem; }
}

/* A solution page: a larger, plain lead-in over its hero, and the comparison's two boxes. */
.ept-solution .ept-hero .ept-eyebrow { font-size: 2.1375rem; font-weight: 600; line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--text); }
.ept-solution .ept-hero__title { max-width: 36rem; }
.ept-solution .ept-hero__text, .ept-solution .ept-hero__text.ept-prose { font-size: var(--text-base); }
.ept-grid--boxes { padding-inline: 0.625rem; gap: 1.25rem; }
.ept-grid--boxes .ept-why__item { --box: var(--signal); }
.ept-grid--boxes .ept-why__item:first-child { --box: var(--warn); }
.ept-grid--boxes .ept-why__title { padding-block: 0.9rem; background: var(--box); font-size: 1.75rem; line-height: 1.2; }
.ept-grid--boxes .ept-why__text { gap: 1.25rem; padding: 1.5rem 1.25rem 1.875rem; }
.ept-grid--boxes .ept-why__text strong { color: var(--box); font-size: var(--text-lead); font-weight: 600; line-height: 1; }
.ept-grid--boxes .ept-list ul { gap: 1.25rem; }
.ept-grid--boxes .ept-list li::before { background: var(--box); opacity: 0.7; }
.ept-solution .ept-heading__sub { font-size: var(--text-lead); font-weight: 700; line-height: 1.25; }
.ept-inner-page .ept-section--tinted .ept-eyebrow { color: var(--text); }
@media (min-width: 52rem) {
  .ept-solution .ept-split:has(.ept-box) { grid-template-columns: minmax(0, 1fr) 25.4rem; }
}
@media (max-width: 47.94rem) {
  .ept-inner-page .ept-split__aside, .ept-case-study .ept-split__aside { order: -1; }
  .ept-solution .ept-split__main { text-align: center; }
}
.ept-solution .ept-box { padding: 0; background: none; border-radius: 0; }
.ept-solution .ept-box .ept-button { width: 100%; padding-block: 1.375rem; border-radius: 0.25rem; font-size: var(--text-lead); }

/* Accordion and tabs. */
.ept-panels { display: grid; gap: 0.625rem; width: min(100%, 66.25rem); margin-inline: auto; }
.ept-panels-link { width: min(100%, 66.25rem); margin-inline: auto; }
.ept-panel { background: var(--surface-tinted); }
.ept-panel > summary {
  display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer;
  font-size: 1.75rem; font-weight: 600; line-height: 1.2; list-style: none;
}
@media (max-width: 47.94rem) { .ept-panel > summary { font-size: var(--text-h3); } }
.ept-panel > summary::-webkit-details-marker { display: none; }
.ept-panel > summary .ept-icon { width: 0.6em; height: 0.6em; color: var(--text); }
@media (max-width: 47.94rem) { .ept-panels { padding-inline: 1.875rem; } }
.ept-panel .ept-panel__minus, .ept-panel[open] .ept-panel__plus { display: none; }
.ept-panel[open] .ept-panel__minus { display: block; }
.ept-panel[open] { background: var(--surface); outline: 1px solid var(--border); }
.ept-panel[open] > summary { background: var(--surface-mist); }
.ept-panel__body { padding: 1.25rem; }

.ept-tabs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: var(--gap); }
.ept-tabs__tab {
  min-height: 2.75rem; padding: 0.75rem 1.25rem; cursor: pointer;
  background: var(--surface-mist); color: var(--text); border: 0; border-radius: var(--radius-small);
  font: 600 1rem / 1.3 var(--font-brand);
}
.ept-tabs__tab[aria-selected="true"] { background: var(--signal); color: var(--on-signal); }
.ept-tabs__panel { padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--surface-mist); border-radius: var(--radius); }
@media (prefers-reduced-motion: no-preference) {
  .ept-tabs.is-ready .ept-tabs__panel:not([hidden]) { animation: ept-fade-in 0.3s ease-out; }
}
@keyframes ept-fade-in { from { opacity: 0; } }
.ept-tabs__panel-title { font-size: var(--text-h4); font-weight: 600; margin-bottom: 1rem; }
.ept-tabs.is-ready .ept-tabs__panel-title { display: none; }
.ept-tabs:not(.is-ready) .ept-tabs__list { display: none; }
.ept-tabs:not(.is-ready) .ept-tabs__panel + .ept-tabs__panel { margin-top: 1rem; }

/* Carousels: a scroll-snapped row the visitor moves, never one that moves itself. */
.ept-carousel { position: relative; display: grid; gap: 1rem; }
.ept-carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--slide, min(70%, 15rem)); gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: 0.5rem; scrollbar-width: none;
}
.ept-carousel__track > * { scroll-snap-align: start; }
.ept-carousel--one { --slide: 100%; }
.ept-carousel--three { --slide: min(85%, calc((100% - 2 * var(--gap)) / 3)); }
/* The old site's controls: bare chevrons at the sides, dots beneath. */
.ept-carousel__controls { display: contents; }
.ept-carousel__button {
  position: absolute; top: 40%; translate: 0 -50%; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.75rem; padding: 0; border: 0;
  background: none; color: var(--signal); cursor: pointer; font-size: 1.25rem;
}
.ept-carousel__button:first-child { left: 0; }
.ept-carousel__button:last-child { right: 0; }
.ept-carousel__button[disabled] { opacity: 0.5; cursor: default; }
.ept-carousel--one .ept-carousel__button { top: 50%; }
.ept-carousel--one .ept-carousel__button:first-child { left: 0.5rem; }
.ept-carousel--one .ept-carousel__button:last-child { right: 0.5rem; }
@media (max-width: 47.94rem) { .ept-carousel--three { --slide: 100%; } }
.ept-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
.ept-carousel__dot { width: 1rem; height: 1rem; padding: 0.25rem; border: 0; background: none; cursor: pointer; }
.ept-carousel__dot::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--signal); opacity: 0.2; }
.ept-carousel__dot[aria-current="true"]::before { opacity: 1; }
.ept-carousel:not(.is-ready) .ept-carousel__dots { display: none; }

/* Case studies run the page's full width: four across, two on a tablet, one on a phone. */
.ept-carousel--bleed { --bleed-pad: 1.25rem; --slide: calc((100% - 3 * 3.125rem) / 4); margin-inline: calc(50% - 50vw); }
.ept-carousel--bleed .ept-carousel__track { gap: 3.125rem; padding-inline: var(--bleed-pad); scroll-padding-inline: var(--bleed-pad); }
@media (max-width: 64rem) { .ept-carousel--bleed { --bleed-pad: 2.5rem; } }
@media (max-width: 53rem) { .ept-carousel--bleed { --slide: calc((100% - 3.125rem) / 2); } }
@media (max-width: 47.94rem) { .ept-carousel--bleed { --slide: 100%; } }
.ept-carousel:not(.is-ready) .ept-carousel__controls { display: none; }
@media (prefers-reduced-motion: no-preference) { .ept-carousel__track { scroll-behavior: smooth; } }

.ept-gallery__item img { width: 100%; height: 100%; object-fit: contain; }
/* The 3D gallery: the front picture square on, its neighbours turned away either side. */
.ept-coverflow { display: grid; justify-items: center; width: 100%; overflow: clip; padding-block: 1rem; perspective: 50rem; }
.ept-coverflow__slide { grid-area: 1 / 1; width: min(18.75rem, 68%); aspect-ratio: 1; opacity: 0; pointer-events: none; cursor: pointer; }
.ept-coverflow__slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; box-shadow: var(--shadow-raised); }
.ept-coverflow:not(.is-ready) .ept-coverflow__slide:first-child { opacity: 1; }
.ept-coverflow__slide[data-place="0"] { z-index: 3; opacity: 1; pointer-events: auto; cursor: default; }
.ept-coverflow__slide[data-place="1"], .ept-coverflow__slide[data-place="-1"] { z-index: 2; opacity: 1; pointer-events: auto; }
.ept-coverflow__slide[data-place="2"], .ept-coverflow__slide[data-place="-2"] { z-index: 1; opacity: 1; pointer-events: auto; }
.ept-coverflow__slide[data-place="1"] { transform: translateX(42%) rotateY(-55deg) scale(0.9); }
.ept-coverflow__slide[data-place="-1"] { transform: translateX(-42%) rotateY(55deg) scale(0.9); }
.ept-coverflow__slide[data-place="2"] { transform: translateX(58%) rotateY(-55deg) scale(0.75); }
.ept-coverflow__slide[data-place="-2"] { transform: translateX(-58%) rotateY(55deg) scale(0.75); }
@media (prefers-reduced-motion: no-preference) { .ept-coverflow__slide { transition: transform 0.5s, opacity 0.5s; } }
.ept-gallery--grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: center; }

/* The portfolio: filters over a masonry of designs, each opening larger. */
/* Runs the page's full width on a tinted panel, under a ruled heading. */
.ept-section--portfolio { padding-top: 0; }
.ept-section--portfolio .ept-heading__title { font-size: var(--text-title); }
.ept-section--portfolio .ept-heading__title::after { content: ""; display: block; width: 5.5rem; margin: 0.75rem auto 0; border-bottom: 2px solid var(--text); }
.ept-section--portfolio .ept-section__inner { gap: 1.25rem; }
.ept-portfolio { margin-inline: calc(50% - 50vw); padding: 3rem 2.5rem 2.5rem; background: var(--surface-tinted); border-radius: var(--radius-large) var(--radius-large) 0 0; }
.ept-portfolio__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 3.125rem; margin-bottom: 2.25rem; }
.ept-portfolio__filter {
  min-height: 2.75rem; padding: 0.5rem 0.25rem; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 500 var(--text-lead) / 1.4 var(--font-brand); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--signal);
}
.ept-portfolio__filter[aria-pressed="true"] { color: var(--text); }
.ept-portfolio:not(.is-ready) .ept-portfolio__filters { display: none; }
.ept-portfolio__grid { columns: 3 16rem; column-gap: 1.25rem; }
.ept-portfolio__item { display: block; margin: 0 0 1.25rem; break-inside: avoid; }
/* With JavaScript, a masonry that fills row by row (portfolio_controller.js sets each design's
   span from its height); the old site's two feature designs run two columns wide. */
.ept-portfolio__grid.is-masonry { display: grid; columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1px; column-gap: 1.25rem; }
.ept-portfolio__grid.is-masonry .ept-portfolio__item { margin: 0; }
.ept-portfolio__grid.is-masonry .ept-portfolio__item:is(:nth-child(1), :nth-child(11)) { grid-column: span 2; }
@media (max-width: 47.94rem) {
  .ept-portfolio__grid.is-masonry { grid-template-columns: minmax(0, 1fr); }
  .ept-portfolio__grid.is-masonry .ept-portfolio__item:is(:nth-child(1), :nth-child(11)) { grid-column: auto; }
}
.ept-portfolio__item[hidden] { display: none; }
.ept-portfolio__item img { width: 100%; }
.ept-lightbox { max-width: min(92vw, 75rem); max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.ept-lightbox[open] { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.ept-lightbox::backdrop { background: oklch(0.145 0.013 300 / 0.85); }
/* The controls float above the image: Previous, Next | Close. */
.ept-lightbox__controls {
  display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem;
  background: var(--surface); border-radius: var(--radius-button); box-shadow: var(--shadow-overlay);
}
.ept-lightbox__button {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.5rem; padding: 0 0.85rem;
  border: 0; border-radius: var(--radius-small); background: none; color: var(--signal); cursor: pointer;
  font: 600 var(--text-small) / 1 var(--font-brand); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.ept-lightbox__button:hover { background: var(--surface-mist); }
.ept-lightbox__close { padding-inline: 0.7rem; font-size: 1.1rem; }
.ept-lightbox__divider { align-self: stretch; width: 1px; margin: 0.4rem 0.25rem; background: var(--border); }
.ept-lightbox__stage { display: grid; place-items: center; }
.ept-lightbox__stage img { max-height: calc(94vh - 3.75rem); width: auto; }
/* Until the image has loaded: an empty stage with a spinner, never the last image. */
.ept-lightbox__stage.is-loading { width: min(92vw, 30rem); aspect-ratio: 4 / 3; }
.ept-lightbox__stage.is-loading::after {
  content: ""; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 0.25rem solid color-mix(in oklch, var(--on-dark) 25%, transparent); border-top-color: var(--on-dark);
  animation: ept-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ept-lightbox__stage.is-loading::after { animation-duration: 2.4s; } }
@keyframes ept-spin { to { rotate: 1turn; } }

/* A case study's opening. */
.ept-showcase { display: grid; gap: var(--gap); justify-items: center; text-align: center; }
.ept-showcase__media { width: 100%; padding-inline: 0.625rem; }
.ept-showcase__media > img, .ept-showcase__media > .ept-scroll { width: 100%; margin-inline: auto; }

/* A case study's pictures: framed, in a wider column beside narrower text; a tall pair (a tablet
   and a phone) stands side by side. */
@media (min-width: 48rem) { .ept-pictures--pair { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); align-items: center; gap: 1.875rem; } }
.ept-case-study .ept-section:first-child { padding-top: 0; }
/* The gallery's plain label; the old site's own heading here was drawn white on white. */
.ept-case-study .ept-section--gallery .ept-eyebrow { font-size: var(--text-base); font-weight: 600; line-height: 1.25; letter-spacing: 1px; text-transform: none; color: var(--text); }
.ept-case-study .ept-section--gallery .ept-heading__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ept-case-study .ept-split__aside .ept-pictures img, .ept-case-study .ept-gallery__item img { max-height: none; border: 3px solid var(--text); border-radius: 0.625rem; box-shadow: 5px 5px 15px var(--text); }
.ept-case-study .ept-split__aside .ept-pictures img { width: 100%; }
.ept-case-study .ept-split:not(.ept-split--titled) { padding-inline: 0.625rem; }
@media (min-width: 52rem) {
  .ept-case-study .ept-split:not(.ept-split--titled) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 7.5rem; }
}
.ept-case-study .ept-split__main .ept-heading__title { font-size: var(--text-title); }
.ept-showcase__title { font-size: var(--text-h2); font-weight: 700; max-width: 40ch; }
.ept-showcase__text { max-width: var(--measure); }
.ept-video { width: 100%; border-radius: var(--radius-small); background: var(--surface-dark); }

/* Listings: case studies, testimonials, posts. */
.ept-section--listing .ept-heading:not(.ept-heading--center) { padding-left: 1.25rem; }
.ept-section--listing .ept-heading:not(.ept-heading--center) .ept-heading__title { font-size: var(--text-h3); font-weight: 600; }
.ept-study { display: grid; align-content: start; justify-items: center; text-align: center; }
.ept-study img { width: 100%; aspect-ratio: 5 / 3; object-fit: contain; }
.ept-study__title { font-size: var(--text-small); font-weight: 600; text-transform: uppercase; }
.ept-study .ept-button { margin-top: 1.25rem; }

.ept-studies { display: grid; }
.ept-studies__item { display: grid; gap: 1.25rem; align-items: center; padding-block: 1.5rem 1.25rem; border-bottom: 1px solid var(--border); }
@media (min-width: 46rem) { .ept-studies__item { grid-template-columns: minmax(0, 53fr) minmax(0, 53fr); padding-inline: 1.875rem; } }
.ept-studies__item img { width: 100%; }
.ept-studies__body { display: grid; gap: 1.25rem; justify-items: start; }
@media (max-width: 47.94rem) {
  .ept-studies__item { gap: 2.5rem; padding-block: 1.5rem 2rem; }
  .ept-studies__body .ept-button { width: 100%; }
}
.ept-studies__title { font-size: var(--text-h3); font-weight: 600; }
.ept-studies__title a { color: var(--text); text-decoration: none; }

/* The testimonials sit on a card that steps down into the indigo of the call to action below. */
/* The indigo is the section's own colour, as the next band's is, so the two meet without a seam
   (a gradient's indigo can round a shade apart from a solid one); the gradient paints the top. */
.ept-section--testimonials { position: relative; isolation: isolate; background: var(--surface-tinted); }
.ept-section--testimonials::before { content: ""; position: absolute; inset: 52% 0 0; z-index: -1; background: var(--signal); }
.ept-testimonial {
  display: grid; gap: 1.25rem; align-items: center;
  position: relative; isolation: isolate;
  padding: clamp(1.25rem, 1rem + 2vw, 3.5rem) clamp(1.25rem, 1rem + 4vw, 5rem); background: var(--surface); border-radius: 0.875rem;
}
/* The kit's hexagons, barely there behind the words. */
.ept-testimonial::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/sites/adeptive/hexagons-975be785.svg") center / contain no-repeat; opacity: 0.08; pointer-events: none; }
@media (min-width: 52rem) { .ept-testimonial { grid-template-columns: 25rem minmax(0, 1fr); column-gap: 4.6rem; } }
.ept-testimonial__quote { display: grid; gap: 1.25rem; }
.ept-testimonial__mark { width: 1.75rem; height: 2.5rem; object-fit: contain; }
.ept-testimonial .ept-scroll { border-radius: 0; box-shadow: none; }
.ept-testimonial__words { text-align: justify; }
.ept-testimonial__who { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--accent-soft); text-align: end; letter-spacing: 1px; }
.ept-testimonial__org { font-weight: 600; line-height: 1.25; }
@media (max-width: 47.94rem) {
  .ept-testimonial__words { text-align: start; }
  .ept-testimonial .ept-scroll { display: none; }  /* the old site's phone layout shows only the words */
  .ept-testimonial { padding-block: 3.5rem 7rem; }
}
.ept-carousel--one .ept-carousel__dots { position: absolute; inset: auto 0 1.75rem; }

.ept-posts { padding-inline: 1.25rem; columns: 2 18rem; column-gap: 1.25rem; }
.ept-post-card { display: block; margin-bottom: 1.25rem; break-inside: avoid; background: var(--surface-tinted); }
.ept-post-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ept-post-card__body { display: grid; gap: 0.75rem; align-content: start; padding: 1.875rem; }
.ept-post-card__title { font-size: var(--text-lead); font-weight: 700; overflow-wrap: anywhere; }
.ept-post-card__title a { color: var(--link-post); text-decoration: none; }
.ept-post-card__title a:hover { text-decoration: underline; }
.ept-post-card__excerpt { color: var(--text-quiet); }
@media (max-width: 64rem) { .ept-posts { columns: 1; } }
.ept-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: var(--text-small); line-height: 1.1; font-weight: 600; text-transform: uppercase; color: var(--signal); }
.ept-meta span, .ept-meta a { display: inline-flex; align-items: center; gap: 0.35em; }
.ept-meta a { color: var(--signal); text-decoration: none; }
.ept-meta a:hover { text-decoration: underline; }

.ept-pagination { display: flex; justify-content: center; gap: 1rem; margin-top: var(--gap); }

/* A person. */
.ept-profile { display: grid; gap: var(--gap-large); }
@media (min-width: 52rem) { .ept-profile { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.ept-profile { padding-inline: 0.625rem; }
.ept-profile__lead { display: grid; gap: 0.75rem; }
.ept-profile__lead > :first-child { font-weight: 600; line-height: 1.25; letter-spacing: 1px; }
.ept-profile__card { display: grid; gap: 0.75rem; justify-items: center; text-align: center; }
.ept-profile__photo { width: 15.625rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.ept-profile__name { font-size: var(--text-lead); line-height: 1.4; font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--signal); }
.ept-profile__role { font-weight: 600; font-size: var(--text-base); line-height: 1.4; }
.ept-profile__links { display: grid; gap: 0.75rem; width: 100%; padding-top: 1rem; border-top: 2px solid var(--text-quiet); }
.ept-profile__links .ept-button, .ept-contact__links .ept-button { flex-direction: row-reverse; }
/* A solution page's bio: the photo first, the two on a tinted panel. */
@media (min-width: 52rem) {
  .ept-solution .ept-profile { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; padding: 2rem; background: var(--surface-tinted); }
  .ept-solution .ept-profile__card { order: -1; }
}
@media (max-width: 47.94rem) {
  .ept-profile, .ept-profile__lead { text-align: center; }
  .ept-contact { text-align: center; }
  .ept-contact .rc-form { text-align: start; }
}
.ept-profile__links-heading { font-size: var(--text-base); font-weight: 600; line-height: 1.25; text-transform: uppercase; }

/* Contact. */
.ept-contact { display: grid; gap: var(--gap-large); }
@media (min-width: 52rem) { .ept-contact { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 64.0625rem) { .ept-contact { grid-template-columns: minmax(0, 46.875rem) 16rem; column-gap: 4.375rem; } }
.ept-section--contact { padding-top: 1.5rem; }
.ept-contact { padding-inline: 1.25rem; }
.ept-contact__title { font-size: var(--text-title); font-weight: 700; margin-bottom: 1.25rem; }
.ept-contact__links .ept-button--light { border: 0; }
.ept-contact__aside { display: grid; gap: 1rem; }
.ept-contact__links { display: grid; gap: 0.6rem; padding: 0.75rem; background: var(--surface-panel); border-radius: var(--radius-small); }

/* A client's words in a case study. */
.ept-quote { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 52rem) { .ept-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.ept-quote__title { font-size: var(--text-h3); font-weight: 700; }
.ept-quote__body { display: grid; gap: 1rem; }
.ept-quote__words { font-size: 1rem; }
.ept-quote__who { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.ept-quote__who img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; }
.ept-quote__role { color: var(--text-quiet); font-size: var(--text-small); }

/* Get in touch, as the old site drew it: the blob and its floor straight on the indigo (no
   panel), the words over the blob's right part, and — when it ends the page — the floor
   running over the edge into the footer. The art's own proportions (4524 × 1634) size the box,
   so the words keep their place on the blob at any width. */
.ept-section--dark { background: var(--signal); }
.ept-cta {
  --cta-width: min(100%, 52rem);   /* the art's width; padding below is a share of it, not of the wrap */
  position: relative; z-index: 1;  /* over the footer, where the floor runs into it */
  display: grid; align-content: center;
  width: var(--cta-width); margin-inline: auto; aspect-ratio: 4524 / 1634;
  /* the blob's right part, above the floor */
  padding: 0 calc(var(--cta-width) * 0.08) calc(var(--cta-width) * 0.05) calc(var(--cta-width) * 0.34);
  background: url("/assets/sites/adeptive/cta-art-7bb356c3.svg") center / contain no-repeat;
}
.ept-section--testimonials + .ept-section--cta { padding-top: 0; }  /* one indigo band, one gap */
main > .ept-section--cta:last-child { padding-bottom: 0; }
main > .ept-section--cta:last-child .ept-cta { translate: 0 7%; }
.ept-cta__body { display: grid; gap: 0.75rem; justify-items: start; }
.ept-cta__title { font-size: var(--text-title); font-weight: 700; }
.ept-cta__sub { font-size: var(--text-lead); font-weight: 600; line-height: 1; }
/* A phone: as the old site drew it, the art across the band and the words over its right part. */
@media (max-width: 47.94rem) {
  .ept-cta, main > .ept-section--cta:last-child .ept-cta { width: 100%; aspect-ratio: auto; min-height: 18.75rem; padding: 0 1.25rem 0 8.125rem; translate: none; }
  .ept-section--dark.ept-section--cta { padding-block: 0; }
  .ept-section--cta .ept-wrap { width: 100%; }
  main > .ept-section--cta:last-child { padding-bottom: 0; }
}

/* --- a case study ---------------------------------------------------------- */

.ept-pager { display: flex; justify-content: space-between; gap: var(--gap); padding-block: var(--gap-large); }
.ept-pager a { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--text); text-decoration: none; max-width: 45%; }
.ept-pager a:hover .ept-pager__title { text-decoration: underline; }
.ept-pager a > span { min-width: 0; }
@media (min-width: 48rem) { .ept-pager__title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } }
.ept-pager__next { margin-left: auto; text-align: end; }
.ept-pager__label { display: block; font-size: 0.75rem; text-transform: uppercase; color: var(--text-quiet); }
.ept-pager .ept-icon { color: var(--ept-periwinkle); width: 1.5rem; height: 1.5rem; }

/* --- a post ------------------------------------------------------------------ */

.ept-post-head { background: var(--surface-panel); padding-block: 1.875rem; }
.ept-post-head__inner { display: grid; gap: var(--gap); align-items: center; }
/* The card overlaps the cover's edge, as the old site's did. */
@media (min-width: 52rem) {
  .ept-post-head__inner { grid-template-columns: 31.2rem minmax(0, 1fr); gap: 0; }
  .ept-post-head__card { z-index: 1; min-height: 26.875rem; margin-right: -0.625rem; }
}
.ept-post-head__card { display: grid; align-content: center; gap: 0.6rem; padding: 0.625rem 1.875rem; background: var(--surface); }
.ept-post-head__title { font-size: var(--text-h3); font-weight: 700; line-height: 1.1; letter-spacing: 1px; }
@media (max-width: 51.99rem) { .ept-post-head__card { justify-items: center; text-align: center; } .ept-post-head__card .ept-meta { justify-content: center; } }
.ept-post-head__cover img { width: 100%; box-shadow: var(--shadow-raised); }
.ept-post-head__by { font-weight: 700; }
.ept-post-head .ept-meta a { color: var(--link-post); }

.ept-post { display: grid; gap: var(--gap-large); padding-block: var(--gap-large); }
.ept-post > * { min-width: 0; }  /* a wide table scrolls inside itself; it never pushes the page sideways */
@media (min-width: 60rem) { .ept-post { grid-template-columns: minmax(0, 1fr) 23.5rem; column-gap: 4.375rem; align-items: start; padding-left: 1.25rem; padding-right: 0.75rem; } }
.ept-post__body.markdown-body { font-size: var(--text-base); }
/* The kit's tables: ruled in the text colour, centred heads, every other row tinted. */
.ept-post__body.markdown-body table { display: table; width: 100%; }
.ept-post__body.markdown-body :is(th, td) { padding: 0.5rem; border: 1px solid var(--text); font-size: 1.0125rem; line-height: 1.5; overflow-wrap: anywhere; }
.ept-post__body.markdown-body th { background: none; border-bottom-width: 2px; text-align: center; font-weight: 700; }
.ept-post__body.markdown-body tbody tr:nth-child(odd) td { background: var(--surface-stripe); }
.ept-post__body.markdown-body td a { color: var(--link-post); }
.ept-sidebar { display: grid; gap: var(--gap); }
.ept-sidebar__box { display: grid; gap: 1rem; padding: 1.25rem; background: var(--surface-tinted); }
.ept-sidebar__title { font-size: var(--text-h3); font-weight: 600; }
.ept-sidebar__recent { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.ept-sidebar__recent a { display: grid; grid-template-columns: 5.6875rem 1fr; gap: 0.625rem; align-items: center; font-size: 0.75rem; font-weight: 500; line-height: 1.3; letter-spacing: 1px; color: var(--text); text-decoration: none; }
.ept-sidebar__recent span { grid-column: 2; }
.ept-sidebar__recent img { width: 5.6875rem; height: 4.0625rem; object-fit: cover; }
.ept-sidebar__recent time { display: block; color: var(--text-quiet); font-size: 0.75rem; }
.ept-sidebar__categories { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-small); font-weight: 600; text-transform: uppercase; }
.ept-sidebar__categories a { color: var(--text); }
.ept-sidebar__follow { background: var(--surface-dark); color: var(--on-dark); text-align: center; justify-items: center; }
.ept-sidebar__follow .ept-sidebar__title { font-size: var(--text-lead); line-height: 1.4; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 500; }
.ept-sidebar__follow p { font-size: var(--text-lead-body); line-height: var(--leading-lead); }
.ept-social { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ept-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: var(--signal); color: var(--on-signal); }
.ept-social a:hover { background: var(--signal-strong); }
.ept-sidebar__promo { margin-inline: 1.25rem; padding: 1.875rem; background: var(--surface); border: 1px solid var(--text-quiet); text-align: center; justify-items: center; }
.ept-sidebar__promo .ept-heading__title { font-size: var(--text-h2); }
.ept-sidebar__promo .ept-button { width: 100%; padding: 0.625rem; border-radius: var(--radius-small); }

/* --- the 404 page ------------------------------------------------------------ */

.ept-error { min-height: 100vh; display: grid; align-content: center; background: var(--surface-tinted); padding-block: var(--gap-large); }
.ept-error__logo { justify-self: start; margin-bottom: var(--gap-large); }
.ept-error__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-large); }
.ept-error__art { width: clamp(10rem, 6rem + 14vw, 20rem); }
.ept-error__body { display: grid; gap: 1rem; justify-items: start; max-width: var(--measure); }
.ept-error__title { font-size: var(--text-banner); font-weight: 500; }

/* --- forms (the gem's, in this theme) ------------------------------------------ */

/* Styled wherever the gem draws a form: in the contact section, and on the page that shows it
   again with what to fix. Placeholders on borderless fields, the labels kept for screen readers;
   first and last name side by side on wider screens, as the old form had them. */
.rc-form { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
  .rc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .rc-form > * { grid-column: 1 / -1; }
  .rc-form > .rc-form-field:has(> [name="entry[first_name]"]),
  .rc-form > .rc-form-field:has(> [name="entry[last_name]"]) { grid-column: auto; }
}
.rc-form-field { display: grid; gap: 0.4rem; align-content: start; }
.rc-form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rc-form-hint, .ept-count { margin: 0; color: var(--text-quiet); font-size: var(--text-small); }
.rc-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rc-form textarea, .rc-form select {
  width: 100%; min-height: 3.3125rem; padding: 0.75rem 0.625rem;
  background: var(--surface-tinted); color: var(--text); border: 0; border-radius: var(--radius-button);
  font: inherit; font-size: 1.125rem;
}
.rc-form ::placeholder { color: var(--signal); opacity: 1; }
.rc-form textarea { min-height: 18rem; resize: vertical; }
.rc-form :is(input, textarea, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rc-form .rc-form-field-error :is(input, textarea, select) { border: 2px solid var(--danger); }
.rc-form-error { margin: 0; padding: 0.6rem 0.9rem; border: 1px solid var(--danger); border-radius: var(--radius-small); background: var(--surface-danger); color: var(--text); font-size: var(--text-small); }
.rc-form-errors { padding: 1rem 1.25rem; border: 1px solid var(--danger); border-radius: var(--radius-small); background: var(--surface-danger); }
.rc-form-errors p { margin: 0 0 0.5rem; font-weight: 600; }
.rc-form-errors ul { margin: 0; padding-left: 1.25rem; }
.rc-form-errors a { color: var(--text); }
.rc-form-submit {
  justify-self: start; min-height: 3rem; padding: 0.85rem 1.5rem; border: 0; border-radius: var(--radius-small);
  background: var(--signal); color: var(--on-signal); font: 700 var(--text-small) / 1 var(--font-brand);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; cursor: pointer;
}
.rc-form-submit:hover { background: var(--signal-strong); }
.rc-form-sent { padding: 1.25rem 1.5rem; border-radius: var(--radius-small); background: var(--surface-panel); }
.rc-form-sent > :first-child { margin-top: 0; }
.rc-form-sent > :last-child { margin-bottom: 0; }

/* --- preferences ------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root { --border: var(--border-strong); --text-quiet: var(--text); }
  .ept-hero::before { opacity: 0.25; }
}
@media (forced-colors: active) {
  .ept-button, .ept-tabs__tab, .ept-carousel__button, .ept-lightbox__button, .ept-social a { border: 1px solid ButtonText; }
  .ept-why__title, .ept-feature { forced-color-adjust: auto; border: 1px solid CanvasText; }
}

/* --- the styleguide (development only) ------------------------------------------------ */

.ept-styleguide { display: grid; gap: var(--gap-large); padding-block: var(--gap-large); }
.ept-styleguide__swatches { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.ept-styleguide__swatch { display: grid; gap: 0.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-small); font-size: var(--text-small); }
.ept-styleguide__chip { height: 3rem; border-radius: var(--radius-small); border: 1px solid var(--border); }
.ept-styleguide__fonts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ept-styleguide__chip--surface { background: var(--surface); }
.ept-styleguide__chip--surface-tinted { background: var(--surface-tinted); }
.ept-styleguide__chip--surface-mist { background: var(--surface-mist); }
.ept-styleguide__chip--surface-panel { background: var(--surface-panel); }
.ept-styleguide__chip--surface-dark { background: var(--surface-dark); }
.ept-styleguide__chip--text { background: var(--text); }
.ept-styleguide__chip--text-quiet { background: var(--text-quiet); }
.ept-styleguide__chip--signal { background: var(--signal); }
.ept-styleguide__chip--signal-strong { background: var(--signal-strong); }
.ept-styleguide__chip--link-post { background: var(--link-post); }