/**
 * Unlim Code — custom styles
 *
 * Everything hand-written for Unlim Code lives here. It is loaded AFTER
 * assets/conicorn.shared.*.css, which is a generated export protected by an
 * SRI integrity hash — editing that file makes the browser refuse to load it,
 * so never touch it. Add overrides here instead.
 *
 * Values below reuse the export's design tokens (--_color---*, --font-size--*,
 * --_radius---*, --_spacing---*) so this stays visually in sync with the rest
 * of the site.
 */

:root {
  /* The navbar is position:fixed, 88px tall (.navbar-wraper). The homepage
     hero sits under it by design; every other page needs to clear it. */
  --unlim-nav-h: 5.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Secondary pages — shared scaffolding
   Every non-home page (contact, services, case-studies, legal) is built from
   these primitives + the export's design tokens, so they read as one site.
   Composition mirrors the Framer template pages; values come from the tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* Vertical rhythm that clears the fixed 88px navbar (template top pad ~164px). */
.sec-pad {
  padding-top: calc(var(--unlim-nav-h) + var(--_spacing---medium));
  padding-bottom: var(--_spacing---xmedium);
}
.sec-pad-tight {
  padding-top: var(--_spacing---large);
  padding-bottom: var(--_spacing---large);
}

/* Page head: eyebrow + heading + intro. Left by default, centered on listings. */
.page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.page-head.is-center {
  align-items: center;
  text-align: center;
}
.page-head .heading-style-h1,
.page-head .heading-style-h2 {
  margin: 0;
}
.page-head-intro {
  max-width: 40rem;
  color: var(--_color---black--03);
  font-size: 1.25rem;
  line-height: 1.4;
}
.page-head.is-center .page-head-intro {
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact — dark two-column composition (template/contact)
   LEFT: eyebrow + H1 + subheading + contact info + rotating badge.
   RIGHT: the shared form (components/contact-form.html) in a dark card.
   The section is dark and flows straight into the dark footer bottom bar.
   ══════════════════════════════════════════════════════════════════════════ */

.contact-sec {
  position: relative;
  overflow: hidden;
  background-color: var(--_color---grey--01);
  color: var(--_color---white--01);
}
/* Animated background that reads as one scene with the dark footer below it.
   Same footer video, darkened by a gradient that deepens toward the bottom so
   there is no hard grey seam where the section meets the footer. */
.contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.contact-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Full opacity, same as the footer video — so the contact scene and the footer
     read as ONE continuous animated background (the previous 0.45 + heavy dark
     gradient made the section look like a different, flatter background). */
  opacity: 1;
}
.contact-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Gentle darken at the top (keeps the heading/lead readable over the video)
     that fades to fully transparent at the bottom, so where the section meets
     the footer the treatment is identical (raw video, no overlay) — no seam. */
  background: linear-gradient(180deg,
    rgba(17, 17, 17, 0.55) 0%,
    rgba(17, 17, 17, 0.3) 50%,
    rgba(17, 17, 17, 0) 100%);
}
/* Keep the content above the video layer. */
.contact-sec > .padding-global {
  position: relative;
  z-index: 1;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-left {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.contact-lead {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-lead .heading-style-h1 {
  margin: 0;
  color: var(--_color---white--01);
}
.contact-lead-sub {
  max-width: 30rem;
  margin: 0;
  color: var(--_color---white--02);
  font-size: 1.25rem;
  line-height: 1.4;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-info-label {
  font-size: var(--font-size--body-s);
  letter-spacing: -0.02em;
  color: var(--_color---white--04);
}
.contact-info-value,
.contact-info-value a {
  font-size: var(--font-size--body-m);
  color: var(--_color---white--01);
  text-decoration: none;
}
.contact-info-value a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Rotating circle logo, embedded in the form's heading area (template/contact)
   rather than floating separately. Reuses the export's curve-text asset. */
.contact-card-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
/* Static circle badge, embedded in the form heading (as in the template).
   No infinite rotation — the template does not spin it, and the design bible
   forbids endless looping animation. */
.contact-card-badge {
  flex: none;
  width: 4rem;
  height: 4rem;
  opacity: 0.9;
}

/* Right column: the form, on a dark card. The fields inside come from
   components/contact-form.html and are already styled dark (.form_input). */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 2.5rem;
  border: 1px solid var(--_color---white--06);
  border-radius: var(--_radius---radius-2xl);
  background-color: var(--_color---black--05);
  background-image: linear-gradient(#0006, #ffffff14);
}
.contact-card-heading {
  margin: 0;
  font-size: var(--font-size--title-l);
  font-weight: var(--font-weight--medium);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--_color---white--01);
}
/* The form fills the card; the standalone-card min-height isn't wanted here. */
.contact-card .cta-form {
  min-height: 0;
}

/* Sticky footer, scoped to the contact page (data-i18n-page keeps the shared
   .page-wrapper untouched elsewhere): the wrapper is a full-height flex column,
   the contact section stretches to fill, the footer keeps its natural height —
   so a short page never inflates the footer. */
html[data-i18n-page="contact"] .page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
html[data-i18n-page="contact"] .main-wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
html[data-i18n-page="contact"] .contact-sec {
  flex: 1 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Legal pages — Privacy / Terms (template/privacy-policy, template/terms)
   Header (H1 72px + intro 20px) then numbered sections (H3 32px) in a single
   readable centered column, matching the template's legal layout.
   ══════════════════════════════════════════════════════════════════════════ */

/* Template legal pages sit on a soft white→light-grey wash, not flat white.
   A fixed, viewport-height gradient reproduces that gentle top-to-bottom fade;
   the dark footer paints over its own area, so only the content shows the wash. */
html[data-i18n-page="privacy"] body,
html[data-i18n-page="terms"] body {
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #ffffff 0%, var(--_color---grey--08) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* The template's legal pages sit in a single CENTERED reading column (~40rem),
   not left-aligned against the container edge. Center the head and body, keep
   the text itself left-aligned inside the column. */
.legal-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
.legal-head .heading-style-h2 {
  margin: 0;
}
.legal-intro {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 42rem;
  margin: 0;
  color: var(--_color---black--03);
  font-size: 1.25rem;
  line-height: 1.45;
}
.legal-intro p {
  margin: 0;
}
/* "Last updated …" line under the heading, as in the template legal pages. */
.legal-updated {
  font-size: var(--font-size--body-s);
  color: var(--_color---black--04);
}
.legal-body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 42rem;
  margin-top: var(--_spacing---small);
  margin-left: auto;
  margin-right: auto;
}
.legal-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.legal-block h2 {
  margin: 0;
  font-size: var(--font-size--h6);
  font-weight: var(--font-weight--medium);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--_color---grey--01);
}
/* Auto-number the sections from a CSS counter so the "1." … "5." prefixes
   stay correct in any language without living in the translatable text. */
.legal-body.is-numbered {
  counter-reset: legal;
}
.legal-body.is-numbered .legal-block h2::before {
  counter-increment: legal;
  content: counter(legal) ". ";
}
.legal-block p {
  margin: 0;
  color: var(--_color---black--02);
  line-height: 1.6;
}
.legal-block ul {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--_color---black--02);
}
.legal-note {
  font-size: var(--font-size--body-s);
  color: var(--_color---black--04);
}
/* A numbered section's body (injected via i18n html): stacks its paragraphs,
   sub-headings and lists with the same rhythm. .legal-block p / ul above still
   apply (they match descendants), so only the wrapper + sub-heading are new. */
.legal-block-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.legal-sub {
  margin: 0.35rem 0 0;
  font-size: 1.125rem;
  font-weight: var(--font-weight--medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--_color---grey--01);
}

/* ══════════════════════════════════════════════════════════════════════════
   Services — landing page (no template page exists; synthesized in Conicorn
   style from the design system). Hero + service cards + process + mid CTA.
   Service copy reuses the existing capabilities.* / process.* i18n keys so it
   never drifts from the homepage.
   ══════════════════════════════════════════════════════════════════════════ */

/* Stacks major page blocks with a generous, consistent rhythm. */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---large);
}

