.button {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-text-white);
    border-radius: var(--radius-button);
    font-family: var(--font-sans);
    font-size: var(--text-nav);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    padding: var(--space-button-v) var(--space-button-h);
    border: none;
    position: relative;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    transition: background-color 0.4s, color 0.4s;
}

.button:hover,
.button:active {
    background-color: var(--color-bg-white);
    color: var(--color-accent);
}

.button--nav:hover,
.button--nav:active {
    background-color: var(--color-bg-white);
    color: var(--color-text-teal);
}

.button--secondary:hover,
.button--secondary:active {
    background-color: var(--color-bg-white);
    color: var(--color-text-teal);
    box-shadow: none;
}

.button__outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;      /* the edge stroke isn't clipped */
    pointer-events: none;   /* never intercept the button's clicks */
}

.button__outline rect {
    rx: var(--radius-button);
    fill: none;
    stroke: currentColor;           /* follows the button's text colour */
    stroke-width: 2px;
    stroke-dasharray: 100;
    stroke-dashoffset: -100;   /* hidden; negative = counter-clockwise */
    opacity: 0;                 /* hidden; opacity animates in on hover */
}

.button:hover .button__outline rect,
.button:active .button__outline rect {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset 0.4s ease-in, opacity 0.4s ease-in; /* on hover only → animates in, vanishes instantly out */
}

@media (prefers-reduced-motion: reduce) {
    .button:hover .button__outline rect {
        transition: none;
    }
}

/* bars follow the button's text colour, resting + active */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: currentColor;
}

/* white on the teal hero */
.hero .hamburger {
  color: var(--color-text-white);
  opacity: 0.6;
}

.hero .hamburger.is-active {
  color: var(--color-text-teal);
}

.hamburger:hover,
.hamburger.is-active:hover {
  opacity: 1;
}

 .hamburger--slider .hamburger-inner, 
 .hamburger--slider .hamburger-inner::after {
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}

.site-nav__link {
    color: var(--color-text-teal);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: var(--text-nav);
    font-weight: var(--weight-semibold);
    transition: opacity 0.17s ease;
}

.site-nav__link:hover,
.site-nav__link:active {
    opacity: 0.6;
}

.hero .site-nav__link {
    color: var(--color-text-white);
}

.button--nav {
    background-color: var(--color-bg-teal);
    color: var(--color-text-white);
}

.hero .button--nav {
    background-color: var(--color-bg-white);
    color: var(--color-text-teal);
}

.hero .button--nav:hover,
.hero .button--nav:active {
    background-color: transparent;
    color: var(--color-text-white);
}

.hero {
    background-color: var(--color-bg-teal);
}

.hero__lead h1 {
    font-size: var(--text-lead);
    line-height: var(--lh-lead);
    font-weight: var(--weight-light);
    text-align: right;
    color: var(--color-text-white);
}

.hero__lead em {
    font-family: var(--font-serif);
    font-weight: var(--weight-bold);
    font-style: italic;
}

.page-title-copy-inner h1 {
    font-family: var(--font-serif);
    font-size: var(--text-h1);
    line-height: var(--lh-h1);
    font-weight: var(--weight-bold);
    color: var(--color-text-white);
}

.page-hero-leadin {
    font-family: var(--font-sans);
    font-size: var(--text-h2);
    line-height: var(--lh-lead);
    font-weight: var(--weight-light);
    color: var(--color-text-white);
}

.section-heading {
    font-family: var(--font-serif);
    color: var(--color-text-teal);
    font-size: var(--text-h2);
    line-height: var(--lh-h2);
}

dt {
    font-family: var(--font-serif);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
}

.button--secondary {
    background-color: transparent;
    color: var(--color-bg-white);
    border: 2px solid;
    border-color: var(--color-text-white);
    padding: calc(var(--space-button-v) - 2px) calc(var(--space-button-h) - 2px);
}

section {
    --bg: transparent;
    background-color: var(--bg);
}

.intro {
    text-align: center;
    color: var(--color-text-teal);
    font-weight: var(--weight-light);
    font-size: var(--text-h2);
    line-height: var(--lh-h2);
}

.highlights__list em {
    font-family: var(--font-serif);
    font-weight: var(--weight-bold);
    font-style: normal;
}

.education {
    background-color: var(--color-bg-teal);
    color: var(--color-text-white);
}

.education .section-heading {
    color: var(--color-text-white);
}

.core-values ul {
    list-style: none;
}

.outcome {
    background-color: var(--color-bg-teal);
    color: var(--color-text-white);
}

.outcome .section-heading {
    color: var(--color-text-white);
}

.outcomes-list {
    list-style-type: none;
}

.testimonials {
    background: var(--color-bg-warm);
    text-align: center;
}

.testimonial footer {
    font-family: var(--font-serif);
    font-weight: var(--weight-bold);
    font-style: italic;
    font-size: var(--text-body);
}

.services {
    background-color: var(--color-bg-warm);
}

.card {
    background-color: var(--color-bg-white);
    border-radius: 30px;
}

.service-list li {
    list-style: none;
}

.contact .site-social {
    color: var(--color-text-teal);
}

