/*
 * Strictlydev - Components
 *
 * Every component reads the semantic tokens in tokens.css rather than the raw
 * palette, so placing any of them inside .sd-surface--navy or .sd-surface--mist
 * inverts them correctly without a modifier class.
 */

/* =================================================================
 * Logo lockup
 * The logo identifies; the wider system communicates sophistication.
 * Clear space of at least the symbol height is preserved by the padding
 * on .sd-logo (guidelines p.27).
 * ================================================================= */

.sd-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-space-3);
    text-decoration: none;
    color: inherit;
}

/*
 * Sized by HEIGHT, not width. The logo must render at least 60px tall on the
 * public site, and a width-driven rule would quietly break that floor if the
 * master artwork's aspect ratio ever changes.
 */
.sd-logo img {
    display: block;
    block-size: 3.75rem;   /* 60px - minimum permitted on public pages */
    inline-size: auto;
    max-inline-size: none;
}

/* The floor applies to the small variant too; it exists to reduce surrounding
 * space, not the mark itself. */
.sd-logo--sm img { block-size: 3.75rem; }
.sd-logo--lg img { block-size: 4.75rem; }

/*
 * Corporate descriptor. "Project Management & Advisory" is a descriptor,
 * not part of the logo artwork - so it is set in type beside the mark and
 * never composited into the image (guidelines p.26).
 */
.sd-logo__descriptor {
    display: none;
    padding-left: var(--sd-space-3);
    border-left: 1px solid var(--sd-border-strong);
    font-size: var(--sd-text-xs);
    font-weight: var(--sd-weight-medium);
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sd-text-meta);
    max-inline-size: 7rem;
}

.sd-logo--with-descriptor .sd-logo__descriptor { display: block; }

@media (max-width: 48rem) {
    .sd-logo--with-descriptor .sd-logo__descriptor { display: none; }
}

/*
 * Typographic corporate signature. The footer now carries the official
 * transparent logo artwork supplied with the production build, so this is kept
 * only for contexts where the mark itself would be too heavy.
 */
.sd-signature {
    font-size: var(--sd-size-h5);
    font-weight: var(--sd-weight-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sd-text);
}

.sd-signature span {
    font-weight: var(--sd-weight-regular);
    color: var(--sd-text-muted);
}

/* =================================================================
 * Buttons
 * ================================================================= */

.sd-btn {
    --_btn-bg: transparent;
    --_btn-fg: var(--sd-text);
    --_btn-border: var(--sd-border-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sd-space-2);
    padding: 0.75rem 1.5rem;
    min-block-size: 2.875rem;
    background-color: var(--_btn-bg);
    color: var(--_btn-fg);
    border: 1px solid var(--_btn-border);
    border-radius: var(--sd-radius-sm);
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--sd-duration-fast) var(--sd-ease),
        border-color var(--sd-duration-fast) var(--sd-ease),
        color var(--sd-duration-fast) var(--sd-ease),
        transform var(--sd-duration-fast) var(--sd-ease);
}

.sd-btn:hover { color: var(--_btn-fg); }
.sd-btn:active { transform: translateY(1px); }

.sd-btn[disabled],
.sd-btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/*
 * Primary CTA. The production spec assigns Brand Blue to the primary CTA.
 * White on Brand Blue is only 2.66:1, so the label is Deep Navy at 5.26:1 -
 * the specified brand colour, meeting the spec's own WCAG 2.2 AA target.
 * The reference build ships white-on-cyan at 2.05-3.24:1; that is not copied.
 */
.sd-btn--primary {
    --_btn-bg: var(--sd-cta-bg);
    --_btn-fg: var(--sd-cta-fg);
    --_btn-border: var(--sd-cta-bg);
}

.sd-btn--primary:hover {
    --_btn-bg: var(--sd-cta-bg-hover);
    --_btn-border: var(--sd-cta-bg-hover);
}

/* Navy alternative, for a CTA that must outrank a Brand Blue one beside it. */
.sd-btn--navy {
    --_btn-bg: var(--sd-deep-navy);
    --_btn-fg: var(--sd-white);
    --_btn-border: var(--sd-deep-navy);
}

.sd-btn--navy:hover {
    --_btn-bg: var(--sd-secondary-navy);
    --_btn-border: var(--sd-secondary-navy);
}

/* Secondary - outlined. */
.sd-btn--secondary {
    --_btn-bg: transparent;
    --_btn-fg: var(--sd-text);
    --_btn-border: var(--sd-border-strong);
}

.sd-btn--secondary:hover {
    --_btn-bg: var(--sd-surface-sunken);
    --_btn-border: var(--sd-text);
}

.sd-surface--navy .sd-btn--secondary:hover {
    --_btn-bg: rgba(248, 248, 246, 0.08);
}

