/* ==========================================================================
   What We Do + Service Card, How We Do It + Difference Card
   Webflow code component styles (each renders inside its own Shadow DOM;
   all load this file). Figma: "5 + 6 – What We Do + How We Do It".

   Same conventions as faq.css: the Figma frame is the source of truth, a
   Webflow variable is used only where its value matches Figma, every
   variable has the Figma value as fallback, ALL values live in the token
   block below.

   Headings are slots (light DOM); their type is set here as --slot-*
   variables and applied by shared/slot-text.ts. The cards are separate
   components: they size themselves from their own width (container
   queries), since the section's tokens don't reach into them.
   ========================================================================== */

:host {
  display: block;

  /* ===== Webflow variables (value matches Figma) ===== */

  --sv-font-primary:   var(--fonts--primary, "Bitter");
  --sv-font-secondary: var(--fonts--secondary, "Inter");

  --sv-navy:       var(--colors--equity-blue, #132c3a);   /* Figma Brand-Navy / Text-Primary */
  --sv-slate:      var(--colors--market-slate, #3c6e82);  /* Figma Brand-Teal / Text-Secondary */
  --sv-light-blue: var(--colors--trust-blue, #7fcada);    /* Figma Brand-Light-Blue      */
  --sv-tint-blue:  var(--colors--soft-trust, #d4f2fa);    /* Figma Brand-Light-Blue-Tint */
  --sv-off-white:  var(--colors--clear-ledger, #f5f7fb);  /* Figma Neutral-Off-white / Text-Inverse */
  --sv-white:      var(--colors--white, #ffffff);

  --sv-pad-x:     var(--spacing--horizontal-padding, 5rem); /* 80px */
  --sv-pad-y:     var(--spacing--vertical-padding, 5rem);   /* 80px */
  --sv-max-width: var(--spacing--max-width, 1440px);
  --sv-radius-lg: var(--spacing--card-roundness, 2.5rem);   /* 40px */

  /* Heading (What We Do): family + weight match H2; mobile uses H2 "M -" */
  --sv-h-family: var(--h2--font-family, var(--sv-font-primary));
  --sv-h-weight: var(--h2--font-weight, 400);
  --sv-h-size-m: var(--h2--m-font-size, 2.4rem);
  --sv-h-lh-m:   var(--h2--m-line-height, 3rem);

  /* ===== Fixed Figma values (no matching variable) ===== */

  --sv-navy-deep: #0a2635;        /* Brand-Navy-Deep (no site variable, as in cta-form.css) */

  --sv-pad-x-tablet: 2rem;        /* 32px sides at 991px and below (as the other modules) */
  --sv-block-gap:    1.5rem;      /* 24px header → service cards */
  --sv-header-gap:   1rem;        /* 16px eyebrow → heading → intro */
  --sv-card-gap:     1rem;        /* 16px between cards */
  --sv-cta-gap:      3.5rem;      /* 56px panel → button */

  --sv-h-size:      2.8125rem;    /* 45px / 400 / 122% (H2 is 44.8px) */
  --sv-h-lh:        122%;
  --sv-intro-size:  1.125rem;     /* 18px / 300 / 150% */

  /* Service Card */
  --sv-svc-pad:       1.25rem 1.25rem 1.75rem; /* 20 20 28 */
  --sv-svc-gap:       1rem;       /* 16px illustration → content */
  --sv-illo-h:        12.5rem;    /* 200px */
  --sv-illo-pad:      1.25rem 1rem; /* 20 16 */
  --sv-illo-radius:   1.25rem;    /* 20px */
  --sv-illo-max-h:    10.625rem;  /* 170px artwork */
  --sv-svc-content-pad: 0 0.5rem; /* 0 8 */
  --sv-svc-content-gap: 0.75rem;  /* 12px */
  --sv-title-size:    1.5rem;     /* 24px / 700 / 121% */
  --sv-title-lh:      121%;
  --sv-body-size:     1rem;       /* 16px / 300 / 150% */
  --sv-list-size:     0.875rem;   /* 14px / 400 / 150% */
  --sv-list-gap:      0.625rem;   /* 10px check → text */

  /* How We Do It panel */
  --sv-panel-pad:     2.5rem;     /* 40px */
  --sv-panel-gap:     1.75rem;    /* 28px header → cards */
  --sv-panel-h-size:  2rem;       /* 32px / 400 / 125% */
  --sv-panel-h-lh:    125%;

  /* Difference Card */
  --sv-dif-pad:       1.75rem;    /* 28px */
  --sv-dif-gap:       0.875rem;   /* 14px icon → content */
  --sv-dif-radius:    1.75rem;    /* 28px */
  --sv-icon-tile:     3.5rem;     /* 56px */
  --sv-icon:          1.5rem;     /* 24px */

  /* Scroll-in animation (not in Figma) */
  --sv-reveal-shift: 1.5rem;
  --sv-reveal-time:  0.7s;
  --sv-reveal-ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --sv-step:         90ms;        /* per card */

  /* Derived */
  --sv-border: color-mix(in srgb, var(--sv-slate) 10%, transparent); /* = rgba(60,110,130,.10) */
}

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

/* ==========================================================================
   Sections (shared frame)
   ========================================================================== */

/* Container query anchored inside the Shadow DOM (see faq.css for why) */
.sv-section {
  container: sv / inline-size;
  padding-inline: var(--sv-pad-x);
}

.sv-bg--light-blue  { background: var(--sv-tint-blue); }
.sv-bg--off-white   { background: var(--sv-off-white); }
.sv-bg--white       { background: var(--sv-white); }
.sv-bg--transparent { background: transparent; }

/* Webflow's tablet breakpoint (viewport, so it lines up with the rest of the site) */
@media (max-width: 991px) {
  .sv-section {
    padding-inline: var(--sv-pad-x-tablet);
  }
}

.sv-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--sv-max-width);
  margin-inline: auto;
  padding-block: var(--sv-pad-y);
}

/* "Top spacing: None": sits right under the section above (e.g. How We Do It
   under What We Do, as in Figma: the section above's 80px is the gap) */
.sv-section--flush-top .sv-inner {
  padding-top: 0;
}

.sv-header {
  display: flex;
  flex-direction: column;
  gap: var(--sv-header-gap);
}

.sv-eyebrow {
  margin: 0;
  color: var(--sv-slate);
  font-family: var(--sv-font-secondary), system-ui, sans-serif;
  font-size: 0.875rem;            /* 14px / 700 / 164%, uppercase */
  font-weight: 700;
  line-height: 164%;
  text-transform: uppercase;
}

.sv-intro {
  margin: 0;
  color: var(--sv-navy);
  font-family: var(--sv-font-secondary), system-ui, sans-serif;
  font-size: var(--sv-intro-size);
  font-weight: 300;
  line-height: 150%;
  white-space: pre-line;
}

/* Card grids: Webflow wraps slot content in its own element; display:
   contents lets the cards inside it become the grid items */
.sv-grid ::slotted(*) {
  display: contents;
}

/* ==========================================================================
   What We Do
   ========================================================================== */

.sv-what .sv-inner {
  gap: var(--sv-block-gap);
}

.sv-what .sv-heading {
  --slot-family: var(--sv-h-family), Georgia, serif;
  --slot-size:   var(--sv-h-size);
  --slot-weight: var(--sv-h-weight);
  --slot-lh:     var(--sv-h-lh);
  --slot-color:  var(--sv-navy);
}

.sv-services {
  display: grid;
  grid-template-columns: repeat(var(--sv-cols, 4), minmax(0, 1fr));
  gap: var(--sv-card-gap);
}

/* ==========================================================================
   How We Do It
   ========================================================================== */

.sv-how .sv-inner {
  align-items: center;
  gap: var(--sv-cta-gap);
}

.sv-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sv-panel-gap);
  align-self: stretch;
  padding: var(--sv-panel-pad);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-navy);
}

.sv-panel .sv-eyebrow {
  color: var(--sv-light-blue);
}

.sv-panel .sv-heading {
  --slot-family: var(--sv-font-primary), Georgia, serif;
  --slot-size:   var(--sv-panel-h-size);
  --slot-weight: 400;
  --slot-lh:     var(--sv-panel-h-lh);
  --slot-color:  var(--sv-off-white);
}

.sv-differences {
  display: grid;
  grid-template-columns: repeat(var(--sv-cols, 3), minmax(0, 1fr));
  gap: var(--sv-card-gap);
}

/* Buttons slot: whatever is dropped in sits in a centred row */
.sv-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.sv-actions ::slotted(*) {
  display: contents;
}

/* ==========================================================================
   Service Card
   ========================================================================== */

.sv-svc {
  container: svc / inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sv-svc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sv-svc-gap);
  flex: 1 1 auto;
  padding: var(--sv-svc-pad);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-off-white);
}

