/* ---------------------------------------------------------------------------
   site-fixes.css

   Loaded AFTER the Vite bundle in layouts/app.blade.php.

   Why this file exists: the server has no node_modules, so the Vite bundle
   (public/build/assets/app-*.css) cannot be rebuilt here. Editing that hashed
   artifact directly would be undone by the next real build. These rules are
   additive and survive a rebuild.

   Every rule here is also mirrored into resources/css/app.css, so once someone
   builds properly the fixes carry forward and this file can be retired.
   --------------------------------------------------------------------------- */

/* --- Full-width body copy on detail pages ---------------------------------
   Bare .rich-text caps at var(--reading-measure) (68ch / ~712px). On story and
   gallery detail pages that narrow column sits directly above a full-width
   heading and photo grid, which reads as a broken layout rather than a
   deliberate reading measure.

   Project detail pages already solved this locally with
   .prjd-body__copy.rich-text { max-width: none }. This generalises that fix
   behind an explicit modifier rather than changing .rich-text everywhere,
   so listing pages keep their reading measure. */
.rich-text--wide {
    max-width: none;
}

.rich-text--wide p,
.rich-text--wide li {
    max-width: none;
}

/* --- Link from a story to its full photo album --------------------------- */
.strd-album-link {
    margin-top: 1.75rem;
}

.strd-album-link a {
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 2px solid rgba(37, 99, 168, 0.3);
    padding-bottom: 2px;
}

.strd-album-link a:hover {
    border-bottom-color: var(--teal);
}

.strd-album-link a:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

/* --- Two cream sections should not merge into one slab ------------------- */
.section--cream + .section--cream {
    padding-top: 0;
}

/* --- Spam-guard honeypot -------------------------------------------------
   Must live here, not in a @push('styles') block: the layout defines
   @stack('head') and @stack('scripts') but no 'styles' stack, so pushed CSS
   was dropped silently and the honeypot rendered as a visible "Website" field
   that a real visitor could fill in - which would have had their submission
   discarded as spam.

   Off-screen rather than display:none, because some bots skip hidden fields
   and the field only works if they fill it. */
.fg-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Terms acceptance on public forms ------------------------------------ */
.form-terms {
    margin: 1.25rem 0;
}

.form-terms__label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--muted);
}

.form-terms__label input[type="checkbox"] {
    flex: 0 0 auto;
    /* Nudge onto the first line's optical centre. */
    margin-top: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--teal);
    cursor: pointer;
}

.form-terms__label a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 168, 0.35);
}

.form-terms__label a:hover {
    text-decoration-color: var(--teal);
}

.form-terms__label input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
}

.form-terms .form-error {
    display: block;
    margin-top: 0.4rem;
    color: #B3261E;
    font-size: 0.88rem;
    font-weight: 600;
}

/* On the dark footer the muted body colour would disappear. */
.site-footer .form-terms__label {
    color: rgba(248, 251, 253, 0.82);
}

.site-footer .form-terms__label a {
    color: var(--sun);
    text-decoration-color: rgba(125, 211, 252, 0.5);
}

/* --- Partner testimonial (partnership page) ------------------------------
   Sits directly above the partnership form so the proof is next to the ask. */
.prtn-quote {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    margin: 0;
}

.prtn-quote__media {
    border-radius: 20px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 18px 50px rgba(22, 50, 79, 0.16);
}

.prtn-quote__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.prtn-quote__body blockquote {
    margin: 0.9rem 0 1.25rem;
    padding: 0;
    border: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--navy);
    text-wrap: balance;
}

/* Quotation marks as a typographic mark, not an emoji or image. */
.prtn-quote__body blockquote::before {
    content: "\201C";
    display: block;
    font-size: 3rem;
    line-height: 0.7;
    color: var(--teal);
    opacity: 0.35;
    margin-bottom: 0.35rem;
}

