/* =========================================================



   JACKSON HOLE RARE COIN



   Phase 1



========================================================= */







:root {



    --maroon: #651616;



    --maroon-deep: #3b0b0b;



    --maroon-black: #240707;







    --gold: #b78632;



    --gold-light: #d4b36e;



    --gold-dark: #80601f;







    --paper: #f4eee2;



    --paper-light: #fbf8f1;



    --paper-dark: #e7ddca;







    --silver: #aaa7a0;



    --ink: #211d19;



    --muted: #706a61;







    --serif: Georgia, "Times New Roman", serif;



    --sans: Arial, Helvetica, sans-serif;







    --max-width: 1240px;



}











/* =========================================================



   RESET / GLOBAL



========================================================= */







*,
*::before,
*::after {



    box-sizing: border-box;



}







html {



    scroll-behavior: smooth;



}







body {



    margin: 0;







    color: var(--ink);



    background: var(--paper-light);







    font-family: var(--serif);



    line-height: 1.65;



}







img {



    display: block;



    max-width: 100%;



}







a {



    color: inherit;



}







section {



    scroll-margin-top: 95px;



}







.section-inner {



    width: min(calc(100% - 48px), var(--max-width));



    margin: 0 auto;



}











/* =========================================================



   HEADER



========================================================= */







.site-header {



    position: sticky;



    top: 0;



    z-index: 1000;







    background: rgba(251, 248, 241, 0.97);







    border-bottom: 1px solid rgba(183, 134, 50, 0.28);







    backdrop-filter: blur(12px);



}







.header-inner {



    width: min(calc(100% - 48px), 1280px);



    height: 100px;







    margin: 0 auto;







    display: flex;



    align-items: center;



    justify-content: space-between;



}







.brand {



    display: block;



    flex-shrink: 0;







    text-decoration: none;



}







.brand img {



    width: 255px;



    height: auto;



}







.main-nav {



    display: flex;



    align-items: center;







    gap: 40px;







    font-family: var(--sans);



    font-size: 11px;



    font-weight: 700;







    letter-spacing: 2.2px;







    text-transform: uppercase;



}







.main-nav a {



    text-decoration: none;







    transition:



        color .2s ease,



        border-color .2s ease,



        background .2s ease;



}







.main-nav a:hover {



    color: var(--maroon);



}







.nav-phone {



    padding: 15px 20px;







    color: var(--maroon);







    border: 1px solid var(--gold);



}







.nav-phone:hover {



    background: rgba(183, 134, 50, .08);



}







.menu-toggle {



    display: none;



}











/* =========================================================

   HERO

========================================================= */



.hero {



    position: relative;



    overflow: hidden;







    min-height: 760px;



    padding: 85px 24px 105px;







    /*



     \* The first layer is the parchment wash.



     \* The second layer is the actual Jackson Hole artwork.



     \*



     \* IMPORTANT:



     \* style.css lives in assets/css/



     \* so ../images/ moves us to assets/images/



     */







    background-image:



        linear-gradient(



            90deg,



            rgba(248, 243, 233, .60) 0%,



            rgba(248, 243, 233, .78) 28%,



            rgba(248, 243, 233, .88) 50%,



            rgba(248, 243, 233, .72) 72%,



            rgba(248, 243, 233, .50) 100%



        ),



        url("../images/backgrounds/hero-jackson-hole.jpg");







    background-size: cover;



    background-position: center center;



    background-repeat: no-repeat;







    border-bottom: 1px solid rgba(183, 134, 50, .35);



}











/*



 \* Decorative gold frame.



 \* No bottom border so we don't get the



 \* strange double horizontal line.



 */







.hero::after {



    content: "";







    position: absolute;







    top: 14px;



    left: 14px;



    right: 14px;







    height: calc(100% - 14px);







    pointer-events: none;







    border-top: 1px solid rgba(183, 134, 50, .32);



    border-left: 1px solid rgba(183, 134, 50, .32);



    border-right: 1px solid rgba(183, 134, 50, .32);



}











/*



 \* Subtle center glow.



 \* Keeps text readable without hiding the artwork.



 */







.hero::before {



    content: "";







    position: absolute;



    inset: 0;







    pointer-events: none;







    background:



        radial-gradient(



            ellipse at center,



            rgba(251, 248, 241, .40) 0%,



            rgba(251, 248, 241, .16) 42%,



            transparent 72%



        );



}











/*



 \* Hero content sits above all background layers.



 */







.hero-inner {



    position: relative;



    z-index: 2;







    max-width: 920px;







    margin: 0 auto;







    text-align: center;



}











/* PRIMARY LOGO */







.hero-logo {



    width: 300px;







    margin: 0 auto 34px;



}











/* SPECIALTIES */







.specialties {



    display: flex;



    align-items: center;



    justify-content: center;



    flex-wrap: wrap;







    gap: 14px;







    color: var(--maroon);







    font-size: 17px;



    letter-spacing: .5px;



}











.specialties i {



    width: 5px;



    height: 5px;







    flex-shrink: 0;







    background: var(--gold);







    border-radius: 50%;



}











/* DECORATIVE ORNAMENT */







.ornament {



    display: flex;



    align-items: center;



    justify-content: center;







    gap: 13px;







    margin: 28px 0 25px;







    color: var(--gold);



}











.ornament span {



    width: 70px;



    height: 1px;







    background:



        linear-gradient(



            to right,



            transparent,



            var(--gold)



        );



}











.ornament span:last-child {



    background:



        linear-gradient(



            to left,



            transparent,



            var(--gold)



        );



}











