/*
 * Turgon UX refresh (2026).
 * Loaded after styles.css. Everything here is prefixed `tg-` so it never
 * collides with the original theme classes.
 */

:root {
  --tg-charcoal: #404545;
  --tg-deep: #202323;
  --tg-deep-2: #2B2F2F;
  --tg-ink: #2A2E2E;
  --tg-ink-2: #3C4242;
  --tg-muted: #5C6363;
  --tg-on-dark-muted: #C9CFCF;
  --tg-orange: #F58633;
  --tg-orange-hover: #E2741F;
  --tg-orange-ink: #1F2222;
  --tg-orange-light: #FFA868;
  --tg-link: #A9501A;
  --tg-link-hover: #7F3C13;
  --tg-sage: #5F6D70;
  --tg-stone: #F4F3F0;
  --tg-line: #E4E2DD;
  --tg-line-2: #DCD9D3;
  --tg-input: #8A9090;
  --tg-error: #B3261E;
  --tg-display: 'HeroicCondensedLight', 'Oswald', 'Arial Narrow', sans-serif;
  --tg-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --tg-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Basics ---------- */

.tg-main { font-family: var(--tg-body); color: var(--tg-ink); }
.tg-container { max-width: 1360px; margin: 0 auto; padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
.tg-narrow { max-width: 1200px; }
.tg-measure { max-width: 70ch; }
.tg-intro-text { font-size: 18px !important; line-height: 1.6; }

.tg-main a:focus-visible, .tg-header a:focus-visible, .tg-footer a:focus-visible,
.tg-main button:focus-visible, .tg-header button:focus-visible, .tg-modal a:focus-visible,
.tg-modal button:focus-visible, .tg-sample-bar button:focus-visible, .tg-toast button:focus-visible {
  outline: 3px solid var(--tg-orange);
  outline-offset: 2px;
}

.tg-h2 {
  margin: 0;
  font-family: var(--tg-display);
  font-weight: normal;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tg-ink);
}
.tg-kicker {
  margin: 0;
  font-family: var(--tg-display);
  font-weight: normal;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--tg-muted);
}
.tg-label {
  margin: 0;
  font-family: var(--tg-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tg-muted);
}

/* ---------- Buttons ---------- */

.tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  box-sizing: border-box;
  border: 1.5px solid transparent;
  border-radius: 0;
  font-family: var(--tg-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tg-btn svg { flex: none; }
.tg-btn--primary { background: var(--tg-orange); color: var(--tg-orange-ink); }
.tg-btn--primary:hover, .tg-btn--primary:focus { background: var(--tg-orange-hover); color: var(--tg-orange-ink); }
.tg-btn--ghost-light { border-color: #FFFFFF; color: #FFFFFF; background: transparent; }
.tg-btn--ghost-light:hover, .tg-btn--ghost-light:focus { background: #FFFFFF; color: var(--tg-deep); }
.tg-btn--ghost-dark { border-color: var(--tg-deep-2); color: var(--tg-deep-2); background: transparent; }
.tg-btn--ghost-dark:hover, .tg-btn--ghost-dark:focus { background: var(--tg-deep-2); color: #FFFFFF; }
.tg-btn--dark { background: var(--tg-deep-2); color: #FFFFFF; }
.tg-btn--dark:hover, .tg-btn--dark:focus { background: #000000; color: #FFFFFF; }
.tg-btn--sm { min-height: 44px; padding: 0 18px; font-size: 12px; }
.tg-btn--block { width: 100%; }

.tg-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--tg-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tg-link);
  text-decoration: none;
  cursor: pointer;
}
.tg-link-btn:hover { color: var(--tg-link-hover); }

.tg-icon-btn {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
}

.tg-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--tg-orange-ink);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tg-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
}
.tg-badge[hidden] { display: none; }
.tg-icon-btn .tg-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  background: var(--tg-orange);
  color: var(--tg-orange-ink);
}

/* ---------- Header ---------- */

.tg-header { position: sticky; top: 0; z-index: 1030; background: var(--tg-charcoal); }
/* styles.css lays an invisible gradient over every <header> (meant for the old
   hero); on the site header it blocked taps on the top menu items. */
.tg-header::before { content: none !important; display: none !important; }
.tg-nav { padding: 0; }
.tg-nav__inner { display: flex; flex-wrap: wrap; align-items: center; min-height: 82px; }
.tg-nav__brand { display: block; line-height: 0; margin-right: 36px; }
.tg-nav__brand img { height: 46px; width: auto; }
.tg-nav__links { gap: 0 26px; }
.tg-nav .navbar-nav .nav-link {
  padding: 10px 0;
  font-family: var(--tg-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  border-bottom: 2px solid transparent;
}
.tg-nav .navbar-nav .nav-link:hover, .tg-nav .navbar-nav .nav-link:focus { color: var(--tg-orange-light); }
.tg-nav .navbar-nav .nav-link.is-active { border-bottom-color: var(--tg-orange); }
.tg-nav .dropdown-toggle::after { vertical-align: 0.15em; }
.tg-nav .dropdown-menu {
  border: 0;
  border-radius: 0;
  padding: 8px 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.tg-nav .dropdown-item {
  padding: 10px 20px;
  font-family: var(--tg-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tg-ink);
}
.tg-nav .dropdown-item:hover, .tg-nav .dropdown-item:focus { background: var(--tg-stone); color: var(--tg-ink); }

.tg-nav__actions { margin-left: auto; padding-left: 28px; display: flex; align-items: center; gap: 12px 24px; }
.tg-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--tg-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.tg-nav__phone:hover { color: var(--tg-orange-light); }
.tg-nav__phone svg { color: var(--tg-orange-light); }
.tg-nav__samples { min-height: 46px; padding: 0 16px 0 20px; font-size: 13px; }

.tg-nav__quick { margin-left: auto; display: flex; align-items: center; gap: 2px; color: #FFFFFF; }
.tg-nav__quick a { color: #FFFFFF; }
.tg-nav .navbar-toggler {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  margin-left: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  color: #FFFFFF;
  font-family: var(--tg-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none;
}
.tg-nav .navbar-toggler:focus { box-shadow: none; }
.tg-nav .navbar-toggler[aria-expanded="true"] .tg-when-closed,
.tg-nav .navbar-toggler[aria-expanded="false"] .tg-when-open { display: none; }

.tg-nav__mobile-actions { display: none; }

@media (min-width: 992px) and (max-width: 1279.98px) {
  .tg-container { padding-left: 24px; padding-right: 24px; }
  .tg-nav__brand { margin-right: 22px; }
  .tg-nav__brand img { height: 40px; }
  .tg-nav__links { gap: 0 16px; }
  .tg-nav .navbar-nav .nav-link { font-size: 12px; }
  .tg-nav__phone-text { display: none; }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
  .tg-nav__brand { margin-right: 16px; }
  .tg-nav__links { gap: 0 12px; }
  .tg-nav .navbar-nav .nav-link { font-size: 11.5px; letter-spacing: 0.05em; }
  .tg-nav__actions { padding-left: 16px; gap: 12px; }
  .tg-nav__samples { padding: 0 12px 0 14px; letter-spacing: 0.05em; }
}

@media (max-width: 991.98px) {
  .tg-container { padding-left: 20px; padding-right: 20px; }
  .tg-nav__inner { min-height: 64px; padding-left: 16px; padding-right: 8px; }
  .tg-nav__brand { margin-right: 0; }
  .tg-nav__brand img { height: 36px; }
  .tg-nav .navbar-collapse {
    flex-basis: 100%;
    margin: 0 -8px 0 -16px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .tg-nav__links { gap: 0; }
  .tg-nav .navbar-nav .nav-link {
    min-height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .tg-nav .navbar-nav .nav-link.is-active { border-bottom-color: rgba(255, 255, 255, 0.12); color: var(--tg-orange-light); }
  .tg-nav .dropdown-menu {
    margin: 0;
    padding: 4px 0 6px;
    background: #363A3A;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .tg-nav .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 36px;
    font-family: var(--tg-body);
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
    color: #FFFFFF;
  }
  .tg-nav .dropdown-item:hover, .tg-nav .dropdown-item:focus { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
  .tg-nav__mobile-actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; }
  .tg-nav__mobile-actions p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--tg-on-dark-muted); text-align: center; }
}

/* The theme's grey-green behind white text was 4.2:1 contrast; this passes (5.4:1). */
.bg-turgon-new { background: var(--tg-sage) !important; }

/* ---------- Alerts ---------- */

.tg-alerts { position: fixed; top: 96px; left: 16px; right: 16px; z-index: 1080; pointer-events: none; }
.tg-alerts .alert { pointer-events: auto; margin: 0 auto 10px; max-width: 720px; border-radius: 0; font-size: 17px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.tg-alerts .alert .close { background: none; border: 0; font-size: 24px; line-height: 1; float: right; margin-left: 12px; }
@media (max-width: 991.98px) { .tg-alerts { top: 76px; } }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
.visually-hidden-focusable:focus { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 10px 16px; background: #FFFFFF; color: var(--tg-ink); font-weight: 700; }
.tg-footer__contact { align-self: flex-start; margin-top: 4px; }

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

.tg-hero { position: relative; background: var(--tg-deep-2); }
.tg-hero .carousel-item { position: relative; height: 640px; background: none !important; }
.tg-hero .carousel-item::before { display: none !important; }
.tg-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.tg-hero__wrap { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: 72px; }
.tg-hero__panel {
  background: rgba(32, 35, 35, 0.88);
  padding: 40px 44px 44px;
  max-width: 600px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tg-hero__eyebrow {
  margin: 0;
  font-family: var(--tg-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tg-orange);
}
.tg-hero__title {
  margin: 0;
  font-family: var(--tg-display);
  font-weight: normal;
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.tg-hero__sub { margin: 0; font-size: 21px; line-height: 1.45; color: #E3E6E6; }
.tg-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.tg-hero .carousel-indicators { z-index: 3; margin-bottom: 26px; }
.tg-hero .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 3px;
  margin: 0 4px;
  border: 0;
  background: #FFFFFF;
  opacity: 0.45;
}
.tg-hero .carousel-indicators .active { opacity: 1; }
.tg-hero .carousel-control-prev, .tg-hero .carousel-control-next { width: 64px; z-index: 1; }

@media (max-width: 767.98px) {
  .tg-hero .carousel-item { height: auto; }
  .tg-hero__img { position: static; display: block; height: 290px; object-position: 30% 75%; }
  .tg-hero__wrap { display: block; height: auto; padding: 0; }
  .tg-hero__wrap.tg-container { padding: 0; }
  /* Single hero slide: no slide dots below, so no reserved height or extra bottom space. */
  .tg-hero__panel { max-width: none; min-height: 0; background: var(--tg-deep); padding: 30px 20px 36px; gap: 16px; }
  .tg-hero__eyebrow { font-size: 11px; }
  .tg-hero__title { font-size: 40px; line-height: 1.06; }
  .tg-hero__sub { font-size: 18px; }
  .tg-hero__actions { flex-direction: column; gap: 12px; margin-top: 8px; }
  .tg-hero__actions .tg-btn { width: 100%; }
  .tg-hero .carousel-control-prev, .tg-hero .carousel-control-next { height: 290px; }
  .tg-hero .carousel-indicators { margin-bottom: 18px; }
}

/* ---------- Client logos ---------- */

.tg-logos { background: var(--tg-deep-2); padding: 34px 0 38px; }
.tg-logos__label {
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--tg-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tg-on-dark-muted);
}
.tg-logos__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 28px; }
.tg-logos__row img { height: 58px; width: auto; }
@media (max-width: 767.98px) {
  .tg-logos { padding: 26px 0 28px; }
  .tg-logos__label { font-size: 11px; margin-bottom: 18px; }
  .tg-logos__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
  .tg-logos__row img { width: 100%; height: auto; }
}

/* ---------- Ranges ---------- */

.tg-ranges { padding: 88px 0 96px; scroll-margin-top: 82px; }
.tg-ranges__head { text-align: center; margin-bottom: 44px; display: flex; flex-direction: column; gap: 6px; }
.tg-ranges__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.tg-range { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--tg-ink); }
.tg-range:hover { color: var(--tg-ink); }
.tg-range img { width: 100%; height: 300px; object-fit: cover; display: block; }
.tg-range__name { font-family: var(--tg-ui); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.tg-range__more { font-family: var(--tg-ui); font-weight: 600; font-size: 13px; color: var(--tg-link); display: inline-flex; align-items: center; gap: 6px; }
.tg-range:hover .tg-range__more { color: var(--tg-link-hover); }
.tg-range--cta {
  display: none;
  justify-content: space-between;
  height: 170px;
  padding: 18px 16px;
  box-sizing: border-box;
  border: 0;
  background: var(--tg-charcoal);
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
}
.tg-range--cta:hover { color: #FFFFFF; background: var(--tg-deep-2); }
.tg-range--cta .tg-range__cta-title { font-family: var(--tg-display); font-size: 23px; line-height: 1.15; text-transform: uppercase; }
.tg-range--cta .tg-range__more { color: var(--tg-orange-light); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 991.98px) {
  .tg-ranges { padding: 52px 0 56px; }
  .tg-ranges__head { margin-bottom: 28px; gap: 4px; }
  .tg-ranges .tg-kicker { font-size: 22px; }
  .tg-ranges .tg-h2 { font-size: 30px; line-height: 1.15; }
  .tg-ranges__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .tg-range { gap: 10px; }
  .tg-range img { height: 170px; }
  .tg-range__name { font-size: 13px; line-height: 1.3; }
  .tg-range__more { display: none; }
  .tg-range--cta { display: flex; }
  .tg-range--cta .tg-range__more { display: inline-flex; }
}

/* ---------- Hello ---------- */

/* A shade darker than --tg-sage so all text passes WCAG contrast. */
.tg-hello { background: #566366; color: #FFFFFF; padding: 88px 0; }
.tg-hello__grid { display: flex; flex-wrap: wrap; gap: 48px 96px; }
.tg-hello__col { flex: 1 1 420px; display: flex; flex-direction: column; gap: 20px; }
.tg-hello h2 { margin: 0; font-family: var(--tg-display); font-weight: normal; font-size: 46px; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; }
.tg-hello p { margin: 0; max-width: 34em; font-size: 19px; line-height: 1.6; color: #FFFFFF; }
.tg-signature { line-height: 1.2; }
.tg-signature__name { display: block; font-family: 'jellyka', cursive; font-size: 56px; line-height: 1; }
.tg-signature__role { font-size: 15px; color: #FFFFFF; letter-spacing: 0.04em; }
.tg-hello .tg-btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 767.98px) {
  .tg-hello { padding: 48px 0; }
  .tg-hello__grid { gap: 40px; }
  .tg-hello__col { gap: 18px; }
  .tg-hello h2 { font-size: 34px; }
  .tg-hello p { font-size: 17px; }
  .tg-hello .tg-btn { align-self: stretch; }
}

/* ---------- Why buy / expertly fitted ---------- */

.tg-why { position: relative; overflow: hidden; background: #3A2E24; padding: 88px 0; }
.tg-why__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tg-why__grid { position: relative; display: flex; flex-wrap: wrap; gap: 32px; }
.tg-why__card {
  flex: 1 1 420px;
  box-sizing: border-box;
  background: rgba(32, 35, 35, 0.86);
  color: #FFFFFF;
  text-decoration: none;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: background-color .15s ease;
}
.tg-why__card:hover { background: rgba(32, 35, 35, 0.95); color: #FFFFFF; }
.tg-why__num {
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  border: 1.5px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tg-display);
  font-size: 26px;
}
.tg-why__kicker { font-family: var(--tg-display); font-size: 30px; letter-spacing: 0.02em; }
.tg-why__title { font-family: var(--tg-display); font-size: 44px; line-height: 1.05; text-transform: uppercase; }
.tg-why__more { margin-top: 8px; font-family: var(--tg-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-orange-light); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 767.98px) {
  .tg-why { padding: 32px 0; }
  .tg-why__grid { gap: 16px; }
  .tg-why__card { flex-basis: 100%; padding: 24px 22px; gap: 8px; }
  .tg-why__num { width: 44px; height: 44px; font-size: 22px; }
  .tg-why__kicker { font-size: 23px; }
  .tg-why__title { font-size: 32px; }
}

/* ---------- Style guide & product book ---------- */

.tg-guide { padding: 88px 0; }
.tg-guide__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 56px; }
.tg-guide__tile {
  flex: 0 1 240px;
  box-sizing: border-box;
  background: var(--tg-charcoal);
  color: #FFFFFF;
  text-decoration: none;
  padding: 34px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.tg-guide__tile:hover { background: var(--tg-deep-2); color: #FFFFFF; }
.tg-guide__tile img { width: 86px; height: auto; }
.tg-guide__range { font-family: var(--tg-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-on-dark-muted); }
.tg-guide__name { font-family: var(--tg-display); font-size: 30px; letter-spacing: 0.04em; text-transform: uppercase; }
.tg-guide__dl { font-family: var(--tg-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tg-orange-light); }
.tg-guide__text { flex: 1 1 460px; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.tg-guide__text .tg-h2 { font-size: 40px; }
.tg-guide__text p { margin: 0; font-size: 19px; line-height: 1.6; }
@media (max-width: 767.98px) {
  .tg-guide { padding: 48px 0; }
  .tg-guide__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tg-guide__text { grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
  .tg-guide__text .tg-h2 { font-size: 30px; line-height: 1.15; }
  .tg-guide__text p { font-size: 17px; }
  .tg-guide__tile { padding: 22px 12px 20px; gap: 8px; }
  .tg-guide__tile img { width: 64px; }
  .tg-guide__range { display: none; }
  .tg-guide__name { font-size: 23px; }
  .tg-guide__dl { font-size: 11px; }
}

/* ---------- Info columns (Choice, Service, Installation, Projects) ---------- */

.tg-info { background: var(--tg-stone); padding: 88px 0; }
.tg-info__grid { display: flex; flex-wrap: wrap; gap: 48px 44px; }
.tg-info__item { flex: 1 1 250px; }
.tg-info__toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tg-ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}
.tg-info__toggle:disabled { color: var(--tg-ink); opacity: 1; cursor: default; }
.tg-info__toggle img { width: 56px; height: 56px; flex: none; }
.tg-info__title { font-family: var(--tg-display); font-size: 28px; letter-spacing: 0.04em; text-transform: uppercase; }
.tg-info__chev { display: none; transition: transform .2s ease; }
.tg-info__text p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; }
@media (min-width: 992px) {
  .tg-info__text.collapse, .tg-info__text.collapsing { display: block !important; height: auto !important; }
}
@media (max-width: 991.98px) {
  .tg-info { padding: 32px 0 40px; }
  .tg-info__grid { display: block; }
  .tg-info__item { border-bottom: 1px solid var(--tg-line-2); }
  .tg-info__toggle { flex-direction: row; align-items: center; min-height: 64px; cursor: pointer; }
  .tg-info__toggle img { width: 40px; height: 40px; }
  .tg-info__title { flex: 1 1 auto; font-size: 23px; }
  .tg-info__chev { display: block; }
  .tg-info__toggle[aria-expanded="true"] .tg-info__chev { transform: rotate(180deg); }
  .tg-info__text p { margin: 4px 0 20px; }
}

/* ---------- Our videos ---------- */

.tg-videos { background: var(--tg-deep); color: #FFFFFF; padding: 80px 0; }
.tg-videos .tg-h2 { color: #FFFFFF; text-align: center; margin-bottom: 32px; }
.tg-videos__row { display: flex; flex-wrap: wrap; gap: 32px; }
.tg-videos__player { flex: 2 1 560px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tg-videos__caption { margin: 0; font-size: 19px; }
.tg-videos__list { flex: 1 1 340px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tg-video-btn {
  width: 100%;
  min-height: 79px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  text-align: left;
  font-family: var(--tg-body);
  cursor: pointer;
}
.tg-video-btn:hover { background: rgba(255, 255, 255, 0.06); }
.tg-video-btn[aria-current="true"] { background: #343838; }
.tg-video-btn img { width: 112px; height: 63px; object-fit: cover; flex: none; }
.tg-video-btn__text { display: flex; flex-direction: column; gap: 4px; }
.tg-video-btn__title { font-size: 17px; line-height: 1.3; }
.tg-video-btn__now { display: none; font-family: var(--tg-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tg-orange-light); }
.tg-video-btn[aria-current="true"] .tg-video-btn__now { display: block; }
.tg-videos__more { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 767.98px) {
  .tg-videos { padding: 44px 0; }
  .tg-videos .tg-h2 { font-size: 32px; margin-bottom: 18px; }
  .tg-videos__row { gap: 18px; }
  .tg-videos__caption { font-size: 17px; }
  .tg-videos__list { gap: 4px; }
  .tg-video-btn { min-height: 66px; padding: 6px; gap: 12px; }
  .tg-video-btn img { width: 96px; height: 54px; }
  .tg-video-btn__title { font-size: 16px; }
  .tg-videos__more { margin-top: 18px; }
  .tg-videos__more .tg-btn { width: 100%; }
}

/* ---------- Instagram ---------- */

.tg-insta { padding: 80px 0 88px; text-align: center; }
.tg-insta__handle { display: inline-block; margin-top: 8px; font-size: 19px; color: var(--tg-link); }
.tg-insta__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.tg-insta__grid a { display: block; line-height: 0; }
.tg-insta__grid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity .15s ease; }
.tg-insta__grid a:hover img { opacity: 0.85; }
.tg-insta__follow { display: none; }
@media (max-width: 767.98px) {
  .tg-insta { padding: 44px 0 52px; }
  .tg-insta .tg-h2 { font-size: 28px; line-height: 1.15; }
  .tg-insta__handle { font-size: 17px; }
  .tg-insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
  .tg-insta__follow { display: flex; margin-top: 20px; }
}

/* ---------- Footer ---------- */

.tg-footer { background: var(--tg-charcoal); color: #FFFFFF; padding: 72px 0 32px; font-family: var(--tg-body); }
.tg-footer__cols { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.tg-footer__col { flex: 1 1 220px; display: flex; flex-direction: column; gap: 14px; }
.tg-footer__col--brand { flex-basis: 250px; }
.tg-footer__logo { width: 150px; height: auto; }
.tg-footer p { margin: 0; font-size: 16px; line-height: 1.55; color: #FFFFFF; }
.tg-footer__muted { color: var(--tg-on-dark-muted) !important; }
.tg-footer h2 { margin: 0; font-family: var(--tg-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tg-orange-light); }
.tg-footer a { color: #FFFFFF; }
.tg-footer a:hover { color: var(--tg-orange-light); }
.tg-footer__line { display: flex; gap: 10px; }
.tg-footer__line svg { flex: none; margin-top: 3px; color: var(--tg-on-dark-muted); }
.tg-footer__hours { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 18px; font-size: 16px; line-height: 1.6; }
.tg-footer__phone { font-family: var(--tg-display); font-size: 32px; letter-spacing: 0.03em; text-decoration: none; }
.tg-footer__links { display: flex; flex-direction: column; gap: 10px; }
.tg-footer__links a { text-decoration: none; font-size: 16px; }
.tg-footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 32px;
  font-size: 14px;
  color: var(--tg-on-dark-muted);
}
.tg-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tg-footer__bottom a { padding: 4px 0; }
.tg-footer__call-btn { display: none; }
@media (max-width: 767.98px) {
  .tg-footer { padding: 44px 0 30px; }
  .tg-footer__cols { flex-direction: column; gap: 34px; }
  .tg-footer__col { flex-basis: auto; gap: 12px; }
  .tg-footer__logo { width: 120px; }
  .tg-footer p, .tg-footer__hours { font-size: 17px; }
  .tg-footer__phone { display: none; }
  .tg-footer__call-btn { display: flex; }
  .tg-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .tg-footer__links a { padding: 10px 0; }
  .tg-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 34px; }
}

/* ---------- Page banner & breadcrumb ---------- */

.tg-banner { position: relative; height: 340px; overflow: hidden; background: var(--tg-deep-2); }
.tg-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.tg-banner__wrap { position: relative; height: 100%; display: flex; align-items: flex-end; padding-bottom: 48px; }
.tg-banner h1 {
  margin: 0;
  background: rgba(32, 35, 35, 0.88);
  padding: 22px 32px;
  font-family: var(--tg-display);
  font-weight: normal;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.tg-crumbs { background: var(--tg-stone); padding: 14px 0; font-size: 16px; }
.tg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--tg-muted); }
.tg-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--tg-muted); }
.tg-crumbs a { color: var(--tg-link); }
.tg-crumbs [aria-current] { color: var(--tg-ink); }
@media (max-width: 767.98px) {
  .tg-banner { height: 200px; }
  .tg-banner__wrap { padding-bottom: 16px; }
  .tg-banner h1 { font-size: 28px; line-height: 1.1; padding: 12px 16px; }
  .tg-crumbs { padding: 11px 0; font-size: 15px; }
}

/* ---------- Category intro ---------- */

.tg-cat-intro { padding: 56px 0 24px; }
.tg-cat-intro__row { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; }
.tg-cat-intro__text { flex: 1 1 560px; max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.tg-cat-intro__text .tg-h2 { font-size: 36px; letter-spacing: 0.04em; }
.tg-cat-intro__desc { font-size: 18px; line-height: 1.6; }
.tg-cat-intro__desc p { margin: 0 0 12px; font-size: inherit; }
.tg-cat-intro__desc a, .tg-product__desc a { color: var(--tg-link); text-decoration: underline; }
.tg-cat-intro__more { display: none; align-self: flex-start; }
.tg-howto {
  flex: 1 1 320px;
  max-width: 400px;
  box-sizing: border-box;
  background: var(--tg-charcoal);
  color: #FFFFFF;
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tg-howto h2 { margin: 0; font-family: var(--tg-display); font-weight: normal; font-size: 27px; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; }
.tg-howto ol { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.45; }
@media (max-width: 767.98px) {
  .tg-cat-intro { padding: 28px 0 8px; }
  .tg-cat-intro__row { gap: 16px; }
  .tg-cat-intro__text { gap: 12px; }
  .tg-cat-intro__text .tg-h2 { font-size: 27px; line-height: 1.15; }
  .tg-cat-intro__desc { font-size: 17px; line-height: 1.55; }
  .tg-cat-intro__desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .tg-cat-intro__more { display: inline-flex; }
  .tg-howto { max-width: none; padding: 18px 18px 20px; gap: 8px; }
  .tg-howto h2 { font-size: 21px; }
  .tg-howto ol { font-size: 16px; gap: 4px; }
}

/* ---------- Product grid & cards ---------- */

.tg-grid-section { padding: 32px 0 64px; }
.tg-grid-section .tg-label { font-size: 13px; margin-bottom: 24px; }
.tg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.tg-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tg-card__media { display: block; line-height: 0; background: var(--tg-stone); }
.tg-card__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.tg-card__title {
  min-height: 38px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--tg-ink);
  text-decoration: none;
  font-family: var(--tg-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tg-card__title:hover { color: var(--tg-link); }
.tg-card__ref { font-family: var(--tg-body); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tg-muted); }

.tg-sample-btn {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--tg-deep-2);
  background: #FFFFFF;
  color: var(--tg-deep-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--tg-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tg-sample-btn:hover, .tg-sample-btn[aria-pressed="true"] { background: var(--tg-deep-2); color: #FFFFFF; }
.tg-sample-btn--lg { min-height: 56px; font-size: 14px; letter-spacing: 0.08em; }
.tg-sample-btn .tg-when-added, .tg-sample-btn[aria-pressed="true"] .tg-when-not { display: none; }
.tg-sample-btn[aria-pressed="true"] .tg-when-added { display: inline-flex; align-items: center; gap: 8px; }
.tg-sample-btn .tg-when-not { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 991.98px) {
  .tg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .tg-grid-section { padding: 28px 0 40px; }
  .tg-grid-section .tg-label { font-size: 12px; margin-bottom: 16px; }
  .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .tg-card { gap: 8px; }
  .tg-card__title { min-height: 33px; font-size: 12px; letter-spacing: 0.04em; }
  .tg-card__ref { font-size: 13px; }
  .tg-sample-btn { min-height: 44px; font-size: 11px; letter-spacing: 0.08em; padding: 0 8px; }
  .tg-hide-sm { display: none; }
}

/* ---------- Call-out ---------- */

.tg-callout { background: var(--tg-stone); padding: 48px 0; text-align: center; }
.tg-callout p { margin: 0 0 8px; font-size: 19px; }
.tg-callout a { font-family: var(--tg-display); font-size: 36px; letter-spacing: 0.03em; color: var(--tg-ink); text-decoration: none; }
.tg-callout a:hover { color: var(--tg-link); }
@media (max-width: 767.98px) {
  .tg-callout { padding: 32px 0; }
  .tg-callout p { font-size: 17px; }
  .tg-callout a { font-size: 30px; }
}

/* ---------- Product page ---------- */

.tg-product { padding: 56px 0 72px; }
.tg-product__row { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.tg-product__media { flex: 1 1 460px; max-width: 620px; line-height: 0; }
.tg-product__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.tg-product__info { flex: 1 1 420px; max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
.tg-product__head { display: flex; flex-direction: column; gap: 10px; }
.tg-product__cat { align-self: flex-start; font-family: var(--tg-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-link); }
.tg-product h1 { margin: 0; font-family: var(--tg-display); font-weight: normal; font-size: 48px; line-height: 1.08; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tg-ink); }
.tg-product__desc { font-size: 19px; line-height: 1.6; }
.tg-product__desc p { margin: 0 0 12px; font-size: inherit; }
.tg-product__help { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tg-ink-2); }
.tg-product__help a { color: var(--tg-link); }

.tg-sample-box { background: var(--tg-stone); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.tg-sample-box__added { display: none; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.tg-sample-box.is-added .tg-sample-box__added { display: flex; }
.tg-remove-btn { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--tg-ink); font-size: 16px; text-decoration: underline; cursor: pointer; }

.tg-assure { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--tg-line-2); display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.tg-assure li { display: flex; align-items: center; gap: 12px; }
.tg-assure svg { flex: none; }

.tg-related { background: var(--tg-stone); padding: 56px 0 72px; }
.tg-related .tg-h2 { font-size: 32px; margin-bottom: 28px; }
.tg-related .tg-card__media { background: #FFFFFF; }
@media (max-width: 767.98px) {
  .tg-product { padding: 28px 0 40px; }
  .tg-product__row { gap: 24px; }
  .tg-product h1 { font-size: 36px; }
  .tg-product__desc { font-size: 17px; }
  .tg-sample-box { padding: 18px; }
  .tg-related { padding: 40px 0 48px; }
  .tg-related .tg-h2 { font-size: 26px; margin-bottom: 18px; }
}

/* ---------- Sample request modal ---------- */

body.tg-modal-open { overflow: hidden; }
.tg-modal { position: fixed; inset: 0; z-index: 1070; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 64px 16px; box-sizing: border-box; }
.tg-modal[hidden] { display: none; }
.tg-modal__backdrop { position: fixed; inset: 0; background: rgba(20, 22, 22, 0.64); }
.tg-modal__dialog {
  position: relative;
  width: 760px;
  max-width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  color: var(--tg-ink);
  font-family: var(--tg-body);
  padding: 40px 44px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.tg-modal__dialog:focus { outline: none; }
.tg-modal__body { display: flex; flex-direction: column; gap: 26px; }
.tg-modal__topbar { display: none; }
.tg-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tg-modal__head h2 { margin: 0; font-family: var(--tg-display); font-weight: normal; font-size: 40px; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tg-ink); }
.tg-modal__intro { margin: 8px 0 0; font-size: 18px; line-height: 1.5; color: var(--tg-ink-2); }
.tg-modal .tg-assure { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; padding: 16px 20px; border: 0; background: var(--tg-stone); }
.tg-modal__section { display: flex; flex-direction: column; gap: 12px; }
.tg-modal__empty p { margin: 0; font-size: 18px; line-height: 1.55; }
.tg-modal__empty-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tg-sample-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tg-sample-list li { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--tg-line); }
.tg-sample-list img { width: 64px; height: 64px; object-fit: cover; flex: none; background: var(--tg-stone); }
.tg-sample-list__name { flex: 1 1 auto; font-family: var(--tg-ui); font-weight: 600; font-size: 14px; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; }
.tg-modal__limit { margin: 0; font-size: 16px; color: var(--tg-ink-2); }

.tg-form { display: flex; flex-direction: column; gap: 18px; }
.tg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.tg-field { display: flex; flex-direction: column; gap: 7px; }
.tg-field--full { grid-column: 1 / -1; }
.tg-field label { margin: 0; font-family: var(--tg-ui); font-weight: 600; font-size: 13px; color: var(--tg-ink); }
.tg-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--tg-input);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--tg-ink);
  font-family: var(--tg-body);
  font-size: 17px;
}
.tg-field input:focus { outline: 3px solid var(--tg-orange); outline-offset: 0; border-color: var(--tg-deep-2); }
.tg-field input.is-invalid { border-color: var(--tg-error); }
.tg-field__error { color: var(--tg-error); font-size: 15px; }
.tg-field--check input { width: 120px; }
.tg-form__errors { margin: 0; padding: 12px 16px; border: 1.5px solid var(--tg-error); color: var(--tg-error); font-size: 16px; }
.tg-form__submit { margin-top: 6px; min-height: 58px; font-size: 15px; }
.tg-modal__privacy { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tg-muted); }
.tg-honeypot { position: absolute; left: -9999px; top: -9999px; }

@media (max-width: 767.98px) {
  .tg-modal { padding: 0; align-items: stretch; }
  .tg-modal__dialog { width: 100%; min-height: 100%; padding: 0; box-shadow: none; }
  .tg-modal__topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 6px 0 8px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--tg-line);
  }
  .tg-modal__topbar .tg-link-btn { color: var(--tg-ink); text-transform: none; letter-spacing: 0.02em; font-weight: 600; padding: 0 8px; }
  .tg-modal__body { padding: 24px 20px 0; gap: 24px; }
  .tg-modal__head .tg-icon-btn { display: none; }
  .tg-modal__head h2 { font-size: 32px; }
  .tg-modal__intro { font-size: 17px; }
  .tg-modal .tg-assure { flex-direction: column; padding: 14px 16px; font-size: 16px; }
  .tg-sample-list img { width: 56px; height: 56px; }
  .tg-sample-list__name { font-size: 12px; letter-spacing: 0.04em; }
  .tg-fields { grid-template-columns: 1fr; gap: 16px; }
  .tg-field--postcode input { width: 180px; }
  .tg-form__submit-wrap {
    position: sticky;
    bottom: 0;
    margin: 0 -20px;
    padding: 12px 20px 20px;
    background: #FFFFFF;
    border-top: 1px solid var(--tg-line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  }
  .tg-form__submit { width: 100%; margin-top: 0; }
}

/* ---------- Toast & mobile sample bar ---------- */

.tg-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1060;
  max-width: calc(100% - 48px);
  box-sizing: border-box;
  background: var(--tg-deep);
  color: #FFFFFF;
  padding: 14px 16px 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-family: var(--tg-body);
}
.tg-toast[hidden] { display: none; }
.tg-toast__msg { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.tg-toast__msg svg { flex: none; color: var(--tg-orange-light); }
.tg-toast .tg-btn { min-height: 40px; padding: 0 16px; font-size: 12px; }

.tg-sample-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: var(--tg-deep);
  color: #FFFFFF;
  padding: 12px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.2);
  font-family: var(--tg-body);
}
.tg-sample-bar[hidden] { display: none; }
.tg-sample-bar__text { display: flex; flex-direction: column; min-width: 0; font-size: 15px; line-height: 1.3; }
.tg-sample-bar__count { font-family: var(--tg-ui); font-weight: 700; font-size: 14px; }
.tg-sample-bar__names { color: var(--tg-on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-sample-bar .tg-btn { flex: none; min-height: 48px; padding: 0 18px; font-size: 12px; }
@media (min-width: 992px) {
  .tg-sample-bar { display: none !important; }
}
@media (max-width: 991.98px) {
  body.tg-has-bar { padding-bottom: 84px; }
  body.tg-has-bar .tg-toast { bottom: 96px; }
}
@media (max-width: 767.98px) {
  .tg-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-wrap: wrap; }
}

/* ---------- Text pages (About) ---------- */

.tg-pagehead { background: var(--tg-deep-2); padding: 72px 0 64px; }
.tg-pagehead__inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.tg-pagehead .tg-label { color: var(--tg-orange-light); letter-spacing: 0.18em; }
.tg-pagehead h1 { margin: 0; font-family: var(--tg-display); font-weight: normal; font-size: 62px; letter-spacing: 0.02em; text-transform: uppercase; color: #FFFFFF; }
.tg-story { padding: 40px 0; }
.tg-story--first { padding-top: 80px; }
.tg-story--last { padding-bottom: 96px; }
.tg-story__row { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px 64px; padding-top: 40px; border-top: 1px solid var(--tg-line); }
.tg-story--first .tg-story__row { padding-top: 0; border-top: 0; }
.tg-story__aside { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; gap: 20px; }
.tg-story__aside h2 { margin: 0; font-family: var(--tg-display); font-weight: normal; font-size: 34px; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tg-ink); }
.tg-story__aside img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tg-story__body { flex: 1 1 520px; max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
.tg-story__body p { margin: 0; font-size: 19px; line-height: 1.65; }
.tg-mission { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }
.tg-mission__rule { display: block; width: 56px; height: 3px; background: var(--tg-orange); }
.tg-mission p { font-family: var(--tg-display); font-size: 34px; line-height: 1.3; color: var(--tg-ink); }
.tg-story__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
@media (max-width: 767.98px) {
  .tg-pagehead { padding: 44px 0 40px; }
  .tg-pagehead h1 { font-size: 42px; }
  .tg-story { padding: 24px 0; }
  .tg-story--first { padding-top: 40px; }
  .tg-story--last { padding-bottom: 56px; }
  .tg-story__row { padding-top: 28px; gap: 18px; }
  .tg-story__aside { max-width: none; }
  .tg-story__aside h2 { font-size: 28px; }
  .tg-story__body p { font-size: 17px; }
  .tg-mission p { font-size: 27px; }
  .tg-story__actions .tg-btn { width: 100%; }
}

/* ---------- Paragraph overrides ----------
 * styles.css forces `p, small { font-size: 18px !important; font-family: system !important }`.
 * Re-assert the new type styles on paragraphs inside the new components. */

p.tg-hero__eyebrow { font-family: var(--tg-ui) !important; font-size: 12px !important; font-weight: 600; }
p.tg-label { font-family: var(--tg-ui) !important; font-size: 12px !important; font-weight: 600; }
p.tg-hero__title { font-family: var(--tg-display) !important; font-size: 58px !important; font-weight: normal; }
p.tg-hero__sub { font-size: 21px !important; }
p.tg-kicker { font-family: var(--tg-display) !important; font-size: 28px !important; }
.tg-hello p:not(.tg-signature) { font-size: 19px !important; }
.tg-guide__text p, .tg-story__body p, .tg-callout p, p.tg-videos__caption { font-size: 19px !important; }
.tg-info__text p { font-size: 17px !important; }
.tg-footer p { font-size: 16px !important; }
.tg-cat-intro__desc p, .tg-product__desc p { font-size: inherit !important; }
p.tg-product__help { font-size: 17px !important; }
p.tg-modal__intro, .tg-modal__empty p { font-size: 18px !important; }
p.tg-modal__limit { font-size: 16px !important; }
p.tg-modal__privacy { font-size: 15px !important; }
.tg-mission p { font-family: var(--tg-display) !important; font-size: 34px !important; }
.tg-nav__mobile-actions p { font-size: 15px !important; }
p.tg-signature { font-size: 19px !important; }

@media (max-width: 767.98px) {
  p.tg-hero__eyebrow { font-size: 11px !important; }
  p.tg-hero__title { font-size: 40px !important; }
  p.tg-hero__sub { font-size: 18px !important; }
  .tg-ranges p.tg-kicker { font-size: 22px !important; }
  .tg-hello p:not(.tg-signature), .tg-guide__text p, .tg-story__body p, .tg-callout p, p.tg-videos__caption { font-size: 17px !important; }
  .tg-footer p { font-size: 17px !important; }
  p.tg-modal__intro { font-size: 17px !important; }
  .tg-mission p { font-size: 27px !important; }
}
@media (max-width: 991.98px) {
  .tg-ranges p.tg-kicker { font-size: 22px !important; }
}

/* ---------- Album galleries (masonry: whole photos, even gaps) ---------- */

.tg-pagehead--compact { padding: 44px 0 40px; }
.tg-pagehead--compact h1 { font-size: 52px; }
.tg-gallery { columns: 4 260px; column-gap: 16px; padding: 40px 0 72px; }
.tg-gallery .gallery-img { break-inside: avoid; margin: 0 0 16px; }
.tg-gallery__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--tg-stone); line-height: 0; cursor: zoom-in; }
.tg-gallery__btn img { display: block; width: 100%; height: auto; transition: opacity .2s ease; }
.tg-gallery__btn:hover img { opacity: 0.88; }
@media (max-width: 767.98px) {
  .tg-pagehead--compact { padding: 30px 0 26px; }
  .tg-pagehead--compact h1 { font-size: 38px; }
  .tg-gallery { columns: 2; column-gap: 8px; padding: 16px 0 40px; }
  .tg-gallery .gallery-img { margin-bottom: 8px; }
}

/* Gallery pop-up: the arrow sprite image never existed, so draw the arrows. */
.product-gallery-popup .gallery-nav-btns a {
  width: 48px;
  height: 48px;
  margin-top: -4px;
  border-radius: 50%;
  background-color: rgba(32, 35, 35, 0.75);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  opacity: 1;
}
.product-gallery-popup .gallery-nav-btns a:hover { background-color: rgba(32, 35, 35, 0.95); }
.product-gallery-popup .nav-btn.prev { left: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E"); }
.product-gallery-popup .nav-btn.next { right: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }

/* Footer company details (name, number, registered office). */
.tg-footer__legal { flex: 1 1 420px; max-width: 600px; line-height: 1.5; }
@media (max-width: 767.98px) { .tg-footer__legal { flex-basis: auto; } }

/* Blog post sidebar heading is an h2 (one h1 per page); keep the old h1 look. */
h2.blog-title.blog-title--side { color: inherit; }

/* ---------- Blog post ---------- */

.tg-post { padding: 72px 0 0; }
.tg-post__head, .tg-post__hero, .tg-post__body, .tg-post-cta { max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; box-sizing: content-box; }
.tg-post__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.tg-post__kicker { color: var(--tg-link); text-decoration: none; }
.tg-post__kicker:hover { color: var(--tg-link-hover); }
.tg-post__title { margin: 0; font-family: var(--tg-display); font-weight: normal; font-size: 60px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--tg-ink); }
p.tg-post__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--tg-ui) !important; font-size: 14px !important; letter-spacing: 0.04em; color: var(--tg-muted); }
.tg-post__meta > * + *::before { content: "·"; margin: 0 10px; color: var(--tg-line-2); }
.tg-post__hero { margin-top: 0; margin-bottom: 48px; }
.tg-post__hero img { display: block; width: 100%; height: auto; aspect-ratio: 85 / 55; object-fit: cover; background: var(--tg-stone); }

.tg-post__body { color: var(--tg-ink); }
.tg-post__body p, .tg-post__body li, .tg-post__body pre { font-family: var(--tg-body) !important; font-size: 19px !important; line-height: 1.75; }
.tg-post__body p { margin: 0 0 1.35em; }
.tg-post__body > p:first-child { font-size: 22px !important; line-height: 1.6; color: var(--tg-ink-2); }
.tg-post__body pre { margin: 0 0 1.35em; white-space: pre-wrap; overflow-wrap: anywhere; background: none; border: 0; padding: 0; color: inherit; }
.tg-post__body ol, .tg-post__body ul { margin: 0 0 1.35em; padding-left: 1.4em; }
.tg-post__body li { margin-bottom: 0.5em; }
.tg-post__body h2, .tg-post__body h3 { margin: 1.6em 0 0.6em; font-family: var(--tg-display); font-weight: normal; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.15; color: var(--tg-ink); }
.tg-post__body h2 { font-size: 36px; }
.tg-post__body h3 { font-size: 28px; }
.tg-post__body a { color: var(--tg-link); text-decoration: underline; text-underline-offset: 3px; }
.tg-post__body a:hover { color: var(--tg-link-hover); }
.tg-post__body img { max-width: 100%; height: auto; margin: 0.5em 0 1.5em; }
.tg-post__body strong { font-weight: 700; }

.tg-post-cta { margin-top: 56px; margin-bottom: 88px; padding-top: 44px; padding-bottom: 44px; background: var(--tg-deep-2); color: #FFFFFF; display: flex; flex-direction: column; gap: 14px; }
.tg-post-cta__title { margin: 0; font-family: var(--tg-display); font-weight: normal; font-size: 40px; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: #FFFFFF; }
p.tg-post-cta__text { margin: 0 0 8px; font-size: 18px !important; line-height: 1.6; color: var(--tg-on-dark-muted); max-width: 60ch; }
.tg-post-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tg-post-more__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.tg-related.tg-post-more .tg-h2 { margin-bottom: 0; }
.tg-post-more__all { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tg-ui); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-link); text-decoration: none; }
.tg-post-more__all:hover { color: var(--tg-link-hover); }
.tg-post-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.tg-post-card { display: flex; flex-direction: column; gap: 10px; color: var(--tg-ink); text-decoration: none; }
.tg-post-card__media { display: block; line-height: 0; overflow: hidden; background: #FFFFFF; }
.tg-post-card__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .3s ease; }
.tg-post-card:hover .tg-post-card__media img { transform: scale(1.03); }
.tg-post-card__date { font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tg-muted); }
.tg-post-card__title { font-family: var(--tg-display); font-size: 26px; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase; }
.tg-post-card:hover .tg-post-card__title { color: var(--tg-link); }

@media (max-width: 767.98px) {
  .tg-post { padding-top: 40px; }
  .tg-post__head, .tg-post__hero, .tg-post__body { padding-left: 20px; padding-right: 20px; }
  .tg-post__title { font-size: 40px; }
  .tg-post__hero { margin-bottom: 32px; padding-left: 0; padding-right: 0; }
  .tg-post__body p, .tg-post__body li, .tg-post__body pre { font-size: 17px !important; }
  .tg-post__body > p:first-child { font-size: 19px !important; }
  .tg-post-cta { margin: 40px 0 0; padding: 36px 20px; }
  .tg-post-cta__title { font-size: 32px; }
  .tg-post-cta__actions .tg-btn { width: 100%; }
  .tg-post-more__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .tg-post-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-post-more__grid > :nth-child(3) { display: none; }
}

/* ---------- Album gallery: justified rows + PhotoSwipe viewer ---------- */

.tg-pagehead__sub { margin: 6px 0 0; font-size: 18px !important; color: var(--tg-on-dark-muted); }
.tg-jg__count { margin: 32px 0 16px; font-family: var(--tg-ui) !important; font-size: 13px !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tg-muted); }
.tg-jg { --row-h: 300px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Stops the last, part-filled row from stretching to full width. */
.tg-jg::after { content: ""; flex-grow: 999999; }
.tg-jg__item { position: relative; display: block; overflow: hidden; background: var(--tg-stone); cursor: zoom-in;
  flex-grow: calc(var(--r) * 100); width: calc(var(--r) * var(--row-h)); }
.tg-jg__item::before { content: ""; display: block; padding-bottom: calc(100% / var(--r)); }
.tg-jg__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .4s ease, transform .5s ease; }
.tg-jg__item img.is-loaded { opacity: 1; }
.tg-jg__item:hover img, .tg-jg__item:focus-visible img { transform: scale(1.03); }
.tg-jg__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; color: #FFFFFF;
  font-family: var(--tg-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62)); opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.tg-jg__item:hover .tg-jg__title, .tg-jg__item:focus-visible .tg-jg__title { opacity: 1; transform: none; }
.tg-jg__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 48px 0 80px; }

@media (max-width: 991.98px) { .tg-jg { --row-h: 220px; gap: 10px; } }
@media (max-width: 575.98px) {
  .tg-jg { --row-h: 150px; gap: 6px; }
  .tg-jg__count { margin: 20px 0 12px; }
  .tg-jg__title { display: none; }
  .tg-jg__more { padding: 32px 0 56px; }
  .tg-jg__more .tg-btn { width: 100%; }
}

/* PhotoSwipe caption bar (sits above the site header and sample bar). */
.pswp { --pswp-bg: #161818; z-index: 2000; }
.pswp__tg-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px 18px; text-align: center;
  color: #FFFFFF; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); font-family: var(--tg-body); pointer-events: none; }
.pswp__tg-caption a { pointer-events: auto; }
p.tg-pswp__title { margin: 0; font-family: var(--tg-display) !important; font-size: 26px !important; letter-spacing: 0.03em; text-transform: uppercase; }
p.tg-pswp__details { margin: 4px 0 0; font-size: 14px !important; color: #D6DADA; }
.tg-pswp__link { display: inline-block; margin-top: 8px; font-family: var(--tg-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-orange-light); text-decoration: none; }
.tg-pswp__link:hover { color: #FFFFFF; }
@media (max-width: 575.98px) { p.tg-pswp__title { font-size: 21px !important; } }