/* Service cards grid. The card with a detail page is an <a class="is-link">;
   the rest are plain <div>s, so nothing links to a dead end. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.svc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 2.5rem;
  border-radius: var(--_radius---radius-l);
  background-color: var(--_color---grey--08);
  text-decoration: none;
  color: inherit;
}
.svc-card.is-link {
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.svc-card.is-link:hover {
  background-color: var(--_color---grey--07);
  transform: translateY(-2px);
}
.svc-card-num {
  font-size: var(--font-size--body-s);
  color: var(--_color---black--04);
  letter-spacing: 0.02em;
}
.svc-card-title {
  margin: 0;
  font-size: var(--font-size--title-m);
  font-weight: var(--font-weight--medium);
  line-height: 1.15;
}
.svc-card-desc {
  margin: 0;
  color: var(--_color---black--02);
  line-height: 1.5;
}
.svc-card-more {
  margin-top: auto;
  padding-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size--body-s);
  font-weight: var(--font-weight--medium);
}
.svc-card-more svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Service areas — the rich landing-page grid (10 areas, each with a business
   outcome, capability list and a representative stat). Two columns on desktop.
   Only the CRM card is an <a class="is-link">; the rest are plain <div>s, so no
   card links to a dead end. */
.svc-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.svc-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  padding: 2.5rem;
  border: 1px solid var(--_color---black--06);
  border-radius: var(--_radius---radius-l);
  background-color: var(--_color---grey--08);
  color: inherit;
  text-decoration: none;
}
.svc-area.is-link {
  transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.svc-area.is-link:hover {
  background-color: var(--_color---grey--07);
  border-color: var(--_color---black--05);
  transform: translateY(-2px);
}
.svc-area-top {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.svc-area-num {
  font-size: var(--font-size--body-s);
  font-weight: var(--font-weight--medium);
  color: var(--_color---black--04);
  letter-spacing: 0.02em;
}
.svc-area-title {
  margin: 0;
  font-size: var(--font-size--title-m);
  font-weight: var(--font-weight--medium);
  line-height: 1.15;
}
.svc-area-outcome {
  margin: 0;
  color: var(--_color---black--02);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.svc-area-caps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.svc-area-caps li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--_color---black--03);
  font-size: var(--font-size--body-s);
  line-height: 1.45;
}
.svc-area-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--_radius---round);
  background-color: var(--_color---grey--01);
}
.svc-area-foot {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--_color---black--06);
}
.svc-area-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.svc-area-stat-num {
  font-size: var(--font-size--title-l);
  font-weight: var(--font-weight--medium);
  line-height: 1;
  letter-spacing: -0.02em;
}
.svc-area-stat-label {
  font-size: var(--font-size--body-s);
  color: var(--_color---black--04);
  line-height: 1.3;
}
.svc-area-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  font-size: var(--font-size--body-s);
  font-weight: var(--font-weight--medium);
}
.svc-area-link svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Process: numbered steps, divider rules — echoes the homepage process. */
.svc-process {
  display: flex;
  flex-direction: column;
}
.svc-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-top: 1px solid var(--_color---black--06);
}
.svc-step:last-child {
  border-bottom: 1px solid var(--_color---black--06);
}
.svc-step-num {
  font-size: var(--font-size--title-l);
  font-weight: var(--font-weight--medium);
  line-height: 1;
  color: var(--_color---black--04);
}
.svc-step-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.svc-step-title {
  font-size: var(--font-size--title-m);
  font-weight: var(--font-weight--medium);
}
.svc-step-desc {
  color: var(--_color---black--02);
  line-height: 1.5;
}

