/* =========================================================
   DEVOPS EXPERTS INDIA — INDUSTRY (DevOps)
/* =========================================================
   1. TOKENS
========================================================= */

.ind {

    /* ---- Brand ------------------------------------------ */

    --ind-blue: #14141E;
    --ind-gradient: linear-gradient(93.06deg, #14141E 38.02%, #23232F 80.46%);
    --ind-blue-soft: #F0F4D6;

    /* Same blue-to-violet identity, calmed down for large
       fills. The brand pair is very saturated and its stops
       sit at 38%/80%, which bands across a big surface; this
       drops the luminance a little and spreads the stops edge
       to edge so the blend reads smooth. Small elements keep
       --ind-gradient; anything card-sized uses this. */
    --ind-gradient-soft: linear-gradient(130deg,
        #14141E 0%,
        #23232F 52%,
        #14141E 100%);

    --ind-night: linear-gradient(97.56deg, #14141E 6%, #23232F 78%);

    /* ---- Ink -------------------------------------------- */

    --ind-heading: #14141E;
    --ind-body: #4A4B58;
    --ind-on-dark: #FFFFFF;
    --ind-on-dark-soft: rgba(255, 255, 255, 0.82);

    /* ---- Surfaces --------------------------------------- */

    --ind-surface: #FFFFFF;
    --ind-card: #F7F8FA;
    --ind-line: #E3E4DA;
    --ind-line-dark: rgba(255, 255, 255, 0.16);

    /* ---- Derived ----------------------------------------
       --ind-on-dark at low alpha, for surfaces that sit on a
       dark island. No new hue is introduced.
    --------------------------------------------------- */

    --ind-wash: rgba(255, 255, 255, 0.06);
    --ind-line-dark-lit: rgba(255, 255, 255, 0.34);

    /* --ind-night with alpha, so a photograph can sit under
       the hero without any new hue entering the palette. */
    --ind-night-scrim: linear-gradient(97.56deg,
        rgba(20, 20, 30, 0.94) 6%,
        rgba(35, 35, 47, 0.90) 78%);

    /* ---- Ink switch -------------------------------------
       Every text colour on the page resolves through these
       three. .ind-on-dark rewrites them once, which is what
       lets one card component work on both grounds without a
       modifier per element.
    --------------------------------------------------- */

    --ind-ink: var(--ind-heading);
    --ind-ink-body: var(--ind-body);
    --ind-hairline: var(--ind-line);

    /* ---- Elevation --------------------------------------
       rgba(39,98,246,…) is --ind-blue; rgba(46,49,56,…) is
       --ind-heading. Shadows only, no new colour.
    --------------------------------------------------- */

    --ind-lift: 0 2px 6px rgba(20, 20, 30, 0.04), 0 16px 34px rgba(20, 20, 30, 0.10);
    --ind-lift-brand: 0 12px 30px rgba(20, 20, 30, 0.30);

    /* ---- Radius ----------------------------------------- */

    --ind-radius-sm: 10px;
    --ind-radius: 12px;
    --ind-radius-lg: 16px;
    --ind-radius-xl: 26px;

    /* ---- Motion ----------------------------------------- */

    --ind-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ind-dur: 0.28s;

    /* Every hover on the page animates the same three
       properties over the same curve. Declared once. */
    --ind-tr: transform var(--ind-dur) var(--ind-ease),
              box-shadow var(--ind-dur) var(--ind-ease),
              background var(--ind-dur) var(--ind-ease),
              border-color var(--ind-dur) var(--ind-ease),
              color var(--ind-dur) var(--ind-ease);

    /* ---- Rhythm ----------------------------------------- */

    --ind-pad: 40px;
    --ind-head-gap: 28px;
    --ind-gap: 16px;

    /* ---- Base ------------------------------------------- */

    font-family: 'Lexend Deca', sans-serif;
    color: var(--ind-ink-body);
}

/* The one switch that turns a region dark.

   `color` has to be restated, not just the variables. Colour
   inherits as a computed value, so an element that never
   declares `color` keeps the dark ink it inherited from .ind
   however many times the token is rewritten below it. */
.ind-on-dark {
    --ind-ink: var(--ind-on-dark);
    --ind-ink-body: var(--ind-on-dark-soft);
    --ind-hairline: var(--ind-line-dark);

    color: var(--ind-ink-body);
}


/* =========================================================
   2. PAGE BASE
========================================================= */
 .ind :where(h1, h2, h3, h4) {
    margin: 0;
    color: var(--ind-ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.ind :where(p) {
    margin: 0;
    line-height: 1.7;
}

.ind :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ind :where(a) { text-decoration: none; }

.ind :where(button) {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background-image: none;   /* parent theme paints every button */
}

.ind :where(a, button):focus-visible {
    outline: 2px solid var(--ind-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

.ind-on-dark :where(a, button):focus-visible {
    outline-color: var(--ind-on-dark);
}


/* =========================================================
   3. PAGE GROUND + SECTION RHYTHM

   White page. Sections contribute vertical space and their
   own ground; horizontal gutters stay Bootstrap .container's
   job, so all content sits on one vertical line.
========================================================= */

.ind-page { background: var(--ind-surface); }

.ind-section {
    position: relative;
    padding-block: var(--ind-pad);
}

 
 
.ind-industries,
.ind-caps,
.ind-why,
.ind-cases,
.ind-process,
.ind-faq {
    content-visibility: auto;
    contain-intrinsic-size: auto 1000px;
}


/* =========================================================
   4. SHARED — SECTION HEAD
========================================================= */

.ind-head { max-width: 780px; }

.ind-head--center {
    margin-inline: auto;
    text-align: center;
}

.ind-head__title {
    font-size: 26px;
    font-weight: 700;
}

.ind-head__text {
    margin-top: 14px;
    font-size: 15px;
    color: var(--ind-ink-body);
}

/* A head that leads a grid needs the gap; one that sits in a
   two-column lead row does not. */
.ind-section > .container > .ind-head {
    margin-bottom: var(--ind-head-gap);
}


/* =========================================================
   5. SHARED — BUTTONS

   Solid brand fill with a north-east arrow, as in the
   reference. The arrow is fa-arrow-right rotated 45 degrees:
   Font Awesome Free has no plain arrow-up-right, and rotating
   a glyph is exact where guessing at an icon name is not.
========================================================= */

.ind-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 13px 26px;
    border: 0;
    border-radius: var(--ind-radius-sm);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: var(--ind-tr);
}

/* A skin is one rule: its fill, its ink and the shadow it
   lifts into. Naming the shadow --btn-lift lets the single
   :hover rule below serve every skin, so no selector is
   written twice.

   Each skin also matches its own :hover. That half is not
   redundant: the parent theme styles a:hover at (0,1,1),
   which outranks a plain class, and would otherwise repaint
   the label mid-hover. */

.ind-btn--solid,
.ind-btn--solid:hover {
    --btn-lift: var(--ind-lift-brand);
    background: var(--ind-gradient);
    color: var(--ind-on-dark);
}

/* White fill, for use on top of a brand or night panel. */
.ind-btn--light,
.ind-btn--light:hover {
    --btn-lift: var(--ind-lift);
    background: var(--ind-surface);
    color: var(--ind-blue);
}

.ind-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-lift);
}

.ind-btn .ind-icon {
    font-size: 12px;
    transform: rotate(-45deg);
}

.ind-btn:hover .ind-icon { transform: rotate(-45deg) translateX(3px); }


/* =========================================================
   6. SHARED — ICONS

   Font Awesome 6.5.2, already loaded site-wide by
   header-newheader.php, so no icon request originates here.
   Icons are glyphs: sized by font-size, with line-height 1 so
   the font's leading cannot knock a plate off centre.
========================================================= */

.ind-icon {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    transition: transform var(--ind-dur) var(--ind-ease);
}

.ind-icon-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--ind-radius);
    background: var(--ind-blue-soft);
    color: var(--ind-blue);
    transition: var(--ind-tr);
}

.ind-icon-plate .ind-icon { font-size: 20px; }


/* =========================================================
   7. SHARED — CARD

   A quiet surface at rest: tint on white, white on tint. It
   earns elevation on hover, never at rest.
========================================================= */

.ind-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
   border: 1px solid #d2dfff;
    border-radius: var(--ind-radius-lg);
    background: var(--ind-card);
    transition: var(--ind-tr);
}
 
/* .ind-section--tint .ind-card {     background: linear-gradient(to bottom, #e5ecff 5%, #ffffff 100%); } */

.ind-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ind-lift);
}

