/**
 * Sector page template (single-msc_sector.php).
 *
 * One reusable layout for every sub-category under Buildings / Industrial /
 * Civil. Everything on the page is driven by editable fields; only copy and
 * images change between sectors.
 *
 * Tokens come from the theme (style.css): --msc-primary, --msc-accent,
 * --msc-accent-strong, --msc-eyebrow-*, --msc-content-max-width. The cards in
 * the carousel are the shipped .msc-pcard component from
 * css/projects/msc-project-index.css and are not restyled, only sized.
 */

.msc-sector {
    --sec-ink: #1c1f4e;
    --sec-navy: var(--msc-primary, #25285F);
    --sec-accent: var(--msc-accent, #9CC3E8);
    --sec-accent-strong: var(--msc-accent-strong, #3E6CB8);
    --sec-body: #4a4a4a;
    /* Body copy on the pale blue bands, where the plain grey reads flat. */
    --sec-body-on-blue: #414368;
    /* Pre-composited muted greys, each at or above 4.5:1 on its own surface. */
    --sec-muted-light: #5C5E87;
    --sec-muted-dark: #DEE0EC;
    --sec-border: #d3d9ec;
    /* Not --sec-border: an idle dot is a UI state and owes 3:1, a hairline
       does not. */
    --sec-dot-idle: #7A82A8;
    --sec-hairline: #e2e3ee;
    --sec-surface: #f6f7fb;
    /* Stat band and closing CTA. Deliberately not a third navy above the
       footer. */
    --sec-surface-blue: #eef1f9;

    /* Hero type sits on a scrim over an uncontrolled photograph, so every one
       of these is opaque and was checked against the scrim composited over a
       near-white pixel, not over black. */
    --sec-hero-ink: #ffffff;
    --sec-hero-link: #F0F2FA;
    --sec-hero-muted: #E4E7F2;
    --sec-hero-sep: #D9DDEC;
    --sec-hero-wash: #25285F80;
    --sec-hero-scrim-foot: #14173EEB;
    --sec-hero-scrim-low: #14173EBD;
    --sec-hero-scrim-high: #14173E85;
    --sec-hero-scrim-top: #14173E75;

    --sec-maxw: var(--msc-content-max-width, 1208px);

    /* One vertical rhythm token for the whole page. Revision 2 roughly doubles
       the smallest step so the page reads calmer at the same content length. */
    --sec-space: clamp(88px, 10vw, 168px);
    --sec-gap: clamp(48px, 6vw, 88px);

    font-family: 'Open Sans', sans-serif;
    color: var(--sec-body);
    box-sizing: border-box;
}

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

.msc-sector-wrap {
    width: 80%;
    max-width: var(--sec-maxw);
    margin: 0 auto;
}

/* Shared type ------------------------------------------------------------- */

.msc-sector-eyebrow {
    display: block;
    font-family: var(--msc-eyebrow-font, 'Barlow Condensed', sans-serif);
    font-size: var(--msc-eyebrow-size, 16px);
    font-weight: var(--msc-eyebrow-weight, 600);
    letter-spacing: var(--msc-eyebrow-tracking, 3px);
    text-transform: uppercase;
    color: var(--msc-eyebrow-color, #3E6CB8);
    margin: 0 0 18px;
}

.msc-sector-eyebrow--on-dark {
    color: var(--msc-eyebrow-color-on-dark, #9CC3E8);
}

.msc-sector-h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(38px, 4.6vw, 62px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sec-navy);
    margin: 0;
}

.msc-sector-h2--on-dark {
    color: #ffffff;
}

.msc-sector-bar {
    width: 56px;
    height: 3px;
    background: var(--sec-accent-strong);
    margin: 24px 0 0;
}

.msc-sector-p {
    font-size: 18px;
    line-height: 1.85;
    color: var(--sec-body);
    margin: 0 0 24px;
    max-width: 66ch;
}

.msc-sector-p--on-dark {
    color: var(--sec-muted-dark);
}

.msc-sector-p:last-child {
    margin-bottom: 0;
}

/* First paragraph after an eyebrow / heading / accent-bar stack. */
.msc-sector-p--after-bar {
    margin-top: 32px;
}

/* Photograph captions. Set under the image, never over it, and flush with its
   left edge: a figure note, not a pull quote. */
.msc-sector-caption {
    display: block;
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--sec-muted-light);
}

.msc-sector-caption-name {
    font-weight: 600;
    color: var(--sec-navy);
}

/* Buttons ----------------------------------------------------------------- */

.msc-sector-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 30px;
    color: var(--sec-navy);
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    /* Every call site adds --navy or --outline, both of which repaint this.
       The navy border is the safe default so an unmodified button still has a
       3:1 boundary (WCAG 1.4.11) if one is ever added. */
    border: 1px solid var(--sec-navy);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Solid navy: the closing CTA now sits on a light surface, where the accent
   fill would read as a tint rather than a call to action. */
.msc-sector-btn--navy {
    background: var(--sec-navy);
    border-color: var(--sec-navy);
    color: #ffffff;
}

.msc-sector-btn--navy:hover,
.msc-sector-btn--navy:focus {
    background: var(--sec-ink);
    border-color: var(--sec-ink);
    color: #ffffff;
}

.msc-sector-btn--outline {
    background: transparent;
    border-color: var(--sec-navy);
    color: var(--sec-navy);
}

.msc-sector-btn--outline:hover,
.msc-sector-btn--outline:focus {
    background: var(--sec-navy);
    border-color: var(--sec-navy);
    color: #ffffff;
}

.msc-sector-btn-icon {
    transition: transform 0.2s ease;
}

.msc-sector-btn:hover .msc-sector-btn-icon {
    transform: translateX(3px);
}

.msc-sector a:focus-visible,
.msc-sector button:focus-visible {
    outline: 2px solid var(--sec-accent-strong);
    outline-offset: 3px;
}

.msc-sector-on-dark a:focus-visible,
.msc-sector-on-dark button:focus-visible {
    outline-color: var(--sec-accent);
}

/* ============================================================ HERO
   One photograph, full bleed, under the navy overlay. Type sits on the bottom
   left inside the normal container so the H1 lines up with every heading below
   it. No buttons: the page's calls to action live further down. */

.msc-sector-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: clamp(580px, 82vh, 820px);
    padding: 56px 0 clamp(64px, 7vw, 104px);
    background: var(--sec-ink);
    overflow: hidden;
}

.msc-sector-hero-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

/* The blue overlay. A flat navy wash carries the brand colour across the whole
   frame; the vertical gradient on top of it buys contrast where the type is. */
.msc-sector-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top,
            var(--sec-hero-scrim-foot) 0%,
            var(--sec-hero-scrim-low) 34%,
            var(--sec-hero-scrim-high) 68%,
            var(--sec-hero-scrim-top) 100%),
        var(--sec-hero-wash);
}

