/*
 * Turgon site components (Nov 2026 redesign, after the Turgon product book).
 * Loaded after turgon-ux.css and turgon-brand.css. Uses the shared --tg-* colours and fonts.
 *
 * Contents
 *   Basics ........... sections, labels, display headings, short rules, lead text
 *   Page hero ........ full-width photo header used by inner pages
 *   Photo + caption .. brochure-style captions ("Platinum Grey | prime herringbone")
 *   Split ............ photo beside text
 *   Trio ............. three centred columns on a line with dots (book page 3)
 *   Steps ............ 1 · 2 · 3 circles on a line
 *   Tiles ............ photo tiles with captions (ranges, technical guides)
 *   Swatch strip ..... row of colour swatches
 *   Article .......... long-form text pages with a side menu
 *   FAQ .............. questions that open and close
 *   Call band ........ "talk to us" band at the foot of pages
 *   Forms ............ contact and newsletter forms
 *   Product cards .... category grids
 */

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

.tg-sec { padding: 104px 0; }
.tg-sec--tight { padding: 72px 0; }
.tg-sec--paper { background: var(--tg-stone); }
.tg-sec--dark { background: var(--tg-deep); color: #E3E6E1; }
.tg-sec--dark-2 { background: #2E342D; color: #E3E6E1; }
.tg-center { text-align: center; }

.tg-eyebrow {
  margin: 0 0 18px;
  font-family: var(--tg-ui) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tg-muted);
}
.tg-eyebrow span { margin: 0 0.6em; font-weight: 400; opacity: .7; }
.tg-sec--dark .tg-eyebrow, .tg-sec--dark-2 .tg-eyebrow, .tg-on-dark .tg-eyebrow { color: #AEB4AA; }

.tg-display {
  margin: 0;
  font-family: var(--tg-display);
  font-weight: 200;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tg-ink);
}
.tg-display--md { font-size: clamp(32px, 3.4vw, 48px); }
.tg-display--sm { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: 0.12em; }
.tg-sec--dark .tg-display, .tg-sec--dark-2 .tg-display, .tg-on-dark .tg-display { color: #FFFFFF; }

.tg-rule { display: block; width: 44px; height: 1px; margin: 28px 0; background: currentColor; opacity: .45; border: 0; }
.tg-center .tg-rule { margin-left: auto; margin-right: auto; }

.tg-lead { margin: 0; font-size: 21px !important; line-height: 1.6; font-weight: 400; color: var(--tg-ink-2); max-width: 46ch; }
.tg-center .tg-lead { margin-left: auto; margin-right: auto; }
.tg-sec--dark .tg-lead, .tg-sec--dark-2 .tg-lead { color: #D9DDD5; }
.tg-copy p { margin: 0 0 16px; font-size: 17px !important; line-height: 1.75; color: var(--tg-ink-2); }
.tg-sec--dark .tg-copy p, .tg-sec--dark-2 .tg-copy p { color: #CDD2C9; }

.tg-quote {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--tg-display);
  font-weight: 200;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tg-ink);
}

.tg-textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tg-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tg-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.tg-textlink:hover { color: var(--tg-link); }
.tg-sec--dark .tg-textlink, .tg-sec--dark-2 .tg-textlink, .tg-on-dark .tg-textlink { color: #FFFFFF; }
.tg-sec--dark .tg-textlink:hover, .tg-sec--dark-2 .tg-textlink:hover { color: var(--tg-orange-light); }

.tg-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 34px; }
.tg-center .tg-actions { justify-content: center; }

/* ---------- Page hero ---------- */

.tg-phero { position: relative; min-height: 460px; display: flex; align-items: flex-end; background: var(--tg-deep); color: #FFFFFF; overflow: hidden; }
.tg-phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tg-phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 23, 19, 0.05) 30%, rgba(20, 23, 19, 0.72) 100%); }
.tg-phero__wrap { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: 56px; }
.tg-phero .tg-eyebrow { color: #D7DBD3; }
.tg-phero h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--tg-display);
  font-weight: 200;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.tg-phero__sub { margin: 18px 0 0; max-width: 52ch; font-size: 19px !important; line-height: 1.55; color: #E6E9E3; }
.tg-phero--short { min-height: 340px; }

/* Breadcrumb bar under a hero: quiet, paper grey. */
.tg-phero + .tg-crumbs, .tg-crumbs--quiet { padding: 14px 0; font-size: 14px; letter-spacing: 0.04em; }

/* ---------- Photo + caption ---------- */

.tg-photo { margin: 0; position: relative; }
.tg-photo img { display: block; width: 100%; height: auto; }
.tg-photo--cover img { height: 100%; object-fit: cover; }
.tg-photo figcaption {
  margin-top: 12px;
  font-family: var(--tg-ui);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tg-muted);
}
.tg-photo figcaption b { font-weight: 700; color: var(--tg-ink); }
.tg-photo figcaption span { margin: 0 0.7em; opacity: .6; }
/* Caption laid over the bottom of a full-width photo, as in the book. */
.tg-photo--overlay figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 60px 40px 26px;
  color: #E3E6E1;
  background: linear-gradient(180deg, transparent, rgba(20, 23, 19, 0.7));
}
.tg-photo--overlay figcaption b { color: #FFFFFF; }

.tg-band { position: relative; height: clamp(360px, 58vw, 720px); overflow: hidden; background: var(--tg-deep); }
.tg-band .tg-photo, .tg-band .tg-photo img { height: 100%; }
.tg-band .tg-photo img { object-fit: cover; }

/* ---------- Split: photo beside text ---------- */

.tg-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.tg-split__media { min-height: 520px; position: relative; }
.tg-split__media .tg-photo, .tg-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tg-split__body { display: flex; flex-direction: column; justify-content: center; padding: 96px clamp(32px, 6vw, 112px); }
.tg-split--flip .tg-split__media { order: 2; }

/* ---------- Trio: three columns on a line with dots ---------- */

.tg-trio { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; margin-top: 72px; padding-top: 52px; }
.tg-trio::before { content: ""; position: absolute; left: -40px; right: -40px; top: 0; border-top: 1px solid currentColor; opacity: .28; }
.tg-trio__item { position: relative; text-align: center; }
.tg-trio__item::before {
  content: "";
  position: absolute;
  top: -58px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: inherit;
  background-color: var(--tg-trio-bg, #FFFFFF);
}
.tg-sec--dark .tg-trio { --tg-trio-bg: var(--tg-deep); }
.tg-sec--dark-2 .tg-trio { --tg-trio-bg: #2E342D; }
.tg-sec--paper .tg-trio { --tg-trio-bg: var(--tg-stone); }
.tg-trio h3 {
  margin: 0 0 6px;
  font-family: var(--tg-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.tg-trio h3::after { content: ""; display: block; width: 28px; height: 1px; margin: 18px auto 20px; background: currentColor; opacity: .4; }
.tg-trio p { margin: 0 auto 12px; max-width: 34ch; font-size: 16px !important; line-height: 1.7; }
.tg-sec--dark .tg-trio p, .tg-sec--dark-2 .tg-trio p { color: #C9CEC5; }

/* ---------- Steps: 1 · 2 · 3 ---------- */

.tg-steps { list-style: none; margin: 56px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 860px; position: relative; }
.tg-steps::before { content: ""; position: absolute; left: -12%; right: -12%; top: 23px; border-top: 1px solid currentColor; opacity: .3; }
.tg-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 0 12px; }
.tg-steps__num {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--tg-steps-bg, #FFFFFF);
  font-family: var(--tg-display);
  font-weight: 300;
  font-size: 20px;
}
.tg-sec--dark .tg-steps { --tg-steps-bg: var(--tg-deep); }
.tg-sec--dark-2 .tg-steps { --tg-steps-bg: #2E342D; }
.tg-sec--paper .tg-steps { --tg-steps-bg: var(--tg-stone); }
.tg-steps__label { font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.7; }
.tg-steps__text { margin: -6px 0 0 !important; font-size: 15px !important; line-height: 1.6; opacity: .8; max-width: 24ch; }

/* ---------- Tiles: photo + caption ---------- */

.tg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.tg-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-tile { display: flex; flex-direction: column; color: var(--tg-ink); text-decoration: none; }
.tg-tile__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #E5E8E4; }
.tg-tile__media--wide { aspect-ratio: 4 / 3; }
.tg-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tg-tile:hover .tg-tile__media img { transform: scale(1.035); }
.tg-tile__no { margin-top: 20px; font-family: var(--tg-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.26em; color: var(--tg-muted); }
.tg-tile__name {
  margin-top: 6px;
  font-family: var(--tg-display);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tg-tile__text { margin: 10px 0 0 !important; font-size: 16px !important; line-height: 1.6; color: var(--tg-ink-2); }
.tg-tile__more { margin-top: 14px; font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tg-link); }
.tg-tile:hover .tg-tile__name { color: var(--tg-link); }
.tg-sec--dark .tg-tile, .tg-sec--dark-2 .tg-tile { color: #FFFFFF; }
.tg-sec--dark .tg-tile__no, .tg-sec--dark-2 .tg-tile__no { color: #9FA69B; }
.tg-sec--dark .tg-tile__more, .tg-sec--dark-2 .tg-tile__more { color: var(--tg-orange-light); }

.tg-tile__text { display: block; }
.tg-tiles--guides { margin-top: 88px; }

/* Heading on the left, text on the right (intro of a section). */
.tg-intro-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 80px; align-items: start; }
.tg-intro-split .tg-copy p:last-child { margin-bottom: 0; }

.tg-pager { margin-top: 64px; }
.tg-pager:empty { display: none; }

/* Samples call-to-action tile in a grid of tiles. */
.tg-tile--cta { justify-content: center; align-items: flex-start; padding: 40px; background: var(--tg-deep); color: #FFFFFF; border: 0; text-align: left; cursor: pointer; min-height: 100%; }
.tg-tile--cta .tg-tile__name { margin: 0 0 18px; color: #FFFFFF; }
.tg-tile--cta .tg-eyebrow { color: #AEB4AA; }
.tg-tile--cta p { margin: 0 0 26px !important; font-size: 16px !important; line-height: 1.6; color: #C9CEC5; }
.tg-tile--cta:hover .tg-tile__name { color: var(--tg-orange-light); }

/* ---------- Swatch strip ---------- */

.tg-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.tg-swatch { display: flex; flex-direction: column; text-decoration: none; color: var(--tg-ink); }
.tg-swatch img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s ease; }
.tg-swatch:hover img { transform: translateY(-4px); }
.tg-swatch__label { padding: 8px 4px 10px; background: #DFE2DF; text-align: center; }
.tg-swatch__no { display: block; font-family: var(--tg-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; color: var(--tg-muted); }
.tg-swatch__name { display: block; font-family: var(--tg-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Article pages ---------- */

.tg-article { padding: 88px 0 104px; }
.tg-article__row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.tg-article__row--full { grid-template-columns: minmax(0, 1fr); }
.tg-article__aside { position: sticky; top: 112px; }
.tg-article__aside h2 { margin: 0 0 16px; font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tg-muted); }
.tg-article__aside ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tg-line); }
.tg-article__aside li { border-bottom: 1px solid var(--tg-line); font-family: var(--tg-ui) !important; }
.tg-article__aside a { display: block; padding: 13px 0; color: var(--tg-ink-2); text-decoration: none; font-size: 15px; line-height: 1.4; }
.tg-article__aside a:hover { color: var(--tg-link); }
.tg-article__aside a[aria-current] { color: var(--tg-ink); font-weight: 600; }
.tg-article__aside a[aria-current]::before { content: ""; display: inline-block; width: 14px; height: 1px; margin: 0 10px 4px 0; background: var(--tg-orange); }
.tg-article__help { margin-top: 28px; padding: 26px; background: var(--tg-stone); }
.tg-article__help p { margin: 0 0 12px !important; font-size: 15px !important; line-height: 1.6; }
.tg-article__help a.tg-article__phone { font-family: var(--tg-display); font-weight: 300; font-size: 30px; letter-spacing: 0.06em; color: var(--tg-ink); text-decoration: none; }

/* Long-form text, written as plain HTML in the page files. */
.tg-prose { max-width: 760px; color: var(--tg-ink-2); }
.tg-prose > :first-child { margin-top: 0; }
.tg-prose p, .tg-prose li { font-size: 18px !important; line-height: 1.78; }
.tg-prose p { margin: 0 0 20px; }
.tg-prose h2 {
  margin: 64px 0 22px;
  font-family: var(--tg-display);
  font-weight: 300;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tg-ink);
}
.tg-prose h2::after { content: ""; display: block; width: 36px; height: 1px; margin-top: 20px; background: var(--tg-ink); opacity: .35; }
.tg-prose h3 { margin: 40px 0 12px; font-family: var(--tg-ui); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-ink); }
.tg-prose ul, .tg-prose ol { margin: 0 0 24px; padding-left: 1.3em; }
.tg-prose li { margin-bottom: 10px; padding-left: 4px; }
.tg-prose ol li::marker { font-family: var(--tg-display); font-weight: 400; color: var(--tg-muted); }
.tg-prose a { color: var(--tg-link); text-decoration: underline; text-underline-offset: 3px; }
.tg-prose strong { color: var(--tg-ink); font-weight: 600; }
.tg-prose figure { margin: 40px 0; }
.tg-prose figure img { display: block; width: 100%; height: auto; }
.tg-prose figcaption { margin-top: 10px; font-family: var(--tg-ui); font-size: 13px; letter-spacing: 0.06em; color: var(--tg-muted); }
.tg-prose .tg-prose__note { padding: 22px 26px; background: var(--tg-stone); border-left: 2px solid var(--tg-orange); }
.tg-prose .tg-prose__note p:last-child { margin-bottom: 0; }

/* A text section with a picture beside it, inside an article. */
.tg-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 48px; align-items: start; margin: 48px 0 64px; }
.tg-feature:first-child { margin-top: 0; }
.tg-feature > div > :first-child { margin-top: 0; }
.tg-feature figure { margin: 6px 0 0; }
.tg-feature figure img { aspect-ratio: 1; object-fit: cover; }

/* Pages without a side menu: text stays at reading width in the middle; cards and features use the full width. */
.tg-article__row--full .tg-prose { max-width: 1120px; margin: 0 auto; }
.tg-article__row--full .tg-prose > :not(.tg-cards):not(.tg-feature):not(.tg-faq) { max-width: 780px; margin-left: auto; margin-right: auto; }
.tg-article__row--full .tg-prose > .tg-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr); }
/* With a side menu the text column is narrower, so pictures beside text are smaller. */
.tg-article__row:not(.tg-article__row--full) .tg-feature { grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; }

/* Cards in an article (e.g. finishes compared side by side). */
.tg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 32px 0 56px; }
.tg-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-cards > div { display: flex; flex-direction: column; }
.tg-cards img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 18px; }
.tg-cards h3 { margin: 0 0 10px; }
.tg-cards p { font-size: 16px !important; line-height: 1.7; }

/* ---------- FAQ ---------- */

.tg-faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--tg-line-2); }
.tg-faq details { border-bottom: 1px solid var(--tg-line-2); }
.tg-faq summary {
  list-style: none;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: baseline;
  padding: 26px 0;
  cursor: pointer;
}
.tg-faq summary::-webkit-details-marker { display: none; }
.tg-faq__no { font-family: var(--tg-display); font-weight: 300; font-size: 22px; color: var(--tg-muted); letter-spacing: 0.06em; }
.tg-faq__q { font-family: var(--tg-ui); font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--tg-ink); }
.tg-faq summary:hover .tg-faq__q { color: var(--tg-link); }
.tg-faq__icon { position: relative; width: 16px; height: 16px; align-self: center; }
.tg-faq__icon::before, .tg-faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 7.5px; height: 1px; background: var(--tg-ink); transition: transform .25s ease; }
.tg-faq__icon::after { transform: rotate(90deg); }
.tg-faq details[open] .tg-faq__icon::after { transform: rotate(0deg); }
.tg-faq__a { padding: 0 32px 30px 64px; }
.tg-faq__a p, .tg-faq__a li { font-size: 17px !important; line-height: 1.75; color: var(--tg-ink-2); }
.tg-faq__a p { margin: 0 0 14px; }
.tg-faq__a a { color: var(--tg-link); text-decoration: underline; }

/* ---------- Call band ---------- */

.tg-callband { background: var(--tg-deep); color: #E3E6E1; padding: 88px 0; }
.tg-callband__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 72px; align-items: center; }
.tg-callband .tg-display { color: #FFFFFF; }
.tg-callband p:not(.tg-eyebrow) { margin: 18px 0 0; max-width: 54ch; font-size: 17px !important; line-height: 1.7; color: #C9CEC5; }
.tg-callband__phone {
  display: block;
  font-family: var(--tg-display);
  font-weight: 200;
  font-size: clamp(40px, 4.4vw, 60px);
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-decoration: none;
  line-height: 1;
}
.tg-callband__phone:hover { color: var(--tg-orange-light); }
.tg-callband__side { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.tg-callband__side .tg-actions { margin-top: 0; }
.tg-callband .tg-textlink { color: #FFFFFF; }
.tg-callband .tg-textlink:hover { color: var(--tg-orange-light); }
.tg-callband .tg-eyebrow { color: #AEB4AA; }

/* ---------- Forms ---------- */

.tg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.tg-form__full { grid-column: 1 / -1; }
.tg-form label { display: block; margin: 0 0 8px; font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tg-ink); }
.tg-form input[type="text"], .tg-form input[type="email"], .tg-form input[type="tel"], .tg-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid #C9CDC6;
  border-radius: 0;
  background: #FFFFFF;
  font-family: var(--tg-body);
  font-size: 17px;
  color: var(--tg-ink);
  transition: border-color .15s ease;
}
.tg-form textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.tg-form input:focus, .tg-form textarea:focus { outline: 2px solid var(--tg-orange); outline-offset: 0; border-color: var(--tg-ink); }
.tg-form .is-invalid { border-color: var(--tg-error); }
.tg-form__error { margin-top: 6px; font-size: 14px; color: var(--tg-error); }
.tg-form__captcha { display: flex; align-items: center; gap: 16px; }
.tg-form__captcha label { margin: 0; white-space: nowrap; }
.tg-form__captcha input { max-width: 110px; }
.tg-form__foot { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.tg-form__note { margin: 0 !important; font-size: 14px !important; color: var(--tg-muted); }
.tg-hp { position: absolute !important; left: -9999px; top: -9999px; }

.tg-form__opt { font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--tg-muted); }
.tg-form__done { grid-column: 1 / -1; margin: 0 0 24px; padding: 18px 22px; background: #E6EFE3; border-left: 2px solid #2F6B3A; }
.tg-form__done p { margin: 0 !important; font-size: 16px !important; }

/* ---------- Contact page ---------- */

.tg-contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px 96px; align-items: start; }
.tg-contact__info .tg-lead { margin-top: 24px; }
.tg-contact__list { margin: 44px 0 0; display: grid; gap: 28px; }
.tg-contact__list > div { padding-top: 22px; border-top: 1px solid var(--tg-line); }
.tg-contact__list dt { margin-bottom: 8px; font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tg-muted); }
.tg-contact__list dd { margin: 0; font-size: 18px; line-height: 1.6; color: var(--tg-ink); }
.tg-contact__list a { color: var(--tg-ink); text-decoration: none; border-bottom: 1px solid var(--tg-line-2); }
.tg-contact__list a:hover { color: var(--tg-link); }
.tg-contact__big { font-family: var(--tg-display); font-weight: 200; font-size: 46px; letter-spacing: 0.08em; border: 0 !important; line-height: 1; }
.tg-contact__samples { margin-top: 40px; padding: 26px 28px; background: var(--tg-stone); }
.tg-contact__samples p { margin: 0 0 14px !important; font-size: 16px !important; }
.tg-contact__samples .tg-textlink { background: none; border-width: 0 0 1px; cursor: pointer; }
.tg-contact__form { padding: 48px; background: var(--tg-stone); }
.tg-contact__form .tg-display { margin-bottom: 28px; }

.tg-news { display: flex; flex-wrap: wrap; gap: 28px 64px; align-items: flex-end; justify-content: space-between; }
.tg-news__form { flex: 1 1 380px; max-width: 520px; }

.tg-newsletter { display: flex; gap: 0; max-width: 520px; }
.tg-newsletter input { flex: 1 1 auto; min-width: 0; min-height: 54px; padding: 0 16px; border: 1px solid #5A6157; border-right: 0; background: transparent; color: #FFFFFF; font-size: 16px; font-family: var(--tg-body); }
.tg-newsletter input::placeholder { color: #9FA69B; }
.tg-newsletter input:focus { outline: 2px solid var(--tg-orange); outline-offset: 0; }

/* ---------- Category pages ---------- */

.tg-howbar { list-style: none; margin: 56px 0 0; padding: 22px 0; display: flex; flex-wrap: wrap; gap: 14px 48px; border-top: 1px solid var(--tg-line); border-bottom: 1px solid var(--tg-line); }
.tg-howbar li { display: flex; align-items: center; gap: 14px; font-family: var(--tg-ui) !important; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-ink-2); }
.tg-howbar span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--tg-ink-2); border-radius: 50%; font-family: var(--tg-display); font-weight: 300; font-size: 15px; letter-spacing: 0; }
.tg-cat-intro__desc p { font-size: 17px !important; line-height: 1.75; }
.tg-grid-section { padding: 24px 0 104px; }
.tg-grid-section > .tg-container > .tg-eyebrow { margin-bottom: 32px; }

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

.tg-pd { padding: 64px 0 104px; }
.tg-pd__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px 88px; align-items: start; }
.tg-pd__media { position: sticky; top: 104px; line-height: 0; background: #E5E8E4; }
.tg-pd__media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.tg-pd__cat { display: inline-block; text-decoration: none; }
.tg-pd__cat:hover { color: var(--tg-link); }
.tg-pd__title {
  margin: 0;
  font-family: var(--tg-display);
  font-weight: 200;
  font-size: clamp(38px, 3.8vw, 56px);
  line-height: 1.04;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-ink);
}
.tg-pd .tg-product__desc p { font-size: 17px !important; line-height: 1.75; }
.tg-pd__formats { margin: 32px 0 0; }
.tg-pd__formats .tg-eyebrow { margin-bottom: 12px; }
.tg-pd__formats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tg-pd__formats a, .tg-pd__formats span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #C9CDC6;
  font-family: var(--tg-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tg-ink);
  text-decoration: none;
}
.tg-pd__formats a:hover { border-color: var(--tg-ink); }
.tg-pd__formats span[aria-current] { background: var(--tg-deep); border-color: var(--tg-deep); color: #FFFFFF; }
.tg-pd .tg-sample-box { margin-top: 36px; }
.tg-pd__facts { margin: 36px 0 0; display: grid; gap: 0; border-top: 1px solid var(--tg-line); }
.tg-pd__facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--tg-line); }
.tg-pd__facts dt { font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tg-muted); padding-top: 2px; }
.tg-pd__facts dd { margin: 0; font-size: 16px; color: var(--tg-ink-2); }
.tg-pd .tg-product__help { margin-top: 24px; }
.tg-related__head { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; }

