/* ==========================================================================
   CKM Woodhouse Builders — inner-page styles
   Loaded on every page except the home page (see functions.php).
   Uses the design tokens and shared components from app.css.

   Sections:  1. About page      (about-page-template.php)
              2. Contact page    (contact-page-template.php)
              3. Message pages   (404.php, thank-you-page.php)
              4. Default page    (page.php)
              5. Blog archive    (archive-blog.php, taxonomy-blog_category.php)
              6. Single blog     (single-blog.php)
              7. Testimonials    (archive-testimonial.php)
              8. Building styles (archive-building_style.php, single-building_style.php)
              9. Projects        (archive-project.php, taxonomy-project_category.php, single-project.php)
             10. Services        (archive-service.php, taxonomy-service_category.php, single-service.php)
             11. FAQ page        (faq-page-template.php)
             12. Gallery page    (gallery-page-template.php)
             13. Search results  (search.php)
   Add each new template's styles below as it is rebuilt.
   ========================================================================== */

/* ==========================================================================
   About page  (about-page-template.php)  ·  prefix: about-page-
   Uses the design tokens and shared components from app.css
   ========================================================================== */

/* ---------- Hero ---------- */
.about-page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 6.5rem);
    background:
        radial-gradient(60% 80% at 88% 15%, rgba(148, 89, 44, .38), transparent 70%),
        radial-gradient(50% 60% at 0% 100%, rgba(47, 107, 58, .2), transparent 70%),
        var(--wood-950);
    color: var(--wood-200);
}

.about-page-hero .container {
    position: relative;
    z-index: 1
}

.about-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
    font-size: .85rem;
    color: var(--wood-300);
}

.about-page-breadcrumb a {
    transition: color .3s
}

.about-page-breadcrumb a:hover {
    color: var(--paper)
}

.about-page-breadcrumb span::before {
    content: "/";
    margin-right: .6rem;
    opacity: .5
}

.about-page-hero h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(2.6rem, 5.6vw, 4.7rem);
    line-height: 1.02;
    color: var(--paper);
}

.about-page-hero h1 em {
    display: block;
    color: var(--wood-300)
}

.about-page-hero__lead {
    max-width: 33rem;
    margin-bottom: 2.2rem;
    font-size: 1.15rem;
    color: var(--wood-200);
    opacity: .9;
}

.about-page-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem
}

/* staggered photo collage */
.about-page-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, clamp(46px, 7.5vw, 78px));
    gap: 14px;
}

.about-page-collage figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-card);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}

.about-page-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 1.2s var(--ease);
}

.about-page-collage figure:hover img {
    transform: scale(1.05)
}

.about-page-collage__first {
    grid-column: 1;
    grid-row: 1 / 5
}

.about-page-collage__second {
    grid-column: 2;
    grid-row: 2 / 7
}

.about-page-collage__third {
    grid-column: 1;
    grid-row: 5 / 7
}

.about-page-collage__badge {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
    color: var(--paper);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.about-page-collage__badge .ic {
    color: var(--leaf-soft)
}

/* ---------- Story ---------- */
.about-page-story {
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem)
}

.about-page-statement {
    margin-bottom: 2rem;
    font-size: clamp(1.7rem, 3.2vw, 2.7rem);
    line-height: 1.25;
    font-weight: 300;
    letter-spacing: -.015em;
    color: var(--wood-900);
}

.about-page-statement em {
    font-style: normal;
    font-weight: 500;
    color: var(--wood-600)
}

.about-page-story__cols p {
    color: var(--ink-soft)
}

/* Land → Wood → Homes, in arched frames (a nod to the A-frame roofline) */
.about-page-chain {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.about-page-chain__item:nth-child(2) {
    margin-top: clamp(1.5rem, 4vw, 3.5rem)
}

.about-page-chain__item:nth-child(3) {
    margin-top: clamp(3rem, 8vw, 7rem)
}

.about-page-chain__img {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 999px 999px var(--r-card) var(--r-card);
    background: var(--wood-100);
    box-shadow: var(--shadow);
}

.about-page-chain__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 1.2s var(--ease);
}

.about-page-chain__item:hover .about-page-chain__img img {
    transform: scale(1.06)
}

.about-page-chain__number {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(33, 20, 10, .72);
    backdrop-filter: blur(4px);
    color: var(--paper);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
}

.about-page-chain__body {
    padding-top: 1.4rem
}

.about-page-chain__tag {
    display: inline-block;
    margin-bottom: .6rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--leaf);
}

