/* ===========================================================================
   Mindspace - Industries & Case Studies

   Shared sheet for four pages:
     /industries              body.industries-page
     /industries/{slug}       body.sector-detail-page
     /case-studies            body.work-page
     /case-studies/{slug}     body.work-detail-page

   All four carry body.sectors-page, which owns the ground, the type and the
   section rhythm. The palette, the 86px grid, the card treatment and the gold
   bloom are lifted from mindspace-services.css on purpose: these pages have to
   read as the same site, not as a bolt-on.
   ========================================================================== */

:root {
    --sectors-black: #0F0F0F;
    --sectors-panel: #101111;
    --sectors-ink: #F5F2EA;
    --sectors-head: #fff8ec;
    --sectors-muted: rgba(245, 242, 234, 0.68);
    --sectors-soft: rgba(245, 242, 234, 0.08);
    --sectors-line: rgba(216, 155, 91, 0.17);
    --sectors-line-lit: rgba(216, 155, 91, 0.48);
    --sectors-gold: #A67C52;
    --sectors-gold-lit: #e2b98a;
    --sectors-font: "Satoshi", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sectors-shell: min(100% - 48px, 1480px);
}

/* Same reset the services and about sheets ship. Without it the shared header
   and footer roots fall back to content-box, and their width:100% plus side
   padding computes wider than the viewport - which is what squeezed them on
   these two pages while every other page looked right. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* The shared hero lands on this ground; keep it identical to the services page. */
body.sectors-page {
    --ms-hero-ground: #080909;
    margin: 0;
    overflow-x: hidden;
    color: var(--sectors-ink);
    background: var(--sectors-black);
    font-family: var(--sectors-font);
}

.sectors-page img,
.sectors-page svg {
    display: block;
}

.sectors-page a {
    color: inherit;
    text-decoration: none;
}

.sectors-page main {
    overflow: visible;
    background:
        linear-gradient(90deg, rgba(247, 241, 231, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(247, 241, 231, 0.018) 1px, transparent 1px),
        linear-gradient(180deg, #080909 0%, #0d0e0e 46%, #080909 100%);
    background-size: 86px 86px, 86px 86px, auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- shared type ---------------------------------------------------- */

.sectors-kicker {
    margin: 0;
    color: var(--sectors-gold);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Capped well below the viewport-scaled maximum the first draft used: at 1920px
   a 3.6vw heading rendered near 69px and a single section filled the screen on
   its own. These sections have to sit several-to-a-screen. */
/* Scoped to main: .sectors-page sits on the body, so a bare `h2` here also
   caught the shared footer's four column headings and, loading after the
   footer sheet, overrode them - the 22ch cap wrapped "Quick Links" and
   "Top Services" onto two lines and knocked the columns out of line. */
.sectors-page main h2 {
    margin: 16px 0 0;
    max-width: 22ch;
    color: var(--sectors-head);
    font-size: clamp(1.6rem, 2vw, 2.45rem);
    font-weight: 700;
    line-height: 1.14;
}

.sectors-rule {
    display: block;
    width: 74px;
    height: 1px;
    margin: 26px 0;
    background: linear-gradient(90deg, var(--sectors-gold), transparent);
}

.sectors-section-head {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 0.8fr);
    gap: clamp(24px, 5vw, 76px);
    align-items: end;
    margin-bottom: clamp(26px, 2.6vw, 38px);
}

.sectors-section-head > p {
    margin: 0;
    color: var(--sectors-muted);
    font-size: 1rem;
    line-height: 1.66;
}

.sectors-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 42px 0;
    color: var(--sectors-muted);
    text-align: center;
}

.sectors-empty a {
    color: var(--sectors-gold-lit);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- section shells ------------------------------------------------- */

.sectors-featured,
.sectors-grid-section,
.work-index,
.sector-detail__head,
.sector-detail__section,
.work-detail,
.sectors-cta {
    width: var(--sectors-shell);
    margin-inline: auto;
}

/* Section rhythm is deliberately tight: at 1920px the first draft spent 118px
   above each heading and a single section owned the whole screen. */
.sectors-featured,
.work-index {
    position: relative;
    padding: clamp(48px, 4vw, 74px) 0 0;
}

.sectors-grid-section,
.sector-detail__section {
    padding: clamp(44px, 3.6vw, 66px) 0 0;
}

/* A hairline of light where the first section meets the hero. */
.sectors-featured::before,
.work-index::before {
    position: absolute;
    left: 0;
    right: 0;
    top: clamp(34px, 4vw, 56px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 155, 91, 0.34), transparent);
    content: "";
}

/* ---------- the shared card treatment -------------------------------------- */

/* .work-band is deliberately absent: it carries its own frame and hover, and
   inheriting this block's lift would double the transform. */
.sector-feature,
.sector-card,
.sector-work > a,
.sector-related > a {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sectors-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(247, 241, 231, 0.06), rgba(247, 241, 231, 0.018)),
        var(--sectors-panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 26px 80px rgba(0, 0, 0, 0.24);
    transform: translateZ(0);
    transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}

/* The bloom tracks the pointer; mindspace-sectors.js sets --card-x / --card-y. */
.sector-feature::before,
.sector-card::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 28%, rgba(216, 155, 91, 0.13) 28.4%, transparent 29.2% 70%, rgba(111, 146, 170, 0.1) 70.4%, transparent 71%),
        radial-gradient(ellipse at var(--card-x, 50%) var(--card-y, 50%), rgba(216, 155, 91, 0.18), transparent 30%);
    opacity: 0.54;
    content: "";
    pointer-events: none;
}