.ind-card__title {
    margin-top: 18px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ind-ink);
}

.ind-card__text {
    margin-top: 10px;
    font-size: 14px;
    color: var(--ind-ink-body);
}

.ind-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ind-blue);
}

.ind-card__link .ind-icon { font-size: 12px; }
.ind-card__link:hover .ind-icon { transform: translateX(4px); }

.ind-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ind-gap);
}


/* =========================================================
   8. HERO

   
========================================================= */

.ind-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 56px;
    background: var(--ind-blue-soft);
}

.ind-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* Keeps the copy legible over the artwork. Mobile-first this
   is a flat wash; from 992px it becomes a left-to-right ramp
   so the right half of the illustration reads clearly. */
.ind-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.86) 60%,
        rgba(255, 255, 255, 0.80) 100%);
}

 
.ind-hero__accent {
    color: var(--ind-blue);
    background: var(--ind-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ind-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 40px;
}

.ind-hero__title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.14;
    color:black;
}

.ind-hero__text {
    max-width: 520px;
    margin-top: 18px;
    font-size: 16px;
    color:black;
}

.ind-hero__actions { margin-top: 30px; }
 
/* =========================================================
   9. INTRO
========================================================= */

.ind-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.ind-intro__title {
    font-size: 26px;
    font-weight: 700;
}