.prtn-quote__attrib {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.prtn-quote__attrib strong {
    color: var(--navy);
    font-weight: 800;
    font-size: 1.02rem;
}

.prtn-quote__attrib span {
    color: var(--muted);
    font-size: 0.92rem;
}

.prtn-quote__link {
    display: inline-block;
    margin-top: 1.1rem;
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 2px solid rgba(37, 99, 168, 0.3);
    padding-bottom: 2px;
}

.prtn-quote__link:hover {
    border-bottom-color: var(--teal);
}

.prtn-quote__link:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

@media (max-width: 860px) {
    .prtn-quote {
        grid-template-columns: 1fr;
    }
}

/* --- Text-only hero ------------------------------------------------------
   The shared hero grid is two equal columns for text + media. Pages with no
   hero media need one column, or half the hero renders empty. */
.svc-hero__grid--text-only {
    grid-template-columns: 1fr;
}

.svc-hero__grid--text-only .svc-hero__text h1 {
    max-width: 20ch;
}

.svc-hero__grid--text-only .svc-hero__text p {
    max-width: 62ch;
}

/* --- Services -> wider ecosystem teaser ---------------------------------
   Replaces the full ecosystem grid that used to sit on the services page. */
.svc-ecosystem-teaser {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2.5rem;
}

.svc-ecosystem-teaser__text {
    flex: 1 1 min(560px, 100%);
}

.svc-ecosystem-teaser__text h2 {
    margin: 0.4rem 0 0.6rem;
}

.svc-ecosystem-teaser__text p {
    margin: 0;
    max-width: 68ch;
}

.svc-ecosystem-teaser .btn {
    flex: 0 0 auto;
}

/* --- Services page: jump index ------------------------------------------
   Replaces the card grid that repeated the same six services the detail
   stack below already covers in full. Titles only, linking down. */
/* Fixed 3 columns rather than auto-fit: there are six services, so three
   columns give two even rows. auto-fit produced a 4 + 2 split with a ragged
   second row. */
.svc-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1024px) {
    .svc-index {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .svc-index {
        grid-template-columns: 1fr;
    }
}

.svc-index__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--cream);
    border: 1px solid rgba(22, 50, 79, 0.08);
    color: var(--navy);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.svc-index__item:hover {
    background: var(--white);
    border-color: rgba(37, 99, 168, 0.35);
    transform: translateY(-2px);
}

.svc-index__item:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

.svc-index__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 10px;
    background: rgba(37, 99, 168, 0.1);
}

.svc-index__icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.svc-index__title {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
}

.svc-index__num {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* Anchor targets must clear the sticky header. */
.svc-feature[id] {
    scroll-margin-top: 7rem;
}

/* --- Homepage impact stats: orphaned card -------------------------------
   The shared hero-stats rule is repeat(4, 1fr), but .home-hero__stats
   overrides it to 3 columns at base width while the homepage renders FOUR
   stats - so the fourth sat alone on its own row. Below 1024px the shared
   2-column rule takes over and 4 items divide evenly again, so this only
   needs correcting above that breakpoint. */
@media (min-width: 1025px) {
    .home-hero__stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --- eStudent360 live-platform panel -------------------------------------
   Was an illustrated mock-up with invented feature tiles; now a real
   screenshot of estudent360.com inside the existing browser-chrome frame. */
.prjd-live-panel__topbar {
    align-items: center;
}

.prjd-live-panel__url {
    margin-left: 0.55rem;
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted);
    background: rgba(22, 50, 79, 0.055);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

.prjd-live-panel__shot {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(22, 50, 79, 0.1);
    line-height: 0;
}

.prjd-live-panel__shot img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.25s ease;
}

.prjd-live-panel__shot:hover img {
    transform: scale(1.015);
}

.prjd-live-panel__shot:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

.prjd-live-panel__caption {
    margin: 1rem 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.5;
}

/* --- Story "At a glance" case-study panel --------------------------------
   A success story was previously a title and a wall of prose. These are the
   facts a reader scans for first: who it was for, where, how long, what we
   actually did, what it was built with. */
.strd-facts-section {
    padding-top: clamp(2rem, 4vw, 3rem);
}

.strd-facts {
    background: var(--cream);
    border: 1px solid rgba(22, 50, 79, 0.08);
    border-radius: 20px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
}

/* Flex rather than an auto-fit grid: with only two or three numbers a grid
   stretches them to opposite edges of the card and the pairing stops reading
   as a set. A hairline between them supplies the structure the grid was
   giving, without the drift. */
.strd-highlights {
    display: flex;
    flex-wrap: wrap;
    margin: 1.25rem 0 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(22, 50, 79, 0.1);
}

.strd-highlight {
    padding-right: 3rem;
}

.strd-highlight + .strd-highlight {
    padding-left: 3rem;
    border-left: 1px solid rgba(22, 50, 79, 0.12);
}

@media (max-width: 560px) {
    .strd-highlight,
    .strd-highlight + .strd-highlight {
        padding: 0;
        border-left: 0;
        flex: 1 0 100%;
    }

    .strd-highlight + .strd-highlight {
        margin-top: 1.5rem;
    }
}

.strd-highlight__value {
    display: block;
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
}

.strd-highlight__label {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

.strd-facts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.5rem;
    margin: 0;
}

.strd-fact dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.strd-fact dd {
    margin: 0;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.5;
}

/* Two-column grid rather than inline flex: the labels differ in length, so a
   flex row starts each pill set at a different x and the block reads ragged.
   A shared label column lines every pill row up. */
.strd-taglist {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    align-items: baseline;
    gap: 0.6rem 1rem;
    margin-top: 1.5rem;
}

.strd-taglist__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    /* Nudge down so the caps sit on the pill's optical centre. */
    padding-top: 0.55rem;
}