/* Ghost - text-level action, carries a link affordance. */
.sd-btn--ghost {
    --_btn-bg: transparent;
    --_btn-fg: var(--sd-link);
    --_btn-border: transparent;
    padding-inline: var(--sd-space-2);
}

.sd-btn--ghost:hover {
    --_btn-fg: var(--sd-link-hover);
    --_btn-bg: var(--sd-surface-sunken);
}

.sd-btn--lg {
    padding: 1rem 2rem;
    min-block-size: 3.25rem;
    font-size: var(--sd-text-base);
}

.sd-btn--sm {
    padding: 0.5rem 1rem;
    min-block-size: 2.25rem;
    font-size: var(--sd-text-xs);
}

.sd-btn--block { display: flex; inline-size: 100%; }

/*
 * Arrow link - the standard "read on" affordance. The arrow advances on
 * hover, echoing the directional character of the Structured Flow language.
 */
.sd-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-space-2);
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-semibold);
    text-decoration: none;
    color: var(--sd-link);
}

.sd-arrow-link::after {
    content: '';
    inline-size: 1.125rem;
    block-size: 0.5rem;
    flex: none;
    background-color: currentColor;
    clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
    transition: transform var(--sd-duration) var(--sd-ease);
}

.sd-arrow-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.sd-arrow-link:hover::after { transform: translateX(0.25rem); }

/* =================================================================
 * Site header
 * ================================================================= */

.sd-site-header {
    position: sticky;
    top: 0;
    z-index: var(--sd-z-header);
    background-color: var(--sd-white);
    border-bottom: 1px solid var(--sd-border);
}

.sd-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sd-space-6);
    min-block-size: var(--sd-header-h);
}

.sd-nav {
    display: flex;
    align-items: center;
    gap: var(--sd-space-6);
}

.sd-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sd-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-nav__link {
    position: relative;
    display: block;
    padding-block: var(--sd-space-2);
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-medium);
    text-decoration: none;
    color: var(--sd-body);
    white-space: nowrap;
}

.sd-nav__link:hover { color: var(--sd-deep-navy); }

.sd-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    inline-size: 100%;
    block-size: 2px;
    background-color: var(--sd-brand-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sd-duration) var(--sd-ease);
}

.sd-nav__link:hover::after { transform: scaleX(1); }

.sd-nav__link[aria-current='page'] {
    color: var(--sd-deep-navy);
    font-weight: var(--sd-weight-semibold);
}

.sd-nav__link[aria-current='page']::after { transform: scaleX(1); }

.sd-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius-sm);
    cursor: pointer;
}

.sd-nav-toggle__bars,
.sd-nav-toggle__bars::before,
.sd-nav-toggle__bars::after {
    display: block;
    inline-size: 1.125rem;
    block-size: 2px;
    background-color: var(--sd-deep-navy);
    transition: transform var(--sd-duration) var(--sd-ease),
                opacity var(--sd-duration-fast) var(--sd-ease);
}

.sd-nav-toggle__bars::before,
.sd-nav-toggle__bars::after {
    content: '';
    position: relative;
}

.sd-nav-toggle__bars::before { top: -6px; }
.sd-nav-toggle__bars::after { top: 4px; }

.sd-nav-toggle[aria-expanded='true'] .sd-nav-toggle__bars { background-color: transparent; }
.sd-nav-toggle[aria-expanded='true'] .sd-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.sd-nav-toggle[aria-expanded='true'] .sd-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 64rem) {
    .sd-nav-toggle { display: inline-flex; }

    .sd-nav {
        position: fixed;
        inset: var(--sd-header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--sd-space-4) var(--sd-gutter) var(--sd-space-8);
        background-color: var(--sd-white);
        border-bottom: 1px solid var(--sd-border);
        box-shadow: var(--sd-shadow-md);
        max-block-size: calc(100vh - var(--sd-header-h));
        overflow-y: auto;
    }

    .sd-nav[hidden] { display: none; }

    .sd-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .sd-nav__list > li + li { border-top: 1px solid var(--sd-border); }

    .sd-nav__link {
        padding-block: var(--sd-space-4);
        font-size: var(--sd-text-base);
    }

    .sd-nav__link::after { display: none; }

    .sd-nav__cta {
        margin-block-start: var(--sd-space-6);
    }

    .sd-nav__cta .sd-btn { inline-size: 100%; }
}

/* =================================================================
 * Site footer
 * ================================================================= */

.sd-site-footer {
    padding-block: var(--sd-space-16) var(--sd-space-8);
    background-color: #F6F9FB;
    border-top: 1px solid var(--sd-border);
    color: var(--sd-text);
}

.sd-site-footer__grid {
    display: grid;
    gap: var(--sd-space-10);
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}