.ind-intro__copy { display: grid; gap: 18px; }
.ind-intro__copy p { font-size: 15px; }

/* A brand glow behind the frame, so the section is not just
   a photo next to three paragraphs. Decoration only - it adds
   no text and carries no meaning. */
.ind-intro__media {
    position: relative;
    isolation: isolate;
}

/* The glow is offset 14px past the frame. On one column that
   edge is the container edge, so it would widen the page;
   clipping the section contains it without changing how it
   looks anywhere it has room to sit. */
.ind-intro { overflow-x: clip; }

.ind-intro__media::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: auto -14px -14px auto;
    width: 62%;
    height: 62%;
    border-radius: var(--ind-radius-xl);
    background: var(--ind-gradient-soft);
    opacity: 0.16;
    transition: transform var(--ind-dur) var(--ind-ease);
}

.ind-intro__media:hover::before { transform: translate(6px, 6px); }

/* height:auto is load-bearing. The width/height attributes on
   the markup are presentational hints, so without it the
   attribute height wins and aspect-ratio never applies. */
.ind-intro__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--ind-radius-lg);
    box-shadow: var(--ind-lift);
    transition: transform var(--ind-dur) var(--ind-ease),
                box-shadow var(--ind-dur) var(--ind-ease);
}

.ind-intro__media:hover img {
    transform: translateY(-4px);
    box-shadow: var(--ind-lift-brand);
}

/* Gradient rule under the heading, and a brand marker on each
   paragraph so the copy scans as three distinct points. */
.ind-intro__title::after {
    content: '';
    display: block;
    width: 68px;
    height: 4px;
    margin-top: 16px;
    margin-bottom:16px;
    border-radius: 4px;
    background: var(--ind-gradient-soft);
}

.ind-intro__copy p {
    position: relative;
    padding-left: 22px;
    transition: color var(--ind-dur) var(--ind-ease);
}

.ind-intro__copy p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ind-gradient-soft);
    opacity: 0.55;
    transition: transform var(--ind-dur) var(--ind-ease),
                opacity var(--ind-dur) var(--ind-ease);
}

.ind-intro__copy p:hover { color: var(--ind-heading); }
.ind-intro__copy p:hover::before { transform: scale(1.35); opacity: 1; }


/* =========================================================
   10. INDUSTRIES
========================================================= */

.ind-industries__lead,
.ind-why__lead {
    display: grid;
    gap: 22px;
    margin-bottom: var(--ind-head-gap);
}

a.ind-btn.ind-btn--solid {
    background: var(--ind-gradient-soft);
}

/* ---------------------------------------------------------
   INDUSTRIES SLIDER

   A scroll-snap rail, not a carousel library: the track is a
   plain overflow-x scroller, so it is swipeable on touch and
   keyboard-scrollable without JavaScript. industry.js only
   adds the two arrows, and the page is fully usable if it
   never runs.
--------------------------------------------------------- */

.ind-slider { position: relative; }

