/* ------------------------------------------------------------------
   Red Timbers — the second sheet. base.css carries the grid, the type
   scale and the shared components; this one does three jobs:
     1. sets the palette the whole site is drawn in;
     2. styles the parts base.css has no rule for — the enquiry form,
        the cookie notice, room blocks, tables, policy pages;
     3. does in CSS the few things that would otherwise need script.
   ------------------------------------------------------------------ */

/* 1. Palette --------------------------------------------------------- */

.kit {
    --tone-primary:   #7B2E22;   /* rimu heartwood */
    --tone-secondary: #C08A3E;   /* dressed timber */
    --tone-accent:    #3F5C43;   /* the pines behind the hotel */
    --tone-text:      #241C18;
    --tone-2:         #FFFFFF;
    --tone-3:         #E0D6C6;   /* rules and borders */
    --tone-4:         #F6F1E9;   /* card ground */
    --tone-5:         #FFFFFF;
}

:root {
    --ink:      #241C18;
    --ink-soft: #59504A;
    --red:      #7B2E22;
    --red-deep: #5C2018;
    --gold:     #C08A3E;
    --green:    #3F5C43;
    --sand:     #F6F1E9;
    --rule:     #E0D6C6;
    --text-face:    "Poppins", "Segoe UI", system-ui, sans-serif;
    --display-face: "Montserrat", "Poppins", system-ui, sans-serif;
}

body { font-family: var(--text-face); color: var(--ink); background: #fff; }

/* 2. The opening band ------------------------------------------------ */

.frame--page .blk.hero {
    background-color: var(--red-deep);
    background-image: url(../images/rt-hero.jpg);
    background-image: image-set(url(../images/rt-hero.webp) type("image/webp"), url(../images/rt-hero.jpg) type("image/jpeg"));
    background-size: cover;
    background-position: center 40%;
}
.doc--rooms        .frame--page .blk.hero { background-image: url(../images/rt-room-heartwood.jpg); }
.doc--casino       .frame--page .blk.hero { background-image: url(../images/rt-gaming-tables.jpg); }
.doc--dine         .frame--page .blk.hero { background-image: url(../images/rt-restaurant.jpg); }
.doc--spa          .frame--page .blk.hero { background-image: url(../images/rt-pool.jpg); }
.doc--events       .frame--page .blk.hero { background-image: url(../images/rt-events.jpg); }
.doc--visit        .frame--page .blk.hero { background-image: url(../images/rt-forest.jpg); }
.doc--policies     .frame--page .blk.hero { background-image: url(../images/rt-about.jpg); }
.doc--reservations .frame--page .blk.hero { background-image: url(../images/rt-reception.jpg); }

/* Inner pages open shorter than the front page and with a smaller mark. */
.doc:not(.doc--home) .frame--page .blk.hero { --min-height: 52vh; }
.doc:not(.doc--home) .frame--page .blk.hero__mark img { width: 13%; }

/* The tile grid was drawn for four cards and carries six. */
.frame--page .blk.tiles { --width: 100%; }
.frame--page .blk.tiles__grid { --band-grid-template-rows: auto; }
@media (max-width: 1200px) and (min-width: 768px) {
    .frame--page .blk.tiles__grid { --band-grid-template-columns: repeat(2, 1fr); }
}

/* An entrance animation starts a figure a full width off to the side while
   it plays. Clip it where it lives, so no new scroll container appears. */
.strip,
.enquiry,
.frame--page > .band.band--top,
.frame--page > .band.band--top > .band__in { overflow-x: clip; }

/* Anything waiting for the observer stays hidden — but only where script
   is running, or a browser with JavaScript off would never see it. */
html:not(.js-on) .reveal { visibility: visible; }

/* 3. Header additions ------------------------------------------------ */

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 18px;
    background: var(--red);
    color: #fff;
    font-size: 15px;
}
.skip:focus { left: 0; }

