/*
 * SEO Services in India.
 *
 * This page does not reuse the lp-/sr- component set the way its five sibling
 * landing pages do. It has its own design language — an editorial dossier:
 * a warm ivory ground, deep ink panels, one saffron-coral accent, Playfair
 * Display italic for the word each heading turns on, outlined Poppins ordinals
 * on cards and rows, hairline rules instead of card borders, and asymmetric
 * splits rather than centred stacks.
 *
 * Everything is scoped under .ssi-page. landing.css and seo-reseller.css still
 * load (the FAQ and the slider come from the shared set), so several rules
 * here exist purely to unpick a shared default — each of those says so.
 *
 * Motion contract: [data-reveal] gets .is-in from seo-services-india.js on
 * first intersection, and each child staggers off its own --i. Hero elements
 * carry .ssi-rise and animate on load instead, since they are already in view.
 * The whole system collapses to "everything visible, nothing moving" under
 * prefers-reduced-motion, at the foot of this file.
 *
 * Artwork note: assets/images/seo-services-india/ is a first pass — crops from
 * the mock, two photographs borrowed from the SEO Reseller set (ind-1, ind-2)
 * and two generated placeholders (case-1, case-2). Filenames are positional,
 * so owner artwork drops straight in.
 */
.ssi-page {
  --ssi-ink: #14161d;
  --ssi-ink-soft: #2a2f3d;
  --ssi-ivory: #fbf7f2;
  --ssi-ivory-2: #f5efe7;
  --ssi-sand: #ece3d6;
  --ssi-coral: #f4623a;
  --ssi-coral-deep: #d94a24;
  --ssi-coral-wash: rgba(244, 98, 58, 0.09);
  --ssi-saffron: #e8a33d;
  --ssi-muted: #6b6a68;
  --ssi-hair: rgba(20, 22, 29, 0.13);
  --ssi-hair-light: rgba(255, 255, 255, 0.16);

  --ssi-display: "Playfair Display", Georgia, serif;
  --ssi-num: "Poppins", var(--heading-font);

  --ssi-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ssi-sec-y: clamp(64px, 8vw, 132px);

  background: var(--ssi-ivory);
  color: var(--ssi-ink);
  overflow-x: clip; /* the tilted frames and glows overhang; never scroll for them */
}

.ssi-sec {
  position: relative;
  padding-block: var(--ssi-sec-y);
}

/* ---------- Shared type ---------- */
/* Playfair only ever sets the italic phrase a heading turns on. The rest of
   the heading stays the theme's sans, so the page still reads as this site. */
.ssi-page .ssi-h2 {
  font-family: var(--heading-font);
  font-size: clamp(30px, 3.9vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}

.ssi-page .ssi-h2 .text-accent,
.ssi-page .ssi-hero-title .text-accent {
  display: inline-block;
  font-family: var(--ssi-display);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ssi-coral);
}

.ssi-h2-center {
  text-align: center;
}

.ssi-h2-light {
  color: #fff;
}

.ssi-lead-left,
.ssi-head-note {
  margin: 20px 0 0;
  max-width: 52ch;
  color: var(--ssi-muted);
  font-size: 16px;
  line-height: 1.78;
}

.ssi-lead-center {
  margin: 20px auto 0;
  max-width: 62ch;
  text-align: center;
  color: var(--ssi-muted);
  line-height: 1.78;
}

/* Heading left, its qualifying note dropped to the right and baseline-aligned
   low, so the pair reads as a spread rather than a stacked centre column. */
.ssi-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(34px, 4.4vw, 64px);
}

.ssi-head-center {
  margin-bottom: clamp(34px, 4.4vw, 64px);
}

/* The outlined ordinal that sits behind or beside almost every card. */
.ssi-ord {
  font-family: var(--ssi-num);
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(20, 22, 29, 0.22);
  transition:
    -webkit-text-stroke-color 0.4s var(--ssi-ease),
    color 0.4s var(--ssi-ease);
}

/* ---------- Buttons ---------- */
/* The theme's .btn-strategy pill, squared off and inked for this page.
   Its hover is a GLIDE, not a colour swap: style.css swaps the label's left
   and right padding while the absolutely-positioned disc travels from
   right: 10px to right: calc(100% - 55px), so the two halves pass each other.
   Both of those are driven by `transition: all 0.4s ease` on the base rule.

   The first pass overrode that with a short property list that named neither
   `padding` nor `right`, so the label and the disc jumped to their hover
   positions with no interpolation at all — the button looked broken. Every
   property the base animates is named here, and the disc is left to its own
   glide rather than being given a second, contradictory nudge. */
.ssi-page .btn-strategy.ssi-btn {
  background: var(--ssi-ink);
  border-color: var(--ssi-ink);
  border-radius: 8px;
  padding-block: 15px;
  letter-spacing: 0.06em;
  transition:
    padding 0.42s var(--ssi-ease),
    background-color 0.42s var(--ssi-ease),
    border-color 0.42s var(--ssi-ease),
    box-shadow 0.42s var(--ssi-ease),
    transform 0.42s var(--ssi-ease);
}

.ssi-page .btn-strategy.ssi-btn:hover {
  background: var(--ssi-coral);
  border-color: var(--ssi-coral);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(244, 98, 58, 0.3);
}

.ssi-page .btn-strategy.ssi-btn .icon-circle {
  background: var(--ssi-coral);
  transition:
    right 0.42s var(--ssi-ease),
    background-color 0.42s var(--ssi-ease);
}

.ssi-page .btn-strategy.ssi-btn .icon-circle svg path {
  transition: fill 0.42s var(--ssi-ease);
}

.ssi-page .btn-strategy.ssi-btn:hover .icon-circle {
  background: #fff;
}