@media (max-width: 640px) {
    .strd-taglist {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .strd-taglist__label {
        padding-top: 0;
    }
}

.strd-taglist ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.strd-tag {
    background: var(--white);
    border: 1px solid rgba(22, 50, 79, 0.12);
    color: var(--navy);
    border-radius: 999px;
    padding: 0.38rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.strd-tag--tech {
    background: rgba(37, 99, 168, 0.08);
    border-color: rgba(37, 99, 168, 0.22);
    color: var(--teal);
}

/* --- Mission section: "Prose & panel" -----------------------------------
   Owner selection, 2026-08-15 (design D of four).

   The three values previously trailed off as inline spans under the mission
   paragraph, so they read as an afterthought. Lifting them into a navy panel
   gives them weight, and gives the homepage a tonal break - every other
   section on the page is light. */
/* No card around the row: the prose sits plain on the page background, and the
   blue column is the only surface. Owner direction, 2026-08-15. */
.home-about--panel {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.home-about__prose {
    padding: 0;
    /* The blue column is the taller one; centring stops the prose ending in a
       block of dead space beside it. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-about__prose h2 {
    margin-top: 0.5rem;
}

.home-about__prose p {
    margin-top: 1rem;
    /* Fill the column. A reading measure here left a wide gap between the prose
       and the blue column on large screens. */
    max-width: none;
}

.home-about__panel {
    background: var(--navy);
    color: var(--white);
    border-radius: 20px;
    padding: clamp(2rem, 4vw, 2.75rem);
    display: flex;
    flex-direction: column;
}

.home-about__panel-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sun);
    margin-bottom: 1.4rem;
}

/* The base .home-about__value is a pale card (background: var(--cream),
   1px border, 12px radius) built for the old light layout. Inside the navy
   panel that surface has to be reset explicitly - restyling only the text
   leaves white type sitting on a cream card, which is unreadable. */
.home-about--panel .home-about__value {
    display: block;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    margin: 0;
    padding: 1.1rem 0;
    color: #BBD2E4;
}

.home-about--panel .home-about__value:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.home-about--panel .home-about__value strong {
    display: block;
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.home-about--panel .home-about__value span {
    display: block;
    margin-top: 0.3rem;
    /* Light blue-grey, kept above 4.5:1 on --navy. */
    color: #BBD2E4;
    font-size: 0.93rem;
    line-height: 1.55;
}

.home-about__panel-cta {
    margin-top: auto;
    padding-top: 2rem;
    align-self: flex-start;
    font-weight: 700;
    color: var(--sun);
    text-decoration: none;
}

.home-about__panel-cta:hover {
    text-decoration: underline;
}

.home-about__panel-cta:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 3px;
}

@media (max-width: 860px) {
    .home-about--panel {
        grid-template-columns: 1fr;
    }

    .home-about__panel-cta {
        margin-top: 1.5rem;
        padding-top: 0;
    }
}

/* --- Homepage newsletter row -------------------------------------------
   Moved off the footer (where it rendered on every page) to a single row at
   the bottom of the homepage, 2026-08-15 owner request.

   Text left, form right; stacks on narrow screens. The fields sit in their own
   grid so name and email share a row on desktop rather than running full width
   one under the other, which looked like a broken column beside the copy. */
.home-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.home-newsletter__text h2 {
    margin: 0.4rem 0 0.6rem;
}

.home-newsletter__text p {
    margin: 0;
    max-width: 46ch;
}

.home-newsletter__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.home-newsletter__form input[type="text"],
.home-newsletter__form input[type="email"] {
    width: 100%;
}

.home-newsletter__form .btn {
    margin-top: 0.25rem;
}

/* The terms line sits between the fields and the button; give it room without
   inheriting the wider form-terms spacing used on full pages. */
.home-newsletter__form .form-terms {
    margin: 0.9rem 0 0.75rem;
}

@media (max-width: 860px) {
    .home-newsletter {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .home-newsletter__fields {
        grid-template-columns: 1fr;
    }
}

/* --- Homepage newsletter: field labelling and legibility ----------------
   These inputs were carried over from the footer, where they sat on a dark
   navy ground. On the cream section the inherited placeholder colour washed
   out almost completely, and the labels were sr-only - inconsistent with every
   other form on the site, which labels its fields visibly. */
.home-newsletter__form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.01em;
}

.home-newsletter__form input[type="text"],
.home-newsletter__form input[type="email"] {
    background: var(--white);
    border: 1px solid rgba(22, 50, 79, 0.18);
    color: var(--navy);
}

/* Placeholder is a hint, not a label: readable, but clearly secondary. */
.home-newsletter__form input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.home-newsletter__form input:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
    border-color: var(--teal);
}

