/* Services page. Loads after style.css and reuses its tokens, header, buttons
   and footer. Structure follows the reference services page (hero with the
   statement, three modes, service cards, partners); everything visual is the
   brand's: Baloo 2, a light-streak Slate hero (Magenta on practice pages), Jet Black surfaces, Cloud between them, lime only as a small
   accent, Medium Grey copy on dark, Dark Grey rules.

   1. Page tokens and shared pieces
   2. Hero
   3. Statement
   4. Pillars
   5. Practices
   6. Partners
   7. Reveals
------------------------------------------------------------------------- */

/* 1. Page tokens and shared pieces ---------------------------------------- */

.svc {
  --svc-x: 9.5vw; /* side gutter, same as the homepage hero */
  --svc-jet: var(--color-brand-jet, #111111);
  --svc-grey-dark: #555555;
  --svc-grey-medium: #9a9a9a;

  color: var(--color-ink);
  background-color: var(--color-cloud);
}

.svc-h2 {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: var(--weight-heading);
  line-height: 1.05;
  text-wrap: balance;
}

/* 2. Hero ----------------------------------------------------------------- */

/* One line, left on the page gutter, ending at the middle of the screen, on a
   Magenta-to-Pop-Purple diagonal. The faint bloom in the top right adds a
   little depth. */
.svc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 50vh;
  padding: 140px var(--svc-x) 56px;
  overflow: hidden;
  color: var(--color-paper);
  background-color: var(--color-brand-magenta);
  background-image: linear-gradient(
    135deg,
    var(--color-brand-magenta) 0%,
    #7a2fa8 55%,
    var(--color-brand-purple) 100%
  );
}

.svc-hero::before {
  content: "";
  position: absolute;
  top: -30vw;
  right: -20vw;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.14), transparent 72%);
  pointer-events: none;
}

.svc-hero__title {
  position: relative;
  font-size: clamp(64px, 11vw, 168px);
  font-weight: var(--weight-heading);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

/* Services page only (.svc-hero--main; the practice pages keep the Magenta
   hero above). Full first screen on the Slate field with one prism light
   streak in brand colours (services-hero-bg.jpg, rendered by
   scripts/make-services-hero-bg.py). Text follows the reference CL1 hero:
   one centred column, a 34px white line above, the page name at 200px in
   Jet Black, the value line in white below, then the button 80px under. */
.svc-hero--main {
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 200px var(--svc-x) 120px;
  color: var(--color-paper);
  text-align: center;
  background-color: var(--color-slate);
  background-image: url("../img/services-hero-bg.jpg");
  background-size: cover;
  background-position: center;
}

.svc-hero--main::before {
  content: none;
}

.svc-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* CL1's ratio (client): both lines 34px in Pure White around the 200px
   title in Jet Black; 24px under 800px. */
.svc-hero__headline,
.svc-hero__text {
  max-width: 920px;
  font-size: 34px;
  font-weight: 500;
  line-height: 42px;
  text-wrap: balance;
  color: var(--color-paper);
}

/* min(13.6vw, 200px): the widest that would keep "Four Practices." on a
   line at every width; that heading now sits slightly smaller (below). */
.svc-hero--main .svc-hero__title {
  margin-top: -10px;
  font-size: min(13.6vw, 200px);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--svc-jet);
}

.svc-hero__bottom {
  margin-top: 64px;
}

.svc-hero__bottom .button {
  min-width: 300px;
}

/* 4. Modes -------------------------------------------------------------- */

/* After the description section of corticallabs.com/cl1 (client): one
   fluorescence-microscopy photo covering the whole section top to bottom,
   with a panel floating over it that blurs it (backdrop blur 50px) into a
   soft dark green, holding three problems (an oversized title with its
   paragraph below, 2.4vw, reference 38.4px, in white) and a band of three
   annotation lines, each closed by a 50% white rule, 60px apart.
   Background image is the reference's own (cl1-desc-bg.jpg). */