.ssi-page .btn-strategy.ssi-btn:hover .icon-circle svg path {
  fill: var(--ssi-coral);
}

.ssi-page .btn-strategy.ssi-btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--ssi-ink);
}

.ssi-page .btn-strategy.ssi-btn-light .btn-text {
  color: var(--ssi-ink);
}

.ssi-page .btn-strategy.ssi-btn-light:hover {
  background: var(--ssi-coral);
  border-color: var(--ssi-coral);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.ssi-page .btn-strategy.ssi-btn-light:hover .btn-text {
  color: #fff;
}

/* ---------- Plated icons ---------- */
/* Every icon on this page sits on a plate — a disc, a squircle or a ring. The
   owner's PNGs are drawn out to the edge of their own canvas, so at 100% they
   touch the plate's rim; inline glyphs have their own optical margin and do
   not. This caps ANY plated icon, file or glyph, at 56% of its plate so the
   two sets sit on the same optical size with room to breathe. */
.ssi-bento-icon > *,
.ssi-slab-icon > *,
.ssi-step-icon > *,
.ssi-why-icon > *,
.ssi-promise-icon > *,
.ssi-factor-icon > * {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

/* The mark carries no plate, so the artwork simply fills it. */
.ssi-index-mark > * {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Texture ---------- */
/* A single tiled SVG of feTurbulence: the grain that keeps the ink panels and
   the hero from reading as flat fills. Always decorative, never interactive. */
.ssi-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---------- Motion primitives ---------- */
/* The reveal is an ANIMATION, not a transition, and that is load-bearing.
   As a transition it had to declare `transition: opacity, transform` on every
   revealed child — which is the same element that carries the component's own
   hover transition, so the reveal rule (higher specificity) replaced it and
   every hover on the page snapped instead of easing. Service rows, industry
   cards, slabs and promise rows were all hit.

   `animation-fill-mode: backwards` is the other half: it holds the `from`
   frame through the stagger delay, and applies NOTHING once the animation is
   done, so `transform` falls back to the element's own cascade value and a
   hover transform still works. `forwards` would pin transform: none forever
   and break the same hovers a different way. */
/* .ssi-js is added by seo-services-india.js at parse time. Hiding is gated on
   it so that a script error, a blocked file or a browser with JS off renders
   the page in full rather than blank below the hero — the reveal is decoration
   and must never be load-bearing for content. */
.ssi-page.ssi-js [data-reveal] > *,
.ssi-page.ssi-js [data-reveal] > ol > li,
.ssi-page.ssi-js [data-reveal] > ul > li {
  opacity: 0;
}

.ssi-page [data-reveal].is-in > *,
.ssi-page [data-reveal].is-in > ol > li,
.ssi-page [data-reveal].is-in > ul > li {
  opacity: 1;
  animation: ssi-reveal 0.75s var(--ssi-ease) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes ssi-reveal {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

/* Same contract for the hero's load stagger. */
.ssi-page.ssi-js .ssi-rise {
  opacity: 0;
  transform: translateY(30px);
  animation: ssi-rise 0.9s var(--ssi-ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}

@keyframes ssi-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Hero ---------- */
/* --ssi-hero-bg is set inline by the template from ssi_hero_bg, so swapping
   the plate is a content change, not a CSS one. The gradient underneath is the
   fallback for a page with no plate set. */
/* The top offset is the theme's header-clearing value — the same one its
   sticky columns use — because the fixed header pill sits over the band and
   the headline is now the first thing under it. */
.ssi-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(96px, 9vw, 124px) 0;
  background-color: var(--ssi-ivory);
  background-image:
    var(--ssi-hero-bg, none),
    linear-gradient(180deg, var(--ssi-ivory) 0%, var(--ssi-ivory-2) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.ssi-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-bottom: clamp(40px, 5vw, 80px);
}

.ssi-hero-title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(46px, 6.6vw, 104px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.042em;
}

.ssi-hero-title .text-accent {
  margin-top: 4px;
  font-size: 0.92em;
}

.ssi-hero-sub {
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--ssi-coral);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ssi-ink);
}

.ssi-hero-text {
  margin: 22px 0 0;
  max-width: 54ch;
  color: var(--ssi-muted);
  font-size: 16px;
  line-height: 1.8;
}

.ssi-hero-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
  margin: 30px 0 34px;
  padding: 0;
  list-style: none;
}

.ssi-hero-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ssi-ink-soft);
}

.ssi-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ssi-coral);
  color: #fff;
}

.ssi-tick .lp-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

/* The frame is tilted and the photograph inside it counter-tilts on hover, so
   the whole thing settles square when you look at it. */
/* The art is a transparent cut-out, so the shadow has to follow its alpha —
   a box-shadow would draw a rectangle around empty pixels. */
.ssi-hero-frame {
  position: relative;
  margin: 0;
  transition: transform 0.9s var(--ssi-ease);
  filter: drop-shadow(0 26px 46px rgba(20, 22, 29, 0.16));
}

.ssi-hero-frame:hover {
  transform: translateY(-6px);
}

.ssi-hero-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Keyword ticker ---------- */
.ssi-ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-block: 1px solid var(--ssi-hair);
  background: rgba(255, 255, 255, 0.5);
  padding-block: 15px;
  /* the run fades out at both ends rather than being cut by the viewport */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

/* The items are printed twice, so translating the track exactly -50% lands on
   an identical frame and the loop has no seam. */
.ssi-ticker-track {
  display: flex;
  width: max-content;
  animation: ssi-marquee 46s linear infinite;
}

.ssi-ticker:hover .ssi-ticker-track {
  animation-play-state: paused;
}

