:root { --display: 'Oswald', Arial, sans-serif; }

.title-xl,
.title-l,
.title { margin: 0; }

/* Oswald is the display face from the approved visual system; Source Code stays the interface face. */
.title-xl,
.title-l,
.title,
.code-card h3,
.project-card__meta h3 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: .96;
}

.brand__wordmark {
    width: 138px;
    height: 32px;
    object-fit: contain;
}

.brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 35px;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.brand__mark img {
    width: 30px;
    height: 35px;
    object-fit: contain;
}

.button--accent {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    color: var(--ink);
    font-weight: 650;
    box-shadow: 4px 4px 0 var(--ink);
}

.button--accent:hover {
    background: var(--wine);
    border-color: var(--wine);
    color: var(--paper);
    box-shadow: none;
}

.header__contact {
    min-height: 45px;
    margin-left: 25px;
    padding: 0 18px !important;
    border: 1px solid var(--blue-deep) !important;
    white-space: nowrap;
}

.contact-form__notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid currentColor;
    font-size: 12px;
    line-height: 1.35;
}

.contact-form__notice--success { color: #315d52; }
.contact-form__notice--error { color: var(--wine); }
.contact-form [type="submit"]:disabled { cursor: wait; opacity: .65; }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.portfolio-image-block {
    width: 100%;
    margin: 0 auto;
}

.portfolio-image-block figcaption {
    margin: 13px 0 0 var(--side);
}

/* Portfolio blocks use one stable rhythm without collapsing outer margins. */
.portfolio-project-page > .section {
    padding: clamp(48px, 4vw, 64px) 0;
    border-top: 0;
}

.portfolio-project-page > .section + .section {
    margin-top: 0;
}

.portfolio-project-page > .section--blue {
    padding: clamp(48px, 4vw, 64px) 0;
}

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

.portfolio-gallery__item { margin: 0; }

.portfolio-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Keep copy and the door image on clearly separated desktop planes. */
@media (min-width: 761px) {
    .home-hero__media { inset: 0 0 0 43%; }

    .home-hero__media img { object-position: center; }

    .home-hero__content {
        width: 46%;
        max-width: 560px;
        margin-left: var(--side);
        margin-right: 0;
    }

    .home-hero:before {
        background: linear-gradient(90deg, rgba(30, 50, 67, .33), rgba(30, 50, 67, .08) 63%, rgba(30, 50, 67, 0));
    }

    .section--bundle .bundle > :first-child {
        transform: translateY(-55px);
    }
}

.ribbon--home-collage {
    height: clamp(125px, 12.5vw, 210px);
}

.ribbon--home-collage img {
    object-position: center;
}

.ribbon--service {
    height: clamp(400px, 34vw, 580px);
    background: var(--blue);
}

.ribbon--service img {
    opacity: 1;
    object-position: center;
}

.ribbon--service + .section {
    padding-top: 32px;
}

@media (max-width: 760px) {
    .ribbon--service {
        height: 290px;
    }

    .ribbon--service + .section {
        padding-top: 36px;
    }
}

.code-map__line {
    grid-template-columns: 1fr minmax(260px, 2fr) 1fr;
}

.code-map__line b {
    justify-self: center;
    text-align: center;
}

.code-map__line { cursor: pointer; }
.code-map__line:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 4px; }

/* Footer labels remain muted, while meeting the minimum readable contrast on paper. */
.site-footer .footer__label {
    color: var(--ink);
    font-weight: 600;
    opacity: 1;
}

/* A permanent divider avoids a JavaScript layout update on every scroll. */
.site-header { border-bottom-color: var(--line); }

/* Align supporting copy to the visual centre of each heading instead of its baseline. */
.manifesto,
.page-hero__grid {
    align-items: center;
}

.manifesto {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: min(10vw, 140px);
}

.page-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
}

.page-hero__grid .lead {
    justify-self: start;
    margin: 0;
    max-width: 500px;
}

.service-quote {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.04;
}

.service-group h3 {
    margin-bottom: 24px;
    font-size: 20px;
}

.service-list {
    gap: 17px;
}

.service-list li {
    grid-template-columns: 82px 1fr;
    gap: 16px;
    font-size: 15px;
    line-height: 1.5;
}

.service-list b {
    font-size: 12px;
}

.service-list strong {
    margin-bottom: 5px;
    font-size: 13px;
}

/* The cutout remains visible against the blue field thanks to an offset soft shadow. */
.bundle__image--cutout {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 560px;
    overflow: visible;
}

.section--bundle {
    padding-bottom: 0;
}

.bundle__image--cutout img {
    width: auto;
    height: min(47vw, 610px);
    max-width: 125%;
    object-fit: contain;
    filter: drop-shadow(19px 24px 22px rgba(21, 35, 48, .32));
}

@media (max-width: 760px) {
    .portfolio-gallery { grid-template-columns: 1fr; }
    .header__contact { display: none; }
    .brand__wordmark { width: 112px; height: 28px; }
    .home-hero__media { inset: 0; }
    .home-hero__content {
        width: min(calc(100% - var(--side) * 2), var(--max));
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    .mobile-menu { padding: 0; }
    .mobile-menu__top { height: 64px; }
    .mobile-menu__links { padding-bottom: 32px; }
    .mobile-menu__contact { width: 100%; margin-bottom: 40px; }
    .code-map__line { grid-template-columns: 50px 1fr; }
    .code-map__line b { justify-self: start; text-align: left; }
    .manifesto,
    .page-hero__grid { grid-template-columns: 1fr; }
    .section--bundle { padding-bottom: 0; }
    .bundle__image--cutout { min-height: 470px; }
    .bundle__image--cutout img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    .service-list li { grid-template-columns: 72px 1fr; gap: 12px; font-size: 14px; }
}