.svc-pillars {
  padding: 200px 0 0; /* reference */
  color: var(--color-paper);
  background-color: #04080a;
  background-image: url("../img/services-modes-bg.jpg?v=3");
  background-image: image-set(url("../img/services-modes-bg.webp?v=3") type("image/webp"), url("../img/services-modes-bg.jpg?v=3") type("image/jpeg"));
  background-position: 50% 0;
  background-size: cover;
  overflow: clip; /* the drifting panel never spills into the next section */
}

/* main.js moves the panel as the reference does: it waits below the screen
   while the section opens on its full photo, then rises over it at twice
   the scroll speed (1f); will-change keeps that on the GPU. */
.svc-pillars__list {
  will-change: transform;
  display: flex;
  flex-direction: column;
  padding: 9vw var(--svc-x);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.svc-pillars__items,
.svc-pillars__notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-pillars__items {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Small uppercase section labels in Medium Grey (client), the homepage's
   "Built on" style. */
.svc-label {
  margin: 0 0 2rem;
  font-size: 1.1rem;
  font-weight: var(--weight-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--svc-grey-medium);
}

.svc-promises {
  margin-top: 60px;
}

/* The three promises: side by side in one ruled band, as the reference's
   last item sets its three short columns. */
.svc-pillars__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  padding: 0 0 60px;
  border-bottom: 1px solid rgb(255 255 255 / 0.5);
}

/* The same size as the paragraphs above, pure white, each under a
   short lime rule (client). */
.svc-pillars__notes li {
  position: relative;
  padding-top: 1.25rem;
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-paper);
}

.svc-pillars__notes li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--color-brand-accent);
}

.svc-pillar {
  --pillar-title: clamp(36px, 5.5vw, 92px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0 0 60px;
  border-bottom: 1px solid rgb(255 255 255 / 0.5);
}

/* Short two-word titles (client), one line on desktop. */
.svc-pillar__title {
  font-size: var(--pillar-title);
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Boxed to the width of the longest title, "Outgrown systems" (8.02em). */
.svc-pillar p {
  max-width: calc(var(--pillar-title) * 8.1);
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-paper);
}

/* 5. Practices ------------------------------------------------------------ */

/* Intro centred on top as the heading, the four neumorphic cards below.
   The section is Light Grey, the same as the cards, because neumorphism
   only reads when card and ground match. A large faint ring sits behind. */
.svc-practices {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 72px;
  /* Cards run nearly the full width (client): a 2.5vw margin each side
     (40px at 1600) instead of the page gutter, and no width cap on the
     grid or intro. */
  padding: 240px max(16px, 2.5vw) 144px; /* 240 above the heading, as CL1's "Animal-free testing" */
  overflow: clip;
  /* The pale neuron-culture photo from the "Animal-free testing" section of
     corticallabs.com/cl1 (client), placed as there: cover, anchored to the
     bottom. Light Grey shows while it loads. Image is the reference's own
     (animal-bg.jpg). */
  background-color: var(--color-brand-grey-light);
  /* The photo's foot is a warm off-white; the last 18% fades it to Pure
     White so the section runs into the white partners section below with
     no seam. */
  --practices-fade: linear-gradient(180deg, rgb(255 255 255 / 0) 82%, #ffffff 100%);

  background-image: var(--practices-fade), url("../img/services-practices-bg.jpg");
  background-image: var(--practices-fade), image-set(url("../img/services-practices-bg.webp") type("image/webp"), url("../img/services-practices-bg.jpg") type("image/jpeg"));
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}


/* Static, at the client's request (it was sticky). */
/* Heading and subline left-aligned (client), on the same column as the
   cards so their left edges line up (widths follow the grid's below). */
.svc-practices__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px; /* heading to subline, as CL1 */
  width: 100%;
  max-width: none;
  margin: 0 auto;
  /* Starts 9vw from the screen edge, as CL1's "Animal-free testing" (144px
     at 1600); the cards below keep their 2.5vw margin. */
  padding-left: calc(9vw - max(16px, 2.5vw));
  text-align: left;
}

/* Client's spec: 36-48px bold, tight. */
/* Heading and subline at the reference's "Animal-free testing" sizes and
   colour (corticallabs.com/cl1, measured): title 13.6vw up to 200px, bold,
   line-height 1.09; paragraph 28px medium (18px on phones); both pure
   black. */
.svc-practices__intro .svc-h2 {
  font-size: min(11.6vw, 170px); /* slightly under the hero's "Services" (client) */
  font-weight: 500; /* matches CL1's bold: stem 16.5% of cap height vs 16.1% (700 is 23.5%) */
  line-height: 1.09;
  letter-spacing: -0.01em;
  color: var(--svc-jet); /* Jet Black, as the hero title */
  text-wrap: balance;
}

/* Client's spec: 18-20px regular, relaxed, 16-24px below the heading (the
   intro's gap is 20px). */
.svc-practices__intro p {
  max-width: 1312px; /* the reference's line, the full column at 1600 */
  text-wrap: pretty;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  color: #000000;
}

/* 2x2 on desktop and tablet, stacked on mobile; a 32px gap so the soft
   shadows don't run into each other. Equal rows (1fr) keep all four cards
   the same height. 920px wide so every title holds to one line and every
   description to two. */
.svc-practices__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 32px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 11 / 18;
  overflow: hidden;
  color: var(--color-paper);
  border-radius: 16px;
  background-color: var(--color-brand-magenta);
  background-image: linear-gradient(
    180deg,
    var(--color-brand-magenta) 0%,
    #5a2a72 58%,
    var(--color-brand-navy) 100%
  );
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.svc-card:hover {
  box-shadow: 0 10px 28px rgb(28 45 90 / 0.28);
  transform: translateY(-2px);
}

/* Soft sweep in the upper half, where the reference has its illustration. */
.svc-card::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 18%;
  width: 64%;
  height: 52%;
  border-radius: 50%;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0) 70%);
  transform: rotate(-28deg);
  pointer-events: none;
}