@keyframes ssi-marquee {
  to {
    transform: translateX(-50%);
  }
}

.ssi-ticker-item {
  display: flex;
  align-items: center;
  padding-inline: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ssi-muted);
  white-space: nowrap;
}

.ssi-ticker-item::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 26px;
  border-radius: 50%;
  background: var(--ssi-coral);
}

/* ---------- Benefits bento ---------- */
.ssi-benefits {
  background: var(--ssi-ivory);
}

.ssi-bento {
  display: grid;
  grid-template-columns: 1.24fr 1fr 1fr;
  gap: 1px;
  background: var(--ssi-hair); /* the gap IS the hairline grid */
  border: 1px solid var(--ssi-hair);
  border-radius: 20px;
  overflow: hidden;
}

.ssi-bento-intro,
.ssi-bento-card {
  background: var(--ssi-ivory);
  padding: clamp(26px, 2.6vw, 42px);
}

.ssi-bento-intro {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ssi-ivory-2);
}

/* Seven cells on a three-wide grid leaves one over. The intro takes two rows
   at the head and the last benefit takes two columns at the foot, so the block
   closes square instead of ending on a gap. */
.ssi-bento-card:last-child {
  grid-column: span 2;
}

.ssi-bento-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.5s var(--ssi-ease);
}

/* The coral wipe: a block that grows from the bottom edge on hover, under the
   text rather than over it. */
.ssi-bento-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, #fff6f1 0%, #ffe8de 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ssi-ease);
}

.ssi-bento-card:hover::before,
.ssi-bento-card:focus-within::before {
  transform: scaleY(1);
}

.ssi-bento-card:hover .ssi-ord,
.ssi-bento-card:focus-within .ssi-ord {
  -webkit-text-stroke-color: var(--ssi-coral);
}

.ssi-bento-card .ssi-ord {
  position: absolute;
  top: 20px;
  right: 22px;
}

.ssi-bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border: 1px solid var(--ssi-hair);
  border-radius: 12px;
  background: #fff;
  color: var(--ssi-coral);
  transition:
    transform 0.55s var(--ssi-ease),
    border-color 0.55s var(--ssi-ease);
}

.ssi-bento-card:hover .ssi-bento-icon,
.ssi-bento-card:focus-within .ssi-bento-icon {
  transform: rotate(-8deg) scale(1.06);
  border-color: rgba(244, 98, 58, 0.4);
}

.ssi-page .ssi-bento-card h3 {
  margin: 0 0 10px;
  padding-right: 54px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.3;
}

.ssi-page .ssi-bento-card p,
.ssi-page .ssi-bento-intro p {
  margin: 0;
  color: var(--ssi-muted);
  font-size: 15px;
  line-height: 1.72;
}

/* ---------- Services index ---------- */
.ssi-services {
  background: var(--ssi-ivory-2);
}

.ssi-index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ssi-hair);
}

.ssi-index-row {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 92px;
  align-items: start;
  gap: clamp(12px, 2vw, 30px);
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--ssi-hair);
  cursor: default;
  transition: padding-left 0.5s var(--ssi-ease);
}

.ssi-index-row:focus {
  outline: none;
}

/* The coral rule that draws across the row as it opens. Bottom edge, so it
   reads as the hairline itself thickening and colouring. */
.ssi-index-row::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--ssi-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.65s var(--ssi-ease);
}

.ssi-index-row:hover::after,
.ssi-index-row:focus-visible::after,
.ssi-index-row:focus-within::after {
  transform: scaleX(1);
}

.ssi-index-row:hover,
.ssi-index-row:focus-visible,
.ssi-index-row:focus-within {
  padding-left: 14px;
}

.ssi-index-num {
  font-family: var(--ssi-num);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(20, 22, 29, 0.3);
  transition:
    color 0.5s var(--ssi-ease),
    -webkit-text-stroke-color 0.5s var(--ssi-ease);
}

.ssi-index-row:hover .ssi-index-num,
.ssi-index-row:focus-visible .ssi-index-num,
.ssi-index-row:focus-within .ssi-index-num {
  color: var(--ssi-coral);
  -webkit-text-stroke-color: var(--ssi-coral);
}

.ssi-page .ssi-index-body h3 {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 0.5s var(--ssi-ease);
}

.ssi-index-row:hover .ssi-index-body h3,
.ssi-index-row:focus-visible .ssi-index-body h3,
.ssi-index-row:focus-within .ssi-index-body h3 {
  color: var(--ssi-coral-deep);
}

/* The description is held at zero height and animates 0fr -> 1fr; the <span>
   inside owns the overflow, because a bare text node in a grid container
   becomes an anonymous item that cannot be styled. */
.ssi-page .ssi-index-body p {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  max-width: 68ch;
  color: var(--ssi-muted);
  font-size: 15.5px;
  line-height: 1.72;
  opacity: 0;
  transition:
    grid-template-rows 0.55s var(--ssi-ease),
    opacity 0.55s var(--ssi-ease);
}

.ssi-index-body p > span {
  overflow: hidden;
  min-height: 0;
}