.sv-illo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--sv-illo-h);
  min-height: 9.375rem;           /* 150px */
  padding: var(--sv-illo-pad);
  overflow: hidden;
  border-radius: var(--sv-illo-radius);
  background: var(--sv-tint-blue);
}

.sv-illo img {
  display: block;
  max-width: 100%;
  max-height: var(--sv-illo-max-h); /* 170px: as in Figma, a little taller than the padded area */
  object-fit: contain;
}

.sv-svc-content {
  display: flex;
  flex-direction: column;
  gap: var(--sv-svc-content-gap);
  padding: var(--sv-svc-content-pad);
}

.sv-title {
  margin: 0;
  color: var(--sv-navy);
  font-family: var(--sv-font-secondary), system-ui, sans-serif;
  font-size: var(--sv-title-size);
  font-weight: 700;
  line-height: var(--sv-title-lh);
}

.sv-body {
  margin: 0;
  color: var(--sv-navy);
  font-family: var(--sv-font-secondary), system-ui, sans-serif;
  font-size: var(--sv-body-size);
  font-weight: 300;
  line-height: 150%;
  white-space: pre-line;
}

/* Checklist: Rich Text from the slot, styled by checklist-styles.ts (page
   level, since slot content is outside this Shadow DOM). The --sv-* tokens
   inherit into it. */
