.hero {
    position: relative;
    min-height: clamp(45rem, calc(100svh - 7rem), 58rem);
    overflow: hidden;
    isolation: isolate;
}
.hero-photo {
    position: absolute;
    inset: 0 0 0 31%;
    z-index: -3;
    background: linear-gradient(90deg, rgb(25 26 14 / 5%), transparent 30%), url("/assets/imported/permaculture.org.nz/4b45c14cff65-Child-in-Garden.webp") 62% center / cover no-repeat;
    animation: hero-drift 16s ease-out both;
}
.hero-photo::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(20 23 14 / 5%), rgb(20 23 14 / 25%));
    content: "";
}
.hero-paper {
    position: absolute;
    inset: -3rem auto -3rem -2rem;
    z-index: -1;
    width: min(60%, 53rem);
    background: var(--site-paper-light);
    filter: drop-shadow(8px 0 8px rgb(28 31 18 / 8%));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-10%25' y='-5%25' width='120%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='1.15'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='white' d='M0-5H82 C88 3 80 8 85 14 C91 21 81 26 87 33 C92 39 82 44 86 51 C91 58 80 63 85 70 C90 78 78 83 84 90 C88 96 80 101 81 105 H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-10%25' y='-5%25' width='120%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='1.15'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='white' d='M0-5H82 C88 3 80 8 85 14 C91 21 81 26 87 33 C92 39 82 44 86 51 C91 58 80 63 85 70 C90 78 78 83 84 90 C88 96 80 101 81 105 H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.hero-copy {
    width: min(45rem, 55%);
    padding: clamp(4.5rem, 10vh, 8rem) 2rem 4rem clamp(1.5rem, 7vw, 8rem);
    animation: rise-in .9s .15s cubic-bezier(.2,.8,.2,1) both;
}
.eyebrow {
    margin: 0 0 1rem;
    color: #596536;
    font-size: var(--text-7);
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}
.hero h1 {
    max-width: 11ch;
    margin: 0;
    color: #4b3626;
    font-family: var(--site-hand);
    font-size: clamp(3rem, 5.2vw, 5.6rem);
    font-weight: 500;
    letter-spacing: -.07em;
    line-height: 1.13;
}
.hero h1 em { color: #419b5f; font-style: normal; }
.hero-intro { position: relative; max-width: 25rem; margin-top: 1.75rem; padding-top: 1.75rem; }
.hero-intro::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: #72ac44;
    clip-path: polygon(0 38%, 7% 25%, 15% 42%, 24% 30%, 35% 48%, 46% 29%, 57% 39%, 68% 22%, 79% 43%, 89% 28%, 100% 47%, 100% 72%, 90% 59%, 80% 76%, 69% 53%, 58% 70%, 47% 54%, 36% 74%, 25% 55%, 15% 69%, 7% 51%, 0 65%);
    content: "";
    transform: rotate(-.35deg);
}
.hero-intro p { margin: 0 0 1.7rem; font-size: var(--text-regular); line-height: 1.75; }
.primary-action { min-width: 13rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }
.secondary-action { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.4rem; min-height: 3.1rem; font-size: var(--text-7); line-height: 1.2; border: 1px solid var(--site-action); border-radius: .45rem; color: var(--site-action); background: transparent; font-weight: 600; text-decoration: none; }
.secondary-action:hover { background: rgb(31 129 93 / 8%); }

.pathways {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.7rem, 1.5vw, 1.5rem);
    padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 5vw, 6rem);
}
.pathway {
    position: relative;
    display: flex;
    min-height: 23rem;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
    padding: clamp(1.4rem, 2.4vw, 2.2rem);
    overflow: hidden;
    color: var(--site-ink);
    background:
        linear-gradient(rgb(250 246 232 / 24%), rgb(250 246 232 / 24%)),
        url("/assets/images/pathways/plaster.jpg") center / cover;
    border: 1px solid rgb(77 69 47 / 18%);
    border-radius: .8rem .45rem 1rem .55rem;
    box-shadow: inset 0 0 2rem rgb(94 69 35 / 7%);
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
.pathway.green { --card-accent: #69793e; }
.pathway.clay { --card-accent: #b94f19; }
.pathway.ochre { --card-accent: #a87500; }
.pathway.sage { --card-accent: #657950; }
.pathway-icon { width: clamp(6.5rem, 9vw, 8.5rem); height: clamp(6.5rem, 9vw, 8.5rem); transition: transform .35s ease; }
.pathway-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pathway-copy { display: grid; gap: .7rem; margin-top: auto; text-align: center; }
.pathway-copy strong {
    color: var(--card-accent);
    font-family: var(--site-hand);
    font-size: clamp(2rem, 2.5vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -.03em;
    text-transform: uppercase;
}
.pathway-copy small {
    max-width: 22ch;
    color: var(--site-ink);
    font-size: clamp(1.25rem, 1.45vw, 1.55rem);
    font-weight: 600;
    line-height: 1.25;
    opacity: .92;
}
.pathway:hover {
    z-index: 1;
    box-shadow: 0 1.1rem 2rem rgb(32 35 24 / 18%);
    transform: translateY(-.5rem) rotate(-1.25deg);
}
.pathway:hover .pathway-icon { transform: rotate(1.25deg) scale(1.05); }

.newsletter-home { padding-block: 1rem 4rem; }
.newsletter-home .newsletter-signup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: #e1e8d6;
    border: 1px solid #c9d4ba;
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgb(39 48 29 / 5%);
}
.newsletter-home #newsletter-title { grid-column: 1; margin: 0 0 1rem; color: #273f2b; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.newsletter-home .newsletter-signup > p { grid-column: 1; max-width: 32ch; }
.newsletter-home .newsletter-signup > form { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; max-width: 38rem; }
.newsletter-home input[type="email"] { background: #fffdf7; }
.newsletter-home button[type="submit"] { background: var(--site-action); color: #fffdf4; border-color: var(--site-action); }
.newsletter-home button[type="submit"]:hover { background: var(--site-action-hover); }
.newsletter-home #newsletter-consent { color: #46543e; margin-bottom: 0; }
@media (max-width: 800px) {
    .newsletter-home .newsletter-signup { display: block; }
    .newsletter-home .newsletter-signup > p { max-width: none; }
    .newsletter-home .newsletter-signup > form { margin-top: 1.5rem; }
}

.closing {
    position: relative;
    display: grid;
    min-height: 42rem;
    overflow: hidden;
    place-items: center;
    isolation: isolate;
}
.closing::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(16 22 11 / 77%), rgb(16 22 11 / 20%));
    content: "";
}
.closing-image {
    position: absolute;
    inset: -8%;
    z-index: -2;
    background: url("/assets/imported/permaculture.org.nz/376cb9c02b9f-image-2-1024x576.webp") center / cover no-repeat;
    transform: translateY(var(--closing-shift, 0));
}
.closing-copy { width: min(100%, 80rem); padding: 6rem clamp(1.25rem, 7vw, 8rem); color: #fffdf0; }
.closing-copy .eyebrow { color: #d8d9a9; }
.closing h2 {
    max-width: 11ch;
    margin: 0;
    font-family: var(--site-hand);
    font-size: clamp(2.8rem, 4.7vw, 5.3rem);
    font-weight: 500;
    letter-spacing: -.07em;
    line-height: 1.08;
    text-shadow: 0 2px 20px rgb(0 0 0 / 30%);
}
.closing h2 em { color: #d9d99d; }
.closing-copy > a {
    display: inline-flex;
    gap: .75rem;
    margin-top: 2rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid currentColor;
    font-weight: 700;
    text-decoration: none;
}

@keyframes rise-in { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes hero-drift { from { transform: scale(1.06); } to { transform: scale(1); } }

@media (max-width: 720px) {
    .hero { display: grid; min-height: auto; padding-top: 58svh; background: var(--site-paper-light); }
    .hero-photo { inset: 0 0 auto; height: 62svh; min-height: 28rem; background-position: 54% center; }
    .hero-photo::after { background: linear-gradient(180deg, transparent 45%, rgb(28 30 17 / 22%)); }
    .hero-paper {
        inset: 51svh -2rem auto;
        width: calc(100% + 4rem);
        height: 9rem;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-5%25' y='-10%25' width='110%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='white' d='M-5 35 C4 25 10 39 18 28 C27 17 32 38 41 25 C50 13 57 36 66 23 C75 12 82 34 90 22 C96 15 101 27 105 23 V105 H-5Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-5%25' y='-10%25' width='110%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='white' d='M-5 35 C4 25 10 39 18 28 C27 17 32 38 41 25 C50 13 57 36 66 23 C75 12 82 34 90 22 C96 15 101 27 105 23 V105 H-5Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    }
    .hero-copy { width: 100%; padding: 2.5rem 1.25rem 4.5rem; background: var(--site-paper-light); }
    .hero h1 { max-width: 12ch; font-size: clamp(2.9rem, 13vw, 4.2rem); }
    .pathways {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
        padding: 3rem 1.25rem;
    }
    .pathway { min-height: 0; padding: 1.1rem .7rem; gap: 1rem; }
    .pathway-icon { width: min(100%, 6rem); height: 6rem; }
    .pathway-copy { margin-top: 0; gap: .6rem; }
    .pathway-copy strong { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.15; overflow-wrap: anywhere; }
    .pathway-copy small { font-size: 1.125rem; line-height: 1.4; }
    .closing { min-height: 36rem; place-items: end start; }
    .closing::after { background: linear-gradient(0deg, rgb(16 22 11 / 85%), rgb(16 22 11 / 4%)); }
    .closing-copy { padding: 5rem 1.25rem; }
}