.ssi-index-row:hover .ssi-index-body p,
.ssi-index-row:focus-visible .ssi-index-body p,
.ssi-index-row:focus-within .ssi-index-body p {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ssi-index-row:hover .ssi-index-body p > span,
.ssi-index-row:focus-visible .ssi-index-body p > span,
.ssi-index-row:focus-within .ssi-index-body p > span {
  padding-top: 12px;
}

/* Nine collapsed titles give a reader nothing to act on, so row one sits open
   until the list is hovered — at which point the hover rules take over. */
.ssi-index:not(:hover) .ssi-index-row:first-child::after {
  transform: scaleX(1);
}

.ssi-index:not(:hover) .ssi-index-row:first-child .ssi-index-num {
  color: var(--ssi-coral);
  -webkit-text-stroke-color: var(--ssi-coral);
}

.ssi-index:not(:hover) .ssi-index-row:first-child .ssi-index-body p {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ssi-index:not(:hover) .ssi-index-row:first-child .ssi-index-body p > span {
  padding-top: 12px;
}

.ssi-index:not(:hover) .ssi-index-row:first-child .ssi-index-mark {
  opacity: 1;
  transform: scale(1.06);
}

.ssi-index-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  color: var(--ssi-ink-soft);
  opacity: 0.55;
  transition:
    opacity 0.45s var(--ssi-ease),
    transform 0.45s var(--ssi-ease);
}

.ssi-index-row:hover .ssi-index-mark,
.ssi-index-row:focus-visible .ssi-index-mark,
.ssi-index-row:focus-within .ssi-index-mark {
  opacity: 1;
  transform: scale(1.1);
}

/* ---------- Ink panels ---------- */
.ssi-panel {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 120px);
  background: var(--ssi-ink);
  color: rgba(255, 255, 255, 0.78);
  isolation: isolate;
}

.ssi-panel p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
}

/* The pointer spotlight. --mx/--my come from seo-services-india.js; the
   defaults park it top-right so the panel still has depth without a pointer. */
.ssi-spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 78%) var(--my, 20%),
    rgba(244, 98, 58, 0.3),
    transparent 62%
  );
  transition: background 0.25s linear;
}

.ssi-organic-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}

.ssi-organic-art {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  transform: perspective(1200px) rotateY(7deg) rotateX(2deg);
  transition: transform 0.9s var(--ssi-ease);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
}

.ssi-organic-art:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

.ssi-organic-art img {
  display: block;
  width: 100%;
  height: auto;
}

.ssi-organic-copy p {
  margin: 20px 0 32px;
  max-width: 48ch;
}

/* ---------- Engagement model slabs ---------- */
.ssi-models {
  background: var(--ssi-ivory);
}

.ssi-slabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}

/* Every second slab drops a step, so the pair reads as a staircase instead of
   a block of four equal boxes. This is margin, not transform: the reveal sets
   transform: none when the block lands, which would flatten the staircase. */
.ssi-slabs > :nth-child(even) {
  margin-top: clamp(16px, 2.6vw, 42px);
}

.ssi-slab {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--ssi-hair);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  transition:
    transform 0.55s var(--ssi-ease),
    border-color 0.55s var(--ssi-ease),
    box-shadow 0.55s var(--ssi-ease);
}

.ssi-slab:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 98, 58, 0.45);
  box-shadow: 0 26px 60px rgba(20, 22, 29, 0.12);
}

.ssi-slab-ord {
  position: absolute;
  top: -14px;
  right: 8px;
  font-family: var(--ssi-num);
  font-weight: 600;
  font-size: clamp(72px, 8vw, 116px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(20, 22, 29, 0.09);
  transition: -webkit-text-stroke-color 0.55s var(--ssi-ease);
  pointer-events: none;
}

.ssi-slab:hover .ssi-slab-ord {
  -webkit-text-stroke-color: rgba(244, 98, 58, 0.34);
}

.ssi-slab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: var(--ssi-coral);
  color: #fff;
  transition: transform 0.55s var(--ssi-ease);
}

.ssi-slab:hover .ssi-slab-icon {
  transform: rotate(-10deg);
}

.ssi-page .ssi-slab h3 {
  position: relative;
  margin: 0 0 12px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.25;
}

.ssi-page .ssi-slab p {
  position: relative;
  margin: 0;
  color: var(--ssi-muted);
  font-size: 15.5px;
  line-height: 1.72;
}

/* ---------- Case studies ---------- */
/* Rebuilt 2026-09-09. The first pass placed stage, panels and dots on one grid
   and hung the arrows off the stage's bottom-left corner; that put the
   controls under the photograph at desktop and scattered them once the grid
   collapsed. Now the slider root is a two-row grid — the picture-and-card row,
   then a controls row — and slider.js's dots, which it appends to the ROOT as
   its last child, land in that second row beside the arrows. Nothing needs
   repositioning when the row stacks. */
.ssi-case {
  background: var(--ssi-ivory-2);
}

/* The slider ROOT is the grid — slider.js appends .slider-dots to it as its
   last child, so there is no wrapper the script could be told about and every
   child is placed explicitly instead of by source order. The copy card spans
   both rows so it stays centred against the picture and its dots together. */
.ssi-case-slider {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  column-gap: clamp(24px, 3.4vw, 54px);
  row-gap: clamp(18px, 2vw, 26px);
  align-items: center;
}

/* The photograph is a square and the card beside it is not, so at full column
   width the picture towered over the copy. Capped and centred in its column.
   Also the arrows' positioning context. */
.ssi-case-stage {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: min(100%, 400px);
  margin-inline: auto;
}

.ssi-case-panels {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

/* Centred under the picture, in the picture's own column. */
.ssi-page .ssi-case-slider .slider-dots {
  grid-column: 1;
  grid-row: 2;
  justify-content: center;
  margin: 0;
}

.ssi-page .ssi-case-slider .slider-dot.is-active {
  background: var(--ssi-coral);
}

/* Pinned to the picture's edges and centred on it, half on and half off, so
   they travel with the image at every width. */
.ssi-page .ssi-case-slider .slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: var(--ssi-ink);
  color: #fff;
  border: none;
  box-shadow: 0 10px 26px rgba(20, 22, 29, 0.24);
  transition:
    background 0.35s var(--ssi-ease),
    transform 0.35s var(--ssi-ease);
}