/* margin-top:auto pins the block to the bottom of a tall hero; the padding is
   the floor that keeps it clear of the breadcrumb on a short viewport. */
.msc-sector-hero-copy {
    margin-top: auto;
    padding-top: clamp(72px, 16vh, 160px);
}

/* The shared on-dark eyebrow tint clears 4.5:1 on the statement's flat navy,
   but not up here where the scrim is at its thinnest over a bright photograph. */
.msc-sector-hero .msc-sector-eyebrow--on-dark {
    color: var(--sec-hero-ink);
}


/* Breadcrumb */
.msc-sector-crumbs {
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--sec-hero-muted);
}

.msc-sector-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.msc-sector-crumbs a {
    color: var(--sec-hero-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.msc-sector-crumbs a:hover {
    color: var(--sec-hero-ink);
    border-bottom-color: var(--sec-accent);
}

/* White, not the accent tint: aria-current already carries the distinction, and
   the tint cannot reach 4.5:1 on the top of the scrim. */
.msc-sector-crumbs li[aria-current='page'] {
    color: var(--sec-hero-ink);
}

.msc-sector-crumbs .msc-sector-crumb-sep {
    color: var(--sec-hero-sep);
}

.msc-sector-h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(46px, 6.4vw, 88px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--sec-hero-ink);
    margin: 0;
    max-width: 17ch;
    text-wrap: balance;
}

/* The measure is set on the paragraph itself so `ch` is counted in the lead's
   own size: three lines on a desktop viewport, not four. */
.msc-sector-lead {
    font-size: clamp(19px, 1.7vw, 22px);
    line-height: 1.7;
    color: var(--sec-muted-dark);
    max-width: 57ch;
    margin: 28px 0 0;
}

/* Photo credit, bottom right of the hero: a caption, not a card. */
.msc-sector-hero-credit {
    width: fit-content;
    margin: 40px 0 0 auto;
    padding-left: 14px;
    border-left: 2px solid var(--sec-accent);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--sec-hero-muted);
    text-align: left;
}

