section, header, footer {
    padding: var(--space-section) var(--space-margin);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-nav);
    align-items: center;
    padding-left: 0;
}

ul {
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside;
}

.hamburger {
    display: none;
}

.button--nav svg:not(.button__outline) {
    margin-left: var(--space-icon-gap);
}

.hero header {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    justify-content: flex-end;
    padding-top: var(--hero-nav-top);
    padding-bottom: 0;
    position: relative;
    z-index: 1;
}

.hero__lead {
    grid-column: 2;
    grid-row: 2;
    align-self: end; 
    padding-top: 0;
    padding-bottom: var(--space-section);
    padding-left: clamp(40px, calc(40px + (100vw - 1045px) * 54 / 265), var(--space-margin));
    z-index: 1;
    position: relative;
}

.hero__lead h1 {
    max-width: 850px;
    margin-left: auto;
}

.hero {
    position: relative;
    height: var(--space-gradient-h);
    display: grid;
    --hero-mark-w: clamp(18rem, 38vw, 34.8rem);
    --hero-nav-top: calc(0.45 * var(--hero-mark-w) - 44px);
    grid-template-columns: var(--hero-mark-w) 1fr;
    grid-template-rows: auto 1fr;
}

.hero-secondary {
    position: relative;
}

.hero-secondary header {
    height: 150px;
    padding-top: 0;
    padding-bottom: 0;
}

.hero__canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.hero__mark {
    position: absolute;
    top: -16px;
    left: -18px;
    width: var(--hero-mark-w);
    z-index: 1;
}

.hero__icon {
    width: 100%;
    display: block;
}

.hero__logo {
    position: absolute;
    top: 27.8%;
    left: 32.5%;
    width: 33.4%;
    z-index: 2;
}

.site-header__logo {
    width: 166px;
}

.template-is-why-phenix .page-image img { 
    object-position: center 40%; 
    transform: scale(1.35);
}

.template-is-the-phenix-process .page-image img { 
    object-position: center 25%; 
    transform: scale(1.10) translateY(2%);
}

.template-is-services .page-image img { 
    object-position: 50% 70%; 
    transform: scale(1.44);
}

.page-image {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
}

.page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
}

.page-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-bg-teal);
    opacity: 0.6;
}

.page-title {
    position: relative;
    padding-top: 497px;
}

.page-title--compact {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 0;
    height: 210px;
}

.page-image--compact {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
}

.page-image--compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
    transform: scale(1.0);
}

.page-image--compact::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-bg-teal);
    opacity: 0.9;
}


.page-title-copy {
    position: relative;
    padding: 0 var(--space-margin);
    z-index: 3;
}

.page-hero-leadin {
    position: relative;
    z-index: 3;
    padding: 0 var(--space-margin);
    padding-bottom: 69px;
    margin-top: 55px;
}

.page-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 560px;
    background-color: var(--color-bg-teal);
    opacity: 0.9;
    z-index: 2;
}


.bio__image {
    width: 388px;
    border-radius: 8%;
}

.bio__intro h2 {
     margin-bottom: var(--space-heading-gap);
}

.bio__intro p + p {
    margin-top: var(--space-paragraph);
}

.bio {
    margin-top: var(--space-section);
}

.split {
    display: grid;
    grid-template-columns: 494px 1fr;
    padding: 0 var(--space-margin);
}

.highlights__list p + p { 
    margin-top: var(--space-paragraph);
}

.highlights {
    position: relative;
    margin-top: var(--space-section);
    padding-top: var(--space-section);
}

.highlights::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(494px + var(--space-margin));   /* left edge of the copy column */
    right: 0;      /* bleeds off the right edge */
    height: 1px;
    background: var(--color-keyline);
}

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

.highlights__list li {
    position: relative;
}

.highlights__list li + li {
    margin-top: 24px;
}

.highlights__list li::before {
    content: "";
    position: absolute;
    left: -76px;
    top: 11px;
    width: 38px;
    height: 15px;
    background: url(/assets/images/arrow-list.svg) no-repeat;
    background-size: contain;
}

.background {
    position: relative;
    margin-top: var(--space-section);
    padding-top: var(--space-section);
}

.background::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(494px + var(--space-margin));   /* left edge of the copy column */
    right: 0;      /* bleeds off the right edge */
    height: 1px;
    background: var(--color-keyline);
}

.education {
    margin-top: var(--space-section);
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
}

.education__list {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 118px;
    row-gap: 40px;
    margin: 0;
}

.education__list dd {
    position: relative;
    margin-left: 0;
}

.education__list dd strong {
    display: block;
}

