/* =============================================================================
   Service detail pages — /services/{slug}/  (single-fd_service.php)
   .ai "Services & Industry" 2026-06-19, artboards 1-5. One shared template.
   Tokens: navy=surface-dark #282839 · purple=primary #6631e1 ·
   GrapeSoda=primary-soft #A793F7 · orange=campfire #d16f54 · punchy #ebfec3 ·
   sage #e2eed9 · growth #29605c · bloom #dad7f7.
   ============================================================================= */

:root {
    --svcd-navy:   var(--wp--preset--color--surface-dark, #282839);
    --svcd-purple: var(--wp--preset--color--primary, #6631e1);
    --svcd-sage:   var(--wp--preset--color--sage, #e2eed9);
    --svcd-growth: var(--wp--preset--color--growth, #29605c);
    --svcd-bloom:  var(--wp--preset--color--bloom, #dad7f7);
    --svcd-punchy: var(--wp--preset--color--punchy, #ebfec3);
    --svcd-card:   #efede8;
    --svcd-maxw:   1440px;   /* content column = site/header width (was 1180 → content sat inset, didn't align to the header) */
}

/* Page shell — warm off-white ground (per Geetha's mockup, NOT pure white),
   nav floats over the navy hero (no white gap). */
body.fd-page-service-detail { background: #f7f7f5; }
body.fd-page-service-detail #fd-main { background: #f7f7f5; }
body.fd-page-service-detail #fd-main { padding-top: 0; }
body.fd-page-service-detail .fd-header { top: 24px; }

/* Shared section rhythm + centred container. */
.fd-svcd-hero,
.fd-svcd-intro,
.fd-svcd-gain,
.fd-svcd-process,
.fd-svcd-tools,
.fd-svcd-challenges,
.fd-svcd-cases,
.fd-svcd-final {
    padding-block: clamp(44px, 4.6vw, 72px);   /* tighter vertical rhythm — no oversized gaps between sections */
    padding-inline: clamp(20px, 5vw, 40px);
}

/* Full-bleed dark bands (hero + process). */
.fd-svcd-hero,
.fd-svcd-process {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    background: var(--svcd-navy);
    color: #fff;
}

/* Challenges is full-bleed but on a CREAM ground with dark cards floating on it
   (per Geetha's mockup — NOT a navy band). */
.fd-svcd-challenges {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    background: #f7f7f5;
    color: var(--svcd-navy);
}

/* Shared section heading (2-line, accent = bold-italic). */
.fd-svcd-h {
    max-width: 16ch;
    margin: 0 auto;
    text-align: center;
    font-family: 'Satoshi', sans-serif;
    font-weight: 300;
    font-style: normal; /* lead is upright roman; only the accent <em> is bold-italic */
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--svcd-navy);
}
.fd-svcd-h em { font-weight: 700; font-style: italic; }
.fd-svcd-h--light { color: #fff; }

/* Centred button rows. */
.fd-svcd-btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: clamp(32px, 4vw, 48px);
}

/* ---------------------------------------------------------------- §1 Hero --- */
/* Tall dark gap above a low, large H1 — content in a constrained left column. */
.fd-svcd-hero { padding-top: clamp(190px, 19vw, 250px); padding-bottom: clamp(48px, 5vw, 76px); }
.fd-svcd-hero__inner { max-width: var(--svcd-maxw); margin: 0 auto; text-align: left; }
.fd-svcd-hero__title {
    margin: 0;
    font-family: 'Satoshi', sans-serif;
    font-weight: 300;
    font-size: clamp(46px, 7.2vw, 92px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #fff;
}
.fd-svcd-hero__sub {
    margin: 18px 0 0;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    max-width: 42ch;
}
.fd-svcd-hero__tags {
    list-style: none;
    margin: clamp(28px, 3.5vw, 44px) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 800px; /* constrain so the 8 chips wrap 4 + 4 as in the mockup */
}
.fd-svcd-hero__tags li {
    background: var(--svcd-sage);
    color: var(--svcd-growth);
    border-radius: 999px;
    padding: 0.55em 1.15em;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    line-height: 1;
}

/* --------------------------------------------------------------- §2 Intro --- */
.fd-svcd-intro { text-align: center; }
.fd-svcd-intro__heading {
    max-width: 18ch;
    margin: 0 auto;
    font-family: 'Satoshi', sans-serif;
    font-weight: 300;
    font-style: normal; /* lead line is upright; only the accent <em> is italic */
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--svcd-navy);
}
.fd-svcd-intro__heading em { font-weight: 700; font-style: italic; }
.fd-svcd-intro__body {
    max-width: 64ch;
    margin: 22px auto 0;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.65;
    color: #4b4b57;
    text-align: justify;
    text-align-last: center;
}
.fd-svcd-chips {
    list-style: none;
    margin: clamp(34px, 4vw, 48px) auto 0;
    padding: 0;
    max-width: 1180px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.fd-svcd-chips li {
    background: var(--svcd-bloom);
    color: var(--svcd-purple);
    border-radius: 16px;
    padding: 20px 22px;                       /* roomier — was 14/20, text felt crammed (Sandro 2026-06-28) */
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 500; /* design tag labels are medium weight, not semibold */
    line-height: 1.4;
    flex: 0 1 250px; /* ~4 per row → 4 + 3 cluster as in the mockup */
    max-width: 270px;
    min-height: 88px;                         /* uniform box height across both rows (was ragged) */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
@media (hover: hover) {
    .fd-svcd-chips li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(40, 40, 57, 0.28); }
}
@media (prefers-reduced-motion: reduce) { .fd-svcd-chips li { transition: none; } .fd-svcd-chips li:hover { transform: none; } }

/* ---------------------------------------------------------------- §3 Gain --- */
/* This heading is LEFT-aligned (flush to the grid's left edge) and the accent
   sits on a pale SAGE highlight block — unique to the "what you gain" heading. */
.fd-svcd-gain .fd-svcd-h {
    max-width: var(--svcd-maxw);
    text-align: left;
}
.fd-svcd-gain .fd-svcd-h em {
    background: var(--svcd-sage);
    color: var(--svcd-navy);
    padding: 0.02em 0.22em;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.fd-svcd-gain__grid {
    list-style: none;
    margin: clamp(40px, 4.5vw, 56px) auto 0;
    padding: 0;
    max-width: var(--svcd-maxw);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;            /* every card the same height across rows */
    gap: clamp(16px, 1.8vw, 24px);
}
.fd-svcd-gain__card {
    background: var(--svcd-card);
    border-radius: 22px;
    padding: clamp(26px, 2.4vw, 38px);
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
@media (hover: hover) {
    .fd-svcd-gain__card:hover { transform: translateY(-6px); box-shadow: 0 20px 42px -22px rgba(40, 40, 57, 0.22); }
}
@media (prefers-reduced-motion: reduce) { .fd-svcd-gain__card { transition: none; } .fd-svcd-gain__card:hover { transform: none; } }
.fd-svcd-gain__title {
    margin: 0 0 12px;
    min-height: 2.44em;            /* reserve 2 lines so bodies share a baseline (design titles wrap to 2) */
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.22;
    color: var(--svcd-navy);
}
.fd-svcd-gain__body {
    margin: 0;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.55;
    color: #555560;
    text-align: justify;
    text-align-last: center;
}

/* ------------------------------------------------------------- §4 Process --- */
.fd-svcd-process .fd-eyebrow,
.fd-svcd-tools .fd-eyebrow {
    display: flex;          /* the base .fd-eyebrow is inline-flex → margin-inline:auto can't centre it; flex+fit-content can */
    width: fit-content;
    margin-inline: auto;
}
.fd-svcd-process .fd-svcd-h,
.fd-svcd-tools .fd-svcd-h { margin-top: 18px; }
.fd-svcd-steps {
    list-style: none;
    margin: clamp(44px, 5vw, 64px) auto 0;
    padding: 0;
    max-width: var(--svcd-maxw);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.6vw, 22px);
}
.fd-svcd-step {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 44px 24px 28px;
    text-align: center; /* mockup centres title + body inside the card */
    margin-top: 26px; /* room for the overlapping numeral badge */
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* #13 (Riccardo): the lime highlight follows the cursor across all 4 steps instead
   of being permanently stuck on the 3rd one. Touch devices (no hover) keep the
   design's highlighted feature step so the intent still reads. */
@media (hover: hover) {
    .fd-svcd-step.is-feature { background: #fff; }   /* drop the always-on lime where hover works */
    .fd-svcd-step:hover {
        background: var(--svcd-punchy);
        transform: translateY(-6px);
        box-shadow: 0 22px 44px -28px rgba(40, 40, 57, 0.55);
    }
    .fd-svcd-step:hover .fd-svcd-step__desc { color: var(--svcd-navy); }
}
@media (hover: none) {
    .fd-svcd-step.is-feature { background: var(--svcd-punchy); }
}
@media (prefers-reduced-motion: reduce) {
    .fd-svcd-step { transition: none; }
    .fd-svcd-step:hover { transform: none; }
}
/* per-step brand glyph in a sage disc, below the number badge (Sandro 2026-06-28: liven the cards) */
.fd-svcd-step__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 4px auto 16px;
    background: var(--svcd-sage);
    border-radius: 50%;
}
.fd-svcd-step__icon img { width: 26px; height: 26px; display: block; }
.fd-svcd-step:hover .fd-svcd-step__icon { background: #fff; }   /* lift the disc off the lime hover fill */
.fd-svcd-step__num {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--svcd-growth);
    color: var(--svcd-punchy); /* pale-lime numeral on the teal badge (per mockup) */
    font-family: 'Satoshi', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    display: grid;
    place-items: center;
}
.fd-svcd-step__title {
    margin: 0 0 14px;
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.3vw, 19px);
    color: var(--svcd-navy);
}
.fd-svcd-step__desc {
    margin: 0;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.5;
    color: #555560;
    text-align: justify;
}
/* The lime feature card uses dark body copy (per mockup). On hover devices the dark
   desc rides the :hover rule above; on touch the feature step stays lime → dark desc. */
@media (hover: none) {
    .fd-svcd-step.is-feature .fd-svcd-step__desc { color: var(--svcd-navy); }
}
/* "• • •" connectors between step cards (desktop). */
.fd-svcd-step + .fd-svcd-step::before {
    content: "• • •";
    position: absolute;
    top: 50%;                              /* mockup centres the connector on the card mid-line, not the top */
    left: -16px;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    letter-spacing: 2px;
}

/* --------------------------------------------------------------- §5 Tools --- */
.fd-svcd-tools { text-align: center; }
.fd-svcd-tools__sub {
    max-width: 70ch;
    margin: 20px auto 0;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    color: #4b4b57;
}
.fd-svcd-tools__filters {
    list-style: none;
    margin: clamp(30px, 3.4vw, 44px) auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.fd-svcd-filter {
    border-radius: 999px;
    padding: 0.6em 1.3em;
    font-size: 14px;
    font-weight: 600;
    color: var(--svcd-navy);
    background: #f1f0ec;
    cursor: default;
}
.fd-svcd-filter.is-active { background: var(--svcd-navy); color: #fff; }
.fd-svcd-tools__pills {
    list-style: none;
    margin: clamp(26px, 3vw, 36px) auto 0;
    padding: 0;
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.fd-svcd-tools__pills li {
    background: var(--svcd-sage);
    color: var(--svcd-growth);
    border-radius: 999px;
    padding: 0.55em 1.15em;
    font-size: 14px;
    font-weight: 500;
    transition: transform 0.18s ease, background 0.18s ease;
}
/* the "Our expertise" pills + filters react on hover so the section isn't dead (Sandro 2026-06-28) */
@media (hover: hover) {
    .fd-svcd-tools__pills li:hover { transform: translateY(-2px); background: #d3e6c5; }
    .fd-svcd-filter:not(.is-active):hover { background: #e6e4dd; }
}

/* ---------------------------------------------------------- §6 Challenges --- */
/* Cream ground + dark cards (per mockup) → heading/sub/body are DARK, not light. */
.fd-svcd-challenges { text-align: center; }
/* The challenges heading is FULLY bold-italic (both lines), not light-lead. */
.fd-svcd-challenges .fd-svcd-h { font-weight: 700; font-style: italic; }
.fd-svcd-challenges .fd-svcd-h--light { color: var(--svcd-navy); }
.fd-svcd-challenges__sub {
    margin: 16px 0 0;
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 1.8vw, 24px);
    color: var(--svcd-purple);
}
.fd-svcd-challenges__body {
    max-width: 60ch;
    margin: 14px auto 0;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    color: #555560;
}
.fd-svcd-challenges__grid {
    list-style: none;
    margin: clamp(40px, 4.5vw, 56px) auto 0;
    padding: 0;
    max-width: var(--svcd-maxw);
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 6 cards → balanced 3×2 block (per mockup), not 4+2 orphan */
    gap: clamp(14px, 1.5vw, 20px);
}
.fd-svcd-challenges__grid li {
    background: var(--svcd-navy);
    border-radius: 18px;
    padding: 26px 22px;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
@media (hover: hover) {
    .fd-svcd-challenges__grid li:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -20px rgba(40, 40, 57, 0.5); }
}
@media (prefers-reduced-motion: reduce) { .fd-svcd-challenges__grid li { transition: none; } .fd-svcd-challenges__grid li:hover { transform: none; } }

/* --------------------------------------------------------------- §7 Cases --- */
.fd-svcd-cases { text-align: center; }
.fd-svcd-cases .fd-eyebrow { display: flex; width: fit-content; margin-inline: auto; }
.fd-svcd-cases .fd-eyebrow + .fd-svcd-h { margin-top: 18px; }
.fd-svcd-cases__sub {
    margin: 14px 0 0;
    font-size: clamp(16px, 1.3vw, 19px);
    color: #4b4b57;
}
.fd-svcd-cases .fd-cases__cards { margin-top: clamp(40px, 4.5vw, 56px); }

/* Photo-forward case cards (Geetha's service mockup shows the photo clearly, with
   only a bottom gradient — NOT the landing's full violet wash). Scope to this page. */
body.fd-page-service-detail .fd-case-card a::before {
    /* Strong full-height wash (Geetha's mockup tints the whole photo) so the white
       title stays legible even on bright crops (e.g. daytime skyline / sunset). */
    background: linear-gradient(180deg, rgba(45, 22, 60, 0.12) 0%, rgba(45, 22, 60, 0.52) 46%, rgba(45, 22, 60, 0.94) 100%);
}
/* Card 1 gets the lime Explore accent (per mockup); cards 2-4 stay navy. */
.fd-svcd-cases .fd-case-card:first-child .fd-btn--explore {
    background: var(--svcd-punchy) !important;   /* beat ds-2026-06.css (priority 99) .fd-btn--explore navy default */
    color: var(--svcd-navy) !important;
}

/* --------------------------------------------------------------- §8 Final --- */
.fd-svcd-final {
    position: relative;
    text-align: center;
    overflow: hidden;
}
.fd-svcd-final__glow {
    position: absolute;
    top: 40%;
    left: 50%;
    width: min(900px, 90vw);
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(167, 147, 247, 0.35) 0%, rgba(167, 147, 247, 0) 65%);
    pointer-events: none;
    z-index: 0;
}
.fd-svcd-final > *:not(.fd-svcd-final__glow) { position: relative; z-index: 1; }
.fd-svcd-final__h {
    margin: 0 auto;
    font-family: 'Satoshi', sans-serif;
    font-weight: 300;
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--svcd-navy);
}
.fd-svcd-final__h em { font-weight: 700; font-style: italic; }
.fd-svcd-final__sub {
    margin: 18px 0 0;
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: clamp(17px, 1.6vw, 21px);
    color: var(--svcd-navy);
}
.fd-svcd-partners {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    background: var(--svcd-navy);
    border-radius: 999px;
    padding: 8px 10px 8px 22px;   /* label sits left (more padding), avatar stack hugs the right edge — per mockup */
}
.fd-svcd-partners__avatars { display: inline-flex; }
.fd-svcd-partners__avatars img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--svcd-navy);
    margin-left: -12px;
}
.fd-svcd-partners__avatars img:first-child { margin-left: 0; }
.fd-svcd-partners__label { color: #fff; font-size: 14px; font-weight: 500; }

/* ----------------------------------------------------------- responsive ---- */
@media (max-width: 980px) {
    .fd-svcd-gain__grid { grid-template-columns: repeat(2, 1fr); }
    .fd-svcd-steps { grid-template-columns: repeat(2, 1fr); }
    .fd-svcd-challenges__grid { grid-template-columns: repeat(2, 1fr); }
    .fd-svcd-step + .fd-svcd-step::before { display: none; }
}
@media (max-width: 600px) {
    .fd-svcd-gain__grid,
    .fd-svcd-steps,
    .fd-svcd-challenges__grid { grid-template-columns: 1fr; }
    .fd-svcd-chips li { max-width: 100%; }
    .fd-svcd-hero__title { font-size: clamp(34px, 9vw, 46px); }
    /* Justified copy reads as rivers in a ~34ch column — left-align on phones.
       Desktop keeps the designer's justified blocks. */
    .fd-svcd-intro__body,
    .fd-svcd-gain__body,
    .fd-svcd-step__desc { text-align: left; }
    /* The 190px desktop nav-over gap leaves a dead navy void on mobile. */
    .fd-svcd-hero { padding-top: 128px; }
    /* Single-column gain cards no longer need the 2-line title reservation. */
    .fd-svcd-gain__title { min-height: 0; }
}