/* Product photo zoom (see product.blade.php). */
.tg-zoom { position: relative; overflow: hidden; cursor: zoom-in; line-height: 0; touch-action: pan-y; }
.tg-zoom img { transition: transform .25s ease-out; will-change: transform; }
.tg-zoom.is-zoomed { cursor: zoom-out; touch-action: none; }
.tg-zoom.is-zoomed img { transition: transform .12s ease-out; }
.tg-zoom__hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tg-ink);
  font-family: var(--tg-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity .2s ease;
}
.tg-zoom.is-zoomed .tg-zoom__hint { opacity: 0; }
.tg-zoom__touch { display: none; }
@media (hover: none) {
  .tg-zoom__mouse { display: none; }
  .tg-zoom__touch { display: inline; }
}
/* Colour pages: the zoom box hugs the tall plank photo. */
.tg-pd--colour .tg-zoom { width: fit-content; max-width: 100%; margin: 0 auto; }

/* Construction & sizes table (swatch book). */
.tg-spec { width: 100%; border-collapse: collapse; font-size: 16px; }
.tg-spec th, .tg-spec td { padding: 16px 12px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tg-line); }
.tg-spec thead th { padding-top: 0; font-family: var(--tg-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tg-muted); }
.tg-spec tbody th { font-family: var(--tg-ui); font-weight: 600; color: var(--tg-ink); white-space: nowrap; }
.tg-spec td { color: var(--tg-ink-2); }