.ind-slider__track {
    display: flex;
    gap: var(--ind-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;

    /* Room for the cards to lift into without the scroller
       clipping the shadow. */
    padding: 6px 6px 14px;
    margin: -6px -6px -14px;
}

.ind-slider__track::-webkit-scrollbar { display: none; }

.ind-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}


/* =========================================================
   10b. INDUSTRY FLIP CARD

   Front is the photograph with the sector name burnt into
   it; the card turns 180deg to bring the copy and its CTA
   forward. :focus-within is what makes the back reachable by
   keyboard - tabbing to the link inside it flips the card.
   The aspect-ratio gives the absolutely positioned faces a
   box to fill, so nothing collapses and nothing shifts.
========================================================= */

/* No fixed ratio: the card is exactly as tall as its own
   content, and the slider's flex row levels the cards in
   view against the tallest of them. */
.ind-flip {
    perspective: 1400px;
    background: none;
    border: 0;
    padding: 0;
}

/* The two faces are stacked in a single grid cell rather than
   absolutely positioned. That is what lets the card size to
   its own content: the cell grows to the taller face, so no
   fixed ratio is needed and the back can never be clipped. */
.ind-flip__inner {
    display: grid;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ind-flip:hover .ind-flip__inner,
.ind-flip:focus-within .ind-flip__inner {
    transform: rotateY(180deg);
}

.ind-flip__face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--ind-radius-lg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Keeps the photograph a decent size when the back copy is
   short; the cell still grows past this for longer copy. */
.ind-flip__front {
    position: relative;
    min-height: 330px;
    border: 1px solid #d2dfff;
}

.ind-flip__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Grounds the label so it stays readable on any photograph. */
.ind-flip__front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(11, 23, 57, 0) 38%,
        rgba(11, 23, 57, 0.55) 68%,
        rgba(11, 23, 57, 0.88) 100%);
}

/* z-index lifts the label above ::after; both are positioned
   with z-index auto otherwise, and the pseudo-element paints
   last, which would bury the text under its own scrim. */
.ind-flip__label {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 22px 20px;
    color: var(--ind-on-dark);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

/* Safety net: if a translation or a very narrow card ever
   makes the copy taller than the face, it scrolls instead of
   being silently clipped. */
/* Reads as the brand surface rather than the near-white tint
   it used to be. Rewriting the three ink tokens is the same
   mechanism .ind-on-dark uses, so the shared card title, copy
   and link all invert without a modifier each. */
.ind-flip__back {
    --ind-ink: var(--ind-on-dark);
    --ind-ink-body: var(--ind-on-dark-soft);
    --ind-hairline: var(--ind-line-dark);

    transform: rotateY(180deg);
    justify-content: center;
    padding: 26px 24px;
    border: 1px solid transparent;
    background: var(--ind-gradient-soft);
}

.ind-flip__back .ind-icon-plate {
    background: rgba(255, 255, 255, 0.16);
    color: var(--ind-on-dark);
}

.ind-flip__back .ind-card__link { color: var(--ind-on-dark); }

/* The face is taller than this copy needs, so the block is
   centred rather than pinning the CTA to the bottom edge and
   leaving a hole in the middle of the card. */
.ind-flip__back .ind-card__link { margin-top: 0; }

.ind-flip:hover .ind-flip__back,
.ind-flip:focus-within .ind-flip__back { box-shadow: var(--ind-lift); }

/* Arrows sit with the section head, not over the cards, so
   they never cover content on a narrow screen. */
.ind-slider__nav {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    justify-content: center;
}

.ind-slider__btn {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid #14141E;
    border-radius: 50%;
    background: var(--ind-surface);
    color: var(--ind-blue);
    font-size: 14px;
    transition: var(--ind-tr);
}

.ind-slider__btn:hover:not(:disabled) {
    border-color: transparent;
    background: #2f58f4;
    color: var(--ind-on-dark);
}

.ind-slider__btn:disabled {
    opacity: 0.4;
    cursor: default;
}


/* =========================================================
   11. CAPABILITIES

   A lead column that stays put while a dotted timeline
   scrolls past it. The rail is one border on the list; each
   dot is a pseudo-element, so eight items cost no extra
   markup.
========================================================= */
.ind-caps {
    background: #F0F4D6;
}
.ind-caps__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
}

.ind-timeline {
    display: grid;
    gap: 34px;
    padding-left: 30px;
    border-left: 1px solid #3e49f430;
}