.sector-feature:hover,
.sector-card:hover,
.sector-work > a:hover,
.sector-related > a:hover {
    border-color: var(--sectors-line-lit);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 34px 100px rgba(0, 0, 0, 0.36),
        0 0 42px rgba(216, 155, 91, 0.1);
    transform: translateY(-4px);
}

.sector-feature > *,
.sector-card > * {
    position: relative;
    z-index: 1;
}

/* ---------- /industries: the featured row ---------------------------------- */

.sectors-featured__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sector-feature {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: clamp(24px, 2.6vw, 34px);
}

.sector-feature__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.22;
}

.sector-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.5) contrast(1.06) brightness(0.62);
}

.sector-feature__icon,
.sector-card__icon,
.sector-detail__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(216, 155, 91, 0.3);
    border-radius: 50%;
    color: var(--sectors-gold-lit);
}

.sector-feature__icon svg,
.sector-card__icon svg,
.sector-services svg,
.sector-related svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sector-feature h3 {
    margin: 22px 0 0;
    color: var(--sectors-head);
    font-size: 1.42rem;
    font-weight: 700;
    line-height: 1.2;
}

.sector-feature p {
    margin: 12px 0 0;
    color: var(--sectors-muted);
    font-size: 0.95rem;
    line-height: 1.62;
}

.sector-feature small {
    margin-top: auto;
    padding-top: 20px;
    color: var(--sectors-gold);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---------- /industries: the marquee of sector names ----------------------- */

.sector-ticker {
    position: relative;
    margin-top: clamp(62px, 7vw, 96px);
    padding-block: clamp(18px, 2vw, 26px);
    overflow: hidden;
    border-block: 1px solid rgba(216, 155, 91, 0.16);
    background: linear-gradient(180deg, rgba(216, 155, 91, 0.05), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.sector-ticker__rail {
    display: flex;
    align-items: center;
    gap: 22px;
    width: max-content;
    animation: sector-ticker 68s linear infinite;
}

.sector-ticker__rail span {
    color: rgba(245, 242, 234, 0.46);
    font-size: clamp(0.92rem, 1.1vw, 1.12rem);
    font-weight: 600;
    white-space: nowrap;
}

.sector-ticker__rail em {
    color: var(--sectors-gold);
    font-style: normal;
}

/* The rail holds the list twice, so -50% lands exactly on the seam. */
@keyframes sector-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.sector-ticker:hover .sector-ticker__rail {
    animation-play-state: paused;
}

/* ---------- /industries: the full 27, as an index -------------------------- */

.sector-index {
    width: var(--sectors-shell);
    margin-inline: auto;
    padding: clamp(66px, 7vw, 104px) 0 0;
}

.sector-index__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.62fr);
    gap: clamp(30px, 4vw, 66px);
    align-items: start;
}

.sector-index__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--sectors-line);
}