.ornament b {



    font-size: 8px;



}











/* HEADLINE */







.hero h1 {



    margin: 0;







    font-size: clamp(58px, 7vw, 92px);



    font-weight: 400;







    line-height: .98;







    letter-spacing: -3px;



}











/* COPY */







.hero-copy {



    max-width: 720px;







    margin: 32px auto 0;







    color: #544d44;







    font-size: 19px;



}











/* ACTIONS */







.hero-actions {



    display: flex;



    justify-content: center;



    flex-wrap: wrap;







    gap: 15px;







    margin-top: 38px;



}











/* =========================================================



   BUTTONS



========================================================= */







.button {



    display: inline-flex;



    align-items: center;



    justify-content: center;







    min-width: 210px;



    min-height: 54px;







    padding: 14px 25px;







    font-family: var(--sans);







    font-size: 11px;



    font-weight: 700;







    letter-spacing: 2px;







    text-transform: uppercase;



    text-decoration: none;







    cursor: pointer;







    transition:



        background .2s ease,



        color .2s ease,



        border-color .2s ease,



        transform .2s ease,



        box-shadow .2s ease;



}







.button:hover {



    transform: translateY(-2px);



}







.button-primary {



    color: #fff;







    background: var(--maroon);







    border: 1px solid var(--maroon);



}







.button-primary:hover {



    background: var(--maroon-deep);







    box-shadow:



        0 8px 20px rgba(59, 11, 11, .15);



}







.button-secondary {



    color: var(--maroon);







    background: transparent;







    border: 1px solid var(--gold);



}







.button-secondary:hover {



    background: rgba(183,134,50,.08);



}







.button-gold {



    color: var(--maroon-black);







    background: var(--gold-light);







    border: 1px solid var(--gold-light);



}







.button-gold:hover {



    background: #dfc184;







    border-color: #dfc184;



}











/* =========================================================



   SHARED TYPOGRAPHY



========================================================= */







.eyebrow {



    margin: 0 0 15px;







    color: var(--gold-dark);







    font-family: var(--sans);







    font-size: 11px;



    font-weight: 700;







    letter-spacing: 4px;







    text-transform: uppercase;



}







.eyebrow.light {



    color: var(--gold-light);



}







section h2 {



    margin: 0;







    font-size: clamp(42px, 5vw, 65px);



    font-weight: 400;







    line-height: 1.05;



}







.section-intro {



    max-width: 820px;







    margin: 30px auto 0;







    color: var(--muted);







    font-size: 18px;



}







.section-intro.narrow {



    max-width: 720px;



}







.gold-rule {



    width: 70px;



    height: 2px;







    margin: 28px auto;







    background: var(--gold);



}







.gold-rule.left {



    margin-left: 0;



}











/* =========================================================



   EXPERIENCE



========================================================= */







.experience {



    padding: 110px 0;







    text-align: center;







    background: var(--paper-light);



}







.credentials {



    display: grid;







    grid-template-columns: repeat(4, 1fr);







    max-width: 900px;







    margin: 65px auto 0;







    border-top: 1px solid rgba(183,134,50,.35);



    border-bottom: 1px solid rgba(183,134,50,.35);



}







.credential {



    position: relative;







    padding: 32px 20px;



}







.credential:not(:last-child)::after {



    content: "";







    position: absolute;







    top: 25%;



    right: 0;







    width: 1px;



    height: 50%;







    background: rgba(183,134,50,.35);



}







.credential strong {



    display: block;







    color: var(--maroon);







    font-size: 34px;



    font-weight: 400;



}







.credential span {



    display: block;







    margin-top: 5px;







    color: var(--muted);







    font-family: var(--sans);







    font-size: 10px;



    font-weight: 700;







    letter-spacing: 1.8px;







    line-height: 1.5;







    text-transform: uppercase;



}











/* =========================================================



   SERVICES



========================================================= */







.services {



    padding: 115px 0;







    text-align: center;







    background:



        linear-gradient(



            rgba(239,230,212,.94),



            rgba(247,241,230,.96)



        );



}







.service-grid {



    display: grid;







    grid-template-columns: repeat(4, 1fr);







    gap: 1px;







    margin-top: 65px;







    background: rgba(183,134,50,.35);







    border: 1px solid rgba(183,134,50,.35);



}







.service-card {



    min-height: 350px;







    padding: 45px 32px;







    text-align: left;







    background: rgba(251,248,241,.94);







    transition:



        transform .2s ease,



        background .2s ease,



        box-shadow .2s ease;



}







.service-card:hover {



    position: relative;



    z-index: 2;







    transform: translateY(-3px);







    background: #fffaf2;







    box-shadow:



        0 12px 28px rgba(50, 30, 15, .08);



}







.service-number {



    margin-bottom: 35px;







    color: var(--gold);







    font-family: var(--sans);







    font-size: 10px;



    font-weight: 700;







    letter-spacing: 2px;



}







.service-card h3 {



    margin: 0 0 20px;







    color: var(--maroon);







    font-size: 25px;



    font-weight: 400;







    line-height: 1.2;



}







.service-card p {



    margin: 0;







    color: var(--muted);







    font-size: 16px;



}











/* =========================================================



   STORY



========================================================= */







.story {



    overflow: hidden;







    color: #f7efe3;







    background:



        radial-gradient(



            circle at 20% 50%,



            rgba(148,64,45,.35),



            transparent 35%



        ),



        linear-gradient(



            120deg,



            #2b0707,



            #4d0d0d 55%,



            #260606



        );



}