.ind-timeline__item { position: relative; }

.ind-timeline__item::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -37px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ind-gradient);
}

.ind-timeline__title {
    font-size: 17px;
    font-weight: 600;
}

.ind-timeline__text {
    margin-top: 10px;
    font-size: 15px;
}


/* =========================================================
   12. WHY

   The brand fill is a hover state, not a resting one: no card
   is singled out in the markup, and any card the pointer
   lands on takes the gradient. Ink flips with it, which the
   .ind-on-dark switch does in one place.
========================================================= */

.ind-why .ind-card:hover {
    --ind-ink: var(--ind-on-dark);
    --ind-ink-body: var(--ind-on-dark-soft);

    border-color: transparent;
    background: var(--ind-gradient);
    box-shadow: var(--ind-lift-brand);
}

.ind-why .ind-card:hover .ind-icon-plate {
    background: var(--ind-wash);
    color: var(--ind-on-dark);
}


/* =========================================================
   13. SUCCESS STORIES

   Centred head, centred filter pills, brand-filled cards,
   centred "view all".
========================================================= */

.ind-cases__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}

.ind-cases__filter {
    min-height: 38px;
    padding: 9px 18px;
    border: 1px solid var(--ind-line);
    border-radius: 100px;
    background: var(--ind-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--ind-body);
    transition: var(--ind-tr);
}

.ind-cases__filter:hover {
    border-color: var(--ind-blue);
    color: var(--ind-heading);
}

/* The parent theme paints buttons at a higher specificity
   than a lone class, which stripped the gradient and left a
   white pill with white text. Two defences: the extra .ind
   raises this above the theme's selector, and a solid
   background-color sits under the gradient so the pill is
   still legible even if the image is overridden again. */
.ind .ind-cases__filter[aria-pressed="true"] {
    border-color: transparent;
    background-color: #14141E;
    background-image: var(--ind-gradient-soft);
    color: var(--ind-on-dark);
}

.ind .ind-cases__filter[aria-pressed="true"]:hover {
    background-color: #14141E;
    color: var(--ind-on-dark);
}

/* The story cards are the section's accent, filled at rest.
   They carry the dark ink switch in the markup. */
.ind-case {
    border-color: transparent;
    background: var(--ind-gradient-soft);
}

.ind-case:hover { box-shadow: var(--ind-lift-brand); }

/* Card media. Now a photograph of the sector the story is
   about. The ratio was already reserved, so swapping the icon
   panel for the image shifts nothing. */
.ind-case__media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 4px;
    border: 1px solid var(--ind-line-dark);
    border-radius: var(--ind-radius);
    background: var(--ind-wash);
}

/* An author `display` beats the UA sheet's [hidden] rule, so
   a filtered-out card has to say so explicitly. */
.ind-case[hidden] { display: none; }

.ind-cases__actions {
    margin-top: 32px;
    text-align: center;
}

/* Announced when a filter changes the count; never shown. */
.ind-cases__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* =========================================================
   14. PROCESS
========================================================= */

/* The panel carries .ind-on-dark in the markup, so its ink is
   already white; it needs a dark ground to match. --ind-night
   is the page's existing deep navy-to-violet. */
.ind-process__panel.ind-on-dark {
    --ind-ink: var(--ind-heading);
    --ind-ink-body: var(--ind-body);
    --ind-hairline: var(--ind-line);
    color: var(--ind-ink-body);
        background: #F0F4D6;
}

.ind-process__panel {
    padding: 32px 20px;
    border-radius: var(--ind-radius-xl);
}

.ind-process__wrap { position: relative; }

/* Dashed zigzag joining the stage tiles. Hidden until the six
   stages actually sit in one row (1200 and up); below that the
   grid wraps and a single polyline would not describe it.
   Height is pinned to the exact distance between the two tile
   centres (2 x 74px), so it stays aligned whatever the panel
   height, and non-scaling-stroke keeps the dashes even though
   preserveAspectRatio stretches the box. */
.ind-process__links { display: none; }

.ind-process__links polyline {
    fill: none;
    stroke: rgba(46, 49, 56, 0.24);
    stroke-width: 1.5;
    stroke-dasharray: 5 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ind-process__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ind-gap);
}