.about-page-chain__body h3 {
    margin-bottom: .5rem;
    color: var(--wood-900)
}

.about-page-chain__body p {
    margin: 0;
    color: var(--ink-soft)
}

/* ---------- At a glance ---------- */
.about-page-facts {
    padding: clamp(2.5rem, 5vw, 3.75rem) 0;
    background: var(--paper-2);
    border-block: 1px solid var(--line);
}

.about-page-facts__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.about-page-facts__list li {
    padding: .25rem clamp(1rem, 2.4vw, 2rem);
    border-left: 1px solid var(--line);
}

.about-page-facts__list li:first-child {
    border-left: 0;
    padding-left: 0
}

.about-page-facts__list strong {
    display: block;
    margin-bottom: .6rem;
    font-size: clamp(3rem, 5.4vw, 4.6rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--wood-700);
}

.about-page-facts__list span {
    display: block;
    max-width: 15rem;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--ink-soft)
}

/* ---------- Saw mill ---------- */
.about-page-mill {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
    background: var(--wood-950);
    color: var(--wood-200);
}

.about-page-mill__bg {
    position: absolute;
    inset: 0
}

.about-page-mill__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    opacity: .55
}

.about-page-mill__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(33, 20, 10, .6) 0%, rgba(33, 20, 10, .88) 100%),
        radial-gradient(60% 80% at 100% 0%, rgba(148, 89, 44, .3), transparent 70%);
}

.about-page-mill__inner {
    position: relative;
    z-index: 1
}

.about-page-mill h2 {
    margin-bottom: 0;
    color: var(--paper)
}

.about-page-mill h2 em {
    color: var(--wood-300)
}

.about-page-mill__copy {
    margin-bottom: 1.6rem;
    font-size: 1.08rem;
    color: var(--wood-200);
    opacity: .85
}

.about-page-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.about-page-flow li {
    position: relative;
    padding-top: 2rem;
    border-top: 1px solid rgba(230, 211, 188, .25);
}

.about-page-flow li::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--leaf-soft);
}

.about-page-flow__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--wood-300);
    font-size: 1.25rem;
}

.about-page-flow__number {
    position: absolute;
    top: 1.9rem;
    right: 0;
    font-size: .8rem;
    letter-spacing: .14em;
    color: var(--wood-300);
    opacity: .7;
}

.about-page-flow h3 {
    margin-bottom: .5rem;
    font-size: 1.25rem;
    color: var(--paper)
}

.about-page-flow p {
    margin: 0;
    font-size: .97rem;
    color: var(--wood-200);
    opacity: .8
}

/* ---------- Values ---------- */
.about-page-values__side {
    position: sticky;
    top: calc(var(--header-h) + 2rem)
}

.about-page-values__fig {
    margin-top: 2rem;
    overflow: hidden;
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
}

.about-page-values__fig img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0
}

.about-page-principles li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.5rem;
    padding: 2.1rem 0;
    border-top: 1px solid var(--line);
}

.about-page-principles li:last-child {
    border-bottom: 1px solid var(--line)
}

.about-page-principles__number {
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1;
    color: var(--wood-300);
    transition: color .4s;
}

.about-page-principles li:hover .about-page-principles__number {
    color: var(--wood-600)
}

.about-page-principles h3 {
    margin-bottom: .5rem
}

.about-page-principles p {
    margin: 0;
    color: var(--ink-soft)
}

/* ---------- Start anywhere ---------- */
.about-page-join__head {
    max-width: 38rem;
    margin-bottom: clamp(2rem, 4vw, 3rem)
}

.about-page-join__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem)
}

.about-page-join__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    height: 100%;
    padding: 2rem 1.75rem 4.2rem;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--paper);
    transition: transform .4s var(--ease), background .3s, border-color .3s, box-shadow .4s var(--ease);
}

.about-page-join__card:hover {
    transform: translateY(-5px);
    background: var(--wood-900);
    border-color: var(--wood-900);
    box-shadow: var(--shadow);
}

.about-page-join__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--wood-100);
    color: var(--wood-700);
    font-size: 1.25rem;
    transition: background .3s, color .3s;
}

.about-page-join__card strong {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--wood-900);
    transition: color .3s;
}

.about-page-join__card>span:not(.about-page-join__icon) {
    color: var(--ink-soft);
    transition: color .3s
}