.story-inner {

    display: grid;



    grid-template-columns:

        minmax(420px, 45%)

        minmax(0, 1fr);



    width: 100%;

    max-width: none;



    margin: 0;

}







/* =========================================================

   STORY ARTWORK

========================================================= */



.story-art {

    position: relative;

    min-height: 720px;

    overflow: hidden;



    background-image:

        linear-gradient(

            90deg,

            rgba(55, 8, 8, .05) 0%,

            rgba(55, 8, 8, .08) 55%,

            rgba(55, 8, 8, .45) 82%,

            rgba(55, 8, 8, .88) 100%

        ),

        url("../images/backgrounds/story-engraving.jpg");



    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;



    border-right: 1px solid rgba(212, 179, 110, .18);

}



.story-art::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;



    background:

        linear-gradient(

            180deg,

            rgba(30, 4, 4, .22) 0%,

            transparent 18%,

            transparent 78%,

            rgba(30, 4, 4, .30) 100%

        );

}





.story-content {

    width: 100%;

    max-width: 780px;



    padding: 105px 80px;



    justify-self: start;

}







.story-content h2 {



    color: #fffaf0;



}







.story-content p {



    color: rgba(255,248,236,.78);







    font-size: 17px;



}







/* =========================================================



   MEMBERSHIPS & AFFILIATIONS



========================================================= */







.affiliations {



    margin-top: 42px;







    padding-top: 30px;







    border-top: 1px solid rgba(212,179,110,.25);



}











.affiliations-label {



    margin: 0 0 22px !important;







    color: var(--gold-light) !important;







    font-family: var(--sans);







    font-size: 9px !important;



    font-weight: 700;







    letter-spacing: 3px;







    text-transform: uppercase;



}











.affiliation-list {



    display: grid;







    grid-template-columns: 1fr 1fr;







    gap: 1px;







    background: rgba(212,179,110,.18);







    border: 1px solid rgba(212,179,110,.18);



}











.affiliation {



    display: flex;



    align-items: center;







    gap: 16px;







    min-height: 78px;







    padding: 16px 18px;







    color: rgba(255,248,236,.82);







    text-decoration: none;







    background: rgba(20,5,5,.22);







    transition:



        background .2s ease,



        color .2s ease;



}











.affiliation:hover {



    color: #fff;







    background: rgba(183,134,50,.12);



}











.affiliation strong {



    display: flex;



    align-items: center;



    justify-content: center;







    flex: 0 0 54px;







    width: 54px;



    height: 54px;







    color: var(--gold-light);







    font-family: var(--serif);







    font-size: 15px;



    font-weight: 400;







    letter-spacing: 1px;







    border: 1px solid rgba(212,179,110,.45);







    border-radius: 50%;



}











.affiliation span {



    display: block;







    color: inherit;







    font-family: var(--serif);







    font-size: 14px;







    line-height: 1.35;



}











.affiliation small {



    display: block;







    margin-top: 4px;







    color: var(--gold-light);







    font-family: var(--sans);







    font-size: 8px;



    font-weight: 700;







    letter-spacing: 1.5px;







    text-transform: uppercase;



}











/* =========================================================



   LOWER 48



========================================================= */







.service-area {



    position: relative;



    overflow: hidden;







    padding: 115px 0;







    background:



        repeating-linear-gradient(



            0deg,



            rgba(70,50,30,.018) 0,



            rgba(70,50,30,.018) 1px,



            transparent 1px,



            transparent 5px



        ),



        linear-gradient(



            135deg,



            #eee4d1 0%,



            #faf6ed 45%,



            #e9ddc7 100%



        );







    border-top: 1px solid rgba(183,134,50,.25);



    border-bottom: 1px solid rgba(183,134,50,.35);



}











/*



   Decorative inner frame.



*/







.service-area::before {



    content: "";







    position: absolute;







    inset: 16px;







    pointer-events: none;







    border: 1px solid rgba(183,134,50,.22);



}











/* INTRO */







.service-area-heading {



    position: relative;



    z-index: 2;







    max-width: 850px;







    margin: 0 auto 55px;







    text-align: center;



}







.service-area-heading h2 {



    max-width: 800px;







    margin: 0 auto;







    color: var(--maroon);



}







.service-area-heading > p:last-child {



    max-width: 680px;







    margin: 28px auto 0;







    color: var(--muted);







    font-size: 18px;



}











/* MAP ARTWORK */







.lower48-feature {



    position: relative;



    z-index: 2;







    max-width: 1180px;







    margin: 0 auto;







    padding: 9px;







    background: #e2c68d;







    border: 1px solid var(--gold-dark);







    box-shadow:



        0 25px 65px rgba(50,30,15,.20),



        0 5px 15px rgba(50,30,15,.15);



}







.lower48-feature::before {



    content: "";







    position: absolute;







    inset: 4px;







    z-index: 2;







    pointer-events: none;







    border: 1px solid rgba(101,22,22,.55);



}







.lower48-map {



    position: relative;



    z-index: 1;







    display: block;







    width: 100%;



    height: auto;







    border: 1px solid rgba(60,25,10,.6);



}











/* LOWER 48 BOTTOM COPY */







.service-area-bottom {



    position: relative;



    z-index: 2;







    display: flex;



    align-items: center;



    justify-content: space-between;







    gap: 60px;







    max-width: 1000px;







    margin: 50px auto 0;



}







.service-area-bottom p {



    max-width: 670px;







    margin: 0;







    color: var(--muted);







    font-size: 17px;



}