.sector-index__list li {
    border-bottom: 1px solid var(--sectors-line);
}

.sector-index__list a {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto 28px;
    gap: 18px;
    align-items: center;
    padding: 21px 18px 21px 6px;
    transition: padding-left 260ms ease, background-color 260ms ease;
}

/* A gold wash sweeps in from the left on hover instead of a border colour
   change, so the row reads as a plate being selected. */
.sector-index__list a::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(216, 155, 91, 0.14), transparent 64%);
    opacity: 0;
    transition: opacity 260ms ease;
    content: "";
}

.sector-index__list a:hover,
.sector-index__list a:focus-visible {
    padding-left: 20px;
    outline: none;
}

.sector-index__list a:hover::before,
.sector-index__list a:focus-visible::before {
    opacity: 1;
}

.sector-row__number {
    color: rgba(216, 155, 91, 0.58);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    transition: color 220ms ease;
}

.sector-index__list a:hover .sector-row__number {
    color: var(--sectors-gold-lit);
}

.sector-row__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.sector-row__body strong {
    color: var(--sectors-head);
    font-size: clamp(1.04rem, 1.5vw, 1.32rem);
    font-weight: 700;
    line-height: 1.24;
}

.sector-row__body small {
    color: rgba(245, 242, 234, 0.5);
    font-size: 0.83rem;
    line-height: 1.45;
}

.sector-row__service {
    color: var(--sectors-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.sector-row__go {
    display: grid;
    place-items: center;
    color: var(--sectors-gold);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 240ms ease, transform 240ms ease;
}

.sector-row__go svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sector-index__list a:hover .sector-row__go,
.sector-index__list a:focus-visible .sector-row__go {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- /industries: the pinned preview -------------------------------- */

.sector-index__pane {
    position: sticky;
    top: 108px;
}

.sector-index__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--sectors-line);
    border-radius: 10px;
    background: var(--sectors-panel);
}

.sector-index__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: grayscale(0.4) contrast(1.06) brightness(0.74);
    transform: scale(1.06);
    transition: opacity 520ms ease, transform 720ms ease;
}

.sector-index__frame img.is-active {
    opacity: 1;
    transform: scale(1);
}

.sector-index__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 9, 9, 0.12) 0%, rgba(8, 9, 9, 0.28) 48%, rgba(8, 9, 9, 0.92) 100%);
}

.sector-index__caption {
    position: absolute;
    right: 26px;
    bottom: 24px;
    left: 26px;
    color: var(--sectors-head);
    font-size: clamp(1.1rem, 1.5vw, 1.44rem);
    font-weight: 700;
    line-height: 1.2;
}

/* ---------- the older card grid, still used elsewhere ---------------------- */

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.sector-card {
    display: flex;
    flex-direction: column;
    min-height: 186px;
    padding: 24px;
}

.sector-card h3 {
    margin: 18px 0 0;
    color: var(--sectors-head);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.24;
}