.msc-sector-hero-credit b {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sec-hero-ink);
}

/* ============================================================ BENEFITS ACCORDION
   Moved directly under the hero and flipped to white. The rail keeps its
   numbers; the image column crossfades with the open item. */

.msc-sector-benefits {
    background: #ffffff;
    padding: var(--sec-space) 0;
}

/* Title left over the rail, standfirst right over the image, so the two columns
   are established before the accordion starts. */
.msc-sector-benefits-head {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sec-gap);
    align-items: end;
    margin-bottom: clamp(40px, 4.5vw, 68px);
}

.msc-sector-benefits-sub {
    font-size: 18px;
    line-height: 1.8;
    color: var(--sec-muted-light);
    margin: 0;
    max-width: 46ch;
}

.msc-sector-benefits-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sec-gap);
    align-items: start;
}

/* No image on any accordion item: the rail takes the full width rather than
   leaving a hole where the media column would be. */
.msc-sector-benefits-grid--solo {
    grid-template-columns: minmax(0, 1fr);
}

.msc-sector-acc {
    margin: 0;
}

.msc-sector-acc-item {
    border-top: 1px solid var(--sec-hairline);
}

.msc-sector-acc-item:last-child {
    border-bottom: 1px solid var(--sec-hairline);
}

.msc-sector-acc-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.msc-sector-acc-trigger {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    width: 100%;
    margin: 0;
    padding: 28px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--sec-navy);
}

.msc-sector-acc-num {
    flex: 0 0 auto;
    width: 34px;
    padding-top: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--sec-accent-strong);
    transition: color 0.2s ease;
}

.msc-sector-acc-title {
    flex: 1 1 auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(24px, 2.3vw, 32px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sec-navy);
    transition: color 0.2s ease;
}

.msc-sector-acc-item.is-open .msc-sector-acc-title,
.msc-sector-acc-trigger:hover .msc-sector-acc-title {
    color: var(--sec-accent-strong);
}

/* Plus / minus */
.msc-sector-acc-icon {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 10px;
}

.msc-sector-acc-icon::before,
.msc-sector-acc-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--sec-accent-strong);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.msc-sector-acc-icon::before {
    width: 18px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.msc-sector-acc-icon::after {
    width: 2px;
    height: 18px;
    transform: translate(-50%, -50%);
}

.msc-sector-acc-item.is-open .msc-sector-acc-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

/* Panel: grid-rows collapse, no max-height guessing (same technique as the
   leadership accordion so both behave identically). */
.msc-sector-acc-panel {
    display: grid;
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* Overriding the UA `[hidden] { display: none }` is what buys the collapse
   animation, so visibility has to do the hiding the attribute no longer does:
   it is what actually takes the panel out of the accessibility tree and out of
   the tab order. It flips only once the rows have finished collapsing. */
.msc-sector-acc-panel[hidden] {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s;
}

.msc-sector-acc-panel-inner {
    overflow: hidden;
    min-height: 0;
}

.msc-sector-acc-body {
    margin: 0;
    padding: 0 0 32px 56px;
    max-width: 54ch;
    font-size: 17px;
    line-height: 1.85;
    color: var(--sec-body);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.msc-sector-acc-panel[hidden] .msc-sector-acc-body {
    opacity: 0;
    transform: translateY(-6px);
}

/* The body is a wrapper, not a single paragraph: a client can leave a blank
   line in the edit box and get two paragraphs here. */
.msc-sector-acc-body p {
    margin: 0 0 1em;
}

.msc-sector-acc-body p:last-child {
    margin-bottom: 0;
}

/* Crossfading media, one image per accordion item */
.msc-sector-acc-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sec-ink);
}

.msc-sector-acc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.5s ease, transform 0.6s ease;
}

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

