/* Best Hawaiian island guide (best-hawaiian-island.aspx, Oct 2026). hgi- prefix; tokens from hg-site.css.
   Editorial, photo-led, easy to read: 18px base, Georgia for the storytelling, Fraunces for titles.
   Markup: generated by _tools/best-island/build_guide.py, plus the special offers panel in the .aspx.
   Behaviour: hg-best-island.js. Linked from the code-behind. */

.hgi {
    --hgi-pinned: var(--hgx-pinned, 49px);
    --hgi-screen: calc(100vh - var(--hgi-pinned));
    --hgi-nav: 56px;
    --hgi-green: #2f4a46;
    --hgi-brown: var(--hgx-brown, #584e38);
    --hgi-ink: var(--hgx-ink, #3f3a2d);
    --hgi-muted: var(--hgx-muted, #756a53);
    --hgi-sand: var(--hgx-sand, #f6efd9);
    --hgi-cream: var(--hgx-cream, #fffdf3);
    margin: 0 -15px -40px; /* full bleed in .container-fluid; meets the footer */
    color: var(--hgi-ink);
    font-family: var(--hgx-sans);
    font-size: 18px;
    line-height: 1.55;
}

@supports (height: 100svh) {
    .hgi { --hgi-screen: calc(100svh - var(--hgi-pinned)); }
}

.hgi h1, .hgi h2, .hgi h3, .hgi h4 {
    font-family: var(--hgx-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--hgi-brown);
}

.hgi svg { display: block; }
.hgi a:focus-visible, .hgi button:focus-visible { outline: 3px solid var(--hgx-blue, #256aa0); outline-offset: 3px; }

/* hg-site.css pads anchors by the pinned header + 14px; our sticky island bar sits below that */
.hgi-island, .hgi-area, .hgi-match { scroll-margin-top: calc(var(--hgi-nav) - 14px); }

.hgi-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.hgi-narrow { max-width: 820px; }

.hgi-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.hgi-sub { margin: 0 0 22px; color: var(--hgi-muted); font-size: 19px; text-align: center; }

.hgi-lede {
    margin: 0 0 18px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 23px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- hero */

.hgi-hero {
    position: relative;
    height: calc(var(--hgi-screen) - var(--hgx-top, 68px)); /* the logo row still shows at the top of the page */
    min-height: 520px;
    max-height: 1000px;
    overflow: hidden;
    background: #1d2b2a;
}

    .hgi-hero img {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: hgi-zoom 8s cubic-bezier(.2,.7,.2,1) both;
    }

    .hgi-hero::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to top, rgba(8,20,24,.72) 0%, rgba(8,20,24,.25) 42%, transparent 65%);
    }

@keyframes hgi-zoom {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

.hgi-hero-txt {
    position: absolute;
    z-index: 1;
    left: max(28px, calc(50% - 560px));
    right: 28px;
    bottom: 90px;
    color: #fff;
}

    .hgi-hero-txt h1 {
        max-width: 900px;
        margin: 12px 0 0;
        color: #fff;
        font-size: 66px;
        line-height: 1.04;
        font-variation-settings: 'opsz' 144;
        text-shadow: 0 2px 26px rgba(0,0,0,.4);
    }

.hgi-scroll {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 22px;
    width: 52px;
    height: 52px;
    margin-left: -26px;
    border-radius: 50%;
    background: rgba(255,253,243,.92);
    color: var(--hgi-brown);
    animation: hgi-bob 2.4s ease-in-out infinite;
}

    .hgi-scroll svg { width: 28px; height: 28px; margin: 13px auto 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes hgi-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.hgi-intro { padding: 56px 0 34px; background: var(--hgi-cream); text-align: center; }

    .hgi-intro::before {
        content: '';
        display: block;
        width: 56px;
        height: 3px;
        margin: 0 auto 26px;
        border-radius: 2px;
        background: #c9b48a;
    }

/* ---------------------------------------------------------------- the twelve places (chooser) */

.hgi-choose { padding: 20px 0 64px; background: var(--hgi-cream); }

    .hgi-choose h2, .hgi-match h2, .hgi-end h2 { margin: 0 0 10px; font-size: 46px; line-height: 1.1; text-align: center; }

.hgi-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 auto 30px;
    max-width: 900px;
}

.hgi-chips-lbl { margin-right: 4px; color: var(--hgi-muted); font-size: 16px; }

.hgi-chip {
    min-height: 44px;
    padding: 8px 18px;
    border: 1.5px solid #d6c9a7;
    border-radius: 999px;
    background: #fff;
    color: var(--hgi-brown);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

    .hgi-chip:hover { border-color: var(--hgx-gold, #a8874d); }
    .hgi-chip[aria-pressed="true"] { border-color: var(--hgi-green); background: var(--hgi-green); color: #fff; }

.hgi-pick-group { margin-top: 22px; }

.hgi-pick-isl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--hgi-ink);
    font-size: 19px;
    font-weight: 700;
}

    .hgi-pick-isl i, .hgi-area-isl i {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--isl);
    }

.hgi-pick-row { display: flex; gap: 14px; }

.hgi-pick {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 4 / 3;
    max-height: 240px;
    overflow: hidden;
    border-radius: 12px;
    background: #cfc3a3;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    color: #fff;
    transition: transform .25s, box-shadow .25s, opacity .3s, filter .3s;
}

.hgi-pick-row.n2 .hgi-pick, .hgi-pick-row.n3 .hgi-pick { aspect-ratio: auto; height: 240px; }

    .hgi-pick img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
    .hgi-pick::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(to top, rgba(8,18,22,.8), transparent); }
    .hgi-pick:hover, .hgi-pick:focus { color: #fff; text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
    .hgi-pick:hover img { transform: scale(1.05); }

.hgi-pick-txt { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; }
.hgi-pick-name { display: block; font-family: var(--hgx-serif); font-size: 26px; line-height: 1.1; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hgi-pick-mood { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; opacity: .95; }

.hgi-choose.is-filtered .hgi-pick { opacity: .28; filter: grayscale(.8); }
.hgi-choose.is-filtered .hgi-pick.is-match { opacity: 1; filter: none; box-shadow: 0 0 0 4px var(--isl), 0 10px 24px rgba(0,0,0,.2); }

/* ---------------------------------------------------------------- weather */

.hgi-weather { padding: 60px 0; background: var(--hgi-sand); }

.hgi-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}

.hgi-weather h2 { margin: 0 0 14px; font-size: 40px; line-height: 1.1; }
.hgi-weather-txt p { margin: 0 0 14px; font-family: Georgia, serif; font-size: 20px; line-height: 1.6; }

.hgi-rain {
    padding: 22px 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.hgi-rain-h { margin-bottom: 10px; color: var(--hgx-gold-text, #80673b); font-size: 15px; font-weight: 700; }

.hgi-rain-row {
    display: grid;
    grid-template-columns: 190px 1fr 66px;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    color: var(--hgi-ink);
    font-size: 16px;
}

    .hgi-rain-row:hover, .hgi-rain-row:focus { color: var(--hgi-ink); text-decoration: none; }
    .hgi-rain-row:hover .hgi-rain-name { text-decoration: underline; }

.hgi-rain-bar { height: 12px; border-radius: 6px; background: #efe7d2; overflow: hidden; }
.hgi-rain-bar i { display: block; height: 100%; border-radius: 6px; background: var(--isl); }
.hgi-rain-n { text-align: right; font-weight: 700; }
.hgi-rain-src { margin-top: 12px; color: var(--hgi-muted); font-size: 14px; }

/* "Our numbers count only the best": the counts and prices cover only listings that met our standards */
.hgi-count { margin-top: -20px; padding: 0 0 60px; background: var(--hgi-sand); }

.hgi-count-in {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
    border-left: 6px solid var(--hgx-gold, #a8874d);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

    .hgi-count-in svg { flex: none; width: 46px; height: 46px; fill: none; stroke: var(--hgx-gold, #a8874d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .hgi-count-in h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; }
    .hgi-count-in p { margin: 0; font-family: Georgia, serif; font-size: 19px; line-height: 1.6; }

/* ---------------------------------------------------------------- sticky island bar */

.hgi-nav {
    position: -webkit-sticky;
    position: sticky;
    z-index: 900;
    top: var(--hgi-pinned);
    height: var(--hgi-nav);
    border-bottom: 1px solid var(--hgx-line, #e4d9bb);
    background: rgba(255,253,243,.96);
    backdrop-filter: blur(6px);
}

.hgi-nav-in {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .hgi-nav-in::-webkit-scrollbar { display: none; }

    .hgi-nav a {
        flex: none;
        padding: 8px 18px;
        border-radius: 999px;
        color: var(--hgi-brown);
        font-size: 17px;
        font-weight: 600;
        white-space: nowrap;
    }

        .hgi-nav a:hover, .hgi-nav a:focus { background: var(--hgi-sand); text-decoration: none; }
        .hgi-nav a.is-on { background: var(--isl, var(--hgi-green)); color: #fff; }

/* ---------------------------------------------------------------- island chapter */

.hgi-island-hero {
    position: relative;
    height: calc(var(--hgi-screen) - var(--hgi-nav));
    min-height: 480px;
    max-height: 960px;
    overflow: hidden;
    background: #22312f;
}

    .hgi-island-hero img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

    .hgi-island-hero::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(8,22,26,.55), transparent 78%);
    }

.hgi-island-title {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    right: 0;
    padding: 0 24px;
    color: #fff;
    text-align: center;
    transform: translateY(-50%);
}

    .hgi-island-title h2 {
        margin: 8px 0 6px;
        color: #fff;
        font-size: 128px;
        line-height: 1;
        font-variation-settings: 'opsz' 144;
        text-shadow: 0 2px 30px rgba(0,0,0,.4);
    }

    .hgi-island-title p {
        margin: 0;
        font-family: Georgia, serif;
        font-size: 28px;
        font-style: italic;
        text-shadow: 0 1px 14px rgba(0,0,0,.5);
    }

.hgi-island-intro { padding: 52px 0 44px; background: var(--hgi-cream); }

.hgi-island-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }

    .hgi-island-chips span {
        padding: 7px 16px;
        border-radius: 999px;
        background: var(--hgi-sand);
        border-left: 4px solid var(--isl);
        color: var(--hgi-ink);
        font-size: 16px;
        font-weight: 600;
    }

.hgi-note { margin: 0 0 18px; padding: 12px 16px; border-radius: 8px; background: var(--hgi-sand); color: var(--hgi-muted); font-size: 16px; }

.hgi-where { font-size: 19px; }
.hgi-where a { font-weight: 700; }
.hgi-guide-link { display: inline-block; margin-top: 10px; font-size: 19px; font-weight: 700; }

/* ---------------------------------------------------------------- an area */

.hgi-area-photo {
    position: relative;
    height: min(66vh, 720px);
    min-height: 380px;
    overflow: hidden;
    background: #22312f;
}

    .hgi-area-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
    .hgi-area.is-in .hgi-area-photo img { transform: scale(1); }

    .hgi-area-photo::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to top, rgba(8,20,24,.75) 0%, rgba(8,20,24,.2) 40%, transparent 62%);
    }

.hgi-area-title {
    position: absolute;
    z-index: 1;
    left: max(28px, calc(50% - 536px));
    right: 28px;
    bottom: 40px;
    color: #fff;
}

    .hgi-area-title h3 {
        margin: 6px 0 6px;
        color: #fff;
        font-size: 76px;
        line-height: 1;
        font-variation-settings: 'opsz' 144;
        text-shadow: 0 2px 26px rgba(0,0,0,.4);
    }

    .hgi-area-title p {
        max-width: 720px;
        margin: 0;
        font-family: Georgia, serif;
        font-size: 24px;
        line-height: 1.4;
        text-shadow: 0 1px 12px rgba(0,0,0,.5);
    }

.hgi-area-isl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255,253,243,.95);
    color: var(--hgi-ink);
    font-size: 15px;
    font-weight: 700;
}

.hgi-area-body {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding-top: 44px;
    padding-bottom: 56px;
}

.hgi-area { background: var(--hgi-cream); }

.hgi-label {
    margin-bottom: 8px;
    color: var(--hgx-gold-text, #80673b);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hgi-day {
    margin: 0 0 24px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    line-height: 1.65;
}

.hgi-door { margin: 0; }
.hgi-door img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.hgi-door figcaption { margin-top: 8px; color: var(--hgi-muted); font-size: 15px; }

.hgi-facts {
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.hgi-standout {
    margin: 0;
    padding: 18px 22px;
    border-left: 6px solid var(--isl);
    background: var(--hgi-sand);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}

.hgi-facts ul { margin: 0; padding: 8px 22px 4px; list-style: none; }

.hgi-facts li {
    display: flex;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #f0e9d6;
    font-size: 17px;
    line-height: 1.45;
}

    .hgi-facts li:last-child { border-bottom: 0; }
    .hgi-facts li b { display: block; margin-bottom: 1px; color: var(--hgi-brown); font-size: 15px; }

.hgi-ico { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: var(--isl); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hgi-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 6px 22px 22px; }

.hgi-btn {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--isl);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

    .hgi-btn:hover, .hgi-btn:focus { color: #fff; text-decoration: none; filter: brightness(.9); }

.hgi-btn-2 { font-size: 17px; font-weight: 700; }

.hgi-aside {
    margin: -24px 0 56px;
    padding: 20px 24px;
    border-radius: 12px;
    border-left: 6px solid var(--isl);
    background: var(--hgi-sand);
}

    .hgi-aside b { font-family: var(--hgx-serif); font-size: 24px; font-weight: 400; color: var(--hgi-brown); }
    .hgi-aside p { margin: 6px 0 8px; font-size: 17px; }
    .hgi-aside a { font-weight: 700; }

/* ---------------------------------------------------------------- beyond your door */

.hgi-beyond { padding: 60px 0 64px; background: var(--hgi-sand); }
.hgi-beyond h3 { margin: 0 0 6px; font-size: 42px; line-height: 1.1; text-align: center; }

.hgi-posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.hgi-post {
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}

    .hgi-post > img, .hgi-post > .hgi-ph { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.hgi-post-txt { padding: 18px 22px 22px; }
.hgi-post h4 { margin: 0 0 6px; font-size: 28px; line-height: 1.15; }
.hgi-post p { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }

.hgi-post-tip {
    margin: 0 !important;
    padding-top: 10px;
    border-top: 1px solid #f0e9d6;
    color: var(--hgi-muted);
    font-size: 16px !important;
}

/* photo placeholder (a stock purchase still to make) */
.hgi-ph {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 12px, transparent 12px 24px), linear-gradient(140deg, var(--isl), #2b2a24 140%);
    color: rgba(255,255,255,.92);
    text-align: center;
}

    .hgi-ph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; }
    .hgi-ph b { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
    .hgi-ph span { max-width: 340px; font-family: Georgia, serif; font-size: 16px; font-style: italic; }

/* ---------------------------------------------------------------- verdict */

.hgi-verdict { padding: 56px 0; background: var(--hgi-green); color: #fff; }
.hgi-verdict h3 { margin: 0 0 16px; color: #fff; font-size: 44px; }
.hgi-verdict ul { margin: 0 0 22px; padding: 0; list-style: none; }

.hgi-verdict li {
    position: relative;
    margin: 12px 0;
    padding-left: 40px;
    font-size: 21px;
    line-height: 1.45;
}

    .hgi-verdict li::before {
        content: "\2713";
        position: absolute;
        left: 0;
        top: 1px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #c8b188;
        color: var(--hgi-green);
        font-size: 16px;
        font-weight: 700;
        line-height: 28px;
        text-align: center;
    }

.hgi-verdict-pick {
    margin: 0;
    padding: 18px 22px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    font-family: Georgia, serif;
    font-size: 22px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------- quick picks, closing */

.hgi-match { padding: 64px 0; background: var(--hgi-cream); }
.hgi-match-list { margin: 26px 0 36px; padding: 0; list-style: none; }

.hgi-match-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 18px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--hgx-line, #e4d9bb);
    font-size: 19px;
}

    .hgi-match-list li > span:first-child { color: var(--hgi-muted); }
    .hgi-match-list a { font-weight: 700; color: var(--isl); }

.hgi-two { padding: 24px 28px; border-radius: 14px; background: var(--hgi-sand); }
.hgi-two h3 { margin: 0 0 8px; font-size: 30px; }
.hgi-two p { margin: 0; font-size: 19px; line-height: 1.6; }

/* special offers (Adverts "Q"; markup in the .aspx, filled by the code-behind) */
.hgi-deals { padding: 56px 0 60px; background: var(--hgi-sand); }

.hgi-deals-eyebrow {
    color: var(--hgx-gold-text, #80673b);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .22em;
    text-align: center;
    text-transform: uppercase;
}

.hgi-deals h2 { margin: 6px 0 24px; font-size: 38px; line-height: 1.15; text-align: center; }

.hgi-deals-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.hgi-deal {
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}

.hgi-deal-img { display: block; }
.hgi-deal-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hgi-deal-body { padding: 16px 20px 20px; }
.hgi-deal-kicker { color: var(--hgx-gold-text, #80673b); font-size: 15px; font-weight: 600; }
.hgi-deal h3 { margin: 4px 0 6px; font-size: 25px; line-height: 1.2; }
.hgi-deal h3 a { color: var(--hgi-brown); }
.hgi-deal p { margin: 0; font-size: 17px; line-height: 1.5; }

.hgi-end { padding: 64px 0 70px; background: var(--hgi-cream); }

.hgi-end-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.hgi-end-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 14px;
    color: #fff;
}

    .hgi-end-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
    .hgi-end-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(8,18,22,.82), transparent); }
    .hgi-end-card:hover, .hgi-end-card:focus { color: #fff; text-decoration: none; }
    .hgi-end-card:hover img { transform: scale(1.05); }
    .hgi-end-card span { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; font-size: 17px; font-weight: 600; }
    .hgi-end-card b { display: block; font-family: var(--hgx-serif); font-size: 32px; font-weight: 400; line-height: 1.1; }
    .hgi-end-card span::before { content: ""; display: block; width: 36px; height: 4px; margin-bottom: 10px; border-radius: 2px; background: var(--isl); }

.hgi-foot-note { margin: 30px auto 0; max-width: 820px; color: var(--hgi-muted); font-size: 14px; line-height: 1.6; text-align: center; }

/* ---------------------------------------------------------------- where-to-stay guides (where-to-stay-in-maui.aspx) */

.hgi-hero-sub {
    max-width: 760px;
    margin: 14px 0 0;
    font-family: Georgia, serif;
    font-size: 24px;
    line-height: 1.45;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

/* West or South? two comparison cards */
.hgi-compare { padding: 60px 0; background: var(--hgi-sand); }
.hgi-compare h2 { margin: 0 0 10px; font-size: 42px; line-height: 1.1; text-align: center; }
.hgi-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hgi-cmp-card { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.1); }
.hgi-cmp-h { padding: 18px 24px 16px; background: var(--isl); color: #fff; }

    .hgi-cmp-h a { display: block; color: #fff; font-family: var(--hgx-serif); font-size: 32px; line-height: 1.1; }
    .hgi-cmp-h a:hover, .hgi-cmp-h a:focus { color: #fff; }
    .hgi-cmp-h span { display: block; margin-top: 4px; font-family: Georgia, serif; font-size: 18px; font-style: italic; opacity: .95; }

.hgi-cmp-card ul { margin: 0; padding: 6px 24px 14px; list-style: none; }
.hgi-cmp-card li { padding: 12px 0; border-bottom: 1px solid #f0e9d6; font-size: 17px; line-height: 1.5; }
.hgi-cmp-card li:last-child { border-bottom: 0; }
.hgi-cmp-card li b { display: block; color: var(--hgi-brown); font-size: 15px; }
.hgi-cmp-verdict { max-width: 820px; margin: 26px auto 0; font-family: Georgia, serif; font-size: 20px; line-height: 1.6; text-align: center; }

/* "Which end is for you?" inset under an area */
.hgi-ends { margin: -24px 0 56px; padding: 22px 24px; border-radius: 14px; background: var(--hgi-sand); }
.hgi-ends h4 { margin: 0 0 14px; font-size: 26px; }
.hgi-ends-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hgi-end-of { display: flex; gap: 16px; align-items: flex-start; padding: 14px; border-radius: 12px; background: #fff; }
.hgi-end-of img { flex: none; width: 150px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.hgi-end-of b { display: block; font-family: var(--hgx-serif); font-size: 24px; font-weight: 400; line-height: 1.1; color: var(--hgi-brown); }
.hgi-end-of span { display: block; margin: 2px 0 6px; color: var(--isl); font-size: 15px; font-weight: 700; }
.hgi-end-of p { margin: 0; font-size: 16px; line-height: 1.5; }

/* big days out: a postcard section without a chapter photo */
.hgi-days .hgi-beyond { padding-top: 64px; }

/* ---------------------------------------------------------------- tablet / phone */

@media (max-width: 991px) {
    .hgi-split, .hgi-area-body { grid-template-columns: 1fr; gap: 28px; }
    .hgi-end-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hgi-pick-row { flex-wrap: wrap; }
    .hgi-pick, .hgi-pick-row.n2 .hgi-pick, .hgi-pick-row.n3 .hgi-pick { flex: 1 1 calc(50% - 7px); height: 210px; aspect-ratio: auto; }
}

@media (max-width: 860px) {
    .hgi-hero { height: var(--hgi-screen); } /* phones pin the whole header */
}

@media (max-width: 767px) {
    .hgi { font-size: 17px; --hgi-nav: 52px; }
    .hgi-wrap { padding: 0 16px; }

    .hgi-hero-txt { left: 20px; right: 20px; bottom: 92px; }
    .hgi-hero-txt h1 { font-size: 40px; }
    .hgi-lede { font-size: 20px; }
    .hgi-intro { padding: 40px 0 20px; }

    .hgi-choose h2, .hgi-match h2, .hgi-end h2 { font-size: 34px; }
    .hgi-sub { font-size: 17px; }
    .hgi-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 22px; padding: 0 16px 6px; scrollbar-width: none; }
    .hgi-chips::-webkit-scrollbar { display: none; }
    .hgi-chip { flex: none; }
    .hgi-chips-lbl { flex: none; }
    .hgi-pick, .hgi-pick-row.n2 .hgi-pick, .hgi-pick-row.n3 .hgi-pick { height: 170px; }
    .hgi-pick-name { font-size: 21px; }
    .hgi-pick-mood { font-size: 13px; }
    .hgi-pick-txt { left: 12px; right: 12px; bottom: 10px; }

    .hgi-weather { padding: 44px 0; }
    .hgi-weather h2 { font-size: 32px; }
    .hgi-weather-txt p { font-size: 18px; }
    .hgi-rain { padding: 18px 16px; }
    .hgi-rain-row { grid-template-columns: 128px 1fr 56px; gap: 8px; font-size: 14px; }
    .hgi-hero-sub { font-size: 19px; }
    .hgi-compare { padding: 44px 0; }
    .hgi-compare h2 { font-size: 32px; }
    .hgi-cmp { grid-template-columns: 1fr; gap: 16px; }
    .hgi-cmp-h { padding: 16px 18px 14px; }
    .hgi-cmp-h a { font-size: 28px; }
    .hgi-cmp-card ul { padding: 4px 18px 12px; }
    .hgi-cmp-verdict { font-size: 18px; text-align: left; }
    .hgi-ends { margin: -12px 0 40px; padding: 18px 16px; }
    .hgi-ends-row { grid-template-columns: 1fr; gap: 12px; }
    .hgi-end-of img { width: 110px; }
    .hgi-count { margin-top: -12px; padding-bottom: 44px; }
    .hgi-count-in { gap: 14px; padding: 20px 18px; }
    .hgi-count-in svg { width: 36px; height: 36px; }
    .hgi-count-in h2 { font-size: 24px; }
    .hgi-count-in p { font-size: 17px; }

    .hgi-nav-in { justify-content: flex-start; gap: 4px; }
    .hgi-nav a { padding: 7px 13px; font-size: 16px; }

    .hgi-island-title h2 { font-size: 72px; }
    .hgi-island-title p { font-size: 21px; }
    .hgi-island-intro { padding: 36px 0 30px; }

    .hgi-area-photo { height: 58vh; min-height: 340px; }
    .hgi-area-title { left: 20px; right: 20px; bottom: 26px; }
    .hgi-area-title h3 { font-size: 46px; }
    .hgi-area-title p { font-size: 19px; }
    .hgi-area-body { padding-top: 30px; padding-bottom: 40px; }
    .hgi-day { font-size: 19px; }
    .hgi-standout { padding: 16px 18px; font-size: 17px; }
    .hgi-facts ul { padding: 4px 18px; }
    .hgi-ctas { padding: 6px 18px 20px; }
    .hgi-btn { width: 100%; justify-content: center; }
    .hgi-aside { margin: -12px 0 40px; padding: 18px; }

    .hgi-beyond { padding: 44px 0 48px; }
    .hgi-beyond h3 { font-size: 32px; }
    .hgi-posts { grid-template-columns: 1fr; gap: 16px; }
    .hgi-post h4 { font-size: 24px; }
    .hgi-post p { font-size: 17px; }

    .hgi-verdict { padding: 44px 0; }
    .hgi-verdict h3 { font-size: 34px; }
    .hgi-verdict li { font-size: 19px; }
    .hgi-verdict-pick { font-size: 19px; }

    .hgi-match-list li { grid-template-columns: 1fr; gap: 2px; font-size: 18px; }
    .hgi-deals { padding: 44px 0 48px; }
    .hgi-deals h2 { font-size: 30px; }
    .hgi-deals-row { grid-template-columns: 1fr; gap: 16px; }
    .hgi-end-card b { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .hgi *, .hgi *::before, .hgi *::after { animation: none !important; transition: none !important; }
    .hgi-area-photo img { transform: none !important; }
}