@media (max-width: 64rem) {
    .sd-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
    .sd-site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.sd-footer-nav {
    display: grid;
    gap: var(--sd-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-footer-nav a {
    font-size: var(--sd-text-sm);
    text-decoration: none;
    color: var(--sd-text-muted);
}

.sd-footer-nav a:hover {
    color: var(--sd-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.sd-site-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sd-space-4);
    margin-block-start: var(--sd-space-12);
    padding-block-start: var(--sd-space-6);
    border-top: 1px solid var(--sd-border);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-meta);
}

/* =================================================================
 * Card
 * ================================================================= */

.sd-card {
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-3);
    padding: var(--sd-space-8);
    background-color: var(--sd-surface-raised);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-lg);
    transition: border-color var(--sd-duration) var(--sd-ease),
                box-shadow var(--sd-duration) var(--sd-ease),
                transform var(--sd-duration) var(--sd-ease);
}

.sd-card > p { max-inline-size: none; }

.sd-card__title {
    font-size: var(--sd-size-h4);
    font-weight: var(--sd-weight-semibold);
}

.sd-card__body {
    color: var(--sd-text-muted);
    flex: 1 1 auto;
}

.sd-card__footer {
    margin-block-start: var(--sd-space-4);
}

/* Interactive card - the whole card is the target via a stretched link. */
.sd-card--link { position: relative; }

.sd-card--link:hover {
    border-color: var(--sd-border-strong);
    box-shadow: var(--sd-shadow-md);
    transform: translateY(-2px);
}

.sd-card--link:focus-within {
    outline: 2px solid var(--sd-focus);
    outline-offset: 3px;
}

.sd-card__stretch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.sd-card__stretch:focus-visible { outline: none; }

/*
 * Accent-bar card. The coloured spine is the "Who we serve" treatment from
 * the guidelines: blue for the recognition categories, warm accent used
 * selectively for the third.
 */
.sd-card--barred {
    position: relative;
    padding-left: calc(var(--sd-space-8) + 6px);
    overflow: hidden;
}

.sd-card--barred::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    inline-size: 6px;
    background-color: var(--sd-brand-blue);
}

.sd-card--bar-cyan::before { background-color: #7FD8F7; }
.sd-card--bar-blue::before { background-color: var(--sd-brand-blue); }
.sd-card--bar-deep::before { background-color: var(--sd-secondary-navy); }
.sd-card--bar-ink::before { background-color: var(--sd-deep-navy); }
.sd-card--bar-accent::before { background-color: var(--sd-warm); }

.sd-surface--navy .sd-card--bar-ink::before { background-color: var(--sd-white); }

/* Numbered card - for ordered sets such as the four differentiators. */
.sd-card__index {
    font-size: var(--sd-text-xs);
    font-weight: var(--sd-weight-semibold);
    letter-spacing: var(--sd-tracking-caps);
    color: var(--sd-text-meta);
    font-variant-numeric: tabular-nums;
}

/* =================================================================
 * Statement - the boxed principal line used throughout the guidelines.
 * One per section at most; it carries the argument, not decoration.
 * ================================================================= */

.sd-statement {
    position: relative;
    padding: var(--sd-space-8) var(--sd-space-10);
    background-color: var(--sd-surface-sunken);
    border-left: 4px solid var(--sd-brand-blue);
    border-radius: 0 var(--sd-radius-md) var(--sd-radius-md) 0;
}

.sd-statement p,
.sd-statement blockquote {
    font-size: var(--sd-size-h3);
    font-weight: var(--sd-weight-semibold);
    line-height: var(--sd-leading-snug);
    letter-spacing: var(--sd-tracking-heading);
    max-inline-size: 34ch;
}

.sd-statement--accent { border-left-color: var(--sd-warm); }

.sd-statement--plain {
    background-color: transparent;
    padding-inline: var(--sd-space-8);
}

.sd-statement__attribution {
    margin-block-start: var(--sd-space-4);
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-regular);
    color: var(--sd-text-meta);
}

/* =================================================================
 * The Strictlydev Way - stage flow
 * Understand -> Challenge -> Design -> Deliver -> Improve
 * Colour progression matches the brand diagram: the blue family carries
 * the thinking stages, Ink carries delivery, the warm accent carries
 * improvement.
 * ================================================================= */

.sd-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--sd-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sd-flow;
}

.sd-flow__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-2);
    padding: var(--sd-space-6);
    background-color: var(--sd-surface-raised);
    border: 2px solid var(--sd-brand-blue);
    border-radius: var(--sd-radius-lg);
}