.education__list dd:before {
    content:"";
    position: absolute;
    top: 18px;
    left: -93px;
    width: 68px;
    height: 1px;
    background: var(--color-keyline);
}

.testimonials {
    padding: var(--space-section) var(--space-margin);
}

.testimonials .section-heading {
    margin-bottom: var(--space-heading-gap);
}

.testimonial {
    max-width: 795px;
    margin: 0 auto; 
}

.testimonial::after {
    content: "";
    display: block;
    width: 130px;
    height: 1px;
    margin: 30px auto 0;    /* 38 above, centred */
    background: var(--color-keyline);
}

.testimonial footer {
    padding: 0;
    margin-top: 10px;
}

.highlights .section-heading,
.background .section-heading,
.education .section-heading {
    text-align: center;
}

.core-values p,
.core-values ul {
    max-width: 902px;
}

.core-values p {
    margin-bottom: 24px;
}

.core-values li {
    position: relative;
    padding-left: 24px;      /* gutter: bullet + gap — tune to taste */
}

.core-values li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);   /* same centering trick as your Outcomes icons */
    width: 3px;
    height: 3px;
    border-radius: 50%;            /* a square becomes a circle */
    background: currentColor;      /* matches the text colour; swap for a token if the design wants a set colour */
}

.outcome {
    padding: var(--space-section) var(--space-margin);
}

.outcome .section-heading { 
    margin-left: 219px;
    margin-bottom: var(--space-heading-gap); 
}

.outcomes-list li {
    position: relative;
    padding-left: 219px; 
    margin-top: 144px;
    max-width: 947px;
}

.outcomes-list li:first-child { 
    margin-top: 0; }

.outcomes-list li::before {
    content: "";
    position: absolute;
    left: 0px;
    width: 108px;
    height: 108px;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
}

.outcomes-list li:not(:first-child)::after {
    content: "";
    position: absolute;
    top: -72px;                    /* halfway up the 144px gap */
    left: 219px;                   /* where the text starts */
    width: 935px;
    height: 1px;
    background: var(--color-keyline);
}

.quality::before {
    background-image: url(/assets/images/quality-list.svg);
}

.priority::before {
    background-image: url(/assets/images/priority-list.svg);
}

.transformation::before {
    background-image: url(/assets/images/transformation-list.svg);
}

.leadership::before {
    background-image: url(/assets/images/leadership-list.svg);
}

.alignment::before {
    background-image: url(/assets/images/alignment-list.svg);
}

.services {
    padding: var(--space-section) var(--space-margin);
}

.card {
    padding: var(--space-card) var(--space-margin);
    margin-bottom: var(--space-card);
    position: relative;
}

.services .section-heading { 
    margin-left: 259px;
    margin-bottom: var(--space-heading-gap); 
}

.service-list {
    padding-left: 259px;
}

.service-list :first-child { 
    margin-top: 0; 
}

.card::before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    left: var(--space-margin);
    width:  calc(var(--icon-w) * var(--icon-scale, 1));
    height: calc(var(--icon-h) * var(--icon-scale, 1));
}

.direction::before {
    --icon-w: 117px; --icon-h: 151px;
    background-image: url(/assets/images/direction-list.svg);
}

.mapping::before {
    --icon-w: 173px; --icon-h: 165px;
    background-image: url(/assets/images/mapping-list.svg);
}

.team::before {
    --icon-w: 140px; --icon-h: 140px; 
    background-image: url(/assets/images/team-list.svg);
}

.improvement::before {
    --icon-w: 127px; --icon-h: 98px;
    background-image: url(/assets/images/improvement-list.svg);
}

.service-list li {
    position: relative;
    padding-left: 24px;      /* gutter: bullet + gap  */
}

.service-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5lh;
    transform: translateY(-50%);   /* same centering trick as your Outcomes icons */
    width: 3px;
    height: 3px;
    border-radius: 50%;            /* a square becomes a circle */
    background: currentColor;      /* matches the text colour; swap for a token if the design wants a set colour */
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.contact-form label {
    display: block;
}

.contact-layout {
  display: grid;
  grid-template-columns: clamp(360px, calc(360px + (100vw - 1024px) * 203 / 286), 563px) 1fr;
}

.contact-form input,
.contact-form textarea { 
    width: 100%; 
    box-sizing: border-box;
    border-radius: 6px;
    padding: 0 16px;
}

.contact-form input   { 
    height: 50px; 
}

.contact-form textarea { 
    height: 170px;
    padding: 16px;
}

.submit-button { 
    justify-self: start; 
}