.ssi-page .ssi-case-slider .slider-prev {
  left: -20px;
}

.ssi-page .ssi-case-slider .slider-next {
  right: -20px;
}

.ssi-page .ssi-case-slider .slider-arrow:hover {
  background: var(--ssi-coral);
  transform: translateY(-50%) scale(1.08);
}

/* The radius has to be on the VIEWPORT, not only on the figure: the viewport
   is what clips the track, so with square corners there the next slide's
   corner shows square for the length of every transition. Both carry it. */
.ssi-page .ssi-case-slider .slider-viewport {
  border-radius: 20px;
}

.ssi-case-figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(20, 22, 29, 0.16);
}

.ssi-case-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}

.ssi-case-card {
  position: relative;
  padding: clamp(28px, 3.2vw, 46px);
  border: 1px solid var(--ssi-hair);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(20, 22, 29, 0.07);
}

.ssi-case-ord {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--ssi-num);
  font-weight: 600;
  font-size: clamp(40px, 4vw, 62px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(244, 98, 58, 0.35);
}

.ssi-page .ssi-case-card h3 {
  margin: 0 0 24px;
  padding-right: 84px;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 700;
  line-height: 1.2;
}

.ssi-case-blocks {
  display: grid;
  gap: 18px;
  margin: 0;
}

.ssi-case-block {
  padding-left: 18px;
  border-left: 1px solid var(--ssi-hair);
}

.ssi-case-block dt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ssi-ink);
}

.ssi-case-block dd {
  margin: 0;
  color: var(--ssi-muted);
  font-size: 15.5px;
  line-height: 1.68;
}

.ssi-case-ico {
  display: inline-flex;
  color: var(--ssi-coral);
}

.ssi-case-ico .lp-icon {
  width: 17px;
  height: 17px;
}

.ssi-case-block:nth-child(2) .ssi-case-ico {
  color: var(--ssi-saffron);
}

.ssi-case-block:nth-child(3) .ssi-case-ico {
  color: #2f9e6b;
}

/* ---------- Growth band ---------- */
.ssi-band {
  text-align: center;
}

/* A very slow conic sweep behind the copy — the panel's only large movement,
   which is why it is 34s and heavily blurred. */
.ssi-band-sweep {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(244, 98, 58, 0.2),
    rgba(20, 22, 29, 0) 26%,
    rgba(232, 163, 61, 0.12) 54%,
    rgba(20, 22, 29, 0) 78%,
    rgba(244, 98, 58, 0.2)
  );
  filter: blur(120px);
  opacity: 0.7;
  animation: ssi-sweep 34s linear infinite;
  pointer-events: none;
}

@keyframes ssi-sweep {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Seven four-point sparks scattered by --n. Decorative, aria-hidden. */
.ssi-sparks i {
  position: absolute;
  width: calc(8px + var(--n) * 2px);
  aspect-ratio: 1;
  top: calc(var(--n) * 12% - 4%);
  left: calc(var(--n) * 13% + 3%);
  background: rgba(255, 255, 255, 0.5);
  clip-path: polygon(
    50% 0,
    58% 42%,
    100% 50%,
    58% 58%,
    50% 100%,
    42% 58%,
    0 50%,
    42% 42%
  );
  animation: ssi-twinkle calc(3s + var(--n) * 0.6s) ease-in-out infinite
    alternate;
  animation-delay: calc(var(--n) * -0.7s);
}

.ssi-sparks i:nth-child(even) {
  left: auto;
  right: calc(var(--n) * 10% + 2%);
  background: rgba(244, 98, 58, 0.6);
}

@keyframes ssi-twinkle {
  from {
    opacity: 0.2;
    transform: scale(0.7) rotate(0deg);
  }
  to {
    opacity: 1;
    transform: scale(1.25) rotate(45deg);
  }
}

.ssi-band-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin-inline: auto;
}

.ssi-band-heading {
  font-size: clamp(28px, 4.2vw, 58px);
}

.ssi-page .ssi-band-text {
  margin: 20px auto 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.7);
}

/* Closes the band under the statement, now that the second heading and its
   paragraph have been cut. */
.ssi-rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: clamp(30px, 4vw, 52px) auto;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ssi-coral),
    transparent
  );
}

.ssi-band-actions {
  margin-top: 34px;
}

/* ---------- Industries ---------- */
/* Rebuilt 2026-09-09. The mosaic upscaled a ~406x300 photograph into a 2x2
   hero tile and then hid all nine behind a duotone and a scrim, so no picture
   was ever actually shown. This grid is uniform — every shot renders at close
   to its native size — and the copy sits under the image on the page's ivory,
   which is why nothing has to be dimmed to stay readable. */
.ssi-industries {
  background: var(--ssi-ivory);
}

/* Heading on the left, the counter and arrows dropped to the right and
   baseline-aligned with it — the slider's chrome lives in the section head,
   which is what keeps it from reading as a second copy of the case slider. */
.ssi-industries-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(30px, 3.6vw, 52px);
}

.ssi-industries-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ssi-count {
  margin: 0 8px 0 0;
  font-family: var(--ssi-num);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ssi-muted);
  white-space: nowrap;
}

.ssi-count-now {
  font-size: 22px;
  color: var(--ssi-coral);
}

.ssi-count-sep {
  margin-inline: 3px;
  opacity: 0.5;
}

.ssi-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--ssi-hair);
  border-radius: 50%;
  background: transparent;
  color: var(--ssi-ink);
  cursor: pointer;
  transition:
    background 0.35s var(--ssi-ease),
    border-color 0.35s var(--ssi-ease),
    color 0.35s var(--ssi-ease),
    transform 0.35s var(--ssi-ease);
}