.sd-flow__step:nth-child(1) { border-color: #7FD8F7; }
.sd-flow__step:nth-child(2) { border-color: var(--sd-brand-blue); }
.sd-flow__step:nth-child(3) { border-color: var(--sd-secondary-navy); }
.sd-flow__step:nth-child(4) { border-color: var(--sd-deep-navy); }
.sd-flow__step:nth-child(5) { border-color: var(--sd-warm); }

.sd-surface--navy .sd-flow__step:nth-child(4) { border-color: var(--sd-white); }

.sd-flow__name {
    font-size: var(--sd-size-h5);
    font-weight: var(--sd-weight-bold);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.sd-flow__note {
    font-size: var(--sd-text-sm);
    color: var(--sd-text-muted);
}

/* Connector between steps. Hidden on the last step and when wrapped. */
.sd-flow__step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--sd-space-4) * -1);
    inline-size: var(--sd-space-4);
    block-size: 0.5rem;
    transform: translateY(-50%);
    background-color: var(--sd-graphic-neutral);
    clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%);
}

.sd-flow__step:last-child::after { display: none; }

@media (max-width: 40rem) {
    .sd-flow__step::after { display: none; }
}

/* =================================================================
 * Structured Flow motif
 * Complex inputs converging into one outcome. Rendered as inline SVG in
 * the markup; this sizes and paints it. Never a decorative node network.
 * ================================================================= */

.sd-structured-flow {
    inline-size: 100%;
    block-size: auto;
}

.sd-structured-flow .sd-sf-path {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.sd-structured-flow .sd-sf-path--1 { stroke: #7FD8F7; }
.sd-structured-flow .sd-sf-path--2 { stroke: var(--sd-brand-blue); }
.sd-structured-flow .sd-sf-path--3 { stroke: var(--sd-secondary-navy); }
.sd-structured-flow .sd-sf-path--neutral { stroke: var(--sd-graphic-neutral); }
.sd-structured-flow .sd-sf-path--accent { stroke: var(--sd-warm); }

.sd-structured-flow .sd-sf-label {
    font-family: var(--sd-font);
    font-size: 17px;
    font-weight: var(--sd-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    fill: var(--sd-text-meta);
}

.sd-structured-flow .sd-sf-outcome-box { fill: var(--sd-deep-navy); }
.sd-structured-flow .sd-sf-outcome-label {
    font-family: var(--sd-font);
    font-size: 21px;
    font-weight: var(--sd-weight-bold);
    letter-spacing: 0.06em;
    fill: var(--sd-white);
}

.sd-surface--navy .sd-structured-flow .sd-sf-outcome-box { fill: var(--sd-white); }
.sd-surface--navy .sd-structured-flow .sd-sf-outcome-label { fill: var(--sd-deep-navy); }

/* =================================================================
 * Metrics / evidence
 * ================================================================= */

.sd-stat {
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-2);
    padding-block: var(--sd-space-2);
    border-top: 2px solid var(--sd-brand-blue);
    padding-block-start: var(--sd-space-4);
}

.sd-stat__label {
    font-size: var(--sd-text-sm);
    color: var(--sd-text-muted);
    max-inline-size: 28ch;
}

/* =================================================================
 * Definition table - the guidelines lean heavily on two-column tables
 * that pair a term with its approved expression.
 * ================================================================= */

.sd-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sd-table {
    inline-size: 100%;
    border-collapse: collapse;
    text-align: left;
}

.sd-table th,
.sd-table td {
    padding: var(--sd-space-4) var(--sd-space-4);
    border-bottom: 1px solid var(--sd-border);
    vertical-align: top;
}

.sd-table th {
    font-size: var(--sd-text-xs);
    font-weight: var(--sd-weight-semibold);
    letter-spacing: var(--sd-tracking-caps);
    text-transform: uppercase;
    color: var(--sd-text-meta);
    white-space: nowrap;
}

.sd-table thead th { border-bottom: 2px solid var(--sd-deep-navy); }

.sd-table tbody th {
    font-size: var(--sd-text-base);
    font-weight: var(--sd-weight-semibold);
    letter-spacing: var(--sd-tracking-body);
    text-transform: none;
    color: var(--sd-text);
    white-space: normal;
    inline-size: 30%;
}

.sd-table td { color: var(--sd-text-muted); }

.sd-table--numeric td { font-variant-numeric: tabular-nums; }

/* =================================================================
 * Badge / tag
 * ================================================================= */

.sd-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-space-2);
    padding: 0.25rem 0.625rem;
    background-color: var(--sd-surface-sunken);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-sm);
    font-size: var(--sd-text-xs);
    font-weight: var(--sd-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sd-text-muted);
    white-space: nowrap;
}

.sd-badge--accent {
    background-color: rgba(185, 132, 47, 0.1);
    border-color: rgba(185, 132, 47, 0.35);
    color: var(--sd-warm-700);
}