.about-page-join__arrow {
    position: absolute;
    left: 1.75rem;
    bottom: 1.6rem;
    color: var(--wood-600);
    transition: transform .4s var(--ease), color .3s;
}

.about-page-join__card:hover strong {
    color: var(--paper)
}

.about-page-join__card:hover>span:not(.about-page-join__icon) {
    color: var(--wood-200)
}

.about-page-join__card:hover .about-page-join__icon {
    background: rgba(255, 255, 255, .1);
    color: var(--wood-300)
}

.about-page-join__card:hover .about-page-join__arrow {
    color: var(--wood-300);
    transform: translateX(6px)
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .about-page-values__side {
        position: static
    }

    .about-page-flow {
        grid-template-columns: repeat(2, 1fr)
    }

    .about-page-facts__list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2rem
    }

    .about-page-facts__list li:nth-child(3) {
        border-left: 0;
        padding-left: 0
    }
}

@media (max-width: 767.98px) {
    .about-page-chain {
        grid-template-columns: 1fr
    }

    .about-page-chain__item:nth-child(n) {
        margin-top: 0
    }

    .about-page-chain__item {
        display: grid;
        grid-template-columns: 38% 1fr;
        gap: 1.25rem;
        align-items: center
    }

    .about-page-chain__body {
        padding-top: 0
    }

    .about-page-chain__number {
        bottom: .6rem;
        padding: .2rem .6rem;
        font-size: .7rem
    }

    .about-page-join__grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 575.98px) {
    .about-page-flow {
        grid-template-columns: 1fr
    }

    .about-page-facts__list li {
        padding-inline: 1rem
    }

    .about-page-principles li {
        grid-template-columns: 3.2rem 1fr;
        gap: 1rem
    }

    .about-page-principles__number {
        font-size: 2.1rem
    }

    .about-page-hero__cta .btn {
        flex: 1 1 100%
    }
}

@media (prefers-reduced-motion: reduce) {

    .about-page-collage img,
    .about-page-chain__img img,
    .about-page-join__card {
        transition: none
    }
}

/* ==========================================================================
   Contact page  (contact-page-template.php)  ·  prefix: contact-page-
   ========================================================================== */

/* ---------- Hero ---------- */
.contact-page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem);
    background:
        radial-gradient(60% 80% at 90% 10%, rgba(148, 89, 44, .38), transparent 70%),
        radial-gradient(50% 60% at 0% 100%, rgba(47, 107, 58, .2), transparent 70%),
        var(--wood-950);
    color: var(--wood-200);
}

.contact-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
    font-size: .85rem;
    color: var(--wood-300);
}

.contact-page-breadcrumb a {
    transition: color .3s
}

.contact-page-breadcrumb a:hover {
    color: var(--paper)
}

.contact-page-breadcrumb span::before {
    content: "/";
    margin-right: .6rem;
    opacity: .5
}

.contact-page-hero h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(2.6rem, 5.6vw, 4.7rem);
    line-height: 1.02;
    color: var(--paper);
}

.contact-page-hero h1 em {
    display: block;
    color: var(--wood-300)
}

.contact-page-hero__lead {
    max-width: 33rem;
    margin: 0;
    font-size: 1.15rem;
    color: var(--wood-200);
    opacity: .9;
}

.contact-page-channels {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.contact-page-channel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(6px);
    transition: background .3s, border-color .3s, transform .4s var(--ease);
}

.contact-page-channel:hover {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .3);
    transform: translateX(4px);
}

.contact-page-channel__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--wood-300);
    font-size: 1.25rem;
}

.contact-page-channel__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3
}

.contact-page-channel__text small {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wood-300);
}

.contact-page-channel__text strong {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--paper)
}

.contact-page-channel__arrow {
    margin-left: auto;
    color: var(--wood-300);
    transition: transform .4s var(--ease);
}

.contact-page-channel:hover .contact-page-channel__arrow {
    transform: translateX(5px)
}

/* ---------- Form card ---------- */
.contact-page-form-card {
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.contact-page-form-card h2 {
    margin-bottom: .75rem
}

.contact-page-form-card__intro {
    margin-bottom: 2rem;
    color: var(--ink-soft)
}

.contact-page-alert {
    margin-bottom: 1.5rem;
    padding: 1rem 1.2rem;
    border: 1px solid #e7b9ae;
    border-radius: var(--r-card);
    background: #fbeae6;
    color: #7a2a1b;
    font-size: .95rem;
}

.contact-page-alert a {
    font-weight: 600;
    text-decoration: underline
}

.contact-page-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.25rem;
}