.sector-card p {
    margin: 8px 0 0;
    color: var(--sectors-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.sector-card__go {
    margin-top: auto;
    padding-top: 16px;
    color: var(--sectors-gold);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.sector-card__go svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sector-card:hover .sector-card__go {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- /case-studies: filters ----------------------------------------- */

.work-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(26px, 3vw, 38px);
}

.work-filter {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid var(--sectors-line);
    border-radius: 999px;
    color: var(--sectors-muted);
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.work-filter small {
    color: var(--sectors-gold);
    font-size: 0.72rem;
    font-weight: 800;
}

.work-filter:hover {
    border-color: var(--sectors-line-lit);
    color: var(--sectors-ink);
}

.work-filter.is-active {
    border-color: var(--sectors-gold);
    color: #0f0f0f;
    background: linear-gradient(135deg, var(--sectors-gold-lit), var(--sectors-gold));
}

.work-filter.is-active small {
    color: rgba(15, 15, 15, 0.72);
}

/* ---------- /case-studies: the case bands ---------------------------------
   Each study is one wide band rather than a card in a grid: a large index
   number, the photograph, the story, and the numbers that resulted - read
   left to right the way a printed case record does. The metrics are the point
   of this page, so they sit in the band itself, not behind a click.
   -------------------------------------------------------------------------- */

.work-bands {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.work-band {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 0.82fr) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--sectors-line);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(247, 241, 231, 0.05), rgba(247, 241, 231, 0.015)),
        var(--sectors-panel);
    transition: border-color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}

.work-band:hover {
    border-color: var(--sectors-line-lit);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 30px 88px rgba(0, 0, 0, 0.34);
    transform: translateY(-3px);
}

/* The index number runs down the left edge of the band. */
.work-band__index {
    display: grid;
    place-items: center;
    border-right: 1px solid var(--sectors-line);
    background: rgba(216, 155, 91, 0.05);
    color: rgba(216, 155, 91, 0.72);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.work-band__media {
    position: relative;
    overflow: hidden;
    min-height: 252px;
    background: #0c0d0d;
}

.work-band__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.36) contrast(1.05) brightness(0.72);
    transition: transform 620ms ease, filter 480ms ease;
}

.work-band:hover .work-band__media img {
    filter: grayscale(0) contrast(1.06) brightness(0.88);
    transform: scale(1.05);
}

/* Fades the photograph into the copy panel rather than cutting it hard. */
.work-band__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 17, 17, 0.1) 0%, rgba(16, 17, 17, 0.16) 62%, var(--sectors-panel) 100%);
    content: "";
}

.work-band__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    padding: 7px 13px;
    border: 1px solid rgba(216, 155, 91, 0.4);
    border-radius: 999px;
    background: rgba(8, 9, 9, 0.68);
    color: var(--sectors-gold-lit);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.work-band__body {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.2vw, 34px);
}

.work-band__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: rgba(245, 242, 234, 0.42);
    font-size: 0.74rem;
}

.work-band__meta strong {
    color: var(--sectors-ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.work-band__body h3 {
    margin: 12px 0 0;
    color: var(--sectors-head);
    font-size: clamp(1.14rem, 1.35vw, 1.52rem);
    font-weight: 700;
    line-height: 1.24;
}

.work-band__body > p {
    margin: 11px 0 0;
    max-width: 60ch;
    color: var(--sectors-muted);
    font-size: 0.92rem;
    line-height: 1.62;
}

/* The results, inline. Three at most - past that the band stops scanning. */
.work-band__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--sectors-line);
}

.work-band__metrics div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.work-band__metrics strong {
    color: var(--sectors-gold-lit);
    font-size: clamp(1.2rem, 1.5vw, 1.62rem);
    font-weight: 700;
    line-height: 1;
}

.work-band__metrics span {
    color: rgba(245, 242, 234, 0.5);
    font-size: 0.76rem;
    line-height: 1.4;
}

.work-band__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
}

.work-band__service {
    color: rgba(245, 242, 234, 0.5);
    font-size: 0.78rem;
    font-weight: 600;
}

.work-band__go {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--sectors-gold);
    font-size: 0.82rem;
    font-weight: 700;
}

.work-band__go svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 240ms ease;
}

.work-band:hover .work-band__go svg {
    transform: translateX(5px);
}