/* The checkbox was tuned for the narrower footer column and sat low against
   its label here. */
.home-newsletter__form .form-terms__label input[type="checkbox"] {
    margin-top: 0.15rem;
}

/* --- Card grids: align the trailing action -------------------------------
   The cards already stretch to equal height (grid default), but their content
   does not fill them, so the closing link sat wherever the copy happened to
   end. On the careers openings that put the three "Apply now" buttons at
   940px, 613px and 613px - a 327px stagger inside cards whose bottoms were
   identical, which reads as uneven cards even though they are not.

   The card is already a flex column, so pushing its last child down puts every
   trailing action on the same baseline. This only bites when there is spare
   space, so cards whose content fills them are unaffected. */
.card-grid .card {
    display: flex;
    flex-direction: column;
}

.card-grid .card > :last-child {
    margin-top: auto;
}

/* The action needs breathing room once it is pushed away from the copy. */
.card-grid .card > :last-child:not(:only-child) {
    padding-top: 1rem;
}

/* --- Footer grid: column count -----------------------------------------
   The bundle pins an explicit five-track template built for
   brand / contact / newsletter / programs / impact. The newsletter block moved
   to the homepage, which left an empty track, and the footer now carries two
   further groups (About, Get Involved). Re-declare the tracks for the current
   six columns and let them collapse sensibly rather than squeezing. */
@media (min-width: 1100px) {
    .footer-grid {
        grid-template-columns: minmax(230px, 1.35fr) repeat(5, minmax(130px, 1fr));
    }
}