.contact-page-field--wide {
    grid-column: 1 / -1
}

.contact-page-field>label:not(.contact-page-consent) {
    display: block;
    margin-bottom: .45rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--wood-800);
}

.contact-page-field input[type="text"],
.contact-page-field input[type="tel"],
.contact-page-field input[type="email"],
.contact-page-field select,
.contact-page-field textarea {
    width: 100%;
    padding: .9rem 1rem;
    border: 1px solid rgba(90, 52, 24, .28);
    border-radius: var(--r-card);
    background: var(--paper);
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    transition: border-color .25s, box-shadow .25s;
}

.contact-page-field textarea {
    resize: vertical;
    min-height: 8rem
}

.contact-page-field select {
    appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A3418' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 1.1rem;
}

.contact-page-field input::placeholder,
.contact-page-field textarea::placeholder {
    color: rgba(110, 90, 74, .65)
}

.contact-page-field input:focus,
.contact-page-field select:focus,
.contact-page-field textarea:focus {
    outline: none;
    border-color: var(--wood-600);
    box-shadow: 0 0 0 3px rgba(148, 89, 44, .18);
}

.contact-page-field.is-invalid input,
.contact-page-field.is-invalid select,
.contact-page-field.is-invalid textarea {
    border-color: #b3402a
}

.contact-page-field__error {
    margin: .45rem 0 0;
    font-size: .85rem;
    color: #b3402a
}

.contact-page-consent {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: .93rem;
    color: var(--ink-soft);
    cursor: pointer;
}

.contact-page-consent input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .2rem;
    accent-color: var(--wood-700);
}

.contact-page-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-page-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}

.contact-page-form__actions .btn[disabled] {
    opacity: .7;
    cursor: progress;
    transform: none
}

.contact-page-form__note {
    margin: 0;
    font-size: .93rem;
    color: var(--ink-soft)
}

.contact-page-form__note a {
    font-weight: 600;
    color: var(--wood-800)
}

/* ---------- What happens next ---------- */
.contact-page-aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem)
}

.contact-page-steps {
    margin: 1.75rem 0 2rem
}

.contact-page-steps li {
    position: relative;
    padding: 0 0 1.75rem 3.6rem
}

.contact-page-steps li:last-child {
    padding-bottom: 0
}

.contact-page-steps li::before {
    content: "";
    position: absolute;
    top: 2.4rem;
    bottom: .1rem;
    left: 1.1rem;
    width: 1px;
    background: var(--line);
}

.contact-page-steps li:last-child::before {
    display: none
}

.contact-page-steps__number {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--wood-900);
    color: var(--paper);
    font-size: .85rem;
    font-weight: 600;
}

.contact-page-steps h3 {
    margin-bottom: .35rem;
    font-size: 1.2rem
}

.contact-page-steps p {
    margin: 0;
    color: var(--ink-soft)
}

.contact-page-aside__photo {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
}

.contact-page-aside__photo img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0
}

.contact-page-aside__photo figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: rgba(33, 20, 10, .78);
    backdrop-filter: blur(4px);
    color: var(--paper);
    font-size: .88rem;
}

.contact-page-aside__photo figcaption a {
    font-weight: 600
}

/* ---------- Map ---------- */
.contact-page-map {
    padding-top: clamp(3rem, 6vw, 4.5rem)
}

.contact-page-map__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
}

.contact-page-map__frame iframe {
    display: block;
    width: 100%;
    height: clamp(320px, 42vw, 460px);
    border: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .contact-page-aside {
        position: static
    }
}

@media (max-width: 575.98px) {
    .contact-page-form__grid {
        grid-template-columns: 1fr
    }

    .contact-page-steps li {
        padding-left: 3.2rem
    }

    .contact-page-form__actions .btn {
        flex: 1 1 100%
    }
}

@media (prefers-reduced-motion: reduce) {

    .contact-page-channel,
    .contact-page-channel__arrow {
        transition: none
    }
}

/* ==========================================================================
   Message pages  (404.php, thank-you-page.php)  ·  prefix: message-page
   ========================================================================== */
.message-page {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(100vh - var(--hero-offset));
    padding: clamp(3rem, 8vw, 6rem) 0;
    overflow: hidden;
    background: var(--wood-950);
    color: var(--wood-200);
}

.message-page__media {
    position: absolute;
    inset: 0
}

.message-page__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    opacity: .5
}