.svc-card__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px; /* title to description, per the client's spec */
  padding: 32px;
}

/* Client's spec: 20-24px bold. */
.svc-card__title {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  text-wrap: balance;
}

.svc-card__cta {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 18px 32px;
  font-size: 13px;
  font-weight: var(--weight-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-paper);
  background-color: rgb(255 255 255 / 0.14);
  transition: background-color 0.2s ease;
}

.svc-card__cta:hover,
.svc-card__cta:focus-visible {
  background-color: rgb(255 255 255 / 0.26);
}

/* Neumorphic practice cards (Services page only; the practice pages keep
   the gradient cards above). Card and ground are both Light Grey #f5f5f5,
   lit from the top left: a Pure White highlight and a soft #d9d9d9 shade.
   Only the "Find out more" button is a link (client): the card stays
   raised, and the button presses in on hover or keyboard focus, its
   shadows flipping to inset. Names in
   Jet Black, the link text in Dark Grey, for contrast against the
   deliberately soft edges.
   Layout: a vertical column (32px padding) with icon, 24px, title at the
   top and the button pushed to the bottom (margin-top: auto), so all four
   buttons line up whatever the title length; the grid row and a shared
   min-height keep the cards the same height. Sizes per the client's table. */
/* Card effect from Uiverse.io by Adam Giebl (strong-zebra-87), MIT. */
.svc-practices__grid .svc-card {
  aspect-ratio: auto; /* the gradient card's 11:18 would force extra height */
  align-items: flex-start; /* everything left-aligned (client) */
  min-width: 0;
  min-height: 240px; /* the short two-line descriptions; no gap above the button */
  text-align: left;
  padding: clamp(32px, 3vw, 48px); /* the same on all four sides (client) */
  overflow: visible;
  color: var(--svc-jet);
  border-radius: 30px;
  background: var(--color-brand-grey-light);
  box-shadow:
    15px 15px 30px #d9d9d9,
    -15px -15px 30px #ffffff;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.svc-practices__grid .svc-card::before {
  content: none;
}

/* Icon, 24px, title, 12px, description, then at least 28px to the button. */
.svc-practices__grid .svc-card__body {
  flex: none;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
  gap: 12px;
  padding: 0 0 28px;
}


/* "What's inside": 16px regular Dark Grey, 1.5, centred, two lines at most
   on desktop. */
.svc-card__desc {
  max-width: 46ch;
  font-size: clamp(18px, 1.3vw, 21px); /* enlarged (client) */
  font-weight: var(--weight-body);
  line-height: 1.55;
  text-wrap: pretty; /* paragraphs, not captions: no balancing */
  color: var(--svc-grey-dark);
}