/* ============================================================ EDITORIAL STATEMENT
   The dark moment of the page: why this sector is harder than it looks, with
   the experience figures set underneath on the same navy. */

.msc-sector-statement {
    background: linear-gradient(160deg, var(--sec-ink) 0%, var(--sec-navy) 100%);
    color: #ffffff;
    padding: var(--sec-space) 0;
}

.msc-sector-split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--sec-gap);
    align-items: start;
}

/* ============================================================ STAT BAND
   Full-bleed strip directly under the hero: the accent rule and the dividers
   run edge to edge, so the numbers read as a band rather than a floating card,
   and the page opens on a fact before it opens on an argument. */

/* Pale blue rather than white: the band reads as part of the hero's arrival
   rather than as the first white section. Dividers step up to --sec-border,
   since the hairline grey disappears against this surface. */
.msc-sector-stats {
    background: var(--sec-surface-blue);
    border-top: 3px solid var(--sec-accent-strong);
    border-bottom: 1px solid var(--sec-border);
}

.msc-sector-stats-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.msc-sector-stat {
    padding: clamp(38px, 4vw, 56px) 24px;
    text-align: center;
    border-left: 1px solid var(--sec-border);
}

.msc-sector-stat:first-child {
    border-left: 0;
}

.msc-sector-stat-value {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(42px, 4.4vw, 62px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--sec-navy);
}

.msc-sector-stat-label {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sec-muted-light);
}

/* ============================================================ TRACK RECORD
   Photograph left with a caption under it, copy right, and the quote set as its
   own block beneath the copy. Nothing is written over the picture. */

.msc-sector-track {
    background: #ffffff;
    padding: var(--sec-space) 0;
}

.msc-sector-split--media-first {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

/* Track record with no photograph picked yet. */
.msc-sector-split--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 68ch;
}

.msc-sector-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sec-navy);
}

/* Portrait crop of a landscape photograph: whatever the shot is actually about
   is rarely dead centre, so the anchor is a per-image value the editor sets
   (the same idea as the cover-image anchor on msc_project). */
.msc-sector-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--sec-frame-focus, 50% 50%);
    display: block;
}

/* Standalone pull quote. Accent rule on the left, no quotation-mark ornament
   beyond the opening glyph, and the measure is capped so it never runs past its
   column. */
.msc-sector-quote {
    margin: clamp(40px, 4vw, 56px) 0 0;
    padding: 4px 0 4px 28px;
    border-left: 3px solid var(--sec-accent-strong);
    max-width: 100%;
}

.msc-sector-quote-text {
    margin: 0;
    padding: 0;
    border: 0;
    quotes: none;
    max-width: 34ch;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: 0.005em;
    color: var(--sec-navy);
}

.msc-sector-quote-text::before,
.msc-sector-quote-text::after {
    content: none;
}

/* ============================================================ PROJECT CARROUSEL
   Full-width strip. The track starts on the container's left edge and runs off
   the right of the viewport, so the row reads as continuing rather than as a
   grid that happens to end. */

.msc-sector-projects {
    background: var(--sec-surface);
    padding: var(--sec-space) 0;
    overflow: hidden;
}

.msc-sector-strip-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: clamp(36px, 4vw, 56px);
}

/* Wide enough to keep the sector name whole on the first line, so the longest
   heading on the page sets on two lines rather than three. */
.msc-sector-strip-head .msc-sector-h2 {
    max-width: 30ch;
}

.msc-sector-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sec-accent-strong);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
}

.msc-sector-textlink:hover {
    border-bottom-color: var(--sec-accent-strong);
}

.msc-sector-textlink:hover .msc-sector-btn-icon {
    transform: translateX(3px);
}

/* The gutter that lines the first card up with the container, recomputed here
   because the scroller itself is full width. */