.form-success {
    align-self: start;
    justify-self: start;
}

.message-field, .submit-button, .form-alert {
    grid-column: 1 / -1;
}

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    column-gap: var(--space-nav);   
}

.site-footer__acknowledgement {
    text-align: right;
    text-wrap: balance;
    font-size: var(--text-small);
    line-height: var(--lh-small);
    font-style: italic;
    max-width: 400px;
    justify-self: end;
    align-self: end;
    
}

.site-footer__heading {
    margin-bottom: 1px;
}

.site-social svg {
    display: inline-block;
    margin-top: var(--space-icon-gap);
}

.site-footer .site-social svg { 
    margin-top: 0; 
}

.site-footer .site-social {
    display: block;
    text-align: left;
}

.site-footer__logo {
    width: 174px;
}

.button-row {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-button-gap);
    margin-top: var(--space-hero-gap);
}

.intro p {
    max-width: 1100px;
    margin-inline: auto;
}

.intro .button {
    margin-top: var(--space-hero-gap);
}

@media (max-width: 1145px) {   /* nav collapse — landing (has the P, collapses at 1145) */

    body.template-is-home .hamburger {
        display: inline-block;
        position: absolute;
        top: var(--space-margin);
        right: var(--space-margin);
        z-index: 11;
    } /* show the button on mobile */

    body.template-is-home nav ul { 
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        align-items: flex-start;
        gap: 32px;
        padding: 120px 40px;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
    } 

    body.template-is-home .hamburger.is-active ~ ul { 
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    } 

    body.template-is-home .hero header {
        position: static;
        z-index: 2;
    }

}


@media (max-width: 1000px) {   /* nav collapse — interior pages (no P; the tighter fluid gutter lets the nav hold to ~1000); mirror of the 1145 landing block */

    body:not(.template-is-home) .hamburger {
        display: inline-block;
        position: absolute;
        top: var(--space-margin);
        right: var(--space-margin);
        z-index: 11;
    }

    body:not(.template-is-home) nav ul {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        align-items: flex-start;
        gap: 32px;
        padding: 120px 40px;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
    }

    body:not(.template-is-home) .hamburger.is-active ~ ul {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body:not(.template-is-home) .hero-secondary header {
        position: relative;
    }

    body:not(.template-is-home) .hero-secondary .hamburger {
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 1045px) {   /* hero: stack the composition (P drops to the wordmark) */
    .hero {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: var(--space-margin-tablet);
        padding-right: var(--space-margin-tablet);
        padding-top: var(--space-margin-tablet);
    }

    .hero header {
        padding: 0;
    }

    .hero .hamburger {
        top: var(--space-margin-tablet);
        right: var(--space-margin-tablet);
        transform: translateY(-8px);   /* centre the taller button box on the wordmark */
    }

    .hero__mark {
        position: static;
        width: auto;
        margin-bottom: 20px;
    }

    .hero__icon {
        display: none;
    }

    .hero__logo {
        width: 140px;
        position: static;
        top: 0;
        left: 0;
        margin-bottom: 86px;
    }

    .hero__lead {
        position: relative;
        top: 0;
        align-self: stretch;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--space-section);
    }

    .hero__lead h1 {
        max-width: 700px;
        margin: 0 auto;
    }

    .button-row {
        justify-content: center;
    }

}
@media (max-width: 1024px) {

    .intro p {
        max-width: 700px;
    }

    .card::before {
        position: static;
        display: block;
        transform: none;
        margin: 0 auto 28px;
    }

    .services .section-heading {
        margin-left: 0;
    }

    .service-list {
        padding-left: 0;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-gutter);
    }

    .split {
        grid-template-columns: 1fr;
        padding-left: var(--space-margin);
        padding-right: var(--space-margin);
    }

    .highlights .section-heading,
    .background .section-heading,
    .education .section-heading {
        margin-bottom: var(--space-heading-gap);
        text-align: left;
    }

    .bio {
        row-gap: var(--space-section);
    }

    .highlights::before,
    .background::before {
        left: var(--space-margin);
        right: var(--space-margin);
    }

    .highlights__list li {
        padding-left: 50px;
    }
    .highlights__list li::before {
        left: 0;
        width: 26px;
        height: 11px;
    }

    .education__list {
        column-gap: 60px;
    }

    .education__list dd:before {
        width: 34px;
        left: -50px;
    }

}