.svc-practices__grid .svc-card__title {
  font-size: clamp(32px, 2.75vw, 44px); /* enlarged (client): 44px at 1600 */
  font-weight: 600;
  line-height: 1.15;
  /* Trim Baloo's tall built-in space above the capitals, so the visible gap
     over the name equals the card's padding on the other three sides
     (older browsers keep a few pixels more). */
  text-box: trim-start cap alphabetic;
  margin-top: 0.1em; /* round letters (S, C, D) overshoot the cap line */
  overflow-wrap: break-word;
}



/* A small raised pill, 12x20px padding (~44px tall), sentence case, the
   same 160px on every card so the row reads as one set. */
.svc-practices__grid .svc-card__cta {
  position: static;
  align-self: center; /* text left, button centred (client) */
  justify-content: center;
  width: 190px;
  max-width: 100%;
  margin-top: auto;
  white-space: nowrap;
  padding: 14px 24px;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--svc-grey-dark);
  border-radius: 999px;
  background: var(--color-brand-grey-light);
  box-shadow:
    4px 4px 8px #d9d9d9,
    -4px -4px 8px #ffffff;
  transition: box-shadow 0.25s ease, color 0.25s ease;
}

.svc-practices__grid .svc-card__cta:hover,
.svc-practices__grid .svc-card__cta:focus-visible {
  color: var(--svc-jet);
  background: var(--color-brand-grey-light);
  box-shadow:
    inset 4px 4px 8px #d9d9d9,
    inset -4px -4px 8px #ffffff;
}

.svc-practices__grid .svc-card__cta:focus-visible {
  outline: 2px solid var(--svc-jet);
  outline-offset: 4px;
}

/* The cards on the striped green and purple pattern from the "Deeper
   Learning" section of corticallabs.com/cl1 (client; the pattern only, not
   its portrait). Only Jet Black text holds AA on it (4.5:1 at its lightest;
   Dark Grey 1.8, white 3.5, Canary 3.0), so the description turns Jet too.
   The neumorphic light shadows read as dirt on colour, so the card takes a
   soft neutral drop shadow, and the icon tile and button become plain white
   (white tile, white pill with Jet text that darkens on hover). Image is the
   reference's own (deeper-pattern-bg.jpg). Text was Jet on the bare
   pattern; now white body and light gold names (client) over a 20% wash.
   Depth as the neumorphic cards had it, lit from the top left: outside, the
   same Pure White highlight and #d9d9d9 shade on the section; inside, a
   light bevel on the top-left edge and a darker one on the bottom right, so
   the coloured face reads as a raised slab. Icon tile and button sit raised
   on it the same way; the button presses in (inset shade) on hover. */