.message-page__media::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
    background:
        linear-gradient(180deg, rgba(33, 20, 10, .58) 0%, rgba(33, 20, 10, .85) 100%),
        radial-gradient(60% 70% at 50% 0%, rgba(148, 89, 44, .28), transparent 70%);
}

.message-page .container {
    position: relative;
    z-index: 1
}

.message-page__card {
    width: 100%;
    text-align: center;
}

.message-page__code {
    display: inline-flex;
    align-items: center;
    gap: .04em;
    margin: 0 0 1rem;
    font-size: clamp(5rem, 15vw, 8.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--wood-300);
}

.message-page__rings {
    height: .8em;
    width: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
}

.message-page__rings circle {
    fill: currentColor;
    stroke: none
}

.message-page__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(155, 192, 143, .45);
    border-radius: 50%;
    background: rgba(155, 192, 143, .14);
    color: var(--leaf-soft);
    font-size: 2rem;
}

.message-page__icon::after {
    content: "";
    position: absolute;
    inset: -.55rem;
    border: 1px solid rgba(155, 192, 143, .25);
    border-radius: 50%;
}

.message-page h1 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    line-height: 1.08;
    text-wrap: balance;
    color: var(--paper);
}

.message-page h1 em {
    color: var(--wood-300)
}

.message-page__text {
    max-width: 32rem;
    text-wrap: pretty;
    margin: 0 auto 1.75rem;
    color: var(--wood-200);
    opacity: .88;
}

.message-page__search {
    display: flex;
    gap: .6rem;
    max-width: 28rem;
    margin: 0 auto 1.5rem;
}

.message-page__search input {
    flex: 1;
    min-width: 0;
    padding: .9rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font: inherit;
    font-size: 1rem;
    color: var(--paper);
    transition: border-color .25s, background .25s;
}

.message-page__search input::placeholder {
    color: var(--wood-300)
}

.message-page__search input:focus {
    outline: none;
    border-color: var(--wood-300);
    background: rgba(255, 255, 255, .12);
}

.message-page__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.75rem;
}

.message-page__links a {
    display: inline-block;
    padding: .5rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-size: .93rem;
    color: var(--wood-200);
    transition: background .3s, color .3s, border-color .3s;
}

.message-page__links a:hover {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--wood-900)
}

.message-page__steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.1rem;
    margin-bottom: 2rem;
    font-size: .88rem;
    color: var(--wood-200);
}

.message-page__steps li {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .55rem
}

.message-page__steps span {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--wood-300);
    font-size: .78rem;
    font-weight: 600;
}

.message-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem
}

.message-page__note {
    margin: 1.5rem 0 0;
    font-size: .93rem;
    color: var(--wood-300)
}

.message-page__note a {
    font-weight: 600;
    color: var(--paper)
}

@media (max-width: 575.98px) {
    .message-page__search {
        flex-direction: column
    }

    .message-page__actions .btn {
        flex: 1 1 100%
    }
}

/* ==========================================================================
   Default page  (page.php)  ·  prefix: page-hero, page-content
   Text written in the WordPress editor: policies, terms and other basic pages
   ========================================================================== */
.page-hero {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem);
    background:
        radial-gradient(60% 80% at 90% 10%, rgba(148, 89, 44, .38), transparent 70%),
        radial-gradient(50% 60% at 0% 100%, rgba(47, 107, 58, .2), transparent 70%),
        var(--wood-950);
    color: var(--wood-200);
}

.page-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin-bottom: 1.75rem;
    font-size: .85rem;
    color: var(--wood-300);
}

.page-hero__breadcrumb a {
    transition: color .3s
}

.page-hero__breadcrumb a:hover {
    color: var(--paper)
}

.page-hero__breadcrumb a::after,
.page-hero__breadcrumb span::before {
    content: "/";
    opacity: .5
}

.page-hero__breadcrumb a::after {
    margin-left: .6rem
}

.page-hero__breadcrumb span::before {
    display: none
}

.page-hero h1 {
    margin-bottom: .9rem;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.05;
    color: var(--paper);
}

.page-hero__updated {
    margin: 0;
    font-size: .9rem;
    color: var(--wood-300)
}

.page-content {
    display: flow-root;
    max-width: 50rem;
    margin-inline: auto;
    color: var(--ink);
}

.page-content>*:first-child {
    margin-top: 0
}

.page-content h2 {
    margin: 2.75rem 0 1rem;
    font-size: clamp(1.6rem, 3vw, 2.15rem)
}