@media (min-width: 700px) and (max-width: 1099px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 420px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Warm palette tokens ------------------------------------------------
   The site had NO warm colour. The stylesheet defines --coral (#38BDF8),
   --sun (#7DD3FC) and --charcoal (#16324F), but all three hold blues, and
   --charcoal duplicates --navy exactly. So every accent on the site was
   another shade of one hue, which is why it reads flat regardless of layout.

   These are ADDED rather than reassigned: the bundle already uses --sun and
   --coral for blue accents (the homepage mission panel expects --sun to be
   pale blue on navy), so redefining them would silently change existing
   components. Renaming the mislabelled tokens properly needs a real Vite
   build, which this server cannot run. */
:root {
    /* Accent inks chosen for contrast, not by eye: #A9701F scored only 3.88:1
       on sand, below the 4.5:1 AA minimum for text this size. */
    --sand: #FBF6EE;
    --sand-ink: #8F5D14;
    --moss: #F0F7F4;
    --moss-ink: #2A7159;
}

/* --- About: audiences as alternating warm bands (Option C) --------------
   Replaces four bordered cards. Separation comes from the ground rather than
   a border, which is what lets the boxes go without the page turning to soup. */
.abt-audience-section {
    padding-bottom: 0;
}

.abt-audience-bands {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.abt-band {
    /* Full-bleed: the section is inside .container-bounded layout, so pull the
       band out to the viewport edge and let .container re-centre the content. */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.abt-band:nth-child(odd) {
    background: var(--sand);
}

.abt-band:nth-child(even) {
    background: var(--moss);
}

.abt-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: baseline;
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.abt-band__kicker {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.abt-band:nth-child(odd) .abt-band__kicker {
    color: var(--sand-ink);
}

.abt-band:nth-child(even) .abt-band__kicker {
    color: var(--moss-ink);
}

.abt-band__who h3 {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.35;
    color: var(--navy);
}

.abt-band__body {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

@media (max-width: 760px) {
    .abt-band__inner {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* --- Safeguarding / whistleblowing page --------------------------------
   The emergency notice is the loudest thing on the page on purpose. Someone
   arriving because a child is at immediate risk must not read a form first. */
.sg-urgent-section {
    padding-top: clamp(1.5rem, 3vw, 2rem);
    padding-bottom: 0;
}

.sg-urgent {
    background: #FDF3F1;
    border: 1px solid #E7BDB4;
    border-left: 5px solid #B3261E;
    border-radius: 14px;
    padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 1.9rem);
}

.sg-urgent h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: #8C1D18;
}

.sg-urgent p {
    margin: 0;
    color: #5F3A36;
    max-width: 78ch;
}

.sg-list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.sg-list li {
    position: relative;
    padding: 0.7rem 0 0.7rem 1.6rem;
    border-top: 1px solid rgba(22, 50, 79, 0.1);
    color: var(--muted);
}

.sg-list li:last-child {
    border-bottom: 1px solid rgba(22, 50, 79, 0.1);
}

.sg-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.15rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
}

.sg-routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: clamp(1rem, 3vw, 2.25rem);
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.sg-route {
    border-top: 3px solid var(--sand-ink);
    padding-top: 0.9rem;
}

.sg-route:nth-child(even) {
    border-top-color: var(--moss-ink);
}

.sg-route__k {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 0.4rem;
}

.sg-route p {
    margin: 0 0 0.6rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.sg-route__link {
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 2px solid rgba(37, 99, 168, 0.3);
    padding-bottom: 2px;
}

.sg-route__link:hover { border-bottom-color: var(--teal); }
.sg-route__link:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.sg-steps {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.sg-steps li {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(22, 50, 79, 0.12);
    align-items: baseline;
}

.sg-steps li:last-child { border-bottom: 1px solid rgba(22, 50, 79, 0.12); }

.sg-steps__n {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
}

.sg-steps__t { color: var(--muted); line-height: 1.6; }

.sg-retaliation {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    background: var(--white);
    border-left: 4px solid var(--moss-ink);
    border-radius: 0 10px 10px 0;
    color: var(--navy);
    font-weight: 600;
    max-width: 82ch;
}

.sg-received {
    background: #F0F7F4;
    border: 1px solid #BFDCD0;
    border-left: 5px solid var(--moss-ink);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.5rem;
}

.sg-received p { margin: 0 0 0.5rem; color: var(--navy); }
.sg-received p:last-child { margin-bottom: 0; color: var(--muted); font-size: 0.95rem; }

.sg-ref {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--white);
    border: 1px solid #BFDCD0;
    border-radius: 6px;
    padding: 0.15rem 0.55rem;
    color: var(--navy);
}

.sg-form { margin-top: 1.5rem; max-width: 900px; }
.sg-form .form-field { margin-bottom: 1.1rem; }
.sg-form textarea { width: 100%; }

.sg-identity {
    margin: 1.5rem 0;
    padding: 1.2rem 1.3rem;
    border: 1px solid rgba(22, 50, 79, 0.12);
    border-radius: 12px;
}

.sg-identity legend {
    padding: 0 0.5rem;
    font-weight: 800;
    color: var(--navy);
}

.sg-identity__note {
    margin: 0 0 0.9rem;
    color: var(--muted);
    font-size: 0.94rem;
    max-width: 74ch;
}

.sg-anon {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
}

.sg-anon input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--teal);
}

.sg-privacy {
    margin-top: 0.9rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.gov-report { max-width: 74ch; }
.gov-report h2 { margin-top: 0; }
.gov-report p { color: var(--muted); margin-bottom: 1.1rem; }