.ssi-nav-btn svg {
  width: 20px;
  height: 20px;
}

.ssi-nav-btn:hover {
  background: var(--ssi-ink);
  border-color: var(--ssi-ink);
  color: #fff;
  transform: translateY(-2px);
}

/* The gutter between cards is the SLIDE's padding, not a grid gap: slider.js
   sets each slide's width as a percentage of the viewport, so a gap would put
   the track's arithmetic and the layout out of step. */
.ssi-industry-slider .slider-track {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssi-industry-slider .slider-slide {
  padding-inline: clamp(8px, 0.9vw, 14px);
}

.ssi-industry-slider .slider-viewport {
  /* the cards' shadow and lift need somewhere to go inside the clip */
  margin-inline: clamp(-14px, -0.9vw, -8px);
  padding-block: 6px 14px;
}

/* slider.js's dots, restyled into a chapter rail — one bar per industry rather
   than a row of pills, so the section reads as nine chapters, not nine slides. */
.ssi-page .ssi-industry-slider .slider-dots {
  gap: 6px;
  margin-top: clamp(20px, 2.4vw, 30px);
}

.ssi-page .ssi-industry-slider .slider-dot {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--ssi-sand);
  transition:
    background 0.4s var(--ssi-ease),
    width 0.4s var(--ssi-ease);
}

.ssi-page .ssi-industry-slider .slider-dot.is-active {
  width: 54px;
  background: var(--ssi-coral);
}

.ssi-industry {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ssi-hair);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition:
    transform 0.5s var(--ssi-ease),
    border-color 0.5s var(--ssi-ease),
    box-shadow 0.5s var(--ssi-ease);
}

.ssi-industry:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 98, 58, 0.42);
  box-shadow: 0 24px 54px rgba(20, 22, 29, 0.12);
}

.ssi-industry-shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ssi-sand);
}

.ssi-industry-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ssi-ease);
}

.ssi-industry:hover .ssi-industry-shot img {
  transform: scale(1.06);
}

/* The ordinal rides a small ink chip rather than the photograph itself: these
   shots have no reliably dark corner to set white type against. */
.ssi-industry-ord {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(20, 22, 29, 0.72);
  backdrop-filter: blur(4px);
  font-family: var(--ssi-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #fff;
}

.ssi-industry-body {
  position: relative;
  flex: 1;
  padding: clamp(18px, 1.9vw, 26px);
}

/* The coral rule that grows under the title on hover. */
.ssi-industry-body::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--ssi-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ssi-ease);
}

.ssi-industry:hover .ssi-industry-body::before {
  transform: scaleX(1);
}

.ssi-page .ssi-industry-body h3 {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.25;
}

.ssi-page .ssi-industry-body p {
  margin: 0;
  color: var(--ssi-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Cost ---------- */
.ssi-cost {
  background: var(--ssi-ivory-2);
}

.ssi-cost-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* Sticky only while there are two columns to be sticky against: the copy
   column is the taller one and supplies the travel, so the factor list is what
   pins. Stacked, it is its own grid row with nothing to sit still through.
   The offset is the theme's own — it clears the fixed header pill. */
@media (min-width: 961px) {
  .ssi-cost-side {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
  }
}

/* Below 1100px the two columns are close enough in height that the sticky
   column has almost no travel, and a column that pins for forty pixels reads
   as a rendering fault rather than a decision. It is released instead. */
@media (max-width: 1100px) {
  .ssi-cost-side {
    position: static;
  }
}

/* The range is the section's headline. Poppins, because Plus Jakarta builds
   its digits from overlapping contours and these are set very large. */
.ssi-figures {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(26px, 3vw, 40px);
}

.ssi-figure {
  margin: 0;
}

.ssi-figure-num {
  display: block;
  font-family: var(--ssi-num);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 66px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ssi-ink);
}

.ssi-figure:last-of-type .ssi-figure-num {
  color: var(--ssi-coral);
}

.ssi-figure-label {
  display: block;
  margin-top: 10px;
  max-width: 20ch;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ssi-muted);
}

.ssi-figure-sep {
  flex: none;
  width: 40px;
  height: 1px;
  background: var(--ssi-hair);
}

.ssi-cost-text {
  margin: clamp(26px, 3vw, 38px) 0 0;
  max-width: 54ch;
  color: var(--ssi-muted);
  line-height: 1.78;
}

.ssi-cost-art {
  margin: clamp(24px, 3vw, 36px) 0 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ssi-hair);
}

.ssi-cost-art img {
  display: block;
  width: 100%;
  height: auto;
}

.ssi-side-title {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ssi-muted);
}

.ssi-factors {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Padding is deliberately tight: this column is the sticky one, and every
   pixel it grows is a pixel of travel it loses against the copy beside it. */
.ssi-factors li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--ssi-hair);
  transition: padding-left 0.45s var(--ssi-ease);
}

.ssi-factors li:hover {
  padding-left: 14px;
}

.ssi-factor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ssi-coral-wash);
  color: var(--ssi-coral);
  transition:
    background 0.45s var(--ssi-ease),
    color 0.45s var(--ssi-ease);
}

.ssi-factors li:hover .ssi-factor-icon {
  background: var(--ssi-coral);
  color: #fff;
}

.ssi-factor-icon .lp-icon {
  width: 19px;
  height: 19px;
}

.ssi-factor-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ssi-ink);
}

.ssi-factor-ord {
  font-family: var(--ssi-num);
  font-size: 13px;
  color: var(--ssi-muted);
  opacity: 0.6;
}

/* ---------- Process spine ---------- */
.ssi-process {
  background: var(--ssi-ivory);
}

.ssi-spine-wrap {
  position: relative;
}

