/* ---------------------------------------------------------------------------
   GST Checker on top of Korde.

   Loaded last, and deliberately small. The template's own accent was remapped
   inside its stylesheet (see the note at the top of style.css) because it is
   written out 79 times with no custom property to aim at. What is left here is
   only what the template has no opinion about, or gets wrong for us.

   The palette is sampled from the wordmark, not chosen:

     #003399   the blue of the shield and "Checker"   — 40,221 px of the mark
     #dc2626   the red of "GST" and the tick          — 28,702 px
     #2b2a29   the ink of "Know Your Vendors"

   Blue leads. It carries 13.1:1 against white, so it can hold white text at
   any size. The red is 4.0:1 — below AA for body copy — so it is used as a
   MARK and never as a fill behind small white type: rules, underlines, the
   tick in a list, the one word in a heading that should catch the eye.
   --------------------------------------------------------------------------- */

:root {
    --gc-blue: #003399;
    --gc-blue-deep: #002878;
    --gc-red: #dc2626;
    --gc-ink: #2b2a29;
}

/* ---------------------------------------------------------------------------
   The wordmark

   4173x948 — a very wide lockup. Left to itself the template's header would
   run it the full width of the bar, so every placement gets a height and lets
   the width follow.
   --------------------------------------------------------------------------- */

.header__logo img {
    height: 46px;
    width: auto;
}

.offcanvas__logo img {
    height: 38px;
    width: auto;
}

.footer-area__logo img {
    height: 52px;
    width: auto;
}

@media (max-width: 575px) {
    .header__logo img {
        height: 34px;
    }
}

/* ---------------------------------------------------------------------------
   Bars

   The template's top bar is #333982, a violet-blue that sits a hue away from
   the wordmark and reads as a second brand rather than a shade of the first.
   Deepened logo blue instead, so the accent button on top of it still steps
   forward.
   --------------------------------------------------------------------------- */

.bg--blue {
    background: var(--gc-blue-deep);
}

/* Site-wide notice, above everything. Red because it is the one bar on the
   page that exists to be read before the page is. */
.header__ticker {
    background: var(--gc-red);
    color: #fff;
    font-size: 13px;
    padding: 7px 0;
}

.header__ticker a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The red mark

   Never a fill behind small white text — 4.0:1 does not carry body copy. It
   marks instead: the accented word in a heading, the rule under a section
   title, the tick in a list.
   --------------------------------------------------------------------------- */

.color--brand {
    color: var(--gc-red);
}

.section-title h2 .color--brand,
.banner__single__content h1 .color--brand {
    color: var(--gc-red);
}

/* A short rule under a section heading, in the wordmark's two colours in the
   order they appear in it. */
.section-title h2::after {
    content: '';
    display: block;
    width: 68px;
    height: 3px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, var(--gc-red) 0 50%, var(--gc-blue) 50% 100%);
}

.section-title--left h2::after {
    margin-left: 0;
}

/* ---------------------------------------------------------------------------
   Proof list — the ticked lines beside the hero and in the about section
   --------------------------------------------------------------------------- */

.gc-ticks {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.gc-ticks li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.gc-ticks li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--gc-red);
}

/* ---------------------------------------------------------------------------
   Figures — the numbers under the hero copy
   --------------------------------------------------------------------------- */

.gc-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    margin-top: 34px;
}

.gc-figure strong {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.gc-figure span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   Price cards on the pricing strip
   --------------------------------------------------------------------------- */

.gc-price {
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 6px;
    padding: 34px 26px;
    height: 100%;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.gc-price:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(0, 51, 153, 0.35);
}

.gc-price--featured {
    border-color: var(--gc-blue);
    box-shadow: 0 18px 40px -20px rgba(0, 51, 153, 0.4);
}

.gc-price__name {
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gc-blue);
    margin-bottom: 12px;
}

.gc-price__figure {
    font-size: 40px;
    font-weight: 700;
    color: var(--gc-ink);
    line-height: 1;
}