.ind-step {
    position: relative;
    display: grid;
    justify-items: center;
    text-align: center;
}

/* Outer tile. Opaque enough to sit over the dashed connector
   rather than letting it show through the glass. */
.ind-step__icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border: 1px solid var(--ind-line);
    border-radius: 22px;
    background: var(--ind-surface);
    transition: transform var(--ind-dur) var(--ind-ease);
}

/* Inner brand disc, drawn on the <i> itself. */
.ind-step__icon i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ind-gradient);
    color: var(--ind-on-dark);
    font-size: 20px;
}

.ind-step:hover .ind-step__icon { transform: translateY(-4px); }

.ind-step__title {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 600;
    color: var(--ind-ink);
}

.ind-step__text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    max-width: 27ch;
}


/* =========================================================
   15. FAQ
 
========================================================= */

.ind-faq__list { max-width: 920px; margin:auto;}

.ind-faq__item {
        border: 1px solid #ecececcc;
    border-radius: 0 !important;
    background: transparent;
      padding-left: 20px;
    transition: background var(--ind-dur) var(--ind-ease);
}

/* The only place a pale blue reads on the page. */
/* s */

.ind-faq__btn.accordion-button {
    padding: 22px 34px 22px 0;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ind-heading);
    transition: color var(--ind-dur) var(--ind-ease);
}

.ind-faq__btn.accordion-button:not(.collapsed),
.ind-faq__btn.accordion-button:hover {
    background: transparent;
    box-shadow: none;
    color: var(--ind-blue);
}

.ind-faq__btn.accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

/* Bootstrap's chevron, recoloured to the brand blue. A data
   URI cannot resolve var(), so %232762F6 restates --ind-blue
   literally — the one place in this file that does. Change
   both together. */
.ind-faq__btn.accordion-button::after {
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314141E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.ind-faq__body.accordion-body {
    padding: 0 34px 22px 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ind-body);
}


/* =========================================================
   16. CLOSING CTA
========================================================= */

.ind-cta__panel {
    padding: 40px 24px;
    border-radius: var(--ind-radius-xl);
    background: var(--ind-gradient-soft);
    text-align: center;
}

.ind-cta__inner {
    max-width: 720px;
    margin-inline: auto;
}

.ind-cta__title { font-size: 26px; font-weight: 700; }

.ind-cta__subtitle {
    margin-top: 14px;
    font-size: 17px;
    font-weight: 500;
    color: var(--ind-ink);
}

.ind-cta__text {
    margin-top: 12px;
    font-size: 15px;
    color: white;
}

.ind-cta__actions { margin-top: 30px; }


/* =========================================================
   17. RESPONSIVE
========================================================= */

/* ---------------------------------------------------------
   >= 576px  sm
--------------------------------------------------------- */

@media (min-width: 576px) {

    .ind {
        --ind-pad: 48px;
        --ind-head-gap: 32px;
        --ind-gap: 20px;
    }

    .ind-head__title,
    .ind-intro__title,
    .ind-cta__title { font-size: 30px; }

    .ind-head__text { font-size: 16px; }

    .ind-hero { padding-block: 72px; }
    .ind-hero__title { font-size: 30px; }
    .ind-hero__text { font-size: 17px; }

    .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ind-slide { flex-basis: calc((100% - var(--ind-gap)) / 2); }
    .ind-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ind-process__panel { padding: 40px 32px; }

    .ind-cta__panel { padding: 56px 40px; }
}


/* ---------------------------------------------------------
   >= 768px  md — two-column hero, intro and lead rows
--------------------------------------------------------- */

@media (min-width: 768px) {

    .ind {
        --ind-pad: 56px;
        --ind-head-gap: 36px;
        --ind-gap: 22px;
    }

    .ind-head__title,
    .ind-intro__title,
    .ind-cta__title { font-size: 34px; }

    .ind-hero { padding-block: 96px; }
    .ind-hero__title { font-size: 36px; }
    .ind-hero__text { font-size: 18px; }

    /* Copy is boxed on the left from here up, so the wash
       becomes a ramp and lets the artwork read on the right. */
    .ind-hero::before {
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.97) 0%,
            rgba(255, 255, 255, 0.92) 34%,
            rgba(255, 255, 255, 0.55) 54%,
            rgba(255, 255, 255, 0) 74%);
    }

    .ind-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 48px;
    }

    .ind-intro__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 48px;
        align-items: center;
    }

    /* Heading and its CTA share a baseline. */
    .ind-industries__lead,
    .ind-why__lead {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 36px;
    }

    .ind-process__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .ind-cta__panel { padding: 72px 48px; }
    .ind-cta__subtitle { font-size: 19px; }
}