.page-content h3 {
    margin: 2.1rem 0 .75rem
}

.page-content h4 {
    margin: 1.6rem 0 .5rem;
    font-size: 1.15rem
}

.page-content ul,
.page-content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem
}

.page-content ul {
    list-style: disc
}

.page-content ol {
    list-style: decimal
}

.page-content li {
    margin-bottom: .45rem
}

.page-content li::marker {
    color: var(--wood-600)
}

.page-content a {
    color: var(--wood-700);
    text-decoration: underline;
    text-decoration-color: rgba(118, 68, 33, .4);
    text-underline-offset: 3px;
    transition: color .25s, text-decoration-color .25s;
}

.page-content a:hover {
    color: var(--wood-900);
    text-decoration-color: currentColor
}

.page-content blockquote {
    margin: 1.9rem 0;
    padding-left: 1.4rem;
    border-left: 3px solid var(--wood-300);
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--wood-800);
}

.page-content hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--line)
}

.page-content table {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    border-collapse: collapse;
}

.page-content th,
.page-content td {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.page-content th {
    background: var(--paper-2);
    font-weight: 600;
    color: var(--wood-900)
}

.page-content__figure {
    margin-bottom: 2.25rem
}

.page-content__figure img {
    width: 100%;
    border-radius: var(--r-card)
}

.page-content .alignleft {
    float: left;
    max-width: 50%;
    margin: .4rem 1.5rem 1rem 0
}

.page-content .alignright {
    float: right;
    max-width: 50%;
    margin: .4rem 0 1rem 1.5rem
}

.page-content .aligncenter {
    display: block;
    margin-inline: auto
}

.page-content .wp-caption {
    max-width: 100%
}

.page-content .wp-caption-text {
    margin-top: .4rem;
    font-size: .85rem;
    color: var(--ink-soft)
}

.page-content__pages {
    display: flex;
    gap: .6rem;
    margin-top: 2rem;
    font-weight: 600
}

@media (max-width: 575.98px) {

    .page-content .alignleft,
    .page-content .alignright {
        float: none;
        max-width: 100%;
        margin: 0 0 1rem
    }
}

/* ==========================================================================
   Blog archive  (archive-blog.php)  ·  prefix: blog-archive, blog-pagination
   Cards use the shared .post styles from app.css (same as the home page)
   ========================================================================== */
.post__media--empty {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background: var(--wood-200);
    color: var(--wood-500);
    font-size: 2.5rem;
}

.blog-archive__empty {
    margin: 0;
    padding: 3rem 0;
    text-align: center;
    color: var(--ink-soft);
}

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.blog-pagination .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 2.9rem;
    height: 2.9rem;
    padding: 0 1rem;
    border: 1px solid var(--wood-300);
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--wood-800);
    transition: background .3s, color .3s, border-color .3s;
}

.blog-pagination a.page-numbers:hover {
    background: var(--wood-700);
    border-color: var(--wood-700);
    color: var(--paper);
}

.blog-pagination .page-numbers.current {
    background: var(--wood-900);
    border-color: var(--wood-900);
    color: var(--paper);
}

.blog-pagination .page-numbers.dots {
    min-width: auto;
    padding: 0 .25rem;
    border-color: transparent;
}

.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    padding: 0 1.4rem
}

/* ==========================================================================
   Single blog article  (single-blog.php)  ·  prefix: blog-single, blog-related
   Article text uses the .page-content styles above
   ========================================================================== */
.blog-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: 1.25rem;
    font-size: .9rem;
    color: var(--wood-300);
}

.blog-single__meta a.post__cat {
    transition: background .3s
}

.blog-single__meta a.post__cat:hover {
    background: var(--wood-500)
}

.blog-single__navigation {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 50rem;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.blog-single__link {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    transition: background .3s, border-color .3s, transform .4s var(--ease);
}

.blog-single__link--next {
    grid-column: 2;
    text-align: right
}

.blog-single__link:hover {
    background: var(--wood-900);
    border-color: var(--wood-900);
    transform: translateY(-3px);
}

.blog-single__link small {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wood-600);
    transition: color .3s;
}

.blog-single__link strong {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--wood-900);
    transition: color .3s;
}

.blog-single__link:hover small {
    color: var(--wood-300)
}

.blog-single__link:hover strong {
    color: var(--paper)
}

.blog-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.blog-related__head h2 {
    margin: 0
}

@media (max-width: 575.98px) {
    .blog-single__navigation {
        grid-template-columns: 1fr
    }

    .blog-single__link--next {
        grid-column: 1
    }
}