.gc-price__figure small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 8px;
}

.gc-price__list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    text-align: left;
}

.gc-price__list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 14px;
}

.gc-price__list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--gc-red);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Keyboard focus

   The template draws none at all, which makes every page unusable by keyboard
   — you cannot see where you are. Two pixels of the brand blue, offset so it
   never sits on top of the thing it is marking.
   --------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gc-blue);
    outline-offset: 3px;
    border-radius: 3px;
}

/* On the dark bars the blue outline disappears into the ground. */
.bg--blue a:focus-visible,
.header__ticker a:focus-visible,
.bg--dark a:focus-visible,
.bg--dark--light a:focus-visible,
.banner__single a:focus-visible {
    outline-color: #fff;
}

/* ---------------------------------------------------------------------------
   Hero copy

   The template uppercases everything inside .banner__single__content, which is
   fine for the one short headline its own banner holds. A three-line sentence
   set in caps is materially slower to read — the word shapes all become the
   same rectangle — so the paragraph opts out and the headline keeps it.
   --------------------------------------------------------------------------- */

.banner__single__content p {
    text-transform: none;
    font-size: 17px;
    line-height: 1.65;
    max-width: 620px;
    margin-bottom: 34px;
    opacity: 0.92;
}

/* Cards in a row are only a row if their buttons line up. The lists differ in
   length by a line, so the button is pushed to the bottom rather than left to
   land wherever the copy above it ends. */
.gc-price {
    display: flex;
    flex-direction: column;
}

.gc-price .cr-btn {
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Questions that open

   Styling for <details>. The marker is replaced with a plus that becomes a
   minus, because the browser default triangle sits at a different size and
   colour in every engine.
   --------------------------------------------------------------------------- */

.gc-faq {
    border-top: 1px solid #e6e9f0;
}

.gc-faq__item {
    border-bottom: 1px solid #e6e9f0;
}

.gc-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--gc-ink);
    list-style: none;
}

.gc-faq__item summary::-webkit-details-marker {
    display: none;
}

.gc-faq__item summary:hover {
    color: var(--gc-blue);
}

.gc-faq__sign {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
}

.gc-faq__sign::before,
.gc-faq__sign::after {
    content: '';
    position: absolute;
    background: var(--gc-red);
    transition: transform 0.2s ease;
}

.gc-faq__sign::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}

.gc-faq__sign::after {
    top: 0;
    left: 6px;
    width: 2px;
    height: 14px;
}

/* Open: the upright stroke collapses, leaving a minus. */
.gc-faq__item[open] .gc-faq__sign::after {
    transform: scaleY(0);
}

.gc-faq__answer {
    padding: 0 0 20px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Long-form copy — CMS pages and blog posts
   --------------------------------------------------------------------------- */

.gc-prose {
    line-height: 1.8;
}

.gc-prose h2,
.gc-prose h3,
.gc-prose h4 {
    margin: 34px 0 14px;
    color: var(--gc-ink);
}

.gc-prose p {
    margin-bottom: 18px;
}

.gc-prose ul,
.gc-prose ol {
    margin: 0 0 18px 22px;
}

.gc-prose li {
    margin-bottom: 8px;
}

.gc-prose a {
    color: var(--gc-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Forms — the template styles its own contact form and nothing else
   --------------------------------------------------------------------------- */

.gc-field {
    margin-bottom: 18px;
}

.gc-field label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 14px;
    color: var(--gc-ink);
}

.gc-field input,
.gc-field select,
.gc-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dfe3ea;
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    color: var(--gc-ink);
}

.gc-field input:focus,
.gc-field select:focus,
.gc-field textarea:focus {
    border-color: var(--gc-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.12);
}

.gc-field__error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--gc-red);
}

/* A full-width submit inside a card. The template's button is inline-flex. */
.cr-btn.w-100 {
    display: flex;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   What-we-check rows
   --------------------------------------------------------------------------- */

.gc-check {
    padding: 38px 0;
    border-bottom: 1px solid #e6e9f0;
}

.gc-check:last-child {
    border-bottom: 0;
}

.gc-check__head img {
    width: 54px;
    height: auto;
    margin-bottom: 16px;
}

.gc-check__head h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.gc-check__head h3 span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 6px;
}