/* ---------------------------------------------------------
   >= 992px  lg

   The two structural changes of the page: the capabilities
   lead pins beside its timeline, and the process stages take
   up the zigzag.
--------------------------------------------------------- */

@media (min-width: 992px) {

    .ind-hero__title { font-size: 40px; }
    .ind-hero__ring { --r: 150px; }
    .ind-hero__chip { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 26px; }

    .ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ind-slide { flex-basis: calc((100% - 2 * var(--ind-gap)) / 3); }

    /* Capabilities: lead pinned, timeline scrolls past it. */
    .ind-caps__grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 64px;
        align-items: start;
    }

    .ind-caps__lead {
        position: sticky;
        top: calc(var(--dx-header-h, 74px) + 32px);
    }

    /* Process zigzag. Odd stages sit in row 1 pushed to the
       bottom, even stages in row 2 pushed to the top, so both
       meet the middle where the connectors run. */
    .ind-process__list {
        position: relative;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: 1fr 1fr;
        gap: 0 6px;
    }

    /* Each stage takes its OWN column. Setting grid-row alone
       is not enough: auto-placement then packs the six items
       into the first three columns, two deep, and half the
       panel is left empty. */
    .ind-step:nth-child(1) { grid-column: 1; }
    .ind-step:nth-child(2) { grid-column: 2; }
    .ind-step:nth-child(3) { grid-column: 3; }
    .ind-step:nth-child(4) { grid-column: 4; }
    .ind-step:nth-child(5) { grid-column: 5; }
    .ind-step:nth-child(6) { grid-column: 6; }

    /* Stage 1 sits low and stage 2 high, as in the reference.
       Both tiles land 74px either side of the middle, which is
       the distance the connector overlay is pinned to. */
    .ind-step {
        grid-row: 2;
        align-content: start;
        padding-top: 30px;
        position: relative;
        z-index: 1;
    }

    .ind-step:nth-child(even) {
        grid-row: 1;
        align-content: end;
        padding-top: 0;
        padding-bottom: 30px;
    }

    /* The tile always sits nearest the middle, so the copy
       stacks away from the connector line. */
    .ind-step__icon { order: 0; margin-top: 0; margin-bottom: 16px; }
    .ind-step__title { order: 1; margin-top: 0; }
    .ind-step__text { order: 2; margin-top: 8px; margin-bottom: 0; }

    .ind-step:nth-child(even) .ind-step__icon { order: 2; margin-top: 16px; margin-bottom: 0; }
    .ind-step:nth-child(even) .ind-step__text { order: 0; margin-top: 0; margin-bottom: 8px; }

    .ind-process__links {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        z-index: 0;
        width: 100%;
        height: 148px;
        transform: translateY(-50%);
        pointer-events: none;
    }


    .ind-process__panel { padding: 56px 40px; }
}


/* ---------------------------------------------------------
   >= 1200px  xl — final step of the type scale
--------------------------------------------------------- */

@media (min-width: 1200px) {
    section.ind.ind-hero{
    padding: 50px 0;
    }
    .ind { --ind-pad: 64px; }

    .ind-head__title,
    .ind-intro__title,
    .ind-cta__title { font-size: 38px; }

    .ind-hero__title { font-size: 50px; }
    .ind-hero__ring { --r: 172px; }

    .ind-card { padding: 26px; }
    .ind-cta__panel { padding: 80px 56px; }
}


/* =========================================================
   18. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ind *,
    .ind *::before,
    .ind *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ind-btn:hover,
    .ind-card:hover,
    .ind-step:hover .ind-step__icon,
    .ind-card__link:hover .ind-icon {
        transform: none;
    }

    /* The flip still has to happen or the copy stays
       unreachable - it just happens without the rotation. */
    .ind-flip__inner { transition: none; }

    .ind-flip:hover .ind-flip__inner,
    .ind-flip:focus-within .ind-flip__inner { transform: rotateY(180deg); }

    .ind-btn:hover .ind-icon { transform: rotate(-45deg); }
}