/* No photograph on record: the sector mark fills the media column instead. */
.work-band__mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(216, 155, 91, 0.34);
}

.work-band__mark svg {
    width: 54px;
    height: 54px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- detail pages: breadcrumb + head -------------------------------- */

.sector-detail__breadcrumb {
    width: var(--sectors-shell);
    margin: 0 auto;
    padding: 122px 0 0;
}

.sector-detail__breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    color: rgba(245, 242, 234, 0.45);
    font-size: 0.8rem;
    list-style: none;
}

.sector-detail__breadcrumb li + li::before {
    margin-right: 10px;
    content: "/";
}

.sector-detail__breadcrumb a:hover {
    color: var(--sectors-gold-lit);
}

.sector-detail__head,
.work-detail__head {
    padding: clamp(34px, 4vw, 54px) 0 0;
    max-width: 880px;
}

.sector-detail__head h1,
.work-detail__head h1 {
    margin: 18px 0 0;
    color: var(--sectors-head);
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    font-weight: 700;
    line-height: 1.03;
}

.sector-detail__icon {
    margin-bottom: 26px;
    width: 58px;
    height: 58px;
}

.sector-detail__icon svg {
    width: 26px;
    height: 26px;
}

.sector-detail__intro,
.work-detail__standfirst {
    margin: 0;
    color: var(--sectors-muted);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.68;
}

.sector-detail__start {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 30px 0 0;
    padding: 11px 20px;
    border: 1px solid var(--sectors-line);
    border-radius: 999px;
    font-size: 0.86rem;
}

.sector-detail__start span {
    color: rgba(245, 242, 234, 0.5);
}

.sector-detail__start strong {
    color: var(--sectors-gold-lit);
}

/* ---------- industry detail: challenge, highlights, services --------------- */

.sector-detail__challenge p {
    max-width: 880px;
    margin: 22px 0 0;
    color: var(--sectors-muted);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.7;
}

.sector-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 38px;
}

.sector-highlights article {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 26px 28px;
    border: 1px solid var(--sectors-line);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(247, 241, 231, 0.05), rgba(247, 241, 231, 0.015));
}

.sector-highlights span {
    color: var(--sectors-gold);
    font-size: 0.86rem;
    font-weight: 800;
}

.sector-highlights h3 {
    margin: 0;
    color: var(--sectors-ink);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.4;
}

.sector-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 38px;
}

.sector-services > a,
.sector-services > span {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--sectors-line);
    border-radius: 8px;
    color: var(--sectors-ink);
    transition: border-color 220ms ease, transform 220ms ease;
}

.sector-services > a:hover {
    border-color: var(--sectors-line-lit);
    transform: translateY(-3px);
}

.sector-services > a > span:first-child,
.sector-services > span > span:first-child {
    color: var(--sectors-gold-lit);
}

.sector-services strong {
    flex: 1;
    font-size: 0.96rem;
    font-weight: 600;
}

.sector-services__go {
    width: 19px;
    height: 19px;
    color: var(--sectors-gold);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
}

.sector-services > a:hover .sector-services__go {
    opacity: 1;
    transform: translateX(3px);
}

/* ---------- shared: related work + related sectors ------------------------- */

.sector-work {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
}

.sector-work > a {
    display: flex;
    flex-direction: column;
}

.sector-work img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: grayscale(0.36) brightness(0.78);
}

.sector-work > a > div {
    padding: 24px 26px;
}

.sector-work strong {
    display: block;
    color: var(--sectors-head);
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1.26;
}

.sector-work p {
    margin: 10px 0 0;
    color: var(--sectors-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.sector-work small {
    display: block;
    margin-top: 14px;
    color: var(--sectors-gold);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sector-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 38px;
}

.sector-related > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    color: var(--sectors-ink);
}

.sector-related > a > span:first-child {
    color: var(--sectors-gold-lit);
}

.sector-related strong {
    font-size: 0.96rem;
    font-weight: 600;
}

/* ---------- case study detail: body + numbers ------------------------------ */

.work-detail__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin: 38px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--sectors-line);
}