/* Two columns of ticks once there is room, so a six-point list does not run
   down the page beside a heading three lines tall. */
@media (min-width: 768px) {
    .gc-ticks--split {
        column-count: 2;
        column-gap: 40px;
    }

    .gc-ticks--split li {
        break-inside: avoid;
    }
}

/* ---------------------------------------------------------------------------
   Blog — cards, chips and contact details
   --------------------------------------------------------------------------- */

.gc-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}

.gc-chip {
    padding: 7px 16px;
    border: 1px solid #e6e9f0;
    border-radius: 50rem;
    font-size: 13px;
    font-weight: 600;
    color: #55607a;
}

.gc-chip:hover {
    border-color: var(--gc-blue);
    color: var(--gc-blue);
}

.gc-chip--on {
    background: var(--gc-blue);
    border-color: var(--gc-blue);
    color: #fff;
}

.gc-chip--on:hover {
    color: #fff;
}

.gc-post {
    height: 100%;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.gc-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(0, 51, 153, 0.28);
}

.gc-post__image img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.gc-post__body {
    padding: 22px;
}

.gc-post__body h3 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.gc-post__body h3 a {
    color: var(--gc-ink);
}

.gc-post__body h3 a:hover {
    color: var(--gc-blue);
}

.gc-post__meta {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a8598;
    margin-bottom: 10px;
}

.gc-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gc-contact li {
    margin-bottom: 22px;
}

.gc-contact li > span {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a8598;
    margin-bottom: 5px;
}

.gc-contact li a {
    font-weight: 600;
    color: var(--gc-ink);
}

.gc-contact li a:hover {
    color: var(--gc-blue);
}

/* A quieter second button beside the primary one. The template ships only the
   filled variant, so the outline is ours. */
.cr-btn--outline {
    background: transparent;
    border: 2px solid var(--gc-blue);
    color: var(--gc-blue);
    margin-left: 10px;
}

.cr-btn--outline:hover {
    background: var(--gc-blue);
    color: #fff;
}

@media (max-width: 575px) {
    .cr-btn--outline {
        margin-left: 0;
        margin-top: 12px;
    }
}

/* ---------------------------------------------------------------------------
   Inner-page banner

   The template's breadcrumb sits a short heading on the left third of a photo
   and gets away with no scrim. Our headings are longer and the standfirst runs
   across the middle of the image, where it stops being readable. A left-to-
   right wash fixes it without flattening the photograph — and it is anchored
   to the text side, so the image still shows.
   --------------------------------------------------------------------------- */

.cr-breadcrumb-area {
    position: relative;
}

.cr-breadcrumb-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
}

.cr-breadcrumb-area > .container {
    position: relative;
    z-index: 1;
}

.cr-breadcrumb h1 {
    color: var(--gc-blue);
}

.cr-breadcrumb p {
    color: #3d4757;
    max-width: 620px;
}

/* ---------------------------------------------------------------------------
   Hero eyebrow and fine print
   --------------------------------------------------------------------------- */

.gc-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #fff;
    opacity: 0.75;
    margin-bottom: 16px;
}

.gc-fineprint {
    text-transform: none;
    font-size: 13px;
    opacity: 0.7;
    margin: 14px 0 0;
}

/* A glyph where the template expects an image. Its .service__icon is sized for
   a 60px PNG, so the icon font needs its own box or it sits at body size in the
   corner of one. */
.service__icon--glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(0, 51, 153, 0.08);
    color: var(--gc-blue);
}

.service__icon--glyph i {
    font-size: 28px;
    line-height: 1;
}

/* Said beside every paid price, because it is the difference between the figure
   shown and the figure taken. */
.gc-price__note {
    font-size: 12px;
    color: #7a8598;
    margin: -8px 0 18px;
}