.sd-badge--blue {
    background-color: rgba(36, 173, 216, 0.1);
    border-color: rgba(36, 173, 216, 0.4);
    color: var(--sd-blue-700);
}

.sd-surface--navy .sd-badge--blue {
    background-color: rgba(67, 199, 244, 0.12);
    color: var(--sd-graphic-2);
}

/* =================================================================
 * Breadcrumb
 * ================================================================= */

.sd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sd-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--sd-text-sm);
    color: var(--sd-text-meta);
}

.sd-breadcrumb li + li::before {
    content: '/';
    margin-right: var(--sd-space-2);
    color: var(--sd-border-strong);
}

.sd-breadcrumb a { color: var(--sd-text-muted); text-decoration: none; }
.sd-breadcrumb a:hover { color: var(--sd-text); text-decoration: underline; }

/* =================================================================
 * Forms
 * ================================================================= */

.sd-field {
    display: grid;
    gap: var(--sd-space-2);
    margin-block-end: var(--sd-space-6);
}

.sd-field > label {
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-semibold);
    color: var(--sd-text);
}

.sd-field__hint {
    font-size: var(--sd-text-sm);
    color: var(--sd-text-meta);
}

.sd-input,
.sd-textarea,
.sd-select {
    inline-size: 100%;
    padding: 0.75rem 1rem;
    min-block-size: 2.875rem;
    background-color: var(--sd-surface-raised);
    color: var(--sd-text);
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius-sm);
    font-size: var(--sd-text-base);
    transition: border-color var(--sd-duration-fast) var(--sd-ease),
                box-shadow var(--sd-duration-fast) var(--sd-ease);
}

.sd-input::placeholder,
.sd-textarea::placeholder { color: var(--sd-text-meta); }

.sd-input:focus,
.sd-textarea:focus,
.sd-select:focus {
    outline: none;
    border-color: var(--sd-blue-700);
    box-shadow: 0 0 0 3px rgba(23, 109, 136, 0.18);
}

.sd-textarea {
    min-block-size: 9rem;
    line-height: var(--sd-leading-body);
    resize: vertical;
}

.sd-select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.125rem) 55%, calc(100% - 0.75rem) 55%;
    background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
    background-repeat: no-repeat;
}

.sd-field--error .sd-input,
.sd-field--error .sd-textarea,
.sd-field--error .sd-select {
    border-color: #B3261E;
}

.sd-field__error {
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-medium);
    color: #8C1D18;
}

.sd-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--sd-space-3);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-muted);
}

.sd-checkbox input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0.2rem 0 0;
    accent-color: var(--sd-blue-700);
    flex: none;
}

/* =================================================================
 * Flash messages
 * ================================================================= */

.sd-flash {
    display: flex;
    gap: var(--sd-space-3);
    padding: var(--sd-space-4) var(--sd-space-5);
    margin-block-end: var(--sd-space-6);
    border: 1px solid var(--sd-border-strong);
    border-left-width: 4px;
    border-radius: var(--sd-radius-sm);
    background-color: var(--sd-surface-raised);
    font-size: var(--sd-text-sm);
}

.sd-flash--success { border-left-color: #1E7A46; }
.sd-flash--error { border-left-color: #B3261E; }
.sd-flash--warning { border-left-color: var(--sd-warm); }
.sd-flash--info { border-left-color: var(--sd-brand-blue); }

/* =================================================================
 * CTA band - "Discuss a Project"
 * ================================================================= */

.sd-cta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sd-space-8);
    padding: var(--sd-space-12);
    background: linear-gradient(135deg, var(--sd-light-blue), #F9FCFE);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-xl);
    overflow: hidden;
}

/* Decorative flow mark, bottom-right, as in the reference build. */
.sd-cta::after {
    content: '';
    position: absolute;
    inset: auto -5.5rem -10rem auto;
    inline-size: 31rem;
    block-size: 27rem;
    background: url('../../img/brand/structured-flow.svg') no-repeat center / contain;
    opacity: 0.45;
    pointer-events: none;
}

.sd-cta > * { position: relative; z-index: var(--sd-z-base); }

.sd-cta__body { max-inline-size: 46ch; }

.sd-cta__title {
    font-size: var(--sd-size-h2);
    font-weight: var(--sd-weight-bold);
    letter-spacing: var(--sd-tracking-heading);
}

/* =================================================================
 * Hero
 * The principal statement of a page. Defaults to an Ink surface, which is
 * the one context where the brand blue family reads at full contrast and
 * where the Structured Flow motif has the most force.
 * ================================================================= */

.sd-hero {
    position: relative;
    padding-block: clamp(4rem, 2.6rem + 5.6vw, 7rem);
    background: linear-gradient(135deg, #FBFDFF 0%, #F3F9FC 55%, var(--sd-white) 100%);
    border-bottom: 1px solid var(--sd-border);
    color: var(--sd-text);
    overflow: hidden;
}

/*
 * Structured Flow as a background device. Decorative only, so it is applied
 * through CSS and never reaches assistive technology (production spec s.11).
 */
.sd-hero::after,
.sd-page-header::after {
    content: '';
    position: absolute;
    right: -8%;
    top: -30%;
    inline-size: 40rem;
    block-size: 38rem;
    background: url('../../img/brand/structured-flow.svg') no-repeat center / contain;
    opacity: 0.35;
    pointer-events: none;
}

.sd-hero > *,
.sd-page-header > * {
    position: relative;
    z-index: var(--sd-z-base);
}

/* The flow device is a light-surface treatment; suppress it on navy. */
.sd-surface--navy.sd-hero::after,
.sd-surface--navy.sd-page-header::after { display: none; }

.sd-hero__inner {
    display: grid;
    gap: var(--sd-space-12);
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
}

.sd-hero--stacked .sd-hero__inner { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 64rem) {
    .sd-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sd-space-10);
    }
}