.work-detail__facts div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.work-detail__facts dt {
    color: rgba(245, 242, 234, 0.45);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.work-detail__facts dd {
    margin: 0;
    color: var(--sectors-ink);
    font-size: 0.98rem;
    font-weight: 600;
}

.work-detail__cover {
    width: var(--sectors-shell);
    margin: clamp(42px, 5vw, 66px) auto 0;
    overflow: hidden;
    border: 1px solid var(--sectors-line);
    border-radius: 10px;
}

.work-detail__cover img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

.work-detail__body {
    display: grid;
    gap: clamp(34px, 4vw, 52px);
    max-width: 880px;
    margin-top: clamp(48px, 5vw, 74px);
}

.work-detail__body p:not(.sectors-kicker) {
    margin: 16px 0 0;
    color: var(--sectors-muted);
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.74;
}

.work-detail__metrics {
    margin-top: clamp(52px, 6vw, 82px);
    padding: clamp(32px, 4vw, 48px);
    border: 1px solid rgba(216, 155, 91, 0.36);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(216, 155, 91, 0.1), rgba(247, 241, 231, 0.02));
}

.work-detail__metrics > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 26px;
    margin-top: 28px;
}

.work-detail__metrics article {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.work-detail__metrics strong {
    color: var(--sectors-head);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1;
}

.work-detail__metrics span {
    color: var(--sectors-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ---------- the closing panel ---------------------------------------------- */

/* Dimensions match .services-cta so the closing panel is the same object on
   every page: same shell width, padding, gap and vertical margins. */
.sectors-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(26px, 3vw, 54px);
    align-items: center;
    margin-top: clamp(72px, 7vw, 108px);
    margin-bottom: clamp(72px, 7vw, 108px);
    padding: clamp(36px, 3.6vw, 58px);
    border: 1px solid rgba(216, 155, 91, 0.36);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(216, 155, 91, 0.12), rgba(247, 241, 231, 0.02));
}

/* Same measure and size as .services-cta h2. The old 26ch cap was narrower
   than the grid column it sits in, so the sentence broke onto three lines
   while the space between it and the button sat empty. */
.sectors-cta h2 {
    max-width: 720px;
    margin-top: 14px;
    font-size: clamp(1.65rem, 2.4vw, 2.5rem);
    line-height: 1.16;
}

.sectors-cta .sectors-button {
    white-space: nowrap;
}

.sectors-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 16px 28px;
    border: 1px solid var(--sectors-gold);
    border-radius: 999px;
    font-size: 0.94rem;
    font-weight: 700;
    white-space: nowrap;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.sectors-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sectors-button--primary {
    color: #0f0f0f;
    background: linear-gradient(135deg, var(--sectors-gold-lit), var(--sectors-gold));
}

.sectors-button--primary:hover {
    box-shadow: 0 18px 44px rgba(216, 155, 91, 0.26);
    transform: translateY(-2px);
}

/* ---------- tablet --------------------------------------------------------- */

@media (max-width: 1100px) {
    .sectors-featured__grid,
    .sector-services,
    .sector-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The band loses its index gutter first - the number is the least useful
       thing in it once space is short. */
    .work-band {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    }

    .work-band__index {
        display: none;
    }

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

    /* The preview pane needs real width to earn its place; below this the list
       takes the full measure instead. */
    .sector-index__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sector-index__pane {
        display: none;
    }
}

@media (max-width: 860px) {
    :root {
        --sectors-shell: min(100% - 32px, 1480px);
    }

    /* The service column is the first thing to go: the sector name and who it
       serves are what the row is actually for. */
    .sector-index__list a {
        grid-template-columns: 42px minmax(0, 1fr) 24px;
        gap: 14px;
    }

    .sector-row__service {
        display: none;
    }

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

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

    /* Photograph over copy rather than beside it. */
    .work-band {
        grid-template-columns: minmax(0, 1fr);
    }

    .work-band__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    /* The horizontal fade would now cut across the picture, so it runs
       downward into the copy below instead. */
    .work-band__media::after {
        background: linear-gradient(180deg, rgba(16, 17, 17, 0.08) 0%, rgba(16, 17, 17, 0.2) 64%, var(--sectors-panel) 100%);
    }

    .sector-highlights,
    .sector-work {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the button sits under the sentence rather than stretching the
       full width - same as the services panel at this breakpoint. */
    .sectors-cta {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .sector-detail__breadcrumb {
        padding-top: 104px;
    }
}

@media (max-width: 560px) {
    .sectors-featured__grid,
    .sectors-grid,
    .sector-services,
    .sector-related {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Two metrics side by side is the most a phone column holds legibly. */
    .work-band__metrics {
        gap: 16px 22px;
    }

    .work-detail__cover img {
        aspect-ratio: 4 / 3;
    }
}

/* Motion is opt-out: the reveal script parks elements only when the visitor has
   not asked for reduced motion, but a parked element must never be stranded. */
@media (prefers-reduced-motion: reduce) {
    .sector-feature,
    .sector-card,
    .work-band,
    .work-band__media img,
    .sector-work > a,
    .sector-related > a,
    .sectors-button {
        transition: none;
    }

    [data-sector-reveal],
    [data-sector-metric] {
        opacity: 1 !important;
        transform: none !important;
    }

    .sector-ticker__rail {
        animation: none;
    }

    .sector-index__frame img {
        transition: opacity 1ms linear;
    }
}

/* ===========================================================================
   Detail pages, second pass

   The two single-record pages (/industries/{slug} and /case-studies/{slug})
   were a stack of full-width paragraphs. These rules give them the structure
   the content now carries: a masthead that pairs copy with the photograph, a
   quotable takeaway, explained highlights, and an FAQ.

   Every value here is taken from the tokens at the top of this sheet, so the
   redesigned pages remain the same object as the two index pages.
   ========================================================================== */

/* ---------- masthead ------------------------------------------------------- */

.sector-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(30px, 4vw, 66px);
    align-items: center;
    width: var(--sectors-shell);
    margin-inline: auto;
    padding: clamp(30px, 3.6vw, 50px) 0 0;
}

.sector-masthead__copy {
    max-width: 640px;
}

.sector-masthead__copy h1 {
    margin: 18px 0 0;
    color: var(--sectors-head);
    font-size: clamp(2.3rem, 4.6vw, 4rem);
    font-weight: 700;
    line-height: 1.04;
}

.sector-masthead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 32px;
}

/* The pill already carries its own top margin in the shared rule; inside the
   action row it sits on the same baseline as the button instead. */
.sector-masthead__actions .sector-detail__start {
    margin: 0;
}

.sector-masthead__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--sectors-line);
    border-radius: 10px;
}