/* Two paths on the same geometry, stretched to the block by
   preserveAspectRatio: none — a pale track that is always there, and the coral
   fill over it. seo-services-india.js ties the fill's dashoffset to scroll in
   half-stage steps; the transition here is what smooths each jump, and with no
   JS the fill is simply complete. */
.ssi-spine-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ssi-spine-line path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.ssi-spine-track {
  stroke: var(--ssi-sand);
}

.ssi-spine-fill {
  stroke: var(--ssi-coral);
  transition: stroke-dashoffset 0.55s var(--ssi-ease);
}

.ssi-spine {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(16px, 2.2vw, 30px);
}

.ssi-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 68px);
}

/* Odd steps left, even steps right. Placement is explicit so the number and
   the card swap columns without the markup being reordered. */
.ssi-step:nth-child(odd) .ssi-step-card {
  grid-column: 1;
  grid-row: 1;
}

.ssi-step:nth-child(odd) .ssi-step-num {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.ssi-step:nth-child(even) .ssi-step-card {
  grid-column: 2;
  grid-row: 1;
}

.ssi-step:nth-child(even) .ssi-step-num {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.ssi-step-num {
  font-family: var(--ssi-num);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(244, 98, 58, 0.55);
  transition: color 0.5s var(--ssi-ease);
}

.ssi-step:hover .ssi-step-num {
  color: rgba(244, 98, 58, 0.14);
}

/* The bead where the card meets the spine. */
/* Sits on the rail, so it has to be opaque and wide enough to cover it. */
.ssi-step-node {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ssi-ivory);
  border: 3px solid var(--ssi-coral);
  transition: box-shadow 0.5s var(--ssi-ease);
}

.ssi-step:hover .ssi-step-node {
  box-shadow: 0 0 0 7px rgba(244, 98, 58, 0.16);
}

.ssi-step-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--ssi-hair);
  border-radius: 16px;
  background: #fff;
  transition:
    transform 0.5s var(--ssi-ease),
    border-color 0.5s var(--ssi-ease),
    box-shadow 0.5s var(--ssi-ease);
}

.ssi-step:nth-child(odd):hover .ssi-step-card {
  transform: translateX(-6px);
}

.ssi-step:nth-child(even):hover .ssi-step-card {
  transform: translateX(6px);
}

.ssi-step-card:hover {
  border-color: rgba(244, 98, 58, 0.4);
  box-shadow: 0 22px 50px rgba(20, 22, 29, 0.1);
}

.ssi-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--ssi-coral-wash);
  color: var(--ssi-coral);
}

.ssi-page .ssi-step-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.ssi-page .ssi-step-card p {
  margin: 0;
  color: var(--ssi-muted);
  font-size: 15px;
  line-height: 1.68;
}

/* ---------- Why choose ---------- */
.ssi-why {
  background: var(--ssi-ivory-2);
}

.ssi-why-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}

/* Sticky only while there are two columns to be sticky against; stacked, the
   copy has no travel to sit still through. The offset is the theme's own —
   clamp(96px, 9vw, 124px) clears the fixed header pill. */
@media (min-width: 961px) {
  .ssi-why-copy {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
  }
}

.ssi-why-copy > div {
  margin-top: 32px;
}

.ssi-why-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ssi-hair);
}

.ssi-why-list li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  gap: 18px;
  align-items: start;
  padding: clamp(22px, 2.4vw, 30px) 4px;
  border-bottom: 1px solid var(--ssi-hair);
  transition: padding-left 0.45s var(--ssi-ease);
}

.ssi-why-list li:hover {
  padding-left: 14px;
}

.ssi-why-ord {
  font-family: var(--ssi-num);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(20, 22, 29, 0.3);
  transition:
    color 0.45s var(--ssi-ease),
    -webkit-text-stroke-color 0.45s var(--ssi-ease);
}

.ssi-why-list li:hover .ssi-why-ord {
  color: var(--ssi-coral);
  -webkit-text-stroke-color: var(--ssi-coral);
}

.ssi-page .ssi-why-list h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.3;
}

.ssi-page .ssi-why-list p {
  margin: 0;
  color: var(--ssi-muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.ssi-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ssi-hair);
  border-radius: 50%;
  background: #fff;
  color: var(--ssi-coral);
  transition:
    background 0.45s var(--ssi-ease),
    border-color 0.45s var(--ssi-ease),
    transform 0.45s var(--ssi-ease);
}

.ssi-why-list li:hover .ssi-why-icon {
  background: var(--ssi-coral-wash);
  border-color: rgba(244, 98, 58, 0.5);
  transform: scale(1.08);
}

/* ---------- Closing block ---------- */
.ssi-leads {
  position: relative;
  overflow: hidden;
  background: var(--ssi-ivory);
}

.ssi-leads-glow {
  position: absolute;
  z-index: 0;
  bottom: -40%;
  left: 50%;
  width: min(900px, 92vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 98, 58, 0.14), transparent 62%);
  pointer-events: none;
}

.ssi-leads-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}

.ssi-leads-copy > div {
  margin-top: 32px;
}

.ssi-promises {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssi-promises li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border: 1px solid var(--ssi-hair);
  border-radius: 12px;
  background: #fff;
  transition:
    transform 0.45s var(--ssi-ease),
    border-color 0.45s var(--ssi-ease),
    background 0.45s var(--ssi-ease);
}

/* Rows in a stack nudge right; a lift would break the rhythm between them. */
.ssi-promises li:hover {
  transform: translateX(8px);
  border-color: rgba(244, 98, 58, 0.42);
  background: #fffaf7;
}

.ssi-promise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ssi-coral-wash);
  color: var(--ssi-coral);
}

