:root {
            --navy: #1f2d4a;
            --amber: #e8a63a;
            --cream: #faf5ec;
            --sand: #f1e9dc;
            --line: #e6dfd0;
            --ink: #2b3447;
            --mut: #566078;
            --gold: #8a5a00;
            --green: #12793f
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: 'Source Sans 3', system-ui, sans-serif;
            color: var(--ink);
            background: var(--cream)
        }

        h1,
        h2,
        h3 {
            font-family: 'Barlow Condensed', sans-serif;
            color: var(--navy);
            margin: 0;
            line-height: 1.05
        }

        a {
            color: inherit
        }

        .in {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px
        }

        .crumb {
            padding-top: 18px;
            padding-bottom: 18px;
            font-size: 12px;
            color: var(--mut)
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 20px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 15px;
            text-decoration: none;
            border: 1px solid var(--navy);
            cursor: pointer
        }

        .amber {
            background: var(--amber);
            border-color: var(--amber);
            color: var(--navy)
        }

        .ghost {
            color: #fff;
            border-color: #fff
        }

        .navy {
            background: var(--navy);
            color: #fff
        }

        .white {
            background: #fff;
            color: var(--navy)
        }

        .green {
            background: var(--green);
            border-color: var(--green);
            color: #fff
        }

        .hero {
            background: linear-gradient(90deg, rgba(31, 45, 74, .96) 55%, rgba(60, 50, 40, .7)),url(../images/montero-roof-tent.webp) ,linear-gradient(#6b5a45, #c08a4a);
            color: #fff;
            padding: 72px 0
        }

        .hero h1 {
            color: #fff;
            font-size: 56px;
            max-width: 560px
        }

        .hero p {
            max-width: 480px;
            font-size: 18px;
            line-height: 1.5;
            color: #dfe3ec;
            margin: 22px 0 0
        }

        .eyebrow {
            font-size: 12px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--amber);
            font-weight: 600;
            margin-bottom: 18px
        }

        .row {
            display: flex;
            gap: 12px;
            margin-top: 28px
        }

        section {
            padding: 56px 0
        }

        .sand {
            background: var(--sand)
        }

        h2 {
            font-size: 34px;
            margin-bottom: 8px
        }

        .sub {
            max-width: 440px;
            color: var(--mut);
            margin: 0 0 28px;
            line-height: 1.5
        }

        .g4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px
        }

        .g3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            overflow: hidden
        }

        .ph {
            height: 110px;
            position: relative;
            overflow: hidden
        }

        .ph img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .cb {
            padding: 16px
        }

        .card h3 {
            font-size: 20px;
            margin-bottom: 6px
        }

        .meta {
            font-size: 12px;
            color: var(--gold);
            font-weight: 600;
            margin-bottom: 8px
        }

        .card p {
            font-size: 14px;
            line-height: 1.45;
            margin: 0 0 10px;
            color: var(--mut)
        }

        .lp {
            padding: 22px
        }

        .day {
            display: flex;
            gap: 16px;
            font-size: 14px;
            line-height: 1.45;
            margin-top: 12px
        }

        .day b {
            flex: 0 0 64px;
            font-size: 11px;
            letter-spacing: .1em;
            color: var(--gold)
        }

        .price {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 44px;
            font-weight: 700;
            color: var(--navy)
        }

        .spec {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 20px;
            max-width: 640px;
            margin: 20px 0
        }

        .sp {
            display: flex;
            gap: 20px;
            font-size: 14px;
            line-height: 1.45;
            margin-top: 12px
        }

        .sp b {
            flex: 0 0 84px;
            font-size: 11px;
            letter-spacing: .1em;
            color: var(--gold)
        }

        details {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 16px 20px;
            max-width: 640px;
            margin-bottom: 20px;
            font-weight: 600
        }

        details p {
            font-weight: 400;
            font-size: 14px;
            color: var(--mut);
            margin: 10px 0 0
        }

        ul.r {
            padding-left: 20px;
            line-height: 1.7;
            max-width: 560px
        }

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

            .g3 {
                grid-template-columns: 1fr
            }
        }

        @media (max-width:640px) {

            nav,
            .hero {
                padding: 44px 0
            }

            .hero h1 {
                font-size: 38px
            }

            .hero p {
                font-size: 16px
            }

            /* mobile: every button takes the full width, one below the other */
            .row {
                flex-direction: column
            }

            .row .btn,
            .full {
                width: 100%
            }

            .g4 {
                grid-template-columns: 1fr
            }

            .card.pl {
                display: flex
            }

            .card.pl .ph {
                flex: 0 0 96px;
                height: auto
            }

            h2 {
                font-size: 28px
            }

            .day b {
                flex-basis: 60px
            }

            .sp {
                flex-direction: column;
                gap: 2px
            }
        }