/* Mid-page CTA band — dark, echoes the site's dark surfaces. */
.svc-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: var(--_spacing---medium) var(--_spacing---small);
  border-radius: var(--_radius---radius-2xl);
  background-color: var(--_color---grey--01);
  color: var(--_color---white--01);
}
.svc-cta h2 {
  margin: 0;
  max-width: 30rem;
}
.svc-cta p {
  margin: 0;
  max-width: 34rem;
  color: var(--_color---white--02);
  font-size: 1.125rem;
}
/* Reused pill button on light or dark surfaces (matches .cs-viewall). */
.unlim-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--_radius---round);
  font-size: var(--font-size--body-s);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.unlim-btn.is-light {
  background-color: var(--_color---white--01);
  color: var(--_color---grey--01);
}
.unlim-btn.is-dark {
  background-color: var(--_color---grey--01);
  color: var(--_color---white--01);
}
.unlim-btn:hover {
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════════
   CRM service page — editorial / case-study layout
   Replaces the homepage-style .value-card icon grids and the process zigzag with
   editorial numbered rows, so the page reads like an internal case-study article
   rather than a second homepage. Reuses the existing pages.crm.* i18n keys.
   Light surface (dark hero above), so text is dark-on-light like the other
   secondary-page content.
   ══════════════════════════════════════════════════════════════════════════ */
.crm-editorial {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.crm-editorial-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 46rem;
}
.crm-editorial-head .heading-style-h2 {
  margin: 0;
}
.crm-editorial-head .subheading-text {
  margin: 0;
}

/* Shared numbered-row scaffold for the problem list and the "what we build"
   feature list — a large index number beside an editorial title + paragraph,
   separated by hairline rules (the case-study rhythm, not a card grid). */
.crm-problems {
  list-style: none;
  margin: 0;
  padding: 0;
}
.crm-problems,
.crm-build {
  display: flex;
  flex-direction: column;
}
.crm-problem,
.crm-build-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.875rem 0;
  border-top: 1px solid var(--_color---black--06);
}
.crm-problems .crm-problem:last-child,
.crm-build .crm-build-row:last-child {
  border-bottom: 1px solid var(--_color---black--06);
}
.crm-problem-num,
.crm-build-num {
  font-size: var(--font-size--title-l);
  font-weight: var(--font-weight--medium);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--_color---black--04);
}
.crm-problem-body,
.crm-build-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.crm-problem-title,
.crm-build-title {
  margin: 0;
  font-size: var(--font-size--title-m);
  font-weight: var(--font-weight--medium);
  line-height: 1.15;
}
.crm-problem-desc,
.crm-build-desc {
  margin: 0;
  max-width: 44rem;
  color: var(--_color---black--02);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Related services — a compact link list, not a third card grid. */
.crm-related {
  display: flex;
  flex-direction: column;
}
.crm-related-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-top: 1px solid var(--_color---black--06);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.2s ease, background-color 0.2s ease;
}
.crm-related-item:last-child {
  border-bottom: 1px solid var(--_color---black--06);
}
.crm-related-item:hover {
  padding-left: 0.6rem;
}
.crm-related-title {
  grid-column: 1;
  margin: 0;
  font-size: var(--font-size--title-m);
  font-weight: var(--font-weight--medium);
  line-height: 1.15;
}
.crm-related-desc {
  grid-column: 1;
  margin: 0;
  max-width: 38rem;
  color: var(--_color---black--02);
  line-height: 1.5;
}
.crm-related-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.25rem;
  color: var(--_color---black--04);
}