.sv-checklist {
  min-width: 0;
}

/* ==========================================================================
   Difference Card
   ========================================================================== */

.sv-dif {
  container: dif / inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Featured: spans the whole row of the grid */
.sv-dif--featured {
  grid-column: 1 / -1;
}

.sv-dif-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sv-dif-gap);
  flex: 1 1 auto;
  padding: var(--sv-dif-pad);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-dif-radius);
  background: var(--sv-white);
}

.sv-dif-icon {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: var(--sv-icon-tile);
  height: var(--sv-icon-tile);
  border-radius: 999px;
  background: var(--sv-navy);
  color: var(--sv-light-blue);
}

/* Built-in icons keep their natural Figma size (set on the svg); uploaded
   custom icons fit a 24px box */
.sv-dif-icon svg {
  display: block;
  flex: none;
}

.sv-custom-icon {
  display: block;
  width: var(--sv-icon);
  height: var(--sv-icon);
  object-fit: contain;
}

/* "Light blue": the uploaded icon's shape filled with the icon colour (image
   used as a mask; Webflow's asset CDN sends the CORS header this needs) */
.sv-custom-icon--tint {
  background: currentColor;
  -webkit-mask: var(--sv-icon-url) center / contain no-repeat;
  mask: var(--sv-icon-url) center / contain no-repeat;
}

.sv-dif-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;                      /* 16px */
  align-self: stretch;
}

/* Featured (Figma "Context"): light-blue card, icon beside the text */
.sv-dif--featured .sv-dif-card {
  flex-direction: row;
  background: var(--sv-tint-blue);
}