.service-area-bottom .button {



    flex-shrink: 0;



}











/* =========================================================



   CONTACT



========================================================= */







.contact {



    padding: 120px 0;







    color: #fff;







    background:



        linear-gradient(



            125deg,



            var(--maroon-black),



            var(--maroon) 60%,



            #3b0b0b



        );



}







.contact > .section-inner {



    display: grid;







    grid-template-columns: .8fr 1.2fr;







    gap: 100px;



}







.contact h2 {



    color: #fff9ef;



}







.contact-heading > p:not(.eyebrow) {



    max-width: 480px;







    color: rgba(255,255,255,.7);



}







.direct-contact {



    margin-top: 45px;



}







.direct-contact a {



    display: block;







    margin: 20px 0;







    color: #fff;







    font-size: 22px;







    text-decoration: none;







    transition: color .2s ease;



}







.direct-contact a:hover {



    color: var(--gold-light);



}







.direct-contact span {



    display: block;







    margin-bottom: 2px;







    color: var(--gold-light);







    font-family: var(--sans);







    font-size: 9px;



    font-weight: 700;







    letter-spacing: 2.5px;







    text-transform: uppercase;



}











/* =========================================================



   CONTACT FORM



========================================================= */







.contact-form-wrap {



    padding: 50px;







    background: rgba(20,5,5,.35);







    border: 1px solid rgba(212,179,110,.28);



}







.form-row {



    display: grid;







    grid-template-columns: 1fr 1fr;







    gap: 25px;



}







.form-group {



    margin-bottom: 25px;



}







.form-group label {



    display: block;







    margin-bottom: 8px;







    color: var(--gold-light);







    font-family: var(--sans);







    font-size: 9px;



    font-weight: 700;







    letter-spacing: 2px;







    text-transform: uppercase;



}







.form-group input,



.form-group textarea {



    width: 100%;







    padding: 14px 0;







    color: #fff;







    font-family: var(--serif);







    font-size: 17px;







    outline: none;







    background: transparent;







    border: 0;



    border-bottom: 1px solid rgba(255,255,255,.35);







    transition: border-color .2s ease;



}







.form-group textarea {



    padding: 15px;







    resize: vertical;







    border: 1px solid rgba(255,255,255,.25);



}







.form-group input:focus,



.form-group textarea:focus {



    border-color: var(--gold-light);



}







.website-field {



    position: absolute !important;







    left: -9999px !important;







    width: 1px;



    height: 1px;







    overflow: hidden;



}







.form-message {



    margin-bottom: 25px;







    padding: 15px;







    font-family: var(--sans);







    font-size: 13px;



}







.form-message.success {



    color: #f5e7c5;







    border: 1px solid var(--gold);



}







.form-message.error {



    color: #ffd9d9;







    border: 1px solid #c77;



}











/* =========================================================



   FOOTER



========================================================= */







.site-footer {



    padding: 45px 24px;







    color: rgba(255,255,255,.65);







    background: #180505;







    border-top: 1px solid rgba(212,179,110,.25);



}







.footer-inner {



    text-align: center;



}







.footer-logo {



    width: 230px;







    margin: 0 auto 22px;







    filter: brightness(1.2);



}







.footer-contact {



    margin-bottom: 15px;







    font-family: var(--sans);







    font-size: 11px;







    letter-spacing: 1px;



}







.footer-contact a {



    text-decoration: none;







    transition: color .2s ease;



}







.footer-contact a:hover {



    color: var(--gold-light);



}







.footer-contact span {



    margin: 0 10px;







    color: var(--gold);



}







.site-footer p {



    margin: 0;







    font-family: var(--sans);







    font-size: 10px;







    letter-spacing: 1px;



}











/* =========================================================



   MOBILE CONTACT BAR



========================================================= */







.mobile-contact-bar {



    display: none;



}











/* =========================================================



   TABLET / SMALL DESKTOP



========================================================= */







@media (max-width: 1050px) {







    .main-nav {



        gap: 22px;



    }







    .service-grid {



        grid-template-columns: repeat(2, 1fr);



    }







    .contact > .section-inner {



        gap: 55px;



    }







}











/* =========================================================



   TABLET / MOBILE



========================================================= */







