:root {
    --qc-ink: #102c3f;
    --qc-muted: #58707d;
    --qc-green: #0a705d;
    --qc-green-dark: #075144;
    --qc-sand: #eef4ee;
    --qc-line: #d9e4dd;
    --qc-surface: #ffffff;
    --qc-shadow: 0 16px 42px rgba(16, 44, 63, .09);
}

.qc-page {
    color: var(--qc-ink);
    background: #fbfcfa;
    max-width: 1180px;
    margin: 0 auto 56px;
    font-family: inherit;
}

.qc-hero {
    position: relative;
    overflow: hidden;
    margin: 24px 0 20px;
    padding: 58px 50px;
    color: #fff;
    background: linear-gradient(126deg, #073f3a, #0b7260 57%, #2d8a6d);
    border-radius: 18px;
}

.qc-hero::after {
    position: absolute;
    right: -112px;
    bottom: -170px;
    width: 440px;
    height: 440px;
    border: 48px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    content: '';
}

.qc-hero__inner { position: relative; z-index: 1; max-width: 700px; }
.qc-kicker { margin: 0 0 10px; color: var(--qc-green); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.qc-hero .qc-kicker { color: #bfe6d5; }
.qc-hero h1, .qc-panel h2, .qc-upgrade h2 { margin: 0; font-weight: 750; letter-spacing: -.03em; line-height: 1.08; }
.qc-hero h1 { max-width: 600px; font-size: clamp(2rem, 4vw, 3.35rem); }
.qc-hero__lead { max-width: 620px; margin: 18px 0 0; font-size: 1.14rem; line-height: 1.55; }
.qc-hero__note { margin: 16px 0 0; color: #c7dcd4; font-size: .84rem; line-height: 1.45; }

.qc-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 28px;
}

.qc-nav__item {
    display: flex;
    flex-direction: column;
    min-height: 84px;
    padding: 14px;
    color: var(--qc-ink);
    background: var(--qc-surface);
    border: 1px solid var(--qc-line);
    border-radius: 11px;
    font-size: .87rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.qc-nav__item:hover, .qc-nav__item.is-active { color: #fff; background: var(--qc-green); border-color: var(--qc-green); transform: translateY(-2px); }
.qc-nav__item span { margin-bottom: 8px; color: #6e8c83; font-size: .7rem; letter-spacing: .1em; }
.qc-nav__item:hover span, .qc-nav__item.is-active span { color: #bee7d7; }

.qc-panel { padding: 14px 0 42px; scroll-margin-top: 12px; }
.qc-panel__intro { max-width: 720px; margin: 0 0 20px; }
.qc-panel h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.qc-panel__intro > p:last-child { margin: 12px 0 0; color: var(--qc-muted); line-height: 1.6; }

.qc-card { padding: 30px; background: var(--qc-surface); border: 1px solid var(--qc-line); border-radius: 16px; box-shadow: var(--qc-shadow); }
.qc-fields { display: grid; gap: 18px; }
.qc-fields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qc-fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qc-fields--top-gap { margin-top: 18px; }
.qc-form label { display: flex; flex-direction: column; gap: 8px; color: #35505d; font-size: .82rem; font-weight: 750; }
.qc-form input, .qc-form select { box-sizing: border-box; width: 100%; height: 46px; padding: 0 12px; color: var(--qc-ink); background: #fff; border: 1px solid #b8cbc1; border-radius: 8px; font: inherit; font-weight: 500; outline: 0; }
.qc-form input:focus, .qc-form select:focus { border-color: var(--qc-green); box-shadow: 0 0 0 3px rgba(10, 112, 93, .13); }
.qc-form__action { display: flex; align-items: end; }
.qc-button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 0 19px; color: #fff; background: var(--qc-green); border: 1px solid var(--qc-green); border-radius: 8px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 750; line-height: 1; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.qc-button:hover, .qc-button:focus { color: #fff; background: var(--qc-green-dark); border-color: var(--qc-green-dark); transform: translateY(-1px); }

.qc-result { margin-top: 20px; }
.qc-result:empty { display: none; }
.qc-result__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qc-result__item { min-height: 92px; padding: 16px; background: #f1f7f3; border: 1px solid #d8e7dc; border-radius: 10px; }
.qc-result__item span, .qc-result__total span { display: block; color: #537068; font-size: .75rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.qc-result__item strong { display: block; margin: 8px 0 0; color: var(--qc-ink); font-size: 1.18rem; line-height: 1.2; }
.qc-result__item small { display: block; margin-top: 5px; color: #647a73; font-size: .72rem; }
.qc-result__total { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 10px; padding: 19px 20px; color: #fff; background: var(--qc-ink); border-radius: 10px; }
.qc-result__total span { color: #bed1c7; }
.qc-result__total strong { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
.qc-result__note { margin: 12px 2px 0; color: #687b82; font-size: .8rem; line-height: 1.55; }

.qc-upgrade { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 4px; padding: 34px 38px; color: #fff; background: #0e2e3e; border-radius: 16px; }
.qc-upgrade .qc-kicker { color: #9ed8c3; }
.qc-upgrade h2 { max-width: 590px; font-size: clamp(1.45rem, 2.8vw, 2rem); }
.qc-upgrade p:not(.qc-kicker) { max-width: 640px; margin: 12px 0 0; color: #c4d0d4; line-height: 1.55; }
.qc-button--light { flex: 0 0 auto; color: var(--qc-green); background: #fff; border-color: #fff; white-space: nowrap; }
.qc-button--light:hover, .qc-button--light:focus { color: #fff; background: var(--qc-green); border-color: var(--qc-green); }

@media (max-width: 900px) {
    .qc-page { margin-right: 16px; margin-left: 16px; }
    .qc-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qc-result__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .qc-hero { margin-top: 12px; padding: 38px 25px; border-radius: 13px; }
    .qc-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qc-nav__item { min-height: 72px; }
    .qc-card { padding: 20px; }
    .qc-fields--three, .qc-fields--two { grid-template-columns: 1fr; }
    .qc-form__action { align-items: stretch; }
    .qc-button { width: 100%; }
    .qc-result__total { align-items: flex-start; flex-direction: column; gap: 7px; }
    .qc-upgrade { align-items: stretch; flex-direction: column; padding: 27px 24px; }
}

@media (max-width: 420px) {
    .qc-page { margin-right: 10px; margin-left: 10px; }
    .qc-hero { padding: 30px 20px; }
    .qc-result__grid { grid-template-columns: 1fr; }
}

/* Server-rendered Quick Calc layout. */
.uk-section:has(.qs-quick){padding-top:0}.qs-quick{width:100vw;max-width:none;margin:0 calc(50% - 50vw) 42px;padding:0;color:#1f2933}.qs-quick-hero{padding:clamp(26px,4vw,58px) max(22px,calc((100vw - 1320px)/2));border-top:1px solid #d8dee5;border-bottom:1px solid #d8dee5;background:#f7f9fb}.qs-quick-hero p:first-child{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.1em}.qs-quick-hero h1{margin:.4rem 0 .7rem;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:800;letter-spacing:-.01em}.qs-quick-intro{max-width:920px;margin:0;color:#3e4b56;line-height:1.55}.qs-quick-layout{display:grid;grid-template-columns:25% 75%;align-items:start;border-bottom:1px solid #d8dee5;background:#fff}.qs-quick-sidebar{padding:0;border-right:1px solid #d8dee5;background:#f7f9fb}.qs-quick-featured{display:block;margin:0;padding:19px 22px;border-bottom:2px solid #01335b;background:#01335b;background-image:linear-gradient(40deg,#1865e0 0,#199ef2 50%,#16b6f5 100%);color:#fff;text-decoration:none}.qs-quick-featured span,.qs-quick-featured strong{display:block}.qs-quick-featured span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.qs-quick-featured strong{margin-top:3px;font-size:1.1rem}.qs-quick-groups{display:block;background:transparent}.qs-quick-group{padding:22px;border-bottom:1px solid #d8dee5}.qs-quick-group:last-child{border-bottom:0}.qs-quick-group h2{margin:0 0 11px;font-size:.94rem;text-transform:uppercase;letter-spacing:.06em}.qs-quick-nav{display:grid;gap:7px}.qs-quick-nav a,.qs-quick button{padding:9px 11px;border:1px solid #c9d2dc;border-radius:0;background:#fff;color:#01335b;font-weight:750;text-decoration:none}.qs-quick-nav a{display:block}.qs-quick-nav a.active,.qs-quick button{background:#01335b;background-image:linear-gradient(40deg,#1865e0 0,#199ef2 50%,#16b6f5 100%);color:#fff;border-color:#01335b}.qs-quick-calculator{min-width:0;padding:30px 3vw 24px;background:#fff}.qs-quick-calculator>h2{margin:0 0 14px;font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.02em}.qs-quick-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:auto}.qs-quick-form label{display:grid;gap:6px;font-size:.85rem;font-weight:750}.qs-quick-form input,.qs-quick-form select{box-sizing:border-box;width:100%;padding:11px;border:1px solid #b8c3ce;border-radius:0;font:inherit}.qs-quick-form .full{grid-column:1/-1}.qs-quick-form button{min-width:132px}.qs-quick-result{margin:16px auto 0;padding:18px;border:1px solid #cbd8e3;border-radius:0;background:#f3f7fa}.qs-quick-result p{margin-top:0}.qs-quick-result small{display:block;line-height:1.5}.qs-quick-range{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.qs-quick-range div{padding:12px;border:1px solid #cbd8e3;border-radius:0;background:#fff}.qs-quick-range .recommended{border-color:#01335b}.qs-quick-range span,.qs-quick-range strong{display:block}.qs-quick-range span{font-size:.78rem}.qs-quick-range strong{font-size:1.1rem}@media(max-width:860px){.qs-quick-layout{display:block}.qs-quick-sidebar{border-right:0;border-bottom:1px solid #d8dee5}.qs-quick-nav{display:flex;flex-wrap:wrap}.qs-quick-form,.qs-quick-range{grid-template-columns:1fr}.qs-quick-calculator{padding-right:22px;padding-left:22px}}

/* Compact navigation and readable result cards. */
@media (min-width: 861px) {
    .qs-quick-sidebar { position: sticky; top: 61px; align-self: start; max-height: calc(100vh - 61px); overflow-y: auto; }
    .qs-quick-featured { padding: 13px 16px; }
    .qs-quick-featured strong { font-size: .95rem; }
    .qs-quick-group { padding: 13px 16px; }
    .qs-quick-group h2 { margin-bottom: 7px; font-size: .78rem; }
    .qs-quick-nav { gap: 4px; }
    .qs-quick-nav a { padding: 6px 8px; font-size: .82rem; line-height: 1.15; }
}

.qs-quick-result { padding: 26px; }
.qs-quick-result > p:first-child { margin: 0 0 16px; }
.qs-quick-result > p:first-child strong { font-size: 1.2rem; }
.qs-quick-range { gap: 14px; margin: 0 0 20px; }
.qs-quick-range div { min-height: 104px; padding: 18px; border-color: #b9c8d5; }
.qs-quick-range .recommended { color: #fff; border-color: #01335b; background: linear-gradient(40deg, #1865e0 0, #199ef2 50%, #16b6f5 100%); }
.qs-quick-range span { font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.qs-quick-range strong { margin-top: 9px; font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1; }
.qs-quick-result small { max-width:900px; color:#33414d; font-size: .97rem; line-height: 1.65; }
@media (max-width: 860px) { .qs-quick-result { padding: 20px; } }

/* Native details controls keep the material-scope navigation compact without
   hiding any calculator on smaller screens. */
.qs-quick-nav-section__title { margin: 0; padding: 13px 16px 7px; color: #52616d; font-size: .71rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.qs-quick-group { margin: 0; }
.qs-quick-group summary { color: #01335b; font-size: .78rem; font-weight: 800; line-height: 1.25; cursor: pointer; list-style: none; }
.qs-quick-group summary::-webkit-details-marker { display: none; }
.qs-quick-group summary::after { float: right; content: '−'; color: #199ef2; font-size: 1rem; line-height: .7; }
.qs-quick-group:not([open]) summary::after { content: '+'; }
.qs-quick-group--labour { margin-top: 0; background: #f0f7fc; }
.qs-quick-group--labour h2 { color: #01335b; }
.qs-quick-group--labour p { margin: 0 0 10px; color: #52616d; font-size: .77rem; line-height: 1.35; }
@media (max-width: 860px) {
    .qs-quick-group { padding: 15px 16px; }
    .qs-quick-group summary { font-size: .84rem; }
}

/* Live material-rate breakdowns for model-aligned calculators. */
.qs-quick-cost-breakdown { overflow-x: auto; margin: 0 0 20px; border: 1px solid #b9c8d5; background: #fff; }
.qs-quick-cost-breakdown table { width: 100%; min-width: 620px; border-collapse: collapse; }
.qs-quick-cost-breakdown th, .qs-quick-cost-breakdown td { padding: 11px 13px; border-bottom: 1px solid #dce4ea; text-align: left; vertical-align: top; }
.qs-quick-cost-breakdown thead th { color: #fff; background: #01335b; font-size: .78rem; letter-spacing: .035em; text-transform: uppercase; }
.qs-quick-cost-breakdown td:nth-child(n+2), .qs-quick-cost-breakdown th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.qs-quick-cost-breakdown tbody td { color: #33414d; font-size: .88rem; }
.qs-quick-cost-breakdown tbody td:first-child { color: #16232e; font-weight: 700; }
.qs-quick-cost-breakdown tfoot th { border-bottom: 0; color: #fff; background: linear-gradient(40deg, #1865e0 0, #199ef2 50%, #16b6f5 100%); font-size: .88rem; }

/* Informational handling and freight context; these panels never alter the tender total. */
.qs-quick-logistics { margin: 0 0 20px; padding: 16px; border: 1px solid #b9c8d5; background: #fff; }
.qs-quick-logistics h3 { margin: 0 0 12px; color: #01335b; font-size: .92rem; font-weight: 800; }
.qs-quick-logistics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qs-quick-logistics__grid > div { padding: 11px; border: 1px solid #dce4ea; background: #f7f9fb; }
.qs-quick-logistics__grid span, .qs-quick-logistics__grid strong { display: block; }
.qs-quick-logistics__grid span { color: #52616d; font-size: .74rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.qs-quick-logistics__grid strong { margin-top: 5px; color: #16232e; font-size: .9rem; line-height: 1.35; }
.qs-quick-logistics__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.qs-quick-logistics__badges span { padding: 6px 8px; color: #5d4600; background: #fff4ce; border: 1px solid #ecd58b; font-size: .78rem; font-weight: 700; }
.qs-quick-logistics small { display: block; margin-top: 12px; color: #52616d; font-size: .8rem; line-height: 1.45; }
@media (max-width: 680px) { .qs-quick-logistics__grid { grid-template-columns: 1fr; } }

/* Keep the Quick Calc introduction informative without consuming the viewport. */
.qs-quick-hero { padding-top: 16px; padding-bottom: 18px; }
.qs-quick-hero h1 { margin: .2rem 0 .35rem; font-size: clamp(1rem, 1.35vw, 1.2rem); }
.qs-quick-intro { max-width: none; font-size: .9rem; line-height: 1.4; }

/* Contextual learning links stay available without covering calculator inputs. */
.qs-quick-guide-inline { margin: 12px 0 0; color: #33414d; font-size: .86rem; line-height: 1.4; }
.qs-quick-guide-inline a,
.qs-quick-result-guide a { color: #01335b; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.qs-guide-dock { position: fixed; top: 46%; right: 0; z-index: 45; width: min(250px, calc(100vw - 24px)); box-shadow: 0 8px 22px rgba(1, 51, 91, .18); transition: opacity .28s ease, transform .28s ease; }
.qs-guide-dock.is-dismissing { opacity: 0; transform: translateX(16px); pointer-events: none; }
.qs-guide-dock a { display: grid; gap: 3px; padding: 12px 42px 12px 16px; border-radius: 8px 0 0 8px; background: #01335b; color: #fff; text-decoration: none; }
.qs-guide-dock a:hover,
.qs-guide-dock a:focus-visible { background: #075493; color: #fff; }
.qs-guide-dock span { font-size: .72rem; font-weight: 700; line-height: 1.2; }
.qs-guide-dock strong { font-size: .9rem; line-height: 1.25; }
.qs-guide-dock__close { position: absolute; top: 5px; right: 6px; z-index: 1; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.qs-quick .qs-guide-dock__close { min-width: 0; border: 0; background: transparent; background-image: none; color: #fff; }
.qs-guide-dock__close:hover,
.qs-guide-dock__close:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; outline: 2px solid #fff; outline-offset: 1px; }
.qs-quick-result-guide { display: grid; gap: 5px; margin: 16px 0 0; padding: 15px 18px; border-left: 4px solid #199ef2; background: #f7f9fb; }
.qs-quick-result-guide > span { color: #52616d; font-size: .82rem; font-weight: 800; }
@media (max-width: 767px) {
    .qs-quick { padding-bottom: 76px; }
    .qs-guide-dock { top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; }
    .qs-guide-dock.is-dismissing { transform: translateY(16px); }
    .qs-guide-dock a { grid-template-columns: 1fr auto; align-items: center; gap: 10px; border-radius: 7px; }
    .qs-guide-dock a span { grid-column: 1; }
    .qs-guide-dock a strong { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
}

/* Labour contractor-tender controls and transparent price build-up. */
.qs-quick-tender-settings { display: grid; grid-column: 1 / -1; gap: 10px; min-width: 0; margin: 4px 0 2px; padding: 15px; border: 1px solid #cbd8e3; background: #f7f9fb; }
.qs-quick-tender-settings legend { float: none; width: auto; margin: 0; padding: 0 5px; color: #01335b; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.qs-quick-margin-options { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.qs-quick-margin-options > span { margin-right: 4px; color: #33414d; font-size: .85rem; font-weight: 750; }
.qs-quick-margin-options label { display: block; margin: 0; }
.qs-quick-margin-options input { position: absolute; opacity: 0; pointer-events: none; }
.qs-quick-margin-options label span { display: block; min-width: 48px; padding: 8px 10px; border: 1px solid #aebdca; background: #fff; color: #01335b; font-size: .85rem; font-weight: 800; line-height: 1; text-align: center; cursor: pointer; }
.qs-quick-margin-options input:checked + span { border-color: #01335b; background: linear-gradient(40deg, #1865e0 0, #199ef2 50%, #16b6f5 100%); color: #fff; }
.qs-quick-margin-options input:focus-visible + span { outline: 3px solid rgba(25,158,242,.32); outline-offset: 2px; }
.qs-quick-vat-option { display: flex !important; align-items: center; gap: 8px; width: fit-content; margin: 0; font-size: .88rem !important; }
.qs-quick-vat-option input { width: 17px !important; height: 17px; margin: 0; accent-color: #1865e0; }
.qs-quick-tender-settings small { color: #52616d; font-size: .8rem; line-height: 1.4; }
.qs-quick-tender { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; margin: 0 0 20px; }
.qs-quick-tender section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 11px 14px; align-content: start; padding: 17px; border: 1px solid #b9c8d5; background: #fff; }
.qs-quick-tender section > span { color: #44525d; font-size: .82rem; font-weight: 700; }
.qs-quick-tender section > strong { color: #16232e; font-size: 1rem; text-align: right; white-space: nowrap; }
.qs-quick-tender .qs-quick-tender-total { border-color: #01335b; background: linear-gradient(40deg, #1865e0 0, #199ef2 50%, #16b6f5 100%); }
.qs-quick-tender .qs-quick-tender-total > span,
.qs-quick-tender .qs-quick-tender-total > strong { color: #fff; }
.qs-quick-tender .qs-quick-tender-total > span:nth-last-of-type(1),
.qs-quick-tender .qs-quick-tender-total > strong:last-child { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.45); font-size: 1.05rem; }
@media (max-width: 680px) {
    .qs-quick-margin-options { align-items: stretch; }
    .qs-quick-margin-options > span { flex-basis: 100%; }
    .qs-quick-margin-options label { flex: 1 1 calc(50% - 7px); }
    .qs-quick-margin-options label span { width: 100%; }
    .qs-quick-tender { grid-template-columns: 1fr; }
}