.msc-sector-carousel {
    --sec-gutter: max((100% - var(--sec-maxw)) / 2, 10%);
    --sec-slide: clamp(280px, 30vw, 420px);

    /* The track is a real <ul> for counting semantics. Dropping the markers is
       what forces the role="list" on the element, since Safari drops list
       semantics with them. The existing padding shorthand already overrides the
       UA padding-inline-start. */
    list-style: none;
    margin: 0;
    display: flex;
    gap: 24px;
    padding: 0 24px 0 var(--sec-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sec-gutter);
    scrollbar-width: none;
}

.msc-sector-carousel::-webkit-scrollbar {
    display: none;
}

.msc-sector-slide {
    flex: 0 0 var(--sec-slide);
    scroll-snap-align: start;
    /* Uniform height, variable width: the featured slide is wider without being
       taller, so the row keeps one baseline. */
    height: clamp(300px, 32vw, 440px);
}

.msc-sector-slide--featured {
    flex-basis: calc(var(--sec-slide) * 1.5);
}

/* The shipped card, sized to the slide instead of its own 4:3 ratio. */
.msc-sector-slide .msc-pcard {
    aspect-ratio: auto;
    height: 100%;
}

/* On a carousel the card never gets a hover before it is read, so the overlay
   copy sits at rest where the hover state would put it. */
.msc-sector-slide .msc-pcard-eyebrow,
.msc-sector-slide .msc-pcard-title,
.msc-sector-slide .msc-pcard-view {
    transform: translateY(0);
}

.msc-sector-slide .msc-pcard-title {
    font-size: 20px;
}

/* The featured flag takes the strong accent so it does not read as the same
   chip as the "In Progress" status flag on the card beside it. */
.msc-sector-slide--featured .msc-pcard-flag {
    background: var(--sec-accent-strong);
}

/* Controls: one pill under the track, centred on the container. */
.msc-sector-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(28px, 3vw, 44px);
}

/* The class sets display, so it would otherwise win over the [hidden] attribute
   the script sets when the track has nothing to scroll. */
.msc-sector-carousel-nav[hidden] {
    display: none;
}

/* Same control as the project gallery's prev/next (.msc-gallery-arrow in
   css/projects/msc-project-single.css), so the two carousels on the site read
   as one component: square, navy, accent on hover. */
.msc-sector-carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sec-navy);
    border-radius: 0;
    background: var(--sec-navy);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.msc-sector-carousel-btn:hover:not([aria-disabled='true']),
.msc-sector-carousel-btn:focus-visible:not([aria-disabled='true']) {
    background: var(--sec-accent);
    border-color: var(--sec-accent);
    color: var(--sec-ink);
}

.msc-sector-carousel-btn:active:not([aria-disabled='true']) {
    background: var(--sec-navy);
    border-color: var(--sec-navy);
    color: #ffffff;
    transform: translateY(1px);
}

.msc-sector-carousel-btn:focus-visible {
    outline: 2px solid var(--sec-accent-strong);
    outline-offset: 2px;
}

/* At either end of the track. The gallery loops and so never needs this. */
.msc-sector-carousel-btn[aria-disabled='true'] {
    background: #ffffff;
    border-color: var(--sec-border);
    color: var(--sec-muted-light);
    cursor: default;
}

.msc-sector-carousel-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px;
}

.msc-sector-carousel-dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}

.msc-sector-carousel-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--sec-dot-idle);
    transition: background 0.2s ease, width 0.2s ease;
}

.msc-sector-carousel-dot[aria-current='true']::before {
    width: 22px;
    border-radius: 4px;
    background: var(--sec-navy);
}

/* No JS: the track is still a scroller, so hide the controls it cannot drive. */
html:not(.js) .msc-sector-carousel-nav {
    display: none;
}

/* Empty state: shown when the sector has no published projects yet. */
.msc-sector-empty {
    border: 1px dashed var(--sec-border);
    background: #ffffff;
    padding: 56px 32px;
    text-align: center;
}

.msc-sector-empty-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sec-navy);
    margin: 0 0 10px;
}

.msc-sector-empty-body {
    font-size: 16px;
    line-height: 1.75;
    color: var(--sec-muted-light);
    margin: 0 auto 26px;
    max-width: 46ch;
}

/* ============================================================ SIBLING SECTORS
   A list of names, nothing more: no cells, no arrows, and the current sector is
   not in it. */

.msc-sector-siblings {
    background: #ffffff;
    padding: var(--sec-space) 0;
}