/* ---------- Blog sidebar (template-parts/blog-sidebar.php) ---------- */
.blog-single__content {
    max-width: none;
    margin-inline: 0
}

.blog-single__navigation {
    max-width: none;
    margin-inline: 0
}

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.blog-sidebar h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem
}

.blog-sidebar__cta {
    padding: 1.75rem 1.5rem;
    border-radius: var(--r-card);
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(148, 89, 44, .4), transparent 70%),
        var(--wood-900);
    color: var(--wood-200);
}

.blog-sidebar__cta h3 {
    color: var(--paper)
}

.blog-sidebar__channels {
    margin-bottom: 1.4rem
}

.blog-sidebar__channels a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-weight: 500;
    color: var(--paper);
    transition: color .3s;
}

.blog-sidebar__channels a:hover {
    color: var(--wood-300)
}

.blog-sidebar__channels .ic {
    color: var(--wood-300)
}

.blog-sidebar__cta .btn {
    width: 100%
}

.blog-sidebar__widget {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--paper);
}

.blog-sidebar__list {
    margin-bottom: .5rem
}

.blog-sidebar__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .98rem;
    color: var(--wood-900);
    transition: color .3s, padding .3s var(--ease);
}

.blog-sidebar__list a:hover {
    color: var(--wood-600);
    padding-left: .35rem
}

.blog-sidebar__list .ic {
    color: var(--wood-500)
}

.blog-sidebar__count {
    display: grid;
    place-items: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--wood-100);
    font-size: .78rem;
    font-weight: 600;
    color: var(--wood-700);
}

.blog-sidebar__projects {
    margin-bottom: .5rem
}

.blog-sidebar__projects a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .98rem;
    line-height: 1.35;
    color: var(--wood-900);
    transition: color .3s;
}

.blog-sidebar__projects a:hover {
    color: var(--wood-600)
}

.blog-sidebar__projects img,
.blog-sidebar__projects-placeholder {
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: var(--r-img);
    object-fit: cover;
}

.blog-sidebar__projects-placeholder {
    display: grid;
    place-items: center;
    background: var(--wood-200);
    color: var(--wood-500)
}

.blog-sidebar__all {
    display: inline-block;
    margin-top: .75rem;
    font-size: .93rem
}

/* ==========================================================================
   Testimonials archive  (archive-testimonial.php)  ·  prefix: testimonial-archive
   Cards are the home page .review cards; pagination reuses .blog-pagination
   ========================================================================== */
.testimonial-archive .review {
    background: var(--paper);
}

/* ==========================================================================
   Building styles  (archive-building_style.php, single-building_style.php)
   Archive cards are the home page .post cards; the single page sidebar
   shares the .blog-sidebar look.  ·  prefix: style-single
   ========================================================================== */
.style-single__lead {
    max-width: 46rem;
    margin: 1.1rem 0 0;
    font-size: 1.15rem;
    color: var(--wood-200);
}

.style-single__highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.style-single__highlights li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
}

.style-single__highlights .ic {
    flex: none;
    margin-top: .25rem;
    color: var(--leaf);
}

.style-single__gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.style-single__gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-img);
}

.style-single__gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .style-single__gallery {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Projects  (archive-project.php, taxonomy-project_category.php, single-project.php)
   Archive cards are the home page .post cards; the single page reuses the
   style-single gallery and lead, and the .blog-sidebar look.
   Prefix: archive-filter (shared category filter), project-single
   ========================================================================== */
.archive-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 2.25rem;
}

.archive-filter a {
    padding: .5rem 1.15rem;
    border: 1px solid var(--wood-300);
    border-radius: 999px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--wood-800);
    transition: background .3s, color .3s, border-color .3s;
}

.archive-filter a:hover,
.archive-filter a.is-active {
    background: var(--wood-800);
    border-color: var(--wood-800);
    color: var(--paper);
}

.project-single__specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    margin: 0 0 2rem;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--line);
    overflow: hidden;
}

.project-single__specs div {
    padding: 1rem 1.25rem;
    background: var(--paper);
}

.project-single__specs dt {
    margin-bottom: .2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wood-600);
}

.project-single__specs dd {
    margin: 0;
    font-weight: 600;
    color: var(--wood-900);
}