.sd-hero__body > * + * { margin-block-start: var(--sd-space-6); }

.sd-hero__title {
    font-size: var(--sd-size-display);
    font-weight: var(--sd-weight-bold);
    line-height: var(--sd-leading-display);
    letter-spacing: var(--sd-tracking-display);
    max-inline-size: 18ch;
}

.sd-hero__lead {
    font-size: var(--sd-text-lead);
    line-height: var(--sd-leading-snug);
    color: var(--sd-text-muted);
    max-inline-size: 52ch;
}

.sd-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sd-space-4);
}

/*
 * Page header for interior pages. Lighter than the hero: the page title
 * carries the claim, the standfirst states what the reader will get.
 */
.sd-page-header {
    position: relative;
    padding-block: clamp(3rem, 2.2rem + 3.2vw, 5.25rem);
    background: linear-gradient(135deg, #FBFDFF, #EDF8FD);
    border-bottom: 1px solid var(--sd-border);
    overflow: hidden;
}

.sd-page-header.sd-surface--mist {
    background: linear-gradient(135deg, #FBFDFF, #EDF8FD);
}

.sd-page-header__inner > * + * { margin-block-start: var(--sd-space-4); }

.sd-page-header__title { max-inline-size: 22ch; }

.sd-page-header__lead {
    font-size: var(--sd-text-lead);
    line-height: var(--sd-leading-snug);
    color: var(--sd-text-muted);
    max-inline-size: 58ch;
}

/* =================================================================
 * Stat band - verified firm metrics.
 * "Make important metrics prominent" (guidelines p.29). Each figure sits
 * under a Deep Blue rule so the row reads as evidence, not decoration.
 * ================================================================= */

.sd-stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--sd-space-8);
    margin: 0;
    padding: 0;
}

.sd-stat-band > div {
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-2);
    padding-block-start: var(--sd-space-4);
    border-top: 2px solid var(--sd-brand-blue);
}

.sd-stat-band dt {
    font-size: clamp(2rem, 1.6rem + 1.8vw, 2.875rem);
    font-weight: var(--sd-weight-bold);
    line-height: 1;
    letter-spacing: var(--sd-tracking-display);
    font-variant-numeric: tabular-nums;
}

.sd-stat-band dd {
    margin: 0;
    font-size: var(--sd-text-sm);
    color: var(--sd-text-muted);
    max-inline-size: 26ch;
}

/* =================================================================
 * Case-study card - challenge / role / outcome.
 * Evidence sits close to the claim it supports (guidelines p.33).
 * ================================================================= */

.sd-case-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-4);
    padding: var(--sd-space-8);
    background-color: var(--sd-surface-raised);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-lg);
    transition: border-color var(--sd-duration) var(--sd-ease),
                box-shadow var(--sd-duration) var(--sd-ease);
}

.sd-case-card:hover {
    border-color: var(--sd-border-strong);
    box-shadow: var(--sd-shadow-md);
}

.sd-case-card__title {
    font-size: var(--sd-size-h4);
    font-weight: var(--sd-weight-semibold);
    max-inline-size: 28ch;
}

.sd-case-card__title a {
    color: inherit;
    text-decoration: none;
}

.sd-case-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.sd-case-card__rows {
    display: grid;
    gap: var(--sd-space-3);
    margin: 0;
}

.sd-case-card__rows > div {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--sd-space-4);
    align-items: baseline;
}

.sd-case-card__rows dt {
    font-size: var(--sd-text-xs);
    font-weight: var(--sd-weight-semibold);
    letter-spacing: var(--sd-tracking-caps);
    text-transform: uppercase;
    color: var(--sd-text-meta);
}