.sv-dif--featured .sv-dif-icon {
  background: var(--sv-navy-deep);
}

.sv-dif--featured .sv-dif-content {
  gap: 0.5rem;                    /* 8px */
  flex: 1 1 0;
  min-width: 0;
}

/* ==========================================================================
   Scroll-in animation (classes from shared/reveal.ts; none set when
   "Animate on scroll" is off or the visitor prefers reduced motion)
   ========================================================================== */

.sv-section.is-hidden .sv-anim {
  opacity: 0;
  transform: translateY(var(--sv-reveal-shift));
}

.sv-section.is-shown .sv-anim {
  --_d: calc(var(--i, 0) * 100ms);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sv-reveal-time) ease var(--_d),
    transform var(--sv-reveal-time) var(--sv-reveal-ease) var(--_d);
}

/* Cards rise in one after another (--order = place in the slot) */
.sv-card-anim.is-hidden {
  opacity: 0;
  transform: translateY(var(--sv-reveal-shift));
}

.sv-card-anim.is-shown {
  --_d: calc(var(--sv-cards-delay, 200ms) + var(--order, 0) * var(--sv-step));
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sv-reveal-time) ease var(--_d),
    transform var(--sv-reveal-time) var(--sv-reveal-ease) var(--_d);
}

/* Service illustration settles from a slight zoom (the checklist ticks in
   via checklist-styles.ts, after the card: --sv-list-delay) */
.sv-svc.is-hidden .sv-illo img {
  transform: scale(0.9);
}

.sv-svc.is-shown .sv-illo img {
  transform: none;
  transition: transform 1s var(--sv-reveal-ease) var(--_d);
}

.sv-svc.is-shown .sv-checklist {
  --sv-list-delay: calc(var(--_d) + 250ms);
}

/* How We Do It: the navy panel rises in, then its cards */
.sv-how.is-hidden .sv-panel {
  opacity: 0;
  transform: translateY(2rem);
}

.sv-how.is-shown .sv-panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s ease,
    transform 0.9s var(--sv-reveal-ease);
}

.sv-how .sv-differences {
  --sv-cards-delay: 350ms;
}

@media (prefers-reduced-motion: reduce) {
  .sv-anim,
  .sv-card-anim,
  .sv-illo img,
  .sv-panel {
    transition: none !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Sections (container widths exclude the section's side padding) */
@container sv (max-width: 1100px) {
  .sv-services {
    --sv-cols: 2;
  }
}

@container sv (max-width: 900px) {
  .sv-differences {
    --sv-cols: 1;
  }
}

@container sv (max-width: 767px) {
  .sv-inner {
    --sv-h-size:       var(--sv-h-size-m);
    --sv-h-lh:         var(--sv-h-lh-m);
    --sv-panel-h-size: 1.5rem;    /* 24px */
    --sv-panel-pad:    1.5rem;
    --sv-intro-size:   1rem;
    --sv-cta-gap:      2.5rem;
    padding-block: 4rem;
  }

  .sv-section--flush-top .sv-inner {
    padding-top: 0;
  }

  .sv-panel {
    border-radius: 1.75rem;
  }
}

@container sv (max-width: 600px) {
  .sv-services {
    --sv-cols: 1;
  }
}

@container sv (max-width: 479px) {
  .sv-inner {
    --sv-h-size: 2rem;            /* 32px */
    --sv-h-lh:   125%;
    --sv-panel-pad: 1.25rem;
  }
}

/* Cards, by their own width */
@container svc (max-width: 260px) {
  .sv-svc-card {
    --sv-title-size: 1.25rem;     /* 20px */
  }
}

@container dif (max-width: 300px) {
  .sv-dif-card {
    --sv-dif-pad:    1.5rem;
    --sv-title-size: 1.25rem;
  }
}

/* Featured card: icon above the text when the card is narrow */
@container dif (max-width: 480px) {
  .sv-dif--featured .sv-dif-card {
    flex-direction: column;
  }
}