@media screen and (max-width: 767px) {
  .crm-problem,
  .crm-build-row {
    grid-template-columns: 3.25rem 1fr;
    gap: 1rem;
  }
  .crm-problem-num,
  .crm-build-num {
    font-size: var(--font-size--title-m);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Case studies — listing page
   Reuses components/case-cards.html, so the cards never drift from the
   homepage. Only the layout differs: a plain stack instead of a coverflow.
   ══════════════════════════════════════════════════════════════════════════ */

.cs-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: var(--_spacing---medium);
}

/* Undo the coverflow positioning from .cs-item — there is no carousel here. */
.cs-list .cs-item {
  position: static;
  width: auto;
  height: auto;
  margin-left: 0;
  transform: none;
  opacity: 1;
  cursor: default;
  transition: none;
}

/* ── Read-case-study CTA (components/case-cards.html) ──────────────────────
   Lives in each card's content area. On the homepage coverflow the export's
   rule `.cs-item[data-state='prev'|'next'|'hidden'] :is(a,button){pointer-
   events:none}` already makes it fire only on the ACTIVE card — a click on a
   side card falls through to the carousel and just activates it. On the
   listing page (.cs-list) and the mobile rail every card's button is live. */
.casestudy-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 1.1rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--_radius---round);
  background-color: var(--_color---grey--01);
  color: var(--_color---white--01);
  font-size: var(--font-size--body-s);
  font-weight: var(--font-weight--medium);
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.casestudy-card-cta:hover {
  transform: translateY(-1px);
  background-color: var(--_color---grey--03);
}
.casestudy-card-cta-icon {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Case studies — coverflow
   Replaces the old Webflow w-slider on the homepage. Structure follows the
   Conicorn template's homepage block (a centred active card with the previous
   and next cards peeking behind it), but the card itself reuses the existing
   .casestudy-card component, so it inherits the site's look and its existing
   991 / 767 / 479 breakpoints for free.
   Driven by js/case-studies-carousel.js. No jQuery, no Webflow runtime.
   ══════════════════════════════════════════════════════════════════════════ */