@media (max-width: 820px) {







    /*



       Leave room at the bottom of the viewport



       for our fixed Call / Email bar.



    */







    body {



        padding-bottom: 72px;



    }











    /* HEADER */







    .header-inner {



        height: 82px;



    }







    .brand img {



        width: 210px;



    }











    /* HAMBURGER */







    .menu-toggle {



        display: flex;



        flex-direction: column;







        gap: 5px;







        padding: 10px;







        cursor: pointer;







        background: transparent;







        border: 0;



    }







    .menu-toggle span {



        display: block;







        width: 25px;



        height: 1px;







        background: var(--maroon);



    }











    /* MOBILE NAV */







    .main-nav {



        position: absolute;







        top: 82px;



        left: 0;



        right: 0;







        display: none;







        flex-direction: column;



        align-items: stretch;







        gap: 0;







        padding: 20px 24px 28px;







        background: var(--paper-light);







        border-bottom: 1px solid var(--gold);







        box-shadow:



            0 15px 25px rgba(50,30,15,.08);



    }







    .main-nav.open {



        display: flex;



    }







    .main-nav a {



        padding: 14px 0;







        border-bottom: 1px solid rgba(183,134,50,.2);



    }







    .nav-phone {



        margin-top: 12px;







        text-align: center;



    }











    /* HERO */







        /* =====================================================



       HERO



    ====================================================== */







    .hero {



        min-height: auto;







        padding: 65px 20px 80px;







        /*



         \* Keep the SAME background image declared above.



         \* Only change its crop for narrower screens.



         */







        background-position: 25% center;



    }











    .hero::before {



        background:



            radial-gradient(



                ellipse at center,



                rgba(251, 248, 241, .34) 0%,



                rgba(251, 248, 241, .14) 45%,



                transparent 75%



            );



    }











    .hero::after {



        top: 10px;



        left: 10px;



        right: 10px;







        height: calc(100% - 10px);



    }











    .hero-logo {



        width: 245px;



    }











    .hero h1 {



        letter-spacing: -2px;



    }











    /* EXPERIENCE */







    .credentials {



        grid-template-columns: repeat(2, 1fr);



    }







    .credential:nth-child(2)::after {



        display: none;



    }











    /* STORY */



    .story-inner {

        grid-template-columns: 1fr;

    }



    .story-art {

        min-height: 390px;

        background-size: cover;

        background-position: 18% center;

        border-right: 0;

        border-bottom: 1px solid rgba(212, 179, 110, .22);

    }



    .story-content {

        max-width: none;

        padding: 75px 32px;

    }





    /* LOWER 48 */







    .service-area {



        padding: 85px 0;



    }







    .service-area-heading {



        margin-bottom: 40px;



    }







    .lower48-feature {



        padding: 5px;



    }







    .service-area-bottom {



        flex-direction: column;







        gap: 30px;







        margin-top: 40px;







        text-align: center;



    }











    /* CONTACT */







    .contact > .section-inner {



        grid-template-columns: 1fr;







        gap: 60px;



    }











    /* FIXED CALL / EMAIL BAR */







    .mobile-contact-bar {



        position: fixed;







        left: 0;



        right: 0;



        bottom: 0;







        z-index: 2000;







        display: grid;







        grid-template-columns: 1fr 1fr;







        min-height: 72px;







        background: #260707;







        border-top: 1px solid var(--gold);







        box-shadow:



            0 -8px 30px rgba(0,0,0,.18);



    }







    .mobile-contact-action {



        display: flex;



        align-items: center;



        justify-content: center;







        gap: 12px;







        min-width: 0;







        padding: 10px 14px;







        color: #fff;







        text-decoration: none;



    }







    .mobile-contact-action:first-child {



        border-right: 1px solid rgba(212,179,110,.35);



    }







    .mobile-contact-icon {



        flex: 0 0 auto;







        color: var(--gold-light);







        font-size: 21px;







        line-height: 1;



    }







    .mobile-contact-text {



        display: flex;



        flex-direction: column;







        min-width: 0;







        line-height: 1.2;



    }







    .mobile-contact-text small {



        margin-bottom: 4px;







        color: var(--gold-light);







        font-family: var(--sans);







        font-size: 8px;



        font-weight: 700;







        letter-spacing: 2px;







        text-transform: uppercase;



    }







    .mobile-contact-text strong {



        overflow: hidden;







        color: #fff;







        font-family: var(--serif);







        font-size: 14px;



        font-weight: 400;







        white-space: nowrap;







        text-overflow: ellipsis;



    }







}











/* =========================================================



   PHONE



========================================================= */







@media (max-width: 560px) {







    .section-inner,



    .header-inner {



        width: min(calc(100% - 32px), var(--max-width));



    }











    /* HEADER */







    .brand img {



        width: 180px;



    }











    /* HERO */







    /* =====================================================



       HERO



    ====================================================== */







    .hero {



        padding: 55px 18px 70px;







        /*



         \* Shift the background slightly left so more



         \* of the buffalo / landscape remains visible.



         */







        background-position: 22% center;



    }











    .hero-logo {



        width: 220px;







        margin-bottom: 28px;



    }











    .specialties {



        gap: 8px 11px;







        font-size: 14px;



    }











    .specialties i {



        width: 4px;



        height: 4px;



    }











    .hero h1 {



        font-size: clamp(48px, 15vw, 68px);







        letter-spacing: -2px;



    }











    .hero-copy {



        font-size: 17px;



    }











    .hero-actions {



        flex-direction: column;



    }











    /* BUTTONS */







    .button {



        width: 100%;



    }











    /* SECTION SPACING */







    .experience,



    .services,



    .contact {



        padding: 80px 0;



    }











    /* TYPOGRAPHY */







    section h2 {



        font-size: clamp(38px, 11vw, 52px);



    }











    /* EXPERIENCE */







    .credentials {



        grid-template-columns: 1fr 1fr;



    }







    .credential {



        padding: 26px 10px;



    }







    .credential strong {



        font-size: 29px;



    }











    /* SERVICES */







    .service-grid {



        grid-template-columns: 1fr;



    }







    .service-card {



        min-height: auto;



    }











    /* STORY */



    .story-art {

        min-height: 300px;

        background-position: 16% center;

    }



    .story-content {

        padding: 65px 25px;

    }





    /* LOWER 48 */







    .service-area {



        padding: 70px 0;



    }







    .service-area::before {



        inset: 8px;



    }







    .service-area-heading > p:last-child {



        font-size: 16px;



    }







    /*



       Give the artwork slightly more screen width



       on small devices.



    */







    .lower48-feature {



        margin-left: -8px;



        margin-right: -8px;



    }







    .service-area-bottom p {



        font-size: 16px;



    }











    /* CONTACT FORM */







    .contact-form-wrap {



        padding: 30px 22px;



    }







    .form-row {



        grid-template-columns: 1fr;







        gap: 0;



    }











    /* FOOTER */







    .footer-contact span {



        display: none;



    }







    .footer-contact a {



        display: block;







        margin: 8px;



    }











    /* MOBILE CONTACT BAR */







    .mobile-contact-action {



        gap: 9px;







        padding-left: 8px;



        padding-right: 8px;



    }







    .mobile-contact-icon {



        font-size: 19px;



    }







    .mobile-contact-text strong {



        font-size: 13px;



    }



    /* MEMBERSHIPS */







    .affiliation-list {



        grid-template-columns: 1fr;



    }











    .affiliation {



        min-height: 72px;







        padding: 14px 16px;



    }











    .affiliation strong {



        flex-basis: 48px;







        width: 48px;



        height: 48px;







        font-size: 13px;



    }











    .affiliation span {



        font-size: 13px;



    }



}