.r20 {
    margin: 0;
    width: 100%;
    text-align: left;
    font-family: var(--text-face);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #fff;
}
.frame--top .blk.topbar { background-color: var(--red-deep); }
.frame--top .blk.topbar__row > .band__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
.frame--top .blk.topbar__contact .linelist--row { justify-content: flex-end; }
.kit .frame--top .blk.topbar a,
.kit .frame--top .blk.topbar .linelist__tx { color: #F3EDE4; font-size: 13px; font-weight: 300; }
.kit .frame--top .blk.topbar a:hover { color: #E9CB98; }
@media (max-width: 767px) { .r20 { text-align: center; font-size: 11px; } }

/* The bar carries two menus with the mark between them. */
.frame--top .blk.headbar > .band__in { align-items: center; }
.frame--top .blk.headbar__aside { order: 3; }
.frame--top .blk.headbar__logo  { order: 2; }
.frame--top .blk.headbar__nav   { order: 1; }
.frame--top .blk.headbar__cta   { order: 4; }
@media (max-width: 1024px) {
    .frame--top .blk.headbar__aside { display: none; }
    .frame--top .blk.headbar__logo { order: 1; }
    .frame--top .blk.headbar__nav  { order: 2; }
}

/* 4. Shared furniture ------------------------------------------------ */

.hold { width: min(1160px, 90%); margin-inline: auto; }
.hold--slim { width: min(780px, 90%); }

.strip { padding: 72px 0; }
.strip--sand { background: var(--sand); }
.strip--ink { background: var(--ink); color: #F3EDE4; }
.strip--ink h2, .strip--ink h3 { color: #fff; }
.strip--ink a { color: #E9CB98; }
.strip--ink .copy p, .strip--ink .copy li { color: #C9C0B6; }

.lead { max-width: 760px; margin-bottom: 36px; }
.lead--mid { margin-inline: auto; text-align: center; }

.kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
}
.lead h2 { margin: 0 0 14px; font-family: var(--text-face); font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; line-height: 1.15; }
.standfirst { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }
.strip--ink .standfirst { color: #C9C0B6; }

.copy p { margin: 0 0 18px; font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--ink-soft); }
.copy h2 { margin: 40px 0 14px; font-size: 24px; font-weight: 600; color: var(--ink); }
.copy h2:first-child { margin-top: 0; }
.copy h3 { margin: 32px 0 12px; font-size: 20px; font-weight: 600; color: var(--ink); }
.copy ul, .copy ol { margin: 0 0 20px; padding-left: 22px; }
.copy li { margin-bottom: 8px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }
.copy a { color: var(--red); }

.btn {
    display: inline-block;
    padding: 15px 34px;
    border: 1px solid var(--red);
    background: var(--red);
    color: #fff;
    font-family: var(--text-face);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.btn:hover, .btn:focus { background-color: #fff; color: var(--red); }
.btn.btn--outline { background-color: transparent; color: var(--red); }
.btn.btn--outline:hover, .btn.btn--outline:focus { background-color: var(--red); color: #fff; }
.btn.btn--small { padding: 10px 20px; font-size: 14px; }
.btn.btn--plain { border-color: transparent; background-color: transparent; color: var(--ink); text-decoration: underline; }
.btn.btn--plain:hover, .btn.btn--plain:focus { background-color: transparent; color: var(--red); }

.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: 13px; font-weight: 300; color: var(--ink-soft); }

/* 5. Two-column blocks ----------------------------------------------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.duo--rev .duo__text { order: 2; }
.duo__text h2 { margin: 0 0 16px; font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; line-height: 1.2; }
.duo__text h3 { margin: 26px 0 12px; font-size: 20px; font-weight: 600; }
.duo__text > p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 28px; } .duo--rev .duo__text { order: 0; } }

/* 6. Card decks ------------------------------------------------------- */

.deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.tile { display: flex; flex-direction: column; margin: 0; background: #fff; border: 1px solid var(--rule); }
.tile__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.tile h2, .tile h3 { margin: 0 0 10px; font-size: 21px; font-weight: 600; }
.tile p { margin: 0 0 16px; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--ink-soft); }
.tile__meta { margin: 0 0 16px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.tile__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.tile__price { font-size: 19px; font-weight: 600; color: var(--red); }
.tile__price small { display: block; font-size: 12px; font-weight: 300; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-soft); }
.tile .suite__list { margin-bottom: 18px; }
figure.tile figcaption { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); padding: 16px 20px 20px; }

/* 7. Room blocks ------------------------------------------------------ */

.suite { display: grid; grid-template-columns: 5fr 6fr; gap: 40px; align-items: start; padding: 44px 0; border-top: 1px solid var(--rule); }
.suite:first-of-type { border-top: 0; padding-top: 0; }
.suite:nth-of-type(even) .suite__pic { order: 2; }
.suite__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.suite h2 { margin: 0 0 4px; font-size: 26px; font-weight: 600; }
.suite__price { font-size: 17px; font-weight: 600; color: var(--red); white-space: nowrap; }
.suite__spec { margin: 12px 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.suite__spec li { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--rule); padding: 5px 10px; }
.suite__list { margin: 0 0 18px; padding-left: 20px; }
.suite__list li { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); margin-bottom: 5px; }
@media (max-width: 900px) { .suite { grid-template-columns: 1fr; gap: 22px; } .suite:nth-of-type(even) .suite__pic { order: 0; } }

/* 8. Figures in a row ------------------------------------------------- */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.figures__item { background: #fff; padding: 30px 18px; text-align: center; }
.figures__item b { display: block; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1; color: var(--red); }
.figures__item span { display: block; margin-top: 10px; font-size: 12px; font-weight: 300; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-soft); }

/* 9. Fact tables ------------------------------------------------------ */

.ledger { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.ledger th, .ledger td { padding: 13px 14px; border-bottom: 1px solid var(--rule); text-align: left; font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--ink-soft); vertical-align: top; }
.ledger th { width: 34%; font-weight: 600; color: var(--ink); }
.ledger th small { display: block; font-weight: 300; color: var(--ink-soft); }
.ledger tr:first-child th, .ledger tr:first-child td { border-top: 1px solid var(--rule); }
.ledger a { color: var(--red); }
@media (max-width: 640px) {
    .ledger th, .ledger td { display: block; width: auto; border-bottom: 0; padding: 6px 0; }
    .ledger td { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
    .ledger tr:first-child th { border-top: 0; }
}

/* 10. Panels and the helpline list ------------------------------------ */

.panel { border-left: 4px solid var(--gold); background: var(--sand); padding: 22px 24px; margin: 0 0 26px; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }
.panel strong { color: var(--ink); font-weight: 600; }
.panel--red { border-left-color: var(--red); }
.strip--ink .panel { background: rgba(255,255,255,.06); color: #C9C0B6; }

.helpline { border: 1px solid var(--rule); padding: 22px 26px; background: #fff; }
.helpline ul { margin: 0; padding: 0; list-style: none; }
.helpline li { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 300; color: var(--ink-soft); }
.helpline li:last-child { border-bottom: 0; }
.helpline b { color: var(--ink); font-weight: 600; }
.helpline a { color: var(--red); }

/* 11. Enquiry form ---------------------------------------------------- */

.enquiry { padding: 72px 0; background: var(--sand); }
.enquiry__form { max-width: 860px; }
.enquiry__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 22px; }
.fld { margin: 0 0 18px; display: flex; flex-direction: column; }
.fld label { margin-bottom: 7px; font-size: 14px; font-weight: 500; color: var(--ink); }
.fld input, .fld select, .fld textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--rule);
    background: #fff;
    font-family: var(--text-face);
    font-size: 15px;
    font-weight: 300;
    color: var(--ink);
}
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.fld--full { max-width: 100%; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consents { margin: 8px 0 22px; display: grid; gap: 12px; }
.consents label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); }
.consents input { margin-top: 3px; }
.consents a { color: var(--red); }

.enquiry__send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin: 0; }
.enquiry__fine { font-size: 13px; font-weight: 300; color: var(--ink-soft); }

.flash { padding: 14px 16px; margin: 0 0 22px; font-size: 15px; font-weight: 300; line-height: 1.6; border: 1px solid var(--rule); background: #fff; }
.flash--ok { border-left: 4px solid var(--green); }
.flash--bad { border-left: 4px solid var(--red); }
.flash[hidden] { display: none; }

/* 12. Cookie notice ---------------------------------------------------- */

.cbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: var(--ink); color: #EDE6DC; box-shadow: 0 -6px 26px rgba(0, 0, 0, .25); }
.cbar[hidden] { display: none; }
.cbar__in { width: min(1160px, 92%); margin-inline: auto; padding: 22px 0 24px; display: grid; grid-template-columns: 1fr auto; gap: 20px 34px; align-items: start; }
.cbar h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #fff; }
.cbar p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.65; color: #C6BCB1; }
.cbar a { color: #E9CB98; }
.cbar__row { display: flex; flex-direction: column; gap: 9px; }
.cbar__row .btn { text-align: center; white-space: nowrap; }
.cbar__row .btn.btn--outline { color: #EDE6DC; border-color: #6A5C51; }
.cbar__row .btn.btn--plain { color: #C6BCB1; }
.cbar__prefs { margin-top: 16px; display: grid; gap: 11px; padding-top: 16px; border-top: 1px solid #3B322C; }
.cbar__prefs[hidden] { display: none; }
.cbar__prefs label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; font-weight: 300; line-height: 1.6; color: #C6BCB1; }
.cbar__prefs strong { color: #fff; font-weight: 600; }
.cbar__prefs .btn { justify-self: start; }
@media (max-width: 800px) { .cbar__in { grid-template-columns: 1fr; } .cbar__row { flex-direction: row; flex-wrap: wrap; } }

/* 13. Footer additions -------------------------------------------------- */

.foot-hours { margin-top: 18px; }
.foot-hours p { margin: 0 0 8px; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); }
.foot-hours strong { color: var(--ink); font-weight: 600; }
.foot-hours a { color: var(--red); }

.smallprint { background: var(--sand); border-top: 1px solid var(--rule); padding: 30px 0 34px; }
.smallprint p { margin: 0 0 12px; font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--ink-soft); }
.smallprint a { color: var(--red); }
.smallprint__help strong { color: var(--ink); }
.smallprint__legal { margin-bottom: 0; letter-spacing: .4px; }

/* 14. Policy pages ------------------------------------------------------ */

.clauses { margin: 0 0 34px; padding: 22px 26px; background: var(--sand); }
.clauses ol { margin: 0; padding-left: 20px; }
.clauses li { margin-bottom: 6px; font-size: 15px; font-weight: 300; }
.clauses a { color: var(--red); }
.revised { font-size: 13px; font-weight: 300; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-soft); }

/* 15. Navigation --------------------------------------------------------
   The original menus were driven by a script we do not ship. These rules do
   the same three jobs: open a sub-menu on hover, keep the drawer shut until
   it is called for, and swap the two toggle icons. */

.nav-toggle { cursor: pointer; }

@media (max-width: 1024px) {
    .nav--drop-md .nav-toggle { display: flex; margin-left: auto; color: var(--red); }
}

/* The arrow beside a menu item. It is a button, so the browser's own button
   skin has to be taken off before it can sit on the bar like an icon. */
/* `.kit button` paints every button in the theme's colours at (0,1,1), so the
   reset has to be carried on a longer selector or the arrow comes out as a
   filled red block sitting in the middle of the menu bar. */
.kit .nav-list .caret,
.kit .nav-list .caret:hover,
.kit .nav-list .caret:focus {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    background-color: transparent;
    color: inherit;
    fill: currentColor;
    font: inherit;
    cursor: pointer;
    box-shadow: none;
}
.kit .nav-list .caret:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.caret .svg-ico { transition: transform .2s; }
.has-drop.is-open > .caret .svg-ico { transform: rotate(180deg); }

@media (min-width: 1025px) {
    .nav--main .has-drop { position: relative; display: flex; align-items: center; }

    /* Open on hover, on keyboard focus, or because the arrow was pressed.
       All three land on the same rule so the list looks identical however
       it was reached. */
    .kit .frame--top .blk.headbar__nav .nav--main .has-drop:hover > .nav--drop,
    .kit .frame--top .blk.headbar__nav .nav--main .has-drop:focus-within > .nav--drop,
    .kit .frame--top .blk.headbar__nav .nav--main .has-drop.is-open > .nav--drop {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        /* base.css pushes the list down 15–20px with !important, which opens it
           away from the pointer: the cursor crosses dead space on its way in,
           :hover drops, and the list shuts before it can be used. Its selector
           carries six classes, so this one has to carry seven to win. */
        margin-top: 0 !important;
        padding: 6px 0;
        background: #fff;
        box-shadow: 0 12px 30px rgba(36, 28, 24, .16);
        z-index: 120;
    }

    /* A forgiving strip under the label, so a pointer moving diagonally from
       the label to the first row never leaves the item. It exists only while
       the list is open — otherwise it would sit over the page below the bar
       and swallow clicks meant for the content. */
    .nav--main .has-drop:hover::after,
    .nav--main .has-drop.is-open::after {
        content: "";
        position: absolute;
        inset: 100% 0 auto 0;
        height: 14px;
    }

    .nav--main .has-drop > .nav--drop .nav-sublink { display: block; padding: 10px 18px; white-space: nowrap; }
    .nav--main .has-drop > .nav--drop .nav-sublink:hover,
    .nav--main .has-drop > .nav--drop .nav-sublink:focus { background: var(--sand); color: var(--red); }
}

/* In the drawer every list is already open, so the arrow has nothing to do. */
[data-drawer="panel"] .caret { display: none; }

/* base.css paints the menu in the donor's navy (#16163f). Repaint it, top
   level and sub-level, in the hotel's own colours. */
.kit .frame--top .blk.headbar__nav .nav-link,
.kit .frame--top .blk.headbar__aside .nav-link,
.kit .frame--top .blk.headbar__nav .nav-sublink,
.kit .frame--top .blk.headbar__nav .caret { color: var(--ink); fill: var(--ink); }

.kit .frame--top .blk.headbar__nav .nav-link:hover,
.kit .frame--top .blk.headbar__aside .nav-link:hover,
.kit .frame--top .blk.headbar__nav .nav-sublink:hover,
.kit .frame--top .blk.headbar__nav .nav-sublink:focus,
.kit .frame--top .blk.headbar__nav .caret:hover { color: var(--red); fill: var(--red); }

.kit .frame--top .blk.headbar__nav .nav-link.is-here,
.kit .frame--top .blk.headbar__aside .nav-link.is-here,
.kit .frame--top .blk.headbar__nav .nav-sublink.is-here { color: var(--red); }

/* The drawer. base.css makes it `position:absolute` but never says where, so
   left to itself it collapses into a narrow strip against the right edge with
   one word per line. It is given the full width of the bar here instead. */
.frame--top .blk.headbar { position: relative; }

/* Every widget is `.part{position:relative}`, and at this width the one
   holding the burger is 33px wide — the drawer would anchor to that and come
   out as a one-word column against the right edge. Anchor it to the bar. */
@media (max-width: 1024px) {
    .kit .frame--top .blk.headbar__nav.part { position: static; }
}

[data-drawer="panel"] { display: none; }

.kit .frame--top [data-drawer="panel"].nav-wrap.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 0 !important;
    padding: 8px 0 14px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(36, 28, 24, .18);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 9998;
}
.kit .frame--top [data-drawer="panel"] .nav-sublink { padding-left: 34px; opacity: .85; }
.kit .frame--top [data-drawer="panel"] .nav-link,
.kit .frame--top [data-drawer="panel"] .nav-sublink {
    display: block;
    padding-top: 11px;
    padding-bottom: 11px;
    white-space: normal;
}
[data-drawer="panel"] .nav--drop { display: block; }
@media (min-width: 1025px) { [data-drawer="panel"], [data-drawer="panel"].is-open { display: none; } }

.nav-toggle .nav-toggle__shut { display: none; }
.nav-toggle.is-open .nav-toggle__shut { display: block; }
.nav-toggle.is-open .nav-toggle__open { display: none; }

/* 16. Colour, taken back from the base sheet ----------------------------
   base.css paints every link and every button through `.kit a` and
   `.kit button` — one class plus one element, which outranks a single class
   of ours. Rather than fight it rule by rule, every colour it takes is
   claimed back here, once, at a weight that wins. */

.kit a.btn,
.kit button.btn                          { color: #fff; }
.kit a.btn:hover, .kit a.btn:focus,
.kit button.btn:hover, .kit button.btn:focus { color: var(--red); }

.kit a.btn.btn--outline,
.kit button.btn.btn--outline             { color: var(--red); }
.kit a.btn.btn--outline:hover, .kit a.btn.btn--outline:focus,
.kit button.btn.btn--outline:hover, .kit button.btn.btn--outline:focus { color: #fff; }

.kit button.btn.btn--plain               { color: var(--ink); }
.kit button.btn.btn--plain:hover,
.kit button.btn.btn--plain:focus         { color: var(--red); }

.kit .copy a,
.kit .standfirst a,
.kit .ledger a,
.kit .flash a,
.kit .clauses a,
.kit .helpline a,
.kit .consents a,
.kit .smallprint a,
.kit .foot-hours a,
.kit .panel a,
.kit .enquiry__fine a                    { color: var(--red); }

.kit .strip--ink a,
.kit .strip--ink .copy a,
.kit .cbar a                             { color: #E9CB98; }

.kit .cbar__row button.btn.btn--outline  { color: #EDE6DC; }
.kit .cbar__row button.btn.btn--outline:hover,
.kit .cbar__row button.btn.btn--outline:focus { color: #fff; }
.kit .cbar__row button.btn.btn--plain    { color: #C6BCB1; }