.cs-coverflow {
  --cs-card-w: min(58rem, 76vw);
  --cs-card-h: 29rem;
  --cs-peek: 64%;          /* side-card offset, relative to card width */
  --cs-side-scale: 0.84;
  --cs-side-opacity: 0.45;

  position: relative;
  z-index: 1;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.cs-stage {
  position: relative;
  height: var(--cs-card-h);
}

.cs-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cs-card-w);
  height: 100%;
  margin-left: calc(var(--cs-card-w) / -2);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}

/* The card fills its slot so every slide is the same height. */
.cs-item > .casestudy-card {
  height: 100%;
}

.cs-item[data-state='active'] {
  z-index: 3;
  opacity: 1;
  transform: translateX(0) scale(1);
}

.cs-item[data-state='prev'],
.cs-item[data-state='next'] {
  z-index: 2;
  opacity: var(--cs-side-opacity);
  cursor: pointer;
}

.cs-item[data-state='prev'] {
  transform: translateX(calc(var(--cs-peek) * -1)) scale(var(--cs-side-scale));
}

.cs-item[data-state='next'] {
  transform: translateX(var(--cs-peek)) scale(var(--cs-side-scale));
}

.cs-item[data-state='prev']:hover,
.cs-item[data-state='next']:hover {
  opacity: 0.7;
}

/* Cards further than one step away: parked behind the neighbours. */
.cs-item[data-state='hidden'] {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.75);
}

/* Inert slides must not be reachable by keyboard or screen readers. */
.cs-item[data-state='prev'] :is(a, button),
.cs-item[data-state='next'] :is(a, button),
.cs-item[data-state='hidden'] :is(a, button) {
  pointer-events: none;
}

/* ── Controls ─────────────────────────────────────────────────────────────
   The buttons keep the export's .casestudy-nav-btn look (3rem round black
   button with the inset glow, and .right's 180deg flip). That rule never
   declares `position`, so its `inset` offsets — meant for the old slider —
   are inert and it drops straight into a flex row. .cs-nav-btn only resets
   the <button> chrome the old markup didn't need (it used divs). */

.cs-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.cs-nav-btn {
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--_color---white--01);
  flex: none;
}

.cs-nav-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.cs-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cs-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--_radius---round);
  background-color: var(--_color---black--05);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.cs-dot[aria-current='true'] {
  width: 1.5rem;
  background-color: var(--_color---grey--01);
}

/* ── View all ─────────────────────────────────────────────────────────── */

.cs-viewall-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.cs-viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--_radius---round);
  background-color: var(--_color---grey--01);
  color: var(--_color---white--01);
  font-size: var(--font-size--body-s);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.cs-viewall:hover {
  background-color: var(--_color---grey--02);
  transform: translateY(-2px);
}

.cs-viewall svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* ── Tablet / mobile ──────────────────────────────────────────────────────
   Below the export's 991px breakpoint .casestudy-card becomes a column, so a
   fixed-height absolute stage no longer fits. Swap the coverflow for a native
   scroll-snap rail: no transforms, no JS layout, real momentum scrolling. */