.svc-practices__grid .svc-card {
  /* A 20% aubergine wash deepens the pattern just enough for white body
     text (4.9:1) and the light gold names (3.5:1, bold) to pass AA. */
  --card-wash: linear-gradient(rgb(30 18 44 / 0.2), rgb(30 18 44 / 0.2));

  background-color: #6f6588;
  background-image: var(--card-wash), url("../img/services-card-gradient.jpg");
  background-image: var(--card-wash), image-set(url("../img/services-card-gradient.webp") type("image/webp"), url("../img/services-card-gradient.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  box-shadow:
    15px 15px 30px #c9c4cf,
    -15px -15px 30px #ffffff,
    inset 3px 3px 6px rgb(255 255 255 / 0.35),
    inset -4px -4px 10px rgb(30 20 50 / 0.25);
}

/* Body in white (client), with the same hairline shadow. */
.svc-practices__grid .svc-card__desc {
  color: #ffffff;
  text-shadow: 0 1px 1px rgb(20 12 30 / 0.35);
}

/* Names in Canary #ffedaf, the homepage closing cards' title colour
   (client; was a light gold #ffd54f), straight on
   the card: no capsule, no halo (client), only a hairline 1px shadow to
   crisp the edges. */
.svc-practices__grid .svc-card__title {
  font-weight: 700;
  color: var(--color-canary); /* #ffedaf, as the homepage's closing cards (client) */
  text-shadow: 0 1px 1px rgb(20 12 30 / 0.35);
}


.svc-practices__grid .svc-card__cta {
  color: var(--svc-jet);
  background: #ffffff;
  box-shadow:
    5px 5px 10px rgb(30 20 50 / 0.3),
    -3px -3px 8px rgb(255 255 255 / 0.4),
    inset -2px -2px 4px rgb(30 20 50 / 0.1);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.svc-practices__grid .svc-card__cta:hover,
.svc-practices__grid .svc-card__cta:focus-visible {
  color: #ffffff;
  background: var(--svc-jet);
  box-shadow:
    inset 3px 3px 6px rgb(0 0 0 / 0.6),
    inset -2px -2px 4px rgb(255 255 255 / 0.12);
}

/* 6. Partners ------------------------------------------------------------- */

/* The grid of corticallabs.com/cl1's "Sustainable" section, measure for
   measure (client): uprights 9.5vw in from each edge, running from the
   last practice card's foot through the whole section; the frame's top
   rule 240px below the card; the heading 6vw inside the frame; rules in
   8% black with 3px dots where they cross; and CL1's travelling streak on
   the uprights and the rule under the heading (5s loop). The logos follow
   in two rows of four on Pure White. */
.svc-partners {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  /* The section starts at the card's foot: it rises over the practices
     section's bottom padding and the card's 4.3vw margin, transparent
     there. */
  --rise: calc(144px + 4.3vw);
  --side: max(16px, 2.5vw);
  /* Uprights 9.5vw in, as CL1, until the cards stop growing at 1420px;
     past that they stay 105px inside the card edges (client). */
  --grid-x: max(9.5vw, (100vw - 1420px) / 2 + 105px);
  margin-top: calc(-1 * var(--rise));
  padding: 240px var(--side) 112px; /* the frame 240px below the card */
  overflow: clip; /* the rules run off both edges */
  text-align: center;
  color: var(--svc-jet);
  background: linear-gradient(transparent var(--rise), var(--color-paper) var(--rise));
}

.svc-partners__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 0 calc(var(--grid-x) - var(--side)); /* edges on the uprights */
  padding: 48px 0;
  text-align: left;
}

.svc-partners .line {
  background-color: rgb(0 0 0 / 0.08);
}

.svc-partners .dot {
  z-index: 1;
  background-color: var(--svc-jet);
}

/* Centred on the 1px uprights, as CL1's. */
.svc-partners .dot--tl,
.svc-partners .dot--bl {
  left: -1px;
}

.svc-partners .dot--tr,
.svc-partners .dot--br {
  right: -1px;
}

.svc-partners .line--horz {
  left: -100vw;
  right: -100vw;
  width: auto;
}

.svc-partners > .line--vert {
  top: 0;
  bottom: 0;
  height: auto;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.08) 0%, rgb(0 0 0 / 0.08) 50%, rgb(0 0 0 / 0.5) 60%, #000 66%, rgb(0 0 0 / 0) 66.1%, rgb(0 0 0 / 0.08) 100%) 0 0 / 200% 200%;
  animation: line-up 5s ease infinite;
}

.svc-partners > .line--l {
  left: var(--grid-x);
}

.svc-partners > .line--r {
  right: var(--grid-x);
  background: linear-gradient(0deg, rgb(0 0 0 / 0.08) 0%, rgb(0 0 0 / 0.08) 50%, rgb(0 0 0 / 0) 65.9%, #000 66%, rgb(0 0 0 / 0.5) 70%, rgb(0 0 0 / 0.08) 100%) 0 0 / 200% 200%;
  animation-name: line-down;
}

.svc-partners__text > .line--b {
  background: linear-gradient(270deg, rgb(0 0 0 / 0.08) 0%, rgb(0 0 0 / 0.08) 50%, rgb(0 0 0 / 0) 65.9%, #000 66%, rgb(0 0 0 / 0.5) 70%, rgb(0 0 0 / 0.08) 100%) 0 0 / 200% 200%;
  animation: line-across 5s ease infinite;
}

/* CL1's keyframes: each streak runs in the first half and rests. */
@keyframes line-up {
  0% { background-position: 0 -100%; }
  50%, 100% { background-position: 0 100%; }
}

@keyframes line-down {
  0%, 50% { background-position: 0 100%; }
  100% { background-position: 0 -100%; }
}

@keyframes line-across {
  0% { background-position: 100% 0; }
  50%, 100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-partners > .line--vert,
  .svc-partners__text > .line--b {
    animation: none;
    background: rgb(0 0 0 / 0.08);
  }
}

/* Regular weight (client), a step larger to hold its own without the
   bold; two balanced lines on desktop. */
.svc-partners__title {
  padding: 0 min(6vw, 90px); /* CL1's inset inside the frame */
  font-size: clamp(30px, 4.6vw, 88px);
  font-weight: var(--weight-body);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.svc-partners__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 40px;
  width: 100%;
  max-width: min(1100px, 100vw - 2 * var(--grid-x)); /* within the uprights */
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-partners__logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.svc-partners__logos img {
  max-width: 100%;
  object-fit: contain;
}

/* 7. Reveals -------------------------------------------------------------- */

.js-reveal .svc-card:nth-child(2) {
  transition-delay: 90ms;
}

.js-reveal .svc-card:nth-child(3) {
  transition-delay: 180ms;
}

.js-reveal .svc-card:nth-child(4) {
  transition-delay: 270ms;
}

/* On the neumorphic cards the stagger is for the reveal only, so the
   pressed-in hover responds at once. */
.js-reveal .svc-practices__grid .svc-card:nth-child(2) {
  transition-delay: 90ms, 90ms, 0s;
}

.js-reveal .svc-practices__grid .svc-card:nth-child(3) {
  transition-delay: 180ms, 180ms, 0s;
}

.js-reveal .svc-practices__grid .svc-card:nth-child(4) {
  transition-delay: 270ms, 270ms, 0s;
}

.js-reveal .svc-pillar:nth-child(2) {
  transition-delay: 90ms;
}

.js-reveal .svc-pillar:nth-child(3) {
  transition-delay: 180ms;
}

/* Breakpoints -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .svc-practices {
    gap: 56px;
  }

  .svc-practices__grid {
    max-width: none;
  }

  .svc-practices__intro {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .svc-practices__intro p {
    font-size: 18px;
  }
}

@media (max-width: 900px) {
  /* One wide card per row on tablets rather than two narrow ones, where the
     descriptions would run to eight or nine lines. */
  .svc-practices__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    max-width: none;
  }

  .svc-practices__intro {
    max-width: none;
  }

  .svc-pillars__notes {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .svc-partners {
    gap: 48px;
  }

  .svc-partners__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .svc {
    --svc-x: 24px;
  }

  .svc-hero {
    min-height: 50vh;
    padding-top: 120px;
    padding-bottom: 40px;
  }

  /* Phones: a tighter list. */

  .svc-pillars__list {
    padding: 56px var(--svc-x) 72px;
  }

  .svc-promises {
    margin-top: 40px;
  }

  .svc-pillar {
    gap: 16px;
    padding-bottom: 40px;
  }

  .svc-pillars__items {
    gap: 40px;
  }

  .svc-practices {
    padding: 160px max(16px, 2.5vw) 96px; /* a little less than CL1's 240 (client) */
  }

  .svc-practices__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    max-width: none;
  }

  .svc-practices__intro {
    max-width: none;
  }

  .svc-practices__grid .svc-card {
    min-height: 0;
    padding: 28px;
  }

  .svc-practices__grid .svc-card__body {
    padding-bottom: 24px;
  }


  .svc-card__desc {
    font-size: 17px;
  }

  .svc-practices__grid .svc-card__title {
    font-size: 28px; /* phones: long names on two lines at most */
  }




  .svc-partners {
    --rise: calc(96px + 4.3vw);
    --side: 16px;
    padding-bottom: 88px;
  }

  .svc-partners__logos {
    gap: 32px 24px;
    padding: 0 6vw; /* the heading's inset */
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card__cta {
    transition: none;
  }
}

/* Services hero steps, as on the reference: 24/32px lines under 800px. */
@media (max-width: 800px) {
  .svc-hero__headline,
  .svc-hero__text {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (max-width: 700px) {
  .svc-hero--main {
    padding-top: 140px;
    padding-bottom: 72px;
  }

  .svc-hero__bottom {
    margin-top: 56px;
  }
}

/* Phones: the hero fills the first screen with its content centred, so the
   next section doesn't show under the button. */
@media (max-width: 600px) {
  .svc-hero--main {
    justify-content: center;
    min-height: 100svh;
    padding: 110px var(--svc-x) 64px;
  }

  .svc-hero__body {
    gap: 20px;
  }

  .svc-hero__bottom {
    margin-top: 40px;
  }

  .svc-hero__bottom .button {
    min-width: 0;
  }
}

/* Very narrow phones: tighter card padding so the 160px button still fits
   on one line. */
@media (max-width: 360px) {
  .svc-practices__grid .svc-card {
    padding: 20px;
  }

  .svc-practices__grid .svc-card__cta {
    padding-inline: 12px;
  }
}

/* Practice cards as separate feature cards (client), after the "Deeper
   Learning" block of corticallabs.com/cl1 (measured): one per row, up to
   1420px wide, 20px corners, the striped pattern full strength behind a
   very large Canary name (weight 500, the size of the section heading
   above) with the white description 160px below it (60 on phones), then
   the button. Padding 13vw top and bottom, 10% of the card at the sides.
   Flat, as the reference. Desktop text is all large (28px+), so the
   pattern needs no wash there (white 3.5:1, Canary 3.0:1, large-text AA);
   on phones, where the description is 18px, a 20% wash keeps it AA.
   Later in the file and more specific than the card rules above, so it
   wins over them and their breakpoints. */
.svc-practices .svc-practices__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 40px;
  max-width: 1420px;
}

.svc-practices .svc-practices__grid .svc-card {
  min-height: 0;
  padding: 13vw 10%;
  border-radius: 20px;
  background-image: url("../img/services-card-gradient.jpg");
  background-image: image-set(url("../img/services-card-gradient.webp") type("image/webp"), url("../img/services-card-gradient.jpg") type("image/jpeg"));
  background-size: cover;
  box-shadow: none;
}

/* Still on hover (client): no lift, no shadow. */
.svc-practices .svc-practices__grid .svc-card:hover {
  box-shadow: none;
  transform: none;
}

.svc-practices .svc-practices__grid .svc-card__body {
  gap: 160px;
  padding: 0;
}

.svc-practices .svc-practices__grid .svc-card__title {
  margin-top: 0;
  font-size: min(11.6vw, 170px);
  font-weight: 500;
  line-height: 1.09;
  text-box: none;
  text-wrap: balance;
  text-shadow: none;
}

.svc-practices .svc-practices__grid .svc-card__desc {
  max-width: 900px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  text-shadow: none;
}

.svc-practices .svc-practices__grid .svc-card__cta {
  align-self: flex-start; /* on the text's left edge, as the copy above */
  margin-top: 60px;
}

@media (max-width: 700px) {
  .svc-practices .svc-practices__grid {
    gap: 20px;
  }

  .svc-practices .svc-practices__grid .svc-card {
    background-image:
      linear-gradient(rgb(30 18 44 / 0.2), rgb(30 18 44 / 0.2)),
      url("../img/services-card-gradient.jpg");
    background-image:
      linear-gradient(rgb(30 18 44 / 0.2), rgb(30 18 44 / 0.2)),
      image-set(url("../img/services-card-gradient.webp") type("image/webp"), url("../img/services-card-gradient.jpg") type("image/jpeg"));
  }

  .svc-practices .svc-practices__grid .svc-card__body {
    gap: 60px;
  }

  .svc-practices .svc-practices__grid .svc-card__desc {
    font-size: 18px;
  }

  .svc-practices .svc-practices__grid .svc-card__cta {
    margin-top: 40px;
  }
}

/* The four practice cards' objects (client): circuit board, compass, gold
   fibre-optic bundle, backlit portrait. All four share one box so they
   cover about the same space (client, 2026-10-06: the red box on the Data
   & AI card), sized up to the portrait (client, 2026-10-07): up to 925px
   wide at 1.06:1, from about 42% of the way across the card, hanging up to 92px past its right edge (never past the
   screen edge, so the compass is not cut off) and 4.3vw below its foot.
   Each image is fitted inside and held to the box's bottom centre, so a
   wide object fills its width and a tall one its height; the overhang
   gives the 3D pop-out. Behind the text, decorative (empty alt). The card
   keeps room below so the overhang clears the next card. */
.svc-practices .svc-practices__grid .svc-card:has(.svc-card__figure) {
  margin-bottom: 4.3vw;
}

.svc-card__figure {
  position: absolute;
  right: calc(-1 * min(92px, max(16px, 2.5vw, (100vw - 1420px) / 2)));
  bottom: -4.3vw;
  z-index: 0;
  width: min(65%, 925px);
  height: auto; /* the img's height attribute would override the ratio */
  aspect-ratio: 1.06;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
}

.svc-practices .svc-practices__grid .svc-card:has(.svc-card__figure) .svc-card__body,
.svc-practices .svc-practices__grid .svc-card:has(.svc-card__figure) .svc-card__cta {
  position: relative;
  z-index: 1;
}

/* Phones: as CL1's mobile card, the object runs large (about 62% of the
   card) and still pops out past its bottom-right corner, behind the text
   and button (client). */
@media (max-width: 700px) {
  .svc-card__figure {
    width: 62%;
  }
}

/* The circuit board is wide and flat, so fitted to the box it looks
   smaller than the other three; it runs wider than the box (client),
   past the box's left edge, grown with the others. */
.svc-card__figure--wide {
  width: min(80%, 1135px);
  aspect-ratio: 972 / 578;
}

@media (max-width: 700px) {
  .svc-card__figure--wide {
    width: 78%;
  }
}

/* Desktop (client, 2026-10-07): the circuit board and the compass a
   little smaller than the shared box and nudged right. The board already
   reaches the screen edge at most widths, so it only moves where the
   gutter has room (wide screens); its smaller size shifts its weight
   right everywhere. The compass sits 1.5vw further out, which the round
   face's inset in its box absorbs, so it is never cut off. */
@media (min-width: 701px) {
  .svc-card__figure--wide {
    right: calc(-1 * min(92px + 1.5vw, max(16px, 2.5vw, (100vw - 1420px) / 2)));
    width: min(72%, 1020px);
  }

  .svc-card__figure--round {
    right: calc(-1 * min(92px, max(16px, 2.5vw, (100vw - 1420px) / 2)) - 1.5vw);
    width: min(58%, 825px);
  }
}

/* The fibre bundle is tall and narrow, so it leaves room either side in
   the box: held towards the box's right side and a little higher than the
   others (3vw drop) (client). */
.svc-card__figure--tall {
  bottom: -3vw;
  object-position: 92% 100%;
}

/* The Data & AI portrait sits in the shared box like the other three
   (client, 2026-10-06). Its shoulders end in a crisp elliptical cut, as
   CL1's "Deeper Learning" portrait, instead of the photo's straight one.
   On desktop it runs larger than the box (about 10% up again, client
   2026-10-07), so the head rises above the title's baseline, and 6.5vw
   further right (the section clips the shoulder at the screen edge)
   (client). */
.svc-card__figure--portrait {
  -webkit-mask-image: radial-gradient(ellipse 105% 86% at 50% 8%, #000 99.5%, transparent 100%);
  mask-image: radial-gradient(ellipse 105% 86% at 50% 8%, #000 99.5%, transparent 100%);
}

@media (min-width: 701px) {
  .svc-card__figure--portrait {
    right: calc(-1 * min(92px, max(16px, 2.5vw, (100vw - 1420px) / 2)) - 6.5vw);
    width: min(65%, 925px);
  }
}

/* 240px from the subline to the first card, as CL1 from the "Animal-free
   testing" paragraph to the "Deeper Learning" card (measured, every width).
   Last in the file so it wins over the section's breakpoint gaps. */
.svc-practices {
  row-gap: 240px;
}

/* Tablets and phones: 160px above the heading and to the first card
   (client: a little less space than desktop). */
@media (max-width: 900px) {
  .svc-practices {
    row-gap: 160px;
  }
}