/* ==========================================================================
   Great Britain Tile design system (introduced with the 2026 homepage redesign).
   Every rule is scoped to .gbt so it can't clash with main.css, and every page
   reuses the same few tokens and components. Wrap page content in
   <main class="gbt"> and load this file after main.css.
   ========================================================================== */
.gbt {
    --navy: #0d3e5f;
    --navy-900: #0a2d47;
    --red: #b13138;
    --red-700: #962830;
    --red-bright: #e3202b; /* red accent line on navy */
    --tint: #f3efeb;
    --ink: #1f2933;
    --muted: #5b616b;
    --line: #e6e0da;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(13, 62, 95, 0.06), 0 10px 28px rgba(13, 62, 95, 0.08);
    --font-head: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    display: block;
    font-family: var(--font-body);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.65;
}
.gbt *, .gbt *::before, .gbt *::after { box-sizing: border-box; }
.gbt img { display: block; max-width: 100%; }
.gbt a { text-decoration: none; }

/* Layout ------------------------------------------------------------------ */
.gbt-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.gbt-section { padding: 96px 0; background: #fff; }
.gbt-section--tint { background: var(--tint); }
.gbt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* Type -------------------------------------------------------------------- */
.gbt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
}
.gbt-eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.gbt h1, .gbt h2, .gbt h3 {
    font-family: var(--font-head);
    color: var(--navy);
    margin: 0;
    padding: 0;
    text-align: inherit;
    letter-spacing: -0.01em;
}
.gbt h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; font-weight: 700; margin-bottom: 16px; }
.gbt h3 { font-size: 20px; line-height: 1.3; font-weight: 700; margin-bottom: 8px; }
.gbt h2::after, .gbt h3::after { content: none; display: none; }
.gbt p { margin: 0 0 16px; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.65; }
.gbt .gbt-lede { font-size: 18px; max-width: 640px; }
.gbt-head { margin-bottom: 48px; }
.gbt-head--center { text-align: center; }
.gbt-head--center .gbt-lede { margin-left: auto; margin-right: auto; }

/* Buttons & links ----------------------------------------------------------- */
.gbt-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gbt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gbt-btn--primary { background: var(--red); color: #fff; }
.gbt-btn--primary:hover { background: var(--red-700); color: #fff; text-decoration: none; }
.gbt-btn--secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.gbt-btn--secondary:hover { background: var(--navy); color: #fff; text-decoration: none; }
.gbt-btn--light { border-color: rgba(255, 255, 255, 0.85); color: #fff; background: transparent; }
.gbt-btn--light:hover { background: #fff; color: var(--navy); text-decoration: none; }
.gbt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
}
.gbt-link::after { content: "\2192"; transition: transform 0.2s ease; }
.gbt-link:hover { color: var(--red); text-decoration: none; }
.gbt-link:hover::after { transform: translateX(3px); }
.gbt-link--external::after { content: "\2197"; }

/* Cards --------------------------------------------------------------------- */
.gbt-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: inherit;
}
.gbt-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gbt-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.gbt-card__body p { flex: 1; }
.gbt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Hero ---------------------------------------------------------------------- */
.gbt-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 96px 0;
    background: var(--navy-900) url('/images/GreatBritainTile_Showroom2.jpg') center / cover no-repeat;
    color: #fff;
}
.gbt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 45, 71, 0.94) 0%, rgba(10, 45, 71, 0.82) 45%, rgba(10, 45, 71, 0.45) 100%);
}
.gbt-hero .gbt-container { position: relative; width: 100%; }
.gbt-hero__content { max-width: 640px; }
.gbt-hero .gbt-eyebrow { color: #fff; }
.gbt-hero .gbt-eyebrow::before { background: var(--red-bright); height: 3px; }
.gbt-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 58px); line-height: 1.08; font-weight: 700; margin-bottom: 20px; }
.gbt-hero p { color: rgba(255, 255, 255, 0.88); font-size: 19px; margin-bottom: 32px; }
.gbt-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}
.gbt-trust li { display: flex; align-items: center; gap: 8px; margin: 0; }
.gbt-trust li::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M8 13.2 4.8 10l-1.1 1.1L8 15.4l8.3-8.3-1.1-1.1z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Stats strip (overlaps the hero) ------------------------------------------------ */
.gbt-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: -168px 0 80px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 2px 4px rgba(10, 45, 71, 0.06), 0 24px 48px rgba(10, 45, 71, 0.14);
}
.gbt-stat { padding: 28px 28px 26px; border-left: 1px solid var(--line); }
.gbt-stat:first-child { border-left: 0; }
.gbt-stat strong { display: block; font-family: var(--font-head); font-size: 34px; line-height: 1.1; font-weight: 700; color: var(--navy); }
.gbt-stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