.sector-masthead__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: grayscale(0.34) contrast(1.05) brightness(0.8);
}

/* A wash of the page ground along the lower edge, so the photograph resolves
   into the section below rather than stopping at a hard line. */
.sector-masthead__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(8, 9, 9, 0.62) 100%);
    content: "";
    pointer-events: none;
}

/* ---------- the sector number row ------------------------------------------ */

.sector-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
    width: var(--sectors-shell);
    margin: clamp(38px, 4vw, 58px) auto 0;
    padding: clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 40px);
    border: 1px solid var(--sectors-line);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(247, 241, 231, 0.05), rgba(247, 241, 231, 0.015));
}

.sector-stats article {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sector-stats strong {
    color: var(--sectors-head);
    font-size: clamp(1.8rem, 2.8vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
}

.sector-stats span {
    color: var(--sectors-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ---------- the quotable takeaway ------------------------------------------ */

/* Gold-edged and set larger than body copy: this is the paragraph a search or
   AI answer engine lifts, so on the page it should read as the summary too. */
.sector-takeaway,
.work-takeaway {
    width: var(--sectors-shell);
    margin: clamp(42px, 4.6vw, 68px) auto 0;
    padding: clamp(28px, 3vw, 42px) clamp(28px, 3.4vw, 48px);
    border: 1px solid rgba(216, 155, 91, 0.36);
    border-left-width: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(216, 155, 91, 0.1), rgba(247, 241, 231, 0.02));
}

/* The kicker is a real heading on these pages; it must not inherit the shared
   `main h2` display size. */
.sector-takeaway h2.sectors-kicker,
.work-takeaway h2.sectors-kicker,
.work-detail__body h2.sectors-kicker,
.work-detail__metrics h2.sectors-kicker {
    max-width: none;
    margin: 0;
    color: var(--sectors-gold);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: uppercase;
}

.sector-takeaway p,
.work-takeaway p {
    max-width: 90ch;
    margin: 16px 0 0;
    color: var(--sectors-ink);
    font-size: clamp(1.04rem, 1.45vw, 1.24rem);
    line-height: 1.66;
}

.work-takeaway {
    width: auto;
    max-width: 880px;
    margin-inline: 0;
}

/* ---------- highlights, now with supporting copy --------------------------- */

/* The numeral keeps its baseline against the title while the copy runs under
   both, so a two-line title does not push the number out of alignment. */
.sector-highlights article {
    align-items: flex-start;
}

.sector-highlights article > div {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.sector-highlights p {
    margin: 0;
    color: var(--sectors-muted);
    font-size: 0.92rem;
    line-height: 1.62;
}

/* ---------- case study: what changed --------------------------------------- */

.work-results {
    width: var(--sectors-shell);
    margin-inline: auto;
    padding: clamp(48px, 5vw, 76px) 0 0;
}

.work-results__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
}

.work-results__list article {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 28px;
    border: 1px solid var(--sectors-line);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(247, 241, 231, 0.05), rgba(247, 241, 231, 0.015));
}

.work-results__list > article > span {
    color: var(--sectors-gold);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.5;
}

.work-results__list h3 {
    margin: 0 0 9px;
    color: var(--sectors-ink);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.38;
}

.work-results__list p {
    margin: 0;
    color: var(--sectors-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ---------- FAQ ------------------------------------------------------------ */

.sector-faq {
    width: var(--sectors-shell);
    margin-inline: auto;
    padding: clamp(48px, 5vw, 76px) 0 0;
}

/* Two columns on a wide screen, because these answers are short enough that a
   single 1480px column would strand each one on its own line. */
.sector-faq__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 38px;
}

.sector-faq__list article {
    padding: 26px 28px;
    border: 1px solid var(--sectors-line);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(247, 241, 231, 0.05), rgba(247, 241, 231, 0.015));
}

.sector-faq__list h3 {
    margin: 0;
    color: var(--sectors-head);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.38;
}

.sector-faq__list p {
    margin: 12px 0 0;
    color: var(--sectors-muted);
    font-size: 0.93rem;
    line-height: 1.66;
}

/* ---------- related work cards now carry a real heading -------------------- */

/* The card title moved from <strong> to <h3> so the page has a heading
   outline; these rules keep it looking exactly as it did. */
.sector-work h3 {
    margin: 0;
    color: var(--sectors-head);
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1.26;
}

/* ---------- responsive ----------------------------------------------------- */

@media (max-width: 1100px) {
    .work-results__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    /* Photograph under the copy rather than beside it, matching how .work-band
       stacks at this breakpoint. */
    .sector-masthead {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .sector-masthead__media img {
        aspect-ratio: 16 / 9;
    }

    .sector-faq__list,
    .work-results__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .sector-masthead__actions {
        gap: 14px;
    }

    /* The button stretches the full column when stacked, as it does elsewhere. */
    .sector-masthead__actions .sectors-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .sector-stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .sector-takeaway,
    .work-takeaway {
        border-left-width: 1px;
    }
}