.sd-case-card__rows dd {
    margin: 0;
    font-size: var(--sd-text-sm);
    color: var(--sd-text-muted);
}

/* The outcome is the point of the card, so it is set in the text colour. */
.sd-case-card__rows .sd-case-card__outcome {
    color: var(--sd-text);
    font-weight: var(--sd-weight-medium);
}

@media (max-width: 40rem) {
    .sd-case-card__rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--sd-space-1); }
}

/* =================================================================
 * Insight card - category / title / reading time.
 * Editorial rather than social-media styling (strategy doc, Insights).
 * ================================================================= */

.sd-insight-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-3);
    padding-block: var(--sd-space-6);
    border-top: 1px solid var(--sd-border);
}

.sd-insight-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sd-space-3);
    font-size: var(--sd-text-xs);
    font-weight: var(--sd-weight-semibold);
    letter-spacing: var(--sd-tracking-caps);
    text-transform: uppercase;
    color: var(--sd-text-meta);
}

.sd-insight-card__meta .sd-insight-card__pillar { color: var(--sd-blue-700); }

.sd-surface--navy .sd-insight-card__meta .sd-insight-card__pillar { color: var(--sd-graphic-2); }

.sd-insight-card__title {
    font-size: var(--sd-size-h4);
    font-weight: var(--sd-weight-semibold);
    max-inline-size: 30ch;
}

.sd-insight-card__title a {
    color: inherit;
    text-decoration: none;
}

.sd-insight-card__title a:hover { color: var(--sd-link); }

.sd-insight-card__standfirst {
    font-size: var(--sd-text-sm);
    color: var(--sd-text-muted);
}

/* =================================================================
 * Article - long-form Insight body.
 * "Editorial, publication-style layout rather than social-media cards
 * everywhere" (strategy doc, Insights). Measure is held near 70 characters,
 * which the production spec puts at 60-75.
 * ================================================================= */

.sd-article {
    max-inline-size: 48.75rem;
    margin-inline: auto;
}

.sd-article > * + * { margin-block-start: var(--sd-space-6); }

.sd-article p {
    font-size: 1.125rem;
    line-height: 1.7;
    max-inline-size: none;
}

.sd-article h2 {
    font-size: var(--sd-size-h3);
    margin-block-start: var(--sd-space-12);
}

.sd-article h3 {
    font-size: var(--sd-size-h4);
    margin-block-start: var(--sd-space-8);
}

.sd-article blockquote {
    font-size: var(--sd-size-h4);
    font-weight: var(--sd-weight-semibold);
    line-height: var(--sd-leading-snug);
    color: var(--sd-heading);
    border-left: 4px solid var(--sd-brand-blue);
    padding-left: var(--sd-space-6);
    margin-block: var(--sd-space-10);
}

/*
 * Author / date / read time. Separated by spacing rather than inserted glyphs:
 * a pseudo-element separator becomes a stray leading bullet whenever the row
 * wraps, which it does on narrow screens.
 */
.sd-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sd-space-2) var(--sd-space-6);
    margin-block-start: var(--sd-space-6);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-meta);
}

.sd-article-meta > * {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.sd-article-figure {
    inline-size: 100%;
    max-block-size: 30rem;
    object-fit: cover;
    border-radius: var(--sd-radius-xl);
    border: 1px solid var(--sd-border);
}

.sd-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sd-space-3);
    margin-block-start: var(--sd-space-12);
    padding-block-start: var(--sd-space-6);
    border-top: 1px solid var(--sd-border);
}

.sd-share .sd-label { margin-right: var(--sd-space-2); }

/* =================================================================
 * Pathway - the Strictlydev Way as one continuous flow.
 * The strategy document is explicit that the five stages should read as a
 * continuous Structured Flow rather than five disconnected boxes, so the
 * markers are joined by an unbroken line that carries the brand gradient.
 * ================================================================= */

.sd-pathway {
    display: grid;
    gap: var(--sd-space-10);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sd-pathway;
}

.sd-pathway__stage {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--sd-space-6);
    counter-increment: sd-pathway;
}

/* The connecting line, drawn behind each marker and stopping at the last. */
.sd-pathway__stage::before {
    content: '';
    position: absolute;
    left: 1.4375rem;
    top: 3rem;
    bottom: calc(var(--sd-space-10) * -1);
    inline-size: 2px;
    background: linear-gradient(to bottom, var(--sd-brand-blue), var(--sd-brand-blue));
}

.sd-pathway__stage:last-child::before { display: none; }

.sd-pathway__marker {
    position: relative;
    z-index: var(--sd-z-base);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--sd-radius-pill);
    background-color: var(--sd-surface);
    border: 2px solid var(--sd-brand-blue);
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--sd-text);
}