.contact a {
    text-decoration: none;
    color: var(--color-text-teal);
    font-weight: var(--weight-light);
    transition: opacity 0.17s ease;
}

.contact a:hover,
.contact a:active {
    opacity: 0.6;
}

.hp-field {
    position: absolute;
    left: -9999px;
}

.contact-form input,
.contact-form textarea { 
    font: inherit;
    font-size: var(--text-small);
    color: var(--color-text-field);
}

/* 1. bullet reset — just the list */
.form-alert ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 2. the box shape — shared by both messages */
.form-alert,
.form-success {
    padding: var(--space-button-v) var(--space-button-h);
    font-size: var(--text-body);
    background: var(--color-bg-warm);
    border-radius: var(--radius-button);
}

/* 3. the colours — one line each */
.form-alert   { color: var(--color-accent); }
.form-success { color: var(--color-text-teal); }

.contact-form input,
.contact-form textarea {
  background: var(--color-bg-field);
  border: none;
}

.contact-form label { 
    font-size: var(--text-small); 
}   /* 16, matches the inputs */

.contact-form input:focus,
.contact-form textarea:focus {
    outline-color: var(--color-icon);
}

.contact-form textarea {
    line-height: 1.5;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--color-text-placeholder);   /* lighter grey — token, see below */
    font-size: 14px;                          /* smaller than the 16px input text */
}

.required-mark { 
    color: var(--color-accent); 
}

.closing-cta {
    text-align: center;
}

.site-footer {
    background-color: var(--color-bg-teal);
    color: var(--color-text-white);
}

.site-footer a {
    color: var(--color-text-white);
    transition: opacity 0.17s ease;
}

.site-footer a:hover,
.site-footer a:active {
    opacity: 0.6;
}

.contact-info {
    text-decoration: underline;
    text-decoration-color: var(--color-text-teal);
}

.site-footer__phone a {
    text-decoration: none;
}

.site-footer__heading {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
}

.site-footer__contact {
    font-size: var(--text-small);
    line-height: var(--lh-small);
    text-align: left;
    justify-self: stretch;
    text-align: left;
}

.site-footer__legal {
    font-size: var(--text-tiny);
    line-height: normal;
    margin-top: var(--space-icon-gap);
}

.error-page__content {
    display: flex;                 /* makes it a row */
    justify-content: center;       /* main axis → centers the group horizontally */
    align-items: center;           /* cross axis → lines the icon up with the text's middle */
    gap: 32px;                      /* space between icon and heading */
}

.error-page {
    min-height: 100vh;         /* the page needs height to center within */
    display: flex;
    flex-direction: column;    /* stacks content block over the link */
    justify-content: center;   /* main axis is now vertical → vertical center */
    align-items: center;       /* cross axis is horizontal → horizontal center */
}

.error-page h1 {
    text-align: left;
    font-family: var(--font-sans);
    font-size: 48px;
    line-height: 70px;
    font-weight: var(--weight-light);
    max-width: 650px
}

.error-page__home {
    color: var(--color-text-teal);
    justify-self: center;
    margin-top: 180px;
}

.contact-form {
    position: relative;
}

.contact-form.is-sending::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

.contact-form.is-sending::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid var(--color-text-teal);
    border-top-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    z-index: 2;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }

}

@media (max-width: 1145px) {

    .hamburger.is-active ~ ul {
        background-color: var(--color-bg-white);
    }

    .hamburger {
        color: var(--color-text-teal);
        opacity: 0.6;
    }

    .hero .site-nav__link {
        color: var(--color-text-teal);
    }
    
    body.template-is-home .button--nav {
        padding: 0;
        background-color: transparent;
        color: var(--color-text-teal);
    }

    body.template-is-home .button--nav .button__outline {
        display: none;
    }

}


@media (max-width: 1000px) {   /* interior Contact button in the hamburger panel; mirror of the two landing button--nav rules above */

    body:not(.template-is-home) .button--nav {
        padding: 0;
        background-color: transparent;
        color: var(--color-text-teal);
    }

    body:not(.template-is-home) .button--nav .button__outline {
        display: none;
    }
}

@media (max-width: 900px) {
    .error-page__content {
        flex-direction: column;
        margin: var(--space-margin-mobile);
    }

    .error-page__icon {
        width: 100px;          /* down from its 188px intrinsic size */
    }

    .error-page h1 {
        font-size: 28px;       /* down from 48 */
        line-height: 38px;     /* down from 70 */
        text-align: center;    /* was left — centre it now it's stacked */
        max-width: none;       /* drop the desktop 650px cap so it can breathe */
    }

    .error-page__home {
        margin-top: 40px;      /* way down from 180 — that big gap was overflowing the screen */
    }
}

@media (max-width: 1045px) { 
    .hero__lead h1 { 
        text-align: center; 
    } 
}


@media (max-width: 768px) {

    .page-title-copy-inner h1 {
        font-size: 40px;          
    }

    .intro {
        line-height: 1.7;   /* was var(--lh-h2); unitless = ratio, scales at every size */
    }

    .site-footer__contact {
        text-align: center;
    }

    .site-footer__meta {
        text-align: center;
    }

    }