@media screen and (max-width: 991px) {
  .cs-stage {
    position: static;
    height: auto;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so neighbours hint at the sides */
    margin-left: calc(var(--_spacing---small) * -1);
    margin-right: calc(var(--_spacing---small) * -1);
    padding: 0 var(--_spacing---small);
  }

  .cs-stage::-webkit-scrollbar {
    display: none;
  }

  .cs-item {
    position: static;
    flex: 0 0 min(34rem, 86vw);
    /* A flex item defaults to min-width:auto, so its min-content size wins over
       the basis — cards with longer titles rendered wider than the rest
       (341/323/446px instead of a uniform 323px). min-width:0 lets the basis
       hold and keeps every card the same width in the rail. */
    min-width: 0;
    width: auto;
    height: auto;
    margin-left: 0;
    scroll-snap-align: center;
    /* neutralise the coverflow transforms the JS sets for desktop */
    transform: none !important;
    opacity: 1 !important;
    cursor: default;
  }

  .cs-item[data-state='hidden'] {
    pointer-events: auto;
  }

  .cs-item :is(a, button) {
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-item {
    transition: none;
  }
  .cs-stage {
    scroll-behavior: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Secondary pages — responsive
   Heading sizes scale via the export's --font-size--h1/h2 media tokens, so
   only layout (columns, padding) is adjusted here.
   ══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-decor {
    display: none;
  }
  .page-stack {
    gap: var(--_spacing---medium);
  }
}

@media screen and (max-width: 767px) {
  .svc-grid,
  .svc-areas {
    grid-template-columns: 1fr;
  }
  .svc-card,
  .svc-area {
    padding: 2rem;
  }
  .contact-card {
    padding: 1.75rem;
  }
  .svc-cta {
    padding: var(--_spacing---small) 1.5rem;
  }
  .legal-body {
    gap: 2rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer — dark base + clickable contact line (single shared component:
   components/footer-bottom.html + footer.html / footer-plain.html).
   ══════════════════════════════════════════════════════════════════════════ */

/* The export ships .footer on a light grey--05 base that the dark footer video
   is meant to cover; the footer's own text is white (--white--01). When the
   video is slow, blocked or absent, the light base shows through and the white
   text drops to ~1.5:1 contrast. Pin a dark base (as the template renders it)
   so the footer is always dark and readable, and the dark contact scene flows
   straight into it with no hard grey seam. Applies on every route → identical. */
.footer {
  background-color: var(--_color---grey--01);
}
/* The previous iteration also filled .footer-main with a solid dark gradient
   (grey--01 → grey--01) at z-index 2, which painted OVER the footer video
   (z-index -1) and hid the animation — the "background replaced by a flat fill"
   report. .footer-main must stay transparent: the dark base on .footer above is
   the only fallback needed, and it sits BEHIND the video, so the animation plays
   on top and the flat base takes over only when the video is slow/blocked/absent.
   The export itself paints .footer-main with a light grey→transparent gradient
   (#b8b8b8 → transparent) that would wash out the top of the dark footer, so
   clear that too — leave .footer-main fully transparent. */
.footer-main {
  background-image: none;
}

/* Bottom bar: copyright (left) + a compact, structured contact group (right) on
   one row; the big wordmark sits below. Stacks on mobile. Compact by design —
   it must never inflate the footer height. */
.footer-bottom-row {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  gap: 2rem;
}
.footer-bottom-row-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.footer-bottom-row-text {
  color: var(--_color---white--03);
}
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem 2.25rem;
}
.footer-contact-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.footer-contact-label {
  font-size: var(--font-size--body-s);
  letter-spacing: -0.01em;
  color: var(--_color---white--04);
}
.footer-contact-link {
  color: var(--_color---white--01);
  font-size: var(--font-size--body-m);
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-contact-link:hover {
  color: var(--_color---white--02);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The export floats the wordmark absolutely, centered at the very bottom; drop
   it into flow below the copyright/contact row so nothing overlaps. */
.footer-bottom-logo {
  position: static;
  width: 100%;
  max-width: 22.5rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .footer-bottom-row {
    gap: 1.75rem;
  }
  .footer-bottom-row-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .footer-contact {
    justify-content: flex-start;
    gap: 1rem 2rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Interactive Card & Component Hover Effects
   ══════════════════════════════════════════════════════════════════════════ */

.capabilities-card,
.value-card,
.pricing-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.capabilities-card:hover,
.value-card:hover,
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.15);
}

.capabilities-card .capabilities-card-image {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.capabilities-card:hover .capabilities-card-image {
  transform: scale(1.03);
}

/* IT Infrastructure & Support has no dedicated page yet. It stays in the grid
   as a plain (non-link) card, so it must not inherit the lift/shadow hover
   that signals the other cards are clickable. */
.capabilities-card-static {
  cursor: default;
}

.capabilities-card-static:hover {
  transform: none;
  box-shadow: inset 0 -2px 1px #0000001f, inset 0 0 1px 2px #fff;
  border-color: var(--_color---grey--07);
}


/* Homepage service cards are links to the service detail pages. Reset the
   global underlined-link style so the cards render exactly as the old divs. */
a.capabilities-card {
  color: inherit;
  text-decoration: none;
}