/* =========================================================



   VERY SMALL PHONES



========================================================= */







@media (max-width: 380px) {







    .mobile-contact-text strong {



        font-size: 12px;



    }







    .mobile-contact-icon {



        display: none;



    }







}

/* =========================================================
   ESTATE & PROBATE APPRAISALS
========================================================= */

.appraisal-hero {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 95px 24px;
    color: #fff8ed;
    background:
        linear-gradient(90deg, rgba(36,7,7,.96) 0%, rgba(59,11,11,.90) 48%, rgba(101,22,22,.74) 100%),
        url("../images/backgrounds/story-engraving.jpg");
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(212,179,110,.35);
}

.appraisal-hero::after {
    content: "";
    position: absolute;
    inset: 14px;
    pointer-events: none;
    border: 1px solid rgba(212,179,110,.24);
}

.appraisal-hero-inner {
    position: relative;
    z-index: 2;
    width: min(100%, 1050px);
    margin: 0 auto;
    text-align: center;
}

.appraisal-hero .eyebrow { color: var(--gold-light); }

.appraisal-hero h1 {
    max-width: 1000px;
    margin: 0 auto;
    color: #fffaf0;
    font-size: clamp(48px, 6vw, 76px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -2px;
}

.appraisal-hero-copy {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(255,248,236,.82);
    font-size: 19px;
}

.appraisal-hero .button-secondary {
    color: #fff8ed;
    border-color: var(--gold-light);
}

.appraisal-hero .button-secondary:hover { background: rgba(212,179,110,.12); }

.appraisal-audience {
    background: var(--paper);
    border-bottom: 1px solid rgba(183,134,50,.28);
}

.appraisal-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.appraisal-audience-grid > div {
    position: relative;
    padding: 28px 20px;
    text-align: center;
}

.appraisal-audience-grid > div:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24%;
    right: 0;
    width: 1px;
    height: 52%;
    background: rgba(183,134,50,.32);
}

.appraisal-audience-grid strong,
.appraisal-audience-grid span { display: block; }

.appraisal-audience-grid strong {
    color: var(--maroon);
    font-size: 19px;
    font-weight: 400;
}

.appraisal-audience-grid span {
    margin-top: 2px;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.appraisal-intro,
.appraisal-options,
.appraisal-experience {
    padding: 115px 0;
    background: var(--paper-light);
}

.appraisal-options {
    background: var(--paper);
    border-top: 1px solid rgba(183,134,50,.20);
    border-bottom: 1px solid rgba(183,134,50,.20);
}

.appraisal-two-column {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: start;
}

.appraisal-heading h2 { color: var(--maroon); }

.appraisal-copy {
    max-width: 690px;
    color: var(--muted);
    font-size: 17px;
}

.appraisal-copy p { margin: 0 0 22px; }

.text-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--maroon);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(183,134,50,.55);
}