.project-single__scope {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.project-single__scope li {
    margin: 0;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: var(--wood-100);
    color: var(--wood-800);
    font-size: .9rem;
    font-weight: 600;
}

/* Lists inside .page-content that are styled as chips / check lists (no bullets) */
.page-content .project-single__scope,
.page-content .style-single__highlights {
    list-style: none;
    padding-left: 0;
}

/* ==========================================================================
   Services  (archive-service.php, taxonomy-service_category.php, single-service.php)
   Archive cards are the home page .svc cards; the category filter is the
   shared .archive-filter (see Projects); the single page reuses the
   style-single lead and highlights, and the .blog-sidebar look.
   ========================================================================== */
.service-archive .svc {
    height: 100%;
}

/* ==========================================================================
   FAQ page  (faq-page-template.php)  ·  prefix: faq-page
   ========================================================================== */
.faq-page__intro {
    position: sticky;
    top: calc(var(--header-h, 80px) + 1.5rem);
}

.faq-page__intro .page-content {
    margin-bottom: 1.5rem;
}

.faq-page__list {
    border-top: 1px solid var(--line);
}

.faq-page__item {
    border-bottom: 1px solid var(--line);
}

.faq-page__question {
    position: relative;
    display: block;
    padding: 1.35rem 3rem 1.35rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--wood-900);
    cursor: pointer;
    list-style: none;
    transition: color .3s;
}

.faq-page__question::-webkit-details-marker {
    display: none;
}

.faq-page__question:hover {
    color: var(--wood-600);
}

.faq-page__question::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .35rem;
    width: .6rem;
    height: .6rem;
    margin-top: -.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s var(--ease);
}

.faq-page__item[open] .faq-page__question::after {
    margin-top: -.15rem;
    transform: rotate(-135deg);
}

.faq-page__answer {
    padding: 0 3rem 1.35rem 0;
}

.faq-page__answer > :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Gallery page  (gallery-page-template.php)  ·  prefix: gallery-page
   The lightbox (gallery-lightbox) is built by additional.js
   ========================================================================== */
.gallery-page__intro {
    max-width: 46rem;
    margin-bottom: 2.25rem;
}

.gallery-page__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-img);
    background: var(--wood-100);
}

.gallery-page__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1s var(--ease);
}

.gallery-page__item:hover img,
.gallery-page__item:focus-visible img {
    transform: scale(1.06);
}

.gallery-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(24, 14, 8, .94);
    color: var(--paper);
}

.gallery-lightbox::backdrop {
    background: rgba(24, 14, 8, .94);
}

.gallery-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 4.5rem 1rem 2rem;
}

.gallery-lightbox__image {
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    object-fit: contain;
    border-radius: var(--r-img);
}

.gallery-lightbox__caption {
    margin-top: 1rem;
    min-height: 1.4em;
    text-align: center;
    color: var(--wood-200);
}

.gallery-lightbox__button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: transparent;
    color: var(--paper);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background .3s;
}

.gallery-lightbox__button:hover,
.gallery-lightbox__button:focus-visible {
    background: rgba(255, 255, 255, .15);
}

.gallery-lightbox__close {
    top: 1rem;
    right: 1rem;
}

.gallery-lightbox__previous,
.gallery-lightbox__next {
    top: 50%;
    margin-top: -24px;
}

.gallery-lightbox__previous {
    left: 1rem;
}

.gallery-lightbox__next {
    right: 1rem;
}

@media (max-width: 575.98px) {
    .gallery-lightbox__previous,
    .gallery-lightbox__next {
        top: auto;
        bottom: 1rem;
        margin-top: 0;
    }
}

/* ==========================================================================
   Search results  (search.php)  ·  prefix: search-page
   Result cards are the .post cards used by the blog
   ========================================================================== */
.search-page__form {
    display: flex;
    gap: .6rem;
    max-width: 32rem;
    margin-bottom: 2.5rem;
}

.search-page__form input {
    flex: 1;
    min-width: 0;
    padding: .9rem 1.3rem;
    border: 1px solid var(--wood-300);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    transition: border-color .25s, box-shadow .25s;
}

.search-page__form input:focus {
    outline: none;
    border-color: var(--wood-600);
    box-shadow: 0 0 0 3px rgba(148, 89, 44, .15);
}

@media (max-width: 575.98px) {
    .search-page__form {
        flex-direction: column;
    }
}


/* ==========================================================================
   14. Service enquiry form (single-service.php)
   Reuses the .contact-page-* form styles; only the spacing under the
   service details is added here.
   ========================================================================== */

.service-enquiry {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    scroll-margin-top: 6rem;
}