/* Colour pages: tall swatch photo, format choices, finishes strip. */
.tg-pd--colour .tg-pd__media { background: none; }
.tg-pd--colour .tg-pd__media img { aspect-ratio: auto; max-height: calc(100vh - 140px); width: auto; max-width: 100%; margin: 0 auto; display: block; object-fit: contain; }
.tg-pd__choose { margin-top: 32px; }
.tg-pd__spec { margin-top: 36px; }
.tg-pd__spec .tg-eyebrow { margin-bottom: 14px; }
.tg-pd__choose .tg-eyebrow { margin-bottom: 12px; }
.tg-pd__formats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.tg-pd__formats3 a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--tg-deep); color: #FFFFFF; text-decoration: none; }
.tg-pd__formats3 img { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: opacity .2s ease, transform .5s ease; }
.tg-pd__formats3 a:hover img { opacity: .62; transform: scale(1.05); }
.tg-pd__formats3 span { position: absolute; left: 12px; right: 12px; bottom: 10px; font-family: var(--tg-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.tg-pd__formats3 small { display: block; margin-top: 2px; font-size: 10px !important; font-weight: 500; letter-spacing: 0.08em; text-transform: none; opacity: .9; }
.tg-finish-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 40px; list-style: none; padding: 0; }
.tg-finish-strip a { display: flex; flex-direction: column; color: var(--tg-ink); text-decoration: none; }
.tg-finish-strip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.tg-finish-strip span { padding: 8px 2px 0; font-family: var(--tg-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.tg-finish-strip a:hover span { color: var(--tg-link); }

/* ---------- Product cards (category grids) ---------- */

.tg-grid { gap: 40px 22px; }
.tg-card { gap: 0; }
.tg-card__media { position: relative; overflow: hidden; }
.tg-card__media img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tg-card:hover .tg-card__media img { transform: scale(1.04); }
.tg-card__title {
  min-height: 0;
  padding: 14px 0 0;
  font-family: var(--tg-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
}
.tg-card__no { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; color: var(--tg-muted); }
.tg-card .tg-sample-btn {
  width: auto;
  min-height: 0;
  margin-top: 12px;
  padding: 0 0 4px;
  align-self: flex-start;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--tg-ink-2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
}
.tg-card .tg-sample-btn:hover { background: none; color: var(--tg-link); }
.tg-card .tg-sample-btn[aria-pressed="true"] { background: none; color: #2F6B3A; }
.tg-card .tg-sample-btn svg { width: 13px; height: 13px; }

/* ---------- Homepage ---------- */

.tg-home-hero { position: relative; min-height: min(88vh, 860px); display: flex; align-items: flex-end; background: var(--tg-deep); color: #FFFFFF; overflow: hidden; }
.tg-home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.tg-home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 23, 19, 0.82) 0%, rgba(20, 23, 19, 0.35) 55%, rgba(20, 23, 19, 0.1) 100%), linear-gradient(0deg, rgba(20, 23, 19, 0.55), transparent 45%); }
.tg-home-hero__wrap { position: relative; z-index: 1; width: 100%; padding-top: 160px; padding-bottom: 88px; }
.tg-home-hero .tg-eyebrow { color: #D7DBD3; }
.tg-home-hero h1 {
  margin: 0;
  max-width: 17ch;
  font-family: var(--tg-display);
  font-weight: 200;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 0.98;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.tg-home-hero .tg-actions { margin-top: 44px; gap: 18px 34px; }
.tg-play { display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: #FFFFFF; cursor: pointer; text-align: left; font-family: var(--tg-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.tg-play__icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; transition: background-color .2s ease, color .2s ease; }
.tg-play:hover .tg-play__icon { background: #FFFFFF; color: var(--tg-deep); }
.tg-play__sub { display: block; margin-top: 4px; font-weight: 400; letter-spacing: 0.06em; text-transform: none; font-size: 14px; color: #C9CEC5; }

.tg-logos { background: var(--tg-deep); border-top: 1px solid rgba(255, 255, 255, 0.08); }

.tg-hello2__copy { max-width: 62ch; margin: 22px auto 0; }
.tg-hello2 .tg-signature { margin: 30px 0 0 !important; color: var(--tg-ink); }
.tg-hello2 .tg-signature__name { font-size: 64px !important; line-height: 1; }
.tg-hello2 .tg-signature__role { display: block; margin-top: 6px; font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tg-muted); }

.tg-tiles--ranges { margin-top: 72px; }

.tg-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 36px; margin-top: 72px; }
.tg-how__item { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.tg-how__no { display: block; font-family: var(--tg-display); font-weight: 200; font-size: 34px; letter-spacing: 0.08em; color: var(--tg-orange-light); }
.tg-how h3 { margin: 14px 0 14px; font-family: var(--tg-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #FFFFFF; }
.tg-how p { margin: 0 !important; font-size: 15px !important; line-height: 1.75; color: #BFC5BB; }
.tg-how__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 72px; }
.tg-why2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 20px; padding: 32px 34px; border: 1px solid rgba(255, 255, 255, 0.2); color: #FFFFFF; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.tg-why2 .tg-eyebrow { grid-column: 1; margin: 0; }
.tg-why2__title { grid-column: 1; font-family: var(--tg-display); font-weight: 200; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; }
.tg-why2 svg { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; transition: transform .2s ease; }
.tg-why2:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.45); color: #FFFFFF; }
.tg-why2:hover svg { transform: translateX(6px); }

.tg-books { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.42fr) minmax(0, 0.72fr); gap: 48px; align-items: end; }
.tg-books__text { align-self: center; }
.tg-book { display: flex; flex-direction: column; color: var(--tg-ink); text-decoration: none; }
.tg-book__cover { display: block; line-height: 0; box-shadow: 0 18px 40px rgba(20, 23, 19, 0.22); transition: transform .3s ease, box-shadow .3s ease; }
.tg-book__cover img { width: 100%; height: auto; }
.tg-book:hover .tg-book__cover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(20, 23, 19, 0.28); }
.tg-book__name { margin-top: 22px; font-family: var(--tg-display); font-weight: 300; font-size: 26px; letter-spacing: 0.1em; text-transform: uppercase; }
.tg-book__dl { margin-top: 6px; font-family: var(--tg-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tg-link); }

.tg-insta__handle { margin-top: 18px; font-size: 16px; letter-spacing: 0.06em; }
.tg-insta__grid { margin-top: 44px; gap: 10px; }

/* ---------- Phones and tablets ---------- */

@media (max-width: 1199.98px) {
  .tg-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tg-swatches > :nth-child(n+7) { display: none; }
}
@media (max-width: 991.98px) {
  .tg-sec { padding: 80px 0; }
  .tg-split { grid-template-columns: 1fr; }
  .tg-split__media { min-height: 0; aspect-ratio: 4 / 3; }
  .tg-split--flip .tg-split__media { order: 0; }
  .tg-split__body { padding: 56px 40px 64px; }
  .tg-intro-split { grid-template-columns: 1fr; }
  .tg-contact { grid-template-columns: 1fr; }
  .tg-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-pd__row { grid-template-columns: 1fr; }
  .tg-pd__media { position: static; }
  .tg-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-books__text { grid-column: 1 / -1; }
  .tg-tiles--guides { margin-top: 56px; }
  .tg-tiles, .tg-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-article__row { grid-template-columns: 1fr; gap: 56px; }
  .tg-article__aside { position: static; }
  .tg-callband__row { grid-template-columns: 1fr; }
  .tg-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .tg-sec { padding: 64px 0; }
  .tg-sec--tight { padding: 48px 0; }
  .tg-lead { font-size: 18px !important; }
  .tg-copy p { font-size: 16px !important; }
  .tg-phero { min-height: 380px; }
  .tg-phero--short { min-height: 260px; }
  .tg-phero__wrap { padding-top: 96px; padding-bottom: 32px; }
  .tg-phero__sub { font-size: 17px !important; }
  .tg-photo--overlay figcaption { padding: 40px 20px 16px; font-size: 10px; letter-spacing: 0.14em; }
  .tg-split__body { padding: 44px 20px 52px; }
  .tg-trio { grid-template-columns: 1fr; gap: 56px; margin-top: 48px; padding-top: 0; }
  .tg-trio::before { display: none; }
  .tg-trio__item::before { display: none; }
  .tg-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .tg-steps::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid currentColor; }
  .tg-steps li { background: var(--tg-steps-bg, #FFFFFF); padding: 6px 0; }
  .tg-tiles, .tg-tiles--4 { grid-template-columns: 1fr; gap: 40px; }
  .tg-tile__name { font-size: 26px; }
  .tg-tile__media { aspect-ratio: 4 / 3; }
  .tg-tile--cta { padding: 32px 24px; }
  .tg-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .tg-swatches > :nth-child(n+5) { display: none; }
  .tg-swatch__name { font-size: 10px; letter-spacing: 0.04em; }
  .tg-article { padding: 56px 0 72px; }
  .tg-prose p, .tg-prose li { font-size: 17px !important; }
  .tg-prose h2 { margin-top: 48px; font-size: 29px; }
  .tg-feature { grid-template-columns: 1fr; gap: 24px; margin: 32px 0 48px; }
  .tg-cards, .tg-cards--2, .tg-cards--4 { grid-template-columns: 1fr; gap: 36px; }
  .tg-faq summary { grid-template-columns: 40px minmax(0, 1fr) 20px; padding: 22px 0; }
  .tg-faq__q { font-size: 17px; }
  .tg-faq__a { padding: 0 0 24px 48px; }
  .tg-callband { padding: 64px 0; }
  .tg-form { grid-template-columns: 1fr; }
  .tg-home-hero { min-height: 600px; }
  .tg-home-hero__wrap { padding-bottom: 48px; }
  .tg-home-hero::after { background: linear-gradient(0deg, rgba(20, 23, 19, 0.88) 10%, rgba(20, 23, 19, 0.2) 70%); }
  .tg-how { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .tg-how__links { grid-template-columns: 1fr; margin-top: 48px; }
  .tg-why2 { padding: 24px 22px; }
  .tg-books { gap: 32px 20px; }
  .tg-book__name { font-size: 20px; }
  .tg-tiles--ranges { margin-top: 48px; }
  .tg-howbar { margin-top: 36px; gap: 12px; flex-direction: column; }
  .tg-howbar li { font-size: 11px; letter-spacing: 0.12em; }
  .tg-grid-section { padding-bottom: 64px; }
  .tg-pd { padding: 0 0 64px; }
  .tg-pd__media { margin: 0 -20px; }
  .tg-pd__facts > div { grid-template-columns: 110px minmax(0, 1fr); }
  .tg-spec { font-size: 14px; }
  .tg-spec tbody th { white-space: normal; }
  .tg-pd--colour .tg-pd__media img { max-height: 70vh; }
  .tg-finish-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tg-related__head { margin-bottom: 32px; }
  .tg-contact__form { padding: 28px 20px; margin: 0 -20px; }
  .tg-contact__big { font-size: 38px; }
  .tg-newsletter { flex-direction: column; gap: 10px; }
  .tg-newsletter input { border-right: 1px solid #5A6157; }
  .tg-card__title { font-size: 12px; letter-spacing: 0.06em; padding-top: 10px; }
  .tg-card .tg-sample-btn { font-size: 10px; letter-spacing: 0.14em; }
}