.sd-pathway__stage:last-child .sd-pathway__marker { border-color: var(--sd-warm); }

.sd-pathway__body > * + * { margin-block-start: var(--sd-space-3); }

.sd-pathway__name {
    font-size: var(--sd-size-h4);
    font-weight: var(--sd-weight-bold);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

@media (max-width: 40rem) {
    .sd-pathway__stage {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: var(--sd-space-4);
    }

    .sd-pathway__marker { inline-size: 2.5rem; block-size: 2.5rem; }
    .sd-pathway__stage::before { left: 1.1875rem; top: 2.5rem; }
}

/* =================================================================
 * Practice module - capability listing with client problems and services.
 * ================================================================= */

.sd-practice {
    padding-block: var(--sd-space-12);
    border-top: 1px solid var(--sd-border);
}

.sd-practice__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sd-space-12);
    align-items: start;
}

@media (max-width: 60rem) {
    .sd-practice__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sd-space-8); }
}

.sd-practice__head > * + * { margin-block-start: var(--sd-space-4); }

.sd-practice__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--sd-space-8);
}

/* Compact service list - two columns of short items, no bullets competing. */
.sd-service-list {
    display: grid;
    gap: var(--sd-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--sd-text-sm);
    color: var(--sd-text-muted);
}

.sd-service-list > li {
    padding-block: var(--sd-space-1);
    border-bottom: 1px solid var(--sd-border);
}

/* =================================================================
 * Navigation dropdown - Capabilities children.
 * ================================================================= */

.sd-nav__item { position: relative; }

.sd-nav__disclosure {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-space-2);
    padding: var(--sd-space-2) 0;
    background: none;
    border: 0;
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-medium);
    color: var(--sd-body);
    cursor: pointer;
    white-space: nowrap;
}

.sd-nav__disclosure:hover { color: var(--sd-deep-navy); }

.sd-nav__disclosure::after {
    content: '';
    inline-size: 0.5rem;
    block-size: 0.3125rem;
    background-color: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform var(--sd-duration) var(--sd-ease);
}

.sd-nav__disclosure[aria-expanded='true']::after { transform: rotate(180deg); }

.sd-nav__submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-nav__submenu a {
    display: block;
    font-size: var(--sd-text-sm);
    text-decoration: none;
    color: var(--sd-body);
}

.sd-nav__submenu a:hover { color: var(--sd-deep-navy); }

@media (min-width: 64.0625rem) {
    .sd-nav__submenu {
        position: absolute;
        top: calc(100% + var(--sd-space-3));
        left: calc(var(--sd-space-5) * -1);
        z-index: var(--sd-z-overlay);
        min-inline-size: 17rem;
        padding: var(--sd-space-3);
        background-color: var(--sd-white);
        border: 1px solid var(--sd-border);
        border-radius: var(--sd-radius-md);
        box-shadow: var(--sd-shadow-lg);
    }

    .sd-nav__submenu[hidden] { display: none; }

    .sd-nav__submenu a {
        padding: var(--sd-space-3);
        border-radius: var(--sd-radius-sm);
    }

    .sd-nav__submenu a:hover { background-color: var(--sd-mist); }
}

@media (max-width: 64rem) {
    .sd-nav__disclosure {
        inline-size: 100%;
        justify-content: space-between;
        padding-block: var(--sd-space-4);
        font-size: var(--sd-text-base);
    }

    /* The drawer is already a disclosure; keep every capability reachable. */
    .sd-nav__submenu {
        padding-block-end: var(--sd-space-4);
        padding-inline-start: var(--sd-space-4);
        border-left: 2px solid var(--sd-border);
        margin-block-end: var(--sd-space-2);
    }

    .sd-nav__submenu a { padding-block: var(--sd-space-3); }
}

/* =================================================================
 * Pagination
 * ================================================================= */

.sd-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sd-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-pagination a,
.sd-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.5rem;
    min-block-size: 2.5rem;
    padding-inline: var(--sd-space-3);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-sm);
    font-size: var(--sd-text-sm);
    font-weight: var(--sd-weight-medium);
    text-decoration: none;
    color: var(--sd-text-muted);
}

.sd-pagination a:hover {
    border-color: var(--sd-border-strong);
    color: var(--sd-text);
}

.sd-pagination .current span,
.sd-pagination .current a {
    background-color: var(--sd-deep-navy);
    border-color: var(--sd-deep-navy);
    color: var(--sd-white);
}

/* Footer social list. Inline row rather than the stacked footer nav, because
   it is a short list of outbound profiles, not site navigation. */
.sd-footer-social{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:0.5rem}
.sd-footer-social li{margin:0}