.msc-sector-sib-list {
    columns: 3;
    column-gap: var(--sec-gap);
    list-style: none;
    margin: clamp(32px, 3.5vw, 48px) 0 0;
    padding: 0;
}

.msc-sector-sib-list li {
    break-inside: avoid;
    padding: 14px 0;
    border-bottom: 1px solid var(--sec-hairline);
}

.msc-sector-sib {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(21px, 1.9vw, 25px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sec-navy);
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

a.msc-sector-sib:hover,
a.msc-sector-sib:focus-visible {
    color: var(--sec-accent-strong);
    border-bottom-color: var(--sec-accent-strong);
}

/* ============================================================ CTA
   The same pale blue as the stat band, so the page opens and closes on one
   surface and does not hand a navy section straight to a navy footer. */

.msc-sector-cta {
    background: var(--sec-surface-blue);
    padding: clamp(64px, 7vw, 108px) 0;
}

.msc-sector-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.msc-sector-cta-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--sec-navy);
    margin: 0 0 14px;
}

.msc-sector-cta-sub {
    font-size: 17px;
    line-height: 1.75;
    color: var(--sec-body-on-blue);
    margin: 0;
    max-width: 52ch;
}

/* ============================================================ REVEAL */

[data-msc-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-msc-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Keyboard focus can reach a link inside a container the observer has not
   revealed yet, which would leave the focused control invisible (WCAG 2.4.7).
   Snap the container visible instead of fading it in. */
[data-msc-reveal]:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
}

/* No JS: nothing stays invisible. */
html:not(.js) [data-msc-reveal] {
    opacity: 1;
    transform: none;
}

/* ============================================================ RESPONSIVE */

@media (max-width: 1100px) {
    .msc-sector-sib-list {
        columns: 2;
    }
}

@media (max-width: 980px) {
    .msc-sector-wrap {
        width: 88%;
    }

    .msc-sector-hero {
        min-height: 0;
        padding: 40px 0 64px;
    }

    .msc-sector-hero-copy {
        max-width: none;
        margin-top: clamp(180px, 34vw, 320px);
    }

    .msc-sector-hero-credit {
        margin: 32px auto 0 0;
    }

    .msc-sector-split,
    .msc-sector-benefits-head,
    .msc-sector-benefits-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Lead with the photograph on narrow screens. */
    .msc-sector-split--media-first .msc-sector-media {
        order: -1;
    }

    .msc-sector-frame {
        aspect-ratio: 4 / 3;
    }

    .msc-sector-stats-band {
        grid-template-columns: repeat(2, 1fr);
    }

    .msc-sector-stat {
        border-left: 0;
        border-top: 1px solid var(--sec-border);
    }

    .msc-sector-stat:nth-child(2n) {
        border-left: 1px solid var(--sec-border);
    }

    .msc-sector-stat:nth-child(-n + 2) {
        border-top: 0;
    }

    .msc-sector-carousel {
        --sec-gutter: 6%;
    }

    .msc-sector-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .msc-sector-p,
    .msc-sector-benefits-sub,
    .msc-sector-lead {
        font-size: 16.5px;
    }

    .msc-sector-acc-body {
        padding-left: 0;
        font-size: 16px;
    }

    .msc-sector-sib-list {
        columns: 1;
    }

    .msc-sector-strip-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .msc-sector-slide {
        height: 380px;
    }

    .msc-sector-slide--featured {
        flex-basis: var(--sec-slide);
    }
}

/* ============================================================ REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .msc-sector-acc-panel,
    .msc-sector-acc-panel[hidden],
    .msc-sector-acc-body,
    .msc-sector-acc-icon::before,
    .msc-sector-acc-icon::after,
    .msc-sector-btn-icon,
    [data-msc-reveal] {
        transition: none;
    }

    .msc-sector-acc-body,
    .msc-sector-acc-panel[hidden] .msc-sector-acc-body {
        transform: none;
    }

    .msc-sector-acc-img {
        transform: none;
        transition: opacity 0.3s ease;
    }

    .msc-sector-acc-img.is-active {
        transform: none;
    }

    [data-msc-reveal] {
        opacity: 1;
        transform: none;
    }
}