.appraisal-material {
    padding: 115px 0;
    background:
        repeating-linear-gradient(0deg, rgba(70,50,30,.014) 0, rgba(70,50,30,.014) 1px, transparent 1px, transparent 5px),
        linear-gradient(135deg, #eee4d1 0%, #faf6ed 48%, #e9ddc7 100%);
}

.appraisal-section-heading {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.appraisal-section-heading h2 { color: var(--maroon); }

.appraisal-material-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 60px;
    background: rgba(183,134,50,.35);
    border: 1px solid rgba(183,134,50,.35);
}

.appraisal-material-grid article {
    min-height: 300px;
    padding: 42px 30px;
    background: rgba(251,248,241,.94);
}

.appraisal-material-grid article > span {
    display: block;
    margin-bottom: 42px;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.appraisal-material-grid h3 {
    margin: 0 0 18px;
    color: var(--maroon);
    font-size: 25px;
    font-weight: 400;
}

.appraisal-material-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.before-you-begin {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    color: #fff8ed;
    background:
        radial-gradient(circle at 12% 25%, rgba(148,64,45,.30), transparent 34%),
        linear-gradient(125deg, #240707, #651616 62%, #3b0b0b);
}

.before-you-begin::before {
    content: "";
    position: absolute;
    inset: 16px;
    pointer-events: none;
    border: 1px solid rgba(212,179,110,.18);
}

.before-you-begin .section-inner {
    position: relative;
    z-index: 2;
}

.before-heading {
    max-width: 820px;
    margin-bottom: 65px;
}

.before-heading h2 { color: #fffaf0; }

.before-heading > p:last-child {
    max-width: 700px;
    margin: 28px 0 0;
    color: rgba(255,248,236,.74);
    font-size: 18px;
}

.before-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(212,179,110,.22);
    border: 1px solid rgba(212,179,110,.22);
}

.before-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 22px;
    min-height: 190px;
    padding: 35px;
    background: rgba(20,5,5,.30);
}

.before-item > strong {
    color: var(--gold-light);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 2px;
}

.before-item h3 {
    margin: 0 0 12px;
    color: #fffaf0;
    font-size: 23px;
    font-weight: 400;
}

.before-item p {
    margin: 0;
    color: rgba(255,248,236,.70);
    font-size: 15px;
}

.appraisal-callout {
    margin-top: 32px !important;
    padding: 24px 28px;
    color: var(--ink);
    background: rgba(183,134,50,.10);
    border-left: 3px solid var(--gold);
}

.appraisal-callout a {
    color: var(--maroon);
    font-weight: 700;
    text-decoration: none;
}

.appraisal-nationwide {
    position: relative;
    overflow: hidden;
    padding: 125px 24px;
    text-align: center;
    color: #fff8ed;
    background:
        linear-gradient(rgba(36,7,7,.88), rgba(59,11,11,.91)),
        url("../images/backgrounds/lower-48-map.jpg");
    background-size: cover;
    background-position: center;
}

.appraisal-nationwide::after {
    content: "";
    position: absolute;
    inset: 16px;
    pointer-events: none;
    border: 1px solid rgba(212,179,110,.24);
}

.appraisal-nationwide .section-inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.appraisal-nationwide h2 { color: #fffaf0; }

.appraisal-nationwide p {
    max-width: 700px;
    margin: 18px auto 0;
    color: rgba(255,248,236,.76);
    font-size: 18px;
}

.appraisal-nationwide .button { margin-top: 36px; }

.appraisal-faq {
    padding: 115px 0;
    background: linear-gradient(rgba(251,248,241,.96), rgba(244,238,226,.96));
}

.faq-list {
    max-width: 920px;
    margin: 55px auto 0;
    border-top: 1px solid rgba(183,134,50,.35);
}

.faq-list details { border-bottom: 1px solid rgba(183,134,50,.35); }

.faq-list summary {
    position: relative;
    padding: 25px 52px 25px 0;
    color: var(--maroon);
    font-size: 20px;
    cursor: pointer;
    list-style: none;
}

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

.faq-list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 24px;
}

.faq-list details[open] summary::after { content: "–"; }

.faq-list details p {
    max-width: 760px;
    margin: -4px 0 0;
    padding: 0 0 27px;
    color: var(--muted);
    font-size: 16px;
}

/* ESTATE & PROBATE RESPONSIVE */

@media (max-width: 1050px) {
    .appraisal-two-column { gap: 55px; }
    .appraisal-material-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .appraisal-hero {
        min-height: auto;
        padding: 80px 24px;
        background-position: 35% center;
    }

    .appraisal-hero::after,
    .appraisal-nationwide::after,
    .before-you-begin::before { inset: 10px; }

    .appraisal-audience-grid { grid-template-columns: repeat(2, 1fr); }
    .appraisal-audience-grid > div:nth-child(2)::after { display: none; }
    .appraisal-audience-grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(183,134,50,.24); }

    .appraisal-two-column {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .appraisal-copy { max-width: none; }
    .before-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .appraisal-hero { padding: 68px 18px 72px; }

    .appraisal-hero h1 {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -1.5px;
    }

    .appraisal-hero-copy { font-size: 17px; }

    .appraisal-audience-grid > div { padding: 22px 10px; }

    .appraisal-intro,
    .appraisal-options,
    .appraisal-experience,
    .appraisal-material,
    .appraisal-faq { padding: 78px 0; }

    .appraisal-material-grid {
        grid-template-columns: 1fr;
        margin-top: 45px;
    }

    .appraisal-material-grid article { min-height: auto; }

    .before-you-begin { padding: 82px 0; }
    .before-heading { margin-bottom: 45px; }

    .before-item {
        grid-template-columns: 38px 1fr;
        gap: 14px;
        min-height: auto;
        padding: 28px 22px;
    }

    .appraisal-nationwide { padding: 90px 18px; }

    .faq-list summary {
        padding-right: 38px;
        font-size: 18px;
    }
}



/* Homepage service detail link */
.service-learn-more {
    display: inline-block;
    margin-top: 28px;
    color: var(--maroon);
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(183,134,50,.55);
    transition: color .2s ease, border-color .2s ease;
}

.service-learn-more:hover {
    color: var(--gold-dark);
    border-color: var(--gold);
}


/* =========================================================
   SITE-WIDE ADDITIONS (multi-page)
========================================================= */

/* Current page in the main navigation */

.main-nav a[aria-current="page"] {
    color: var(--maroon);
    box-shadow: inset 0 -1px 0 var(--gold);
}

/* Keep the desktop nav on one line between tablet and desktop */

@media (min-width: 821px) and (max-width: 1180px) {
    .main-nav {
        gap: 18px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .nav-phone {
        padding: 12px 14px;
    }

    .brand img {
        width: 210px;
    }
}

/* Text link on dark backgrounds */

.text-link.light {
    color: var(--gold-light);
    border-bottom-color: rgba(212,179,110,.55);
}

.text-link.light:hover {
    color: #fffaf0;
}

/* Links inside FAQ answers */

.faq-list details p a {
    color: var(--maroon);
    text-decoration: underline;
    text-decoration-color: rgba(183,134,50,.6);
    text-underline-offset: 3px;
}

/* Learn-more links in material cards */

.appraisal-material-grid .service-learn-more {
    margin-top: 24px;
}

/* Affiliations placed inside a dark section (About page) */

.before-you-begin .affiliations {
    max-width: 820px;
    margin-top: 60px;
}

/* Bullion callout: plain maroon, no map */

.appraisal-nationwide.bullion-callout {
    background:
        radial-gradient(circle at 85% 20%, rgba(183,134,50,.20), transparent 38%),
        linear-gradient(125deg, #240707, #651616 62%, #3b0b0b);
}

/* Footer navigation */

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 0 auto 22px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.footer-nav a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-nav a:hover {
    color: var(--gold-light);
}

@media (max-width: 560px) {
    .footer-nav {
        gap: 12px 18px;
    }
}

/* Images carry width/height attributes; keep their proportions */

.hero-logo,
.footer-logo,
.brand img {
    height: auto;
}

/* Section label inside the nationwide band
   (the band's paragraph rule was enlarging it) */

.appraisal-nationwide p.eyebrow {
    max-width: none;
    margin: 0 0 15px;
    font-size: 11px;
}

/* Memberships: an odd last item spans the row instead of
   leaving an empty cell */

.affiliation:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Personal sign-off (About page) */

.appraisal-copy .signature {
    margin-top: 30px;
    color: var(--maroon);
    font-size: 26px;
    font-style: italic;
}


/* Searchable subtitle inside the homepage H1 */

.hero h1 .h1-sub {
    display: block;
    margin-top: 18px;
    color: var(--maroon);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.6;
    text-transform: uppercase;
}

/* "By appointment only" note in the contact section */

.contact-availability {
    margin-top: 28px !important;
    color: var(--gold-light) !important;
    font-family: var(--sans);
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* =========================================================
   STORY SECTION ON SMALLER SCREENS
   Phones (portrait and landscape) and small tablets:
   hide the engraving and let the story use the full width,
   so the memberships list has room.
========================================================= */

@media (max-width: 1050px) {
    .story-inner {
        grid-template-columns: 1fr;
    }

    .story-art {
        display: none;
    }

    .story-content {
        max-width: 820px;
        margin: 0 auto;
        padding: 80px 40px;
        justify-self: center;
    }
}

@media (max-width: 560px) {
    .story-content {
        padding: 65px 22px;
    }
}

/* =========================================================
   HOMEPAGE HERO FRAME
   A complete four-sided frame instead of an open-bottomed one.
========================================================= */

.hero::after {
    inset: 14px;
    height: auto;
    border: 1px solid rgba(183, 134, 50, .32);
}

@media (max-width: 820px) {
    .hero::after {
        inset: 10px;
    }
}

/* =========================================================
   WYOMING NOTES PAGES
========================================================= */

/* Recently purchased notes */

.note-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 60px;
    background: rgba(183,134,50,.35);
    border: 1px solid rgba(183,134,50,.35);
}

.note-card {
    display: flex;
    flex-direction: column;
    background: rgba(251,248,241,.94);
}

.note-card img {
    width: 100%;
    height: 190px;
    padding: 18px 18px 0;
    object-fit: contain;
}

.note-card-body {
    padding: 22px 26px 30px;
}

.note-card h3 {
    margin: 0;
    color: var(--maroon);
    font-size: 25px;
    font-weight: 400;
}

.note-price {
    margin: 2px 0 14px;
    color: var(--gold-dark);
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .5px;
}

.note-bank,
.note-details {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.note-bank {
    color: var(--ink);
}

.note-grade {
    margin: 12px 0 0;
    color: var(--maroon);
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* Wanted towns */

.town-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 60px 0 0;
    padding: 0;
    list-style: none;
    background: rgba(183,134,50,.35);
    border: 1px solid rgba(183,134,50,.35);
}

.town-grid li {
    padding: 38px 30px;
    text-align: center;
    background: rgba(251,248,241,.94);
}

.town-grid span,
.town-grid small {
    display: block;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.town-grid strong {
    display: block;
    margin: 14px 0 4px;
    color: var(--maroon);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.15;
}

.town-grid small {
    color: var(--muted);
    letter-spacing: 2.5px;
}

/* Phone link inside the wanted page's hero text */

.appraisal-hero-copy a {
    color: var(--gold-light);
    text-decoration: none;
    white-space: nowrap;
}

/* "Also very interested in" label above the dark grid */

.before-you-begin > .section-inner > .eyebrow {
    margin-bottom: 22px;
}

/* Mailing address in the contact section (Wyoming pages) */

.contact-mailing {
    margin: 20px 0 0 !important;
    color: #fff !important;
    font-size: 18px !important;
}

.contact-mailing span {
    display: block;
    margin-bottom: 2px;
    color: var(--gold-light);
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

@media (max-width: 1050px) {
    .note-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .town-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .note-grid { grid-template-columns: 1fr; }
    .note-card img { height: auto; }
    .town-grid li { padding: 30px 16px; }
    .town-grid strong { font-size: 26px; }
}

/* Outline button on the dark callout band */

.appraisal-nationwide .button-secondary {
    margin-top: 36px;
    color: #fff8ed;
    border-color: var(--gold-light);
}

.appraisal-nationwide .button-secondary:hover { background: rgba(212,179,110,.12); }

/* Seven nav items: keep them on one line on tablets */

@media (min-width: 821px) and (max-width: 1180px) {
    .main-nav { gap: 14px; letter-spacing: 1px; }
    .main-nav a { white-space: nowrap; }
    .nav-phone { padding: 10px 10px; }
    .brand img { width: 170px; }
}