.ssi-promise-label {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ssi-ink);
}

/* ---------- FAQ ---------- */
/* The markup is the shared .faq accordion, which ships blue. Everything below
   only re-inks it — the behaviour stays animations.js's. */
/* The shared artwork is attached to #faq, an id, so the override has to carry
   one too — a class pair cannot outrank it, and the blue-lavender plate it
   paints belongs to the rest of the site, not to this page. */
.ssi-page #faq.ssi-faq {
  background-image: none;
  background-color: var(--ssi-ivory-2);
}

.ssi-page .ssi-faq .faq-title {
  font-family: var(--heading-font);
  letter-spacing: -0.03em;
}

.ssi-page .ssi-faq .faq-title .text-blue {
  font-family: var(--ssi-display);
  font-style: italic;
  font-weight: 600;
  color: var(--ssi-coral);
}

.ssi-page .ssi-faq .faq-card {
  background: var(--ssi-ink);
  border-radius: 16px;
}

.ssi-page .ssi-faq .faq-cta {
  color: var(--ssi-ink);
}

.ssi-page .faq-cta:hover .faq-cta-label,
.faq-cta:hover .faq-cta-arrow {
  background: var(--ssi-coral);
  color: #fff;
}

.ssi-page .ssi-faq .faq-list details {
  border: 1px solid var(--ssi-hair);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.4s var(--ssi-ease);
}

.ssi-page .ssi-faq .faq-list details.is-open,
.ssi-page .ssi-faq .faq-list details[open] {
  border-color: rgba(244, 98, 58, 0.45);
}

.ssi-page .ssi-faq .faq-list summary {
  font-weight: 700;
}

.ssi-page .ssi-faq .faq-list details.is-open > summary,
.ssi-page .ssi-faq .faq-list details[open] > summary {
  color: var(--ssi-coral-deep);
}

/* The shared sheet greys the answer down so the hover PREVIEW reads as
   provisional; on this ground that grey fell to about 2.4:1. Pinned answers
   get the page's body colour back. */
.ssi-page .ssi-faq .faq-ans-in p {
  color: var(--ssi-muted);
}
.ssi-page .faq-list details.is-open summary::after {
  color: var(--ssi-coral-deep);
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ssi-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ssi-bento-intro {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ssi-bento-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  /* The artwork is the page's first impression and the headline is four words
     tall on a phone, so the picture goes above it rather than below three
     screens of copy. */
  .ssi-hero-art {
    order: -1;
    margin-bottom: 8px;
  }

  .ssi-industries-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .ssi-industries-nav {
    justify-content: flex-start;
  }

  .ssi-hero-inner,
  .ssi-organic-inner,
  .ssi-cost-inner,
  .ssi-why-inner,
  .ssi-leads-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .ssi-head-split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .ssi-organic-art {
    transform: none;
  }

  /* One column: picture, its dots, then the card. The arrows are pinned to
     the picture, so they need no rule of their own here. */
  .ssi-case-slider {
    grid-template-columns: minmax(0, 1fr);
  }

  .ssi-case-stage,
  .ssi-page .ssi-case-slider .slider-dots {
    grid-column: 1;
  }

  .ssi-case-panels {
    grid-column: 1;
    grid-row: 3;
  }

  /* No column gutter to hang off once the picture is the full width. */
  .ssi-page .ssi-case-slider .slider-prev {
    left: 12px;
  }

  .ssi-page .ssi-case-slider .slider-next {
    right: 12px;
  }

  /* Nothing hovers on a touch screen: the services index opens every row. */
  .ssi-page .ssi-index-body p {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .ssi-index-body p > span {
    padding-top: 12px;
  }

  .ssi-index-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .ssi-index-mark {
    display: none;
  }

  /* The spine straightens: one column, the number above its card, no line. */
  .ssi-spine-line,
  .ssi-step-node {
    display: none;
  }

  .ssi-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .ssi-step:nth-child(odd) .ssi-step-card,
  .ssi-step:nth-child(even) .ssi-step-card {
    grid-column: 1;
    grid-row: 2;
    transform: none;
  }

  .ssi-step:nth-child(odd) .ssi-step-num,
  .ssi-step:nth-child(even) .ssi-step-num {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .ssi-slabs > :nth-child(even) {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .ssi-bento,
  .ssi-slabs,
  .ssi-hero-points {
    grid-template-columns: minmax(0, 1fr);
  }

  .ssi-bento-card:last-child {
    grid-column: auto;
  }

  .ssi-figures {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .ssi-figure-sep {
    width: 100%;
  }

  .ssi-case-card {
    padding-top: 60px;
  }

  .ssi-case-ord {
    top: 18px;
    left: 24px;
    right: auto;
  }

  .ssi-page .ssi-case-card h3 {
    padding-right: 0;
  }
}

/* ---------- Reduced motion ----------
   Everything visible, nothing moving. The JS makes the same call for the
   observers, the counters, the spine draw and the spotlight; this covers the
   purely declarative half. */
@media (prefers-reduced-motion: reduce) {
  .ssi-page.ssi-js [data-reveal] > *,
  .ssi-page.ssi-js [data-reveal] > ol > li,
  .ssi-page.ssi-js [data-reveal] > ul > li,
  .ssi-page [data-reveal].is-in > *,
  .ssi-page [data-reveal].is-in > ol > li,
  .ssi-page [data-reveal].is-in > ul > li,
  .ssi-page.ssi-js .ssi-rise,
  .ssi-rise {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .ssi-band-sweep,
  .ssi-ticker-track,
  .ssi-sparks i {
    animation: none;
  }

  .ssi-page .ssi-index-body p {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .ssi-index-body p > span {
    padding-top: 10px;
  }
}