@media (max-width: 768px) {

    .hero {
        padding-top: var(--space-margin);
        padding-left: var(--space-margin);
        padding-right: var(--space-margin);
    } /* match the interior page margin so the header sits in the same place across pages */

    .site-header__logo {
        width: 150px;   /* colour PNG ~7% side padding → box ~8% wider than a white logo for a matching wordmark; tune */
        margin-left: -5px;  /* colour PNG has ~3.3% empty padding left of the wordmark; pulls it back to the margin */
        margin-top: -4px;   /* colour PNG has ~6.6% empty padding above the wordmark; lifts it to sit where the trimmed white SVG does on the landing */
    }

    .hero-secondary header {
        height: auto;
        align-items: flex-start;
        padding-top: var(--space-margin-mobile);
        padding-bottom: 24px;
    }

    .hero__lead {
        margin-top: 0;
    }

    .hero .hamburger {
        top: var(--space-margin);
        right: var(--space-margin);
    }

    .template-is-services .page-image img {
        object-position: 65% center;   /* start here, then we nudge */
        transform: scale(1.1) translateY(4%);
    }

    .page-title {
        padding-top: 0;              /* kill the 497px desktop offset; height goes auto */
    }

    .page-image {
        position: relative;          /* out of absolute-fill, into flow */
        height: 320px;
    }

    .page-title-copy {
        position: absolute;          /* pull heading out of flow so the image is first */
        top: 0;
        left: 0;
        right: 0;
        height: 320px;               /* cover the image region */
        display: flex;
        align-items: flex-end;       /* sit the heading at the image's bottom */
        padding: 0 var(--space-margin-mobile) 32px;
    }

    .page-title::after {
        display: block;      /* was none — re-show the band on mobile */
        top: 265px;          /* meet the heading baseline; tied to the 320px image height */
        opacity: 1;          /* solid teal, no transparency */
    }

    .page-hero-leadin {
        margin-top: -24px;
        padding: 4px var(--space-margin-mobile) var(--space-section);
    }

    .page-title--compact { 
        height: 140px; 
    }

    .page-title--compact .page-title-copy { 
        position: static;
        height: auto;
        padding-bottom: 0;
    }

    section, header, footer {
        padding-left: var(--space-margin-mobile);
        padding-right: var(--space-margin-mobile);
    }

    .split {
        padding-left: var(--space-margin-mobile);
        padding-right: var(--space-margin-mobile);
    }

    .highlights::before,
    .background::before {
        left: var(--space-margin-mobile);
        right: var(--space-margin-mobile);
    }

    .outcome {
        padding: var(--space-section) var(--space-margin-mobile);   /* sides 94 → 40; top/bottom already tokened */
    }

    .outcome .section-heading {
        margin-left: 0;                 /* drop the 259px indent */
    }

    .outcomes-list li {
        padding-left: 0;                /* drop the 219px icon gutter */
        margin-top: 72px;               /* was 144 — big on a phone; tune */
    }

    .outcomes-list li::before {
        position: static;               /* icon on top, like the cards */
        display: block;
        transform: none;
        width: 140px;                    /* was 108 — scale down; tune */
        height: 140px;
        margin: 0 auto 24px;            /* centre the box + gap under it */
    }

    .outcomes-list li:not(:first-child)::after {   /* the keyline */
        width: auto;
        left: 0;
        right: 0;                       /* was a fixed 935px — this is what kills the overflow */
        top: -36px;                     /* halfway up the new 48px gap (was -72 for 144) */
    }

    .card::before {
        --icon-scale: 0.9;
    }

    .service-list li + li {
        margin-top: 16px;   /* tune by eye */
    }

   .services {
        padding: var(--space-section) 24px;   /* top/bottom was 86 */
    }

    .card {
        padding: 32px 30px;   /* top/bottom was 54 */
        margin-bottom: 32px;                         /* gap between cards was 54 */
    }

    .services .section-heading {
        margin-bottom: 20px;                         /* heading → text was 35 */
    }

    .testimonials {
        padding-left: var(--space-margin-mobile);
        padding-right: var(--space-margin-mobile);
    }

    .button-row {
        display: grid;
        grid-template-columns: max-content;
        justify-content: center;
        gap: 16px;
    }

    .contact .site-social svg { 
        margin-left: 0; 
        margin-right: 0 
    }

    .contact-layout,
    .contact-form {
        grid-template-columns: 1fr;
        gap: var(--space-gutter);
    }

    .site-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-button-gap);
        padding-top: 24px;
        padding-bottom: 44px;
    }

    .site-footer__acknowledgement { 
        text-align: center; 
        align-self: center;
    }

    .site-footer__brand {
        order: -1;
    }

    .site-footer__logo {
        width: 130px;
    }

    .site-footer .site-social { 
        text-align: center; 
    }

}