/* Dark section ---------------------------------------------------------------- */
.gbt-section--navy { background: var(--navy); }
.gbt-section--navy h2 { color: #fff; }
.gbt-section--navy .gbt-eyebrow { color: #fff; }
.gbt-section--navy .gbt-eyebrow::before { background: var(--red-bright); height: 3px; }
.gbt-section--navy .gbt-card { border-color: transparent; box-shadow: none; }

/* Photo cards: image fills the card, text sits on a dark fade --------------------- */
.gbt-photo-card { position: relative; z-index: 0; justify-content: flex-end; border: 0; background: var(--navy-900); }
.gbt-photo-card .gbt-card__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; aspect-ratio: auto; transition: transform 0.4s ease; }
.gbt-photo-card .gbt-card__body { flex: 0 0 auto; padding-top: 72px; background: linear-gradient(180deg, rgba(10, 45, 71, 0) 0%, rgba(10, 45, 71, 0.72) 45%, rgba(10, 45, 71, 0.92) 100%); }
.gbt-photo-card h3 { color: #fff; }
.gbt-photo-card p { color: rgba(255, 255, 255, 0.86); }
.gbt-photo-card .gbt-link { color: #fff; }
.gbt-photo-card .gbt-link:hover { color: #fff; text-decoration: underline; }
.gbt-photo-card:hover .gbt-card__img { transform: scale(1.04); }

/* Flooring types -------------------------------------------------------------- */
.gbt-floors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.gbt-floor { min-height: 340px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gbt-floor:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(13, 62, 95, 0.08), 0 16px 36px rgba(13, 62, 95, 0.14); text-decoration: none; }
.gbt-floor .gbt-card__body { padding: 72px 18px 20px; }
.gbt-floor h3 { font-size: 18px; margin-bottom: 4px; }
.gbt-floor p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.gbt-floor .gbt-link { font-size: 14px; }
/* Tile card has two links: "Installation" covers the whole card, "Shop online" sits above it */
.gbt-floor--stretch { position: relative; }
.gbt-floor__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.gbt-floor__main::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.gbt-floor__extra { z-index: 2; }
.gbt-floor__extra { position: relative; z-index: 1; }

/* Why us ---------------------------------------------------------------------- */
.gbt-photo { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; }
.gbt-photo--square { aspect-ratio: 1 / 1; }
.gbt-photo--wide { aspect-ratio: 4 / 3; }
.gbt-points { margin: 28px 0 32px; padding: 0; list-style: none; display: grid; gap: 20px; }
.gbt-points li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; margin: 0; }
.gbt-points__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tint);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.gbt-section--tint .gbt-points__icon { background: #fff; }
.gbt-section--tint .gbt-card .gbt-points__icon { background: var(--tint); }
.gbt-points strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: 16px; margin-bottom: 2px; }
.gbt-points p { margin: 0; font-size: 15px; }

/* Showroom -------------------------------------------------------------------- */
.gbt-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 32px; }
.gbt-visit h3 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.gbt-visit p, .gbt-hours { font-size: 16px; color: var(--ink); margin: 0; }
.gbt-hours { border-collapse: collapse; }
.gbt-hours td { padding: 2px 0; }
.gbt-hours td:first-child { padding-right: 20px; color: var(--muted); }

/* Work gallery ---------------------------------------------------------------- */
.gbt-work { grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, 280px); }
.gbt-work .gbt-card:first-child { grid-row: span 2; }
.gbt-work .gbt-card__body { padding: 72px 24px 20px; }
.gbt-work p { margin: 0; font-size: 15px; }
.gbt-work-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 40px; }

/* Reviews --------------------------------------------------------------------- */
.gbt-review { padding: 32px; }
.gbt-review blockquote { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--ink); font-style: normal; }
.gbt-review blockquote::before { content: "\201C"; display: block; font-family: Georgia, serif; font-size: 56px; line-height: 0.8; color: var(--red); margin-bottom: 8px; }
.gbt-review cite { font-style: normal; font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.gbt-review cite span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--muted); }

/* Brands ---------------------------------------------------------------------- */
.gbt-brands { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.gbt-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.gbt-brand img { max-height: 56px; width: auto; object-fit: contain; }
.gbt-brand { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.gbt-brand:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.gbt-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: 48px;
    padding: 28px 32px;
    border-radius: var(--radius);
    background: var(--tint);
    border: 1px solid var(--line);
}
.gbt-promo h3 { margin-bottom: 4px; }
.gbt-promo p { margin: 0; font-size: 15px; }

/* Closing call to action ------------------------------------------------------ */
.gbt-cta { padding-top: 0; }
.gbt-section--tint + .gbt-cta, .gbt-section--navy + .gbt-cta { padding-top: 96px; }
.gbt-cta__panel { background: linear-gradient(rgba(10, 45, 71, 0.88), rgba(10, 45, 71, 0.9)), url('/images/GreatBritainTile_Showroom3.jpg') center / cover; border-radius: 16px; padding: 64px 32px; text-align: center; }
.gbt-cta h2 { color: #fff; }
.gbt-cta p { color: rgba(255, 255, 255, 0.85); margin-left: auto; margin-right: auto; }
.gbt-cta .gbt-actions { justify-content: center; margin-top: 32px; }

/* Inner-page hero (shorter than the homepage hero) ------------------------------- */
/* Every inner page uses the same header height as the showroom page */
.gbt-hero--page { min-height: 480px; padding: 0; } /* content is vertically centered, so every header is exactly 480px */
.gbt-hero--page h1 { font-size: clamp(34px, 4.4vw, 52px); }
/* Same even blue overlay the inner pages have always used */
.gbt-hero--page::before { background: linear-gradient(135deg, rgba(13, 62, 95, 0.9) 0%, rgba(13, 62, 95, 0.7) 100%); }

/* Simple text cards ------------------------------------------------------------- */
.gbt-text-card { padding: 28px; }
.gbt-text-card h3 { margin-bottom: 6px; }
.gbt-text-card p { flex: 1; }
a.gbt-text-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
a.gbt-text-card:hover { border-color: var(--navy); transform: translateY(-2px); text-decoration: none; }

/* Map embed --------------------------------------------------------------------- */
.gbt-map { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--tint); }

/* Spec lists (e.g. tile sizes) ---------------------------------------------------- */
.gbt-spec { padding: 28px; }
.gbt-spec ul { margin: 12px 0 0; padding: 0; list-style: none; }
.gbt-spec li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; color: var(--ink); font-size: 15px; }
.gbt-spec li:first-child { border-top: 0; }
.gbt-spec li { align-items: center; }
.gbt-spec p { font-size: 15px; margin-bottom: 4px; }
/* Tile drawings: a pattern band on each card plus a to-scale shape for each size */
.gbt-spec__art {
    height: 120px;
    margin: -28px -28px 24px;
    border-bottom: 1px solid var(--line);
    background-color: #f8f8f7;
}
.gbt-spec__art--large {
    background-image: linear-gradient(#a3abb2 2px, transparent 2px), linear-gradient(90deg, #a3abb2 2px, transparent 2px);
    background-size: 120px 60px;
    background-position: -1px -1px;
}
.gbt-spec__art--standard {
    background-image: linear-gradient(#a3abb2 2px, transparent 2px), linear-gradient(90deg, #a3abb2 2px, transparent 2px);
    background-size: 30px 30px;
    background-position: -1px -1px;
}
.gbt-spec__art--specialty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23a3abb2' stroke-width='2.5'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/%3E%3Cpath d='M28 63v33M1 47.5 0 48M55 47.5l1 .5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 42px 73px;
}
.gbt-size { flex: none; display: block; background: #f4f4f3; border: 1.5px solid #8f989f; border-radius: 2px; }
.gbt-size--hex { border: 0; background: #8f989f; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.gbt-size--mosaic { background-color: #f4f4f3; background-image: linear-gradient(#8f989f 1.5px, transparent 1.5px), linear-gradient(90deg, #8f989f 1.5px, transparent 1.5px); background-size: 6.5px 6.5px; }
.gbt-size--plank { background: linear-gradient(90deg, #d8c3a8, #c7ab8a); border-color: #a88c6d; }

/* Photo strip ------------------------------------------------------------------- */
.gbt-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gbt-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

/* Stats strip that sits below an inner-page header instead of overlapping it -------- */
.gbt-stats--flat { margin: 0 0 80px; }

/* Timeline -------------------------------------------------------------------- */
.gbt-timeline { position: relative; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; }
.gbt-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 119px; width: 2px; background: var(--line); }
.gbt-timeline li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 48px; margin: 0 0 36px; }
.gbt-timeline li:last-child { margin-bottom: 0; }
.gbt-timeline li::before { content: ""; position: absolute; left: 113px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--tint); }
.gbt-timeline__year { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--navy); text-align: right; line-height: 1.4; }
.gbt-timeline h3 { font-size: 18px; margin-bottom: 4px; }
.gbt-timeline p { margin: 0; font-size: 15px; }
/* Timeline on a dark section */
.gbt-section--navy .gbt-timeline::before { background: rgba(255, 255, 255, 0.22); }
.gbt-section--navy .gbt-timeline li::before { box-shadow: 0 0 0 4px var(--navy); background: var(--red-bright); }
.gbt-section--navy .gbt-timeline__year { color: #fff; font-size: 26px; line-height: 1; }
.gbt-section--navy .gbt-timeline h3 { color: #fff; }
.gbt-section--navy .gbt-timeline p { color: rgba(255, 255, 255, 0.78); }

/* Affiliations & press ---------------------------------------------------------- */
.gbt-affiliations { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.gbt-affiliations img { height: 48px; width: auto; }
.gbt-affiliations a { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--navy); }
.gbt-affiliations a:hover { color: var(--red); }
.gbt-press { padding: 28px; border-top: 4px solid var(--red); }
.gbt-press__meta { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gbt-press h3 { margin-bottom: 12px; }
.gbt-press p { flex: 1; }
.gbt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.gbt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Forms --------------------------------------------------------------------------- */
.gbt-form-card { padding: 36px; }
.gbt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gbt-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.gbt-field--full { grid-column: 1 / -1; }
.gbt-field label { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--navy); }
.gbt-field label span { color: var(--red); }
.gbt-field small { font-size: 13px; color: var(--muted); }
.gbt-field input, .gbt-field select, .gbt-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cfd4d9;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gbt-field textarea { min-height: 140px; resize: vertical; }
.gbt-field input:focus, .gbt-field select:focus, .gbt-field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 62, 95, 0.15); }
.gbt-field input:user-invalid, .gbt-field textarea:user-invalid { border-color: var(--red); }
.gbt-honeypot { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.gbt-form__footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.gbt-form__footer .gbt-btn { border: 0; cursor: pointer; }
.gbt-form__footer .gbt-btn[disabled] { opacity: 0.6; cursor: wait; }
.gbt-form-status { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: 8px; font-size: 15px; }
.gbt-form-status:empty { display: none; }
.gbt-form-status--ok { background: #e8f5ec; color: #1d5b33; }
.gbt-form-status--error { background: #fbeaea; color: #8a1f25; }

/* Contact details list ------------------------------------------------------------ */
.gbt-contact-list { margin: 28px 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.gbt-contact-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; margin: 0; }
.gbt-contact-list h3 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.gbt-contact-list p, .gbt-contact-list a { margin: 0; font-size: 17px; color: var(--ink); }
.gbt-contact-list a:hover { color: var(--red); }
.gbt-split--form { grid-template-columns: 5fr 7fr; align-items: start; }

/* Service photo cards ----------------------------------------------------------------- */
.gbt-services .gbt-photo-card { min-height: 340px; }
.gbt-services .gbt-photo-card:hover { text-decoration: none; }

/* Numbered process steps ------------------------------------------------------------ */
.gbt-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.gbt-steps li { position: relative; margin: 0; padding: 28px 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); counter-increment: step; }
.gbt-steps li::before {
    content: counter(step);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 16px;
    border-radius: 50%; background: var(--navy); color: #fff;
    font-family: var(--font-head); font-weight: 700; font-size: 17px;
}
.gbt-steps h3 { font-size: 17px; margin-bottom: 6px; }
.gbt-steps p { margin: 0; font-size: 14px; line-height: 1.55; }

/* Comparison table ------------------------------------------------------------------ */
.gbt-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.gbt-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.gbt-table th, .gbt-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.gbt-table thead th { background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
.gbt-table tbody th { font-family: var(--font-head); font-weight: 600; color: var(--navy); white-space: nowrap; }
.gbt-table tbody tr:nth-child(even) { background: #faf8f6; }
.gbt-table tbody tr:last-child th, .gbt-table tbody tr:last-child td { border-bottom: 0; }
.gbt-rating { display: inline-flex; align-items: center; gap: 8px; }
.gbt-rating::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #b9bec2); }
.gbt-rating--excellent { --dot: #2f8f5b; }
.gbt-rating--good { --dot: #6fae55; }
.gbt-rating--fair { --dot: #e0a526; }
.gbt-rating--poor { --dot: var(--red); }

/* FAQ (native details/summary, no script needed) -------------------------------------- */
.gbt-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.gbt-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.gbt-faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 20px 24px; cursor: pointer; list-style: none;
    font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--navy);
}
.gbt-faq summary::-webkit-details-marker { display: none; }
.gbt-faq summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; color: var(--red); line-height: 1; }
.gbt-faq details[open] summary::after { content: "\2212"; }
.gbt-faq details p { margin: 0; padding: 0 24px 22px; }
.gbt-faq details p a { color: var(--navy); font-weight: 600; text-decoration: underline; }

/* Service-page pieces ---------------------------------------------------------------- */
.gbt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; padding: 0; list-style: none; }
.gbt-tags li { margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--navy); }
.gbt-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.gbt-material { padding: 24px; }
.gbt-material h3 { margin-bottom: 2px; }
.gbt-material__tag { display: block; margin-bottom: 14px; font-size: 14px; color: var(--red); font-weight: 600; }
.gbt-checks { flex: 1; margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.gbt-checks li { position: relative; margin: 0; padding-left: 24px; font-size: 15px; color: var(--ink); line-height: 1.45; }
.gbt-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M8 13.2 4.8 10l-1.1 1.1L8 15.4l8.3-8.3-1.1-1.1z'/%3E%3C/svg%3E") center / 12px no-repeat; }
.gbt-deflist { margin: 0; padding: 0; list-style: none; }
.gbt-deflist li { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.gbt-deflist li:first-child { border-top: 0; padding-top: 4px; }
.gbt-spec .gbt-deflist li { display: block; }
.gbt-material--help { background: var(--navy); border-color: var(--navy); }
.gbt-material--help h3 { color: #fff; }
.gbt-material--help p { color: rgba(255, 255, 255, 0.82); flex: 1; }
.gbt-material--help .gbt-link { color: #fff; }
.gbt-deflist strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: 16px; margin-bottom: 2px; }
.gbt-deflist span { font-size: 15px; color: var(--muted); }
.gbt-usecase { padding: 0; }
.gbt-usecase .gbt-card__img { aspect-ratio: 16 / 9; }
.gbt-usecase .gbt-card__body { padding: 28px; }

/* Gallery with filters and a lightbox ------------------------------------------------ */
.gbt-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 32px; }
.gbt-filter {
    padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer;
    font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--navy);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gbt-filter:hover { border-color: var(--navy); }
.gbt-filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.gbt-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gbt-gallery__item { position: relative; margin: 0; padding: 0; border: 0; background: var(--navy-900); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; }
.gbt-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.2s ease; }
.gbt-gallery__item:hover img, .gbt-gallery__item:focus-visible img { transform: scale(1.04); }
.gbt-gallery__item:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.gbt-gallery__caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; text-align: left;
    background: linear-gradient(180deg, rgba(10, 45, 71, 0) 0%, rgba(10, 45, 71, 0.85) 100%);
    color: #fff; font-family: var(--font-head); font-size: 14px; font-weight: 600; line-height: 1.35;
}
.gbt-gallery__caption span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.08em; }
.gbt-gallery__item[hidden] { display: none; }
/* main.css resets every margin to 0, which would pin the dialog to the top-left corner */
dialog.gbt-lightbox { position: fixed; inset: 0; margin: auto; }
/* The dialog lives outside <main class="gbt">, so it needs its own copy of the tokens it uses */
.gbt-lightbox { --red: #b13138; --navy-900: #0a2d47; --radius: 12px; --font-head: 'Montserrat', sans-serif; --font-body: 'Open Sans', sans-serif; font-family: var(--font-body); }
/* The frame hugs the photo, so tall and wide photos both fill it without empty bars */
.gbt-lightbox { width: fit-content; max-width: 94vw; max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius); background: #0b1b28; color: #fff; overflow: visible; }
.gbt-lightbox::backdrop { background: rgba(4, 12, 20, 0.94); }
.gbt-lightbox img { display: block; width: auto; height: auto; max-width: 94vw; max-height: 82vh; min-width: min(420px, 94vw); object-fit: contain; border-radius: var(--radius) var(--radius) 0 0; background: #0b1b28; }
.gbt-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; font-family: var(--font-head); font-size: 15px; max-width: 94vw; }
.gbt-lightbox__count { opacity: 0.7; font-size: 13px; white-space: nowrap; }
/* Selectors are extra specific because main.css restyles every button */
dialog.gbt-lightbox button.gbt-lightbox__close,
dialog.gbt-lightbox button.gbt-lightbox__prev,
dialog.gbt-lightbox button.gbt-lightbox__next {
    position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0 !important; border-radius: 50% !important;
    background: rgba(10, 45, 71, 0.75) !important; color: #fff !important;
    font-size: 22px; line-height: 1; cursor: pointer; outline: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
dialog.gbt-lightbox button.gbt-lightbox__close { top: 12px; right: 12px; background: var(--red) !important; }
dialog.gbt-lightbox button.gbt-lightbox__prev { left: 12px; top: 40%; }
dialog.gbt-lightbox button.gbt-lightbox__next { right: 12px; top: 40%; }
dialog.gbt-lightbox button:hover { filter: brightness(1.15); }
dialog.gbt-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Commercial portfolio ------------------------------------------------------------ */
.gbt-portfolio-controls { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; }
.gbt-portfolio-controls .gbt-filters { margin: 0; }
.gbt-filter span { opacity: 0.6; font-weight: 500; margin-left: 4px; }
.gbt-search { width: min(420px, 100%); padding: 12px 16px 12px 42px; border: 1px solid #cfd4d9; border-radius: 999px; font: inherit; font-size: 15px; color: var(--ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b616b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 16px center / 18px no-repeat; }
.gbt-search:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 62, 95, 0.15); }
.gbt-result-count { margin: 0 0 20px; text-align: center; font-size: 14px; color: var(--muted); }
.gbt-portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gbt-portfolio .gbt-gallery__item { display: block; width: 100%; aspect-ratio: 4 / 3; } /* fill the grid cell whatever the photo size */
.gbt-portfolio .gbt-gallery__caption { font-size: 15px; }
.gbt-portfolio .gbt-gallery__caption em { display: block; font-style: normal; font-family: var(--font-body); font-weight: 400; font-size: 13px; opacity: 0.85; }
.gbt-video-link { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--font-head); font-size: 12px; font-weight: 600; }
.gbt-video-link:hover { color: #fff; filter: brightness(1.1); }
.gbt-also { margin-top: 48px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.gbt-also h3 { margin-bottom: 4px; }
.gbt-also > p { font-size: 15px; }
.gbt-also ul { columns: 3 240px; column-gap: 32px; margin: 16px 0 0; padding: 0; list-style: none; }
.gbt-also li { break-inside: avoid; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.gbt-also li span { display: block; font-size: 13px; color: var(--muted); }
.gbt-empty { padding: 40px 0; text-align: center; color: var(--muted); }

/* Long-form text (privacy, terms) ---------------------------------------------------- */
.gbt-prose { max-width: 780px; margin: 0 auto; }
.gbt-prose .gbt-updated { display: inline-block; margin-bottom: 32px; padding: 6px 14px; border-radius: 999px; background: var(--tint); font-size: 14px; color: var(--muted); }
.gbt-prose h2 { font-size: 24px; margin: 44px 0 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.gbt-prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.gbt-prose h3 { font-size: 17px; margin: 20px 0 6px; }
.gbt-prose p, .gbt-prose li { color: var(--ink); font-size: 16px; line-height: 1.7; }
.gbt-prose ul { margin: 0 0 16px; padding-left: 22px; }
.gbt-prose li { margin: 0 0 6px; }
.gbt-prose a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.gbt-prose address { font-style: normal; padding: 20px 24px; border-radius: var(--radius); background: var(--tint); line-height: 1.8; color: var(--ink); }
.gbt-note { margin-top: 40px; font-size: 14px; color: var(--muted); }

/* Blog ------------------------------------------------------------------------------ */
.gbt-post-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.gbt-post-card:hover { transform: translateY(-3px); text-decoration: none; }
.gbt-post-card .gbt-card__img { aspect-ratio: 16 / 10; }
.gbt-post-card__meta { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.gbt-post-card h3 { font-size: 19px; }
.gbt-post-card--featured { display: grid; grid-template-columns: 1.3fr 1fr; margin-bottom: 24px; }
.gbt-post-card--featured .gbt-card__img { aspect-ratio: auto; height: 100%; min-height: 320px; }
.gbt-post-card--featured .gbt-card__body { padding: 40px; justify-content: center; }
.gbt-post-card--featured h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.gbt-grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.gbt-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.gbt-article-tags li { margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--tint); font-size: 13px; font-weight: 600; color: var(--navy); }
.gbt-article-hero { width: 100%; border-radius: var(--radius); margin: 0 0 32px; box-shadow: var(--shadow); }
.gbt-article h4, .gbt-article h5 { font-family: var(--font-head); color: var(--navy); margin: 0 0 6px; font-size: 16px; }
.gbt-article img { border-radius: var(--radius); }
.gbt-article .tip-box { margin: 28px 0; padding: 22px 24px; border-left: 4px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; background: var(--tint); }
.gbt-article .tip-box p { margin: 0; }
.gbt-article .pattern-showcase, .gbt-article .trend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
.gbt-article .pattern-item, .gbt-article .trend-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.gbt-article .pattern-item p, .gbt-article .trend-card p { margin: 0; font-size: 15px; }
.gbt-article .color-palette { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; }
.gbt-article .color-swatch { min-width: 110px; padding: 28px 14px 12px; border-radius: 10px; color: #fff; font-family: var(--font-head); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.gbt-article table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: block; overflow-x: auto; }
.gbt-article th, .gbt-article td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.gbt-article thead th { background: var(--navy); color: #fff; font-family: var(--font-head); font-size: 14px; }
.gbt-article .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.gbt-article .pros, .gbt-article .cons { padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); }
.gbt-article .pros { border-top: 4px solid #2f8f5b; }
.gbt-article .cons { border-top: 4px solid var(--red); }
.gbt-article .image-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.gbt-article .image-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; }

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1080px) {
    .gbt-floors { grid-template-columns: repeat(3, 1fr); }
    .gbt-brands { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
    .gbt-section { padding: 72px 0; }
    .gbt-split { grid-template-columns: 1fr; gap: 40px; }
    .gbt-split--reverse-mobile > :first-child { order: 2; }
    .gbt-grid-3 { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .gbt-strip { grid-template-columns: 1fr 1fr; }
    .gbt-gallery { grid-template-columns: 1fr 1fr; }
    .gbt-post-card--featured { grid-template-columns: 1fr; }
    .gbt-post-card--featured .gbt-card__img { min-height: 0; aspect-ratio: 16 / 10; }
    .gbt-post-card--featured .gbt-card__body { padding: 24px; }
    .gbt-grid-4 { grid-template-columns: 1fr 1fr; }
    .gbt-steps { grid-template-columns: 1fr 1fr; }
    .gbt-grid-2 { grid-template-columns: 1fr; }
    .gbt-strip img:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
    .gbt-hero { min-height: 0; padding: 80px 0; }
    .gbt-hero.gbt-hero--page { min-height: 460px; }
    .gbt-section:has(> .gbt-container > .gbt-stats) { padding-top: 32px; }
    .gbt-hero::before { background: rgba(10, 45, 71, 0.86); }
    .gbt-hero { padding-bottom: 80px; }
    .gbt-stats { grid-template-columns: repeat(2, 1fr); margin: 0 0 64px; }
    .gbt-stat:nth-child(3) { border-left: 0; }
    .gbt-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .gbt-work { grid-template-columns: 1fr; grid-template-rows: none; max-width: none; }
    .gbt-work .gbt-card:first-child { grid-row: auto; }
    .gbt-work .gbt-card { min-height: 300px; }
}
@media (max-width: 600px) {
    .gbt-container { padding: 0 16px; }
    .gbt-section { padding: 56px 0; }
    .gbt-section--tint + .gbt-cta, .gbt-section--navy + .gbt-cta { padding-top: 56px; }
    .gbt-head { margin-bottom: 32px; }
    .gbt-hero { padding: 64px 0; }
    .gbt-stats { margin: 0 0 48px; }
    .gbt-stat { padding: 20px 16px; }
    .gbt-stat strong { font-size: 26px; }
    .gbt-stat span { font-size: 13px; }
    .gbt-floor { min-height: 260px; }
    .gbt-hero p { font-size: 17px; }
    .gbt-actions .gbt-btn { flex: 1 1 100%; }
    .gbt-floors { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .gbt-floor .gbt-card__body { padding: 56px 14px 14px; }
    .gbt-brands { grid-template-columns: repeat(3, 1fr); }
    .gbt-brand { height: 72px; }
    .gbt-visit { grid-template-columns: 1fr; }
    .gbt-form { grid-template-columns: 1fr; }
    .gbt-form-card { padding: 24px; }
    .gbt-grid-4 { grid-template-columns: 1fr; }
    .gbt-gallery { grid-template-columns: 1fr; }
    .gbt-grid-2x2 { grid-template-columns: 1fr; }
    .gbt-article .pattern-showcase, .gbt-article .trend-grid, .gbt-article .pros-cons { grid-template-columns: 1fr; }
    .gbt-article .image-gallery { grid-template-columns: 1fr 1fr; }
    .gbt-steps { grid-template-columns: 1fr; }
    .gbt-faq summary { padding: 18px; font-size: 16px; }
    .gbt-faq details p { padding: 0 18px 18px; }
    .gbt-timeline::before { left: 7px; }
    .gbt-timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 32px; }
    .gbt-timeline li::before { left: 1px; }
    .gbt-timeline__year { text-align: left; }
    .gbt-promo { padding: 24px; }
    .gbt-review { padding: 24px; }
    .gbt-cta__panel { padding: 48px 20px; }
}