/* ==========================================================================
   Trademark Glassworks — design layer
   Scoped to templates this child theme owns (.tg-*), so Divi-built pages are
   untouched until they are converted. Fonts are the ones Divi already loads:
   DM Sans (headings), Anton (nav/buttons), Open Sans (body) — nothing new.
   ========================================================================== */

:root {
  /* brand palette, from the client's swatches */
  --tg-navy:    #162B43;

  /* Brand blue, three tones of one hue (197°) so every context clears WCAG AA.
     --tg-blue is the client-facing brand colour; the other two exist because a
     single mid-tone blue cannot carry both body text on white and an accent on
     navy. Ratios are measured, not estimated. */
  --tg-blue:    #0494CD;   /* brand. Recorded here for reference; the only place it
                              is painted is the top contact strip, which Divi owns
                              (Theme Options > secondary_nav_bg). Near-black text
                              on it is 5.75:1. Too light to carry text on white. */
  --tg-cyan:    #2AC3FF;   /* light tint — accents ON navy (7.08:1)             */
  --tg-deep:    #0378A6;   /* deep tone — links/text on white (4.95:1)          */

  /* Buttons: white on --tg-deep is 4.95:1. The brand tone itself only reaches
     3.43:1 with white, so buttons use the deep tone and read as the same blue. */
  --tg-btn-bg:  var(--tg-deep);
  --tg-btn-fg:  #FFFFFF;

  --tg-pale:    #EFF6F6;

  --tg-ink:     #1B2838;
  --tg-muted:   #5B6C7D;
  --tg-line:    #DCE5EA;
  --tg-surface: #FFFFFF;

  --tg-measure: 68ch;      /* was running at ~114 characters */
  --tg-gutter:  clamp(20px, 5vw, 40px);

  --tg-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tg-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tg-accent:  'Anton', 'DM Sans', system-ui, sans-serif;
}

/* The header is position:fixed at ~112px. Without this, every in-page anchor
   lands with its heading hidden underneath it. Safe site-wide. */
html { scroll-padding-top: 130px; }

/* ==========================================================================
   Single blog post
   ========================================================================== */

.tg-single {
  background: var(--tg-surface);
  color: var(--tg-ink);
  font-family: var(--tg-body);
}

.tg-wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--tg-gutter);
}

/* ---- masthead ---- */
.tg-article-head {
  padding-block: clamp(32px, 6vw, 64px) clamp(20px, 3vw, 32px);
  max-width: 980px;          /* matches .tg-hero, so the title spans the image */
  margin-inline: auto;
}

.tg-eyebrow {
  font-family: var(--tg-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tg-deep);
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.tg-eyebrow .tg-dot { color: var(--tg-line); }

.tg-single h1.tg-title {
  font-family: var(--tg-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--tg-navy);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

.tg-standfirst {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--tg-muted);
  margin: 18px 0 0;
  max-width: 58ch;
}

/* ---- hero image ---- */
.tg-hero {
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.tg-hero { max-width: 980px; margin-inline: auto; }
.tg-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.tg-hero figcaption {
  font-size: 13px;
  color: var(--tg-muted);
  margin-top: 10px;
}

/* ---- article body ----
   Posts are authored as 6–16 separate Divi text modules. Divi gives each one
   its own padding, which is what makes the reading experience feel chopped up.
   These rules flatten them back into one continuous column. */

.tg-article-body {
  max-width: var(--tg-measure);
  margin-inline: auto;        /* centre the column under the wider hero */
  font-size: 18px;
  line-height: 1.72;
}

.tg-article-body .et_pb_section,
.tg-article-body .et_pb_row,
.tg-article-body .et_pb_column,
.tg-article-body .et_pb_text,
.tg-article-body .et_pb_text_inner {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  float: none !important;
}
.tg-article-body .et_pb_row { display: block !important; }

.tg-article-body p {
  margin: 0 0 1.25em;
  font-size: inherit;
  line-height: inherit;
  color: var(--tg-ink);
}
.tg-article-body > *:last-child { margin-bottom: 0; }

.tg-article-body h2,
.tg-article-body h3,
.tg-article-body h4 {
  font-family: var(--tg-display);
  color: var(--tg-navy);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.tg-article-body h2 {
  font-size: clamp(23px, 2.5vw, 30px);
  line-height: 1.22;
  font-weight: 700;
  margin: 2em 0 .55em;
}
.tg-article-body h3 {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.3;
  font-weight: 700;
  margin: 1.8em 0 .5em;
}
.tg-article-body h2:first-child,
.tg-article-body h3:first-child { margin-top: 0; }

.tg-article-body a {
  color: var(--tg-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.tg-article-body a:hover { text-decoration-thickness: 2px; }

.tg-article-body ul,
.tg-article-body ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.tg-article-body li { margin-bottom: .5em; }

.tg-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin-block: 1.6em;
}

.tg-article-body blockquote {
  margin: 1.8em 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--tg-deep);
  font-size: 1.05em;
  color: var(--tg-navy);
  font-style: italic;
}

/* ---- end-of-post call to action ---- */
.tg-cta {
  max-width: var(--tg-measure);
  margin-inline: auto;
  margin-top: clamp(44px, 6vw, 72px);
  background: var(--tg-navy);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px);
  color: #fff;
}
.tg-cta h2 {
  font-family: var(--tg-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18;
  margin: 0 0 10px;
  color: #fff;
}
.tg-cta p {
  margin: 0 0 22px;
  color: #C7D6E4;
  max-width: 52ch;
  line-height: 1.6;
}
.tg-btn {
  display: inline-block;
  font-family: var(--tg-accent);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--tg-btn-bg);
  color: var(--tg-btn-fg);        /* 4.95:1 */
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(3,120,166,.55);
  color: var(--tg-btn-fg);
}
.tg-btn + .tg-btn { margin-left: 10px; }
.tg-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.tg-btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }

/* ---- related posts ---- */
.tg-related {
  margin-top: clamp(48px, 7vw, 84px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--tg-line);
}
.tg-related h2 {
  font-family: var(--tg-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(21px, 2.3vw, 27px);
  color: var(--tg-navy);
  margin: 0 0 22px;
}
.tg-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 820px) { .tg-related-grid { grid-template-columns: 1fr; } }

.tg-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tg-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 14px 30px -18px rgba(22,43,67,.5);
}
.tg-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.tg-card-body { padding: 16px 18px 20px; }
.tg-card-date {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tg-deep);
  display: block;
  margin-bottom: 7px;
}
.tg-card h3 {
  font-family: var(--tg-display);
  font-size: 17px;
  line-height: 1.32;
  font-weight: 700;
  color: var(--tg-navy);
  margin: 0;
  text-wrap: balance;
}

/* ---- back link ---- */
.tg-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tg-deep);
  text-decoration: none;
  margin-bottom: 4px;
}
.tg-back:hover { color: var(--tg-navy); }

.tg-single-footer { padding-bottom: clamp(56px, 8vw, 96px); }

/* Divi drops a stray top margin on the first section after the header */
.tg-single #main-content { background: var(--tg-surface); }

@media (prefers-reduced-motion: reduce) {
  .tg-card, .tg-btn { transition: none; }
  .tg-card:hover, .tg-btn:hover { transform: none; }
}

/* ==========================================================================
   Page templates (.tg-page)
   Shares the tokens above. Scoped so Divi-built pages stay untouched.
   ========================================================================== */

.tg-page { background: var(--tg-surface); color: var(--tg-ink); font-family: var(--tg-body); }

.tg-section { padding-block: clamp(48px, 7vw, 92px); }
.tg-section--pale { background: var(--tg-pale); }
.tg-section--navy { background: var(--tg-navy); color: #fff; }
.tg-section--tight { padding-block: clamp(34px, 5vw, 60px); }

.tg-page h2,
.tg-page h3 { font-family: var(--tg-display); color: var(--tg-navy); letter-spacing: -.015em; text-wrap: balance; }
.tg-section--navy h2,
.tg-section--navy h3 { color: #fff; }

.tg-page h2 {
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.18;
  font-weight: 700;
  font-style: italic;
  margin: 0 0 .6em;
}
.tg-page h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.3; font-weight: 700; margin: 0 0 .6em; }

.tg-page p { font-size: 17px; line-height: 1.7; margin: 0 0 1.15em; }
.tg-page p:last-child { margin-bottom: 0; }
.tg-section--navy p { color: #C7D6E4; }

.tg-lede { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.6; color: var(--tg-navy); font-weight: 600; }
.tg-section--navy .tg-lede { color: #fff; }

/* ---- page hero ----
   Two columns on desktop: copy left, image right, the image overhanging the
   bottom edge so it bleeds into the section below. Stacks under 900px. */
.tg-phero { background: var(--tg-navy); color: #fff; padding-block: clamp(46px, 7vw, 86px) 0; }
.tg-phero .tg-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: stretch;
}
.tg-phero-copy {
  max-width: 56ch;
  padding-bottom: clamp(40px, 6vw, 80px);
  align-self: center;
}
.tg-phero-copy p { max-width: 54ch; }
.tg-phero h1 {
  font-family: var(--tg-display);
  font-weight: 700; font-style: italic;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08; letter-spacing: -.025em;
  color: #fff; margin: 0 0 .35em; text-wrap: balance;
}
.tg-phero .tg-eyebrow { color: var(--tg-cyan); }
.tg-phero p { color: #C7D6E4; }
.tg-phero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

.tg-phero-img {
  margin: 0;
  align-self: stretch;
  display: flex;
  transform: translateY(clamp(20px, 4vw, 48px));
}
.tg-phero-img img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}

@media (max-width: 900px) {
  .tg-phero .tg-wrap { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
  .tg-phero-copy { max-width: none; padding-bottom: 0; }
  .tg-phero-copy p { max-width: none; }
  .tg-phero-img { transform: translateY(clamp(16px, 4vw, 30px)); }
  .tg-phero-img img { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---- image + text split ---- */
/* `align-items: stretch`, not `start`. With `start` the photo kept its 4:3 box
   and stopped wherever that landed, leaving a hole beside long copy. The old
   site filled that column and the client preferred it. */
.tg-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: stretch; }
.tg-split--reverse .tg-split-media { order: 2; }
@media (max-width: 860px) {
  .tg-split { grid-template-columns: 1fr; gap: 26px; }
  .tg-split--reverse .tg-split-media { order: 0; }
}
.tg-split-media { margin: 0; display: flex; }
.tg-split-media img {
  width: 100%;
  display: block;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  /* Fill the column, but never crop to a sliver: 4:3 is the floor, the box
     grows with the copy up to a sane limit. */
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 100%;
  max-height: 620px;
}
@media (max-width: 860px) {
  .tg-split-media img { min-height: 0; max-height: none; }
}

/* The client's own shower photographs are 480x640 portrait, and a 4:3 box threw
   away up to 44% of each one — on real work they are proud of, that is the
   wrong trade. A square floor on this page keeps about three quarters of every
   frame. The copy is centred because one of these rows is a short paragraph
   beside a tall photo, and pinned to the top it reads like an accident. */
@media (min-width: 861px) {
  .tg-page--showers .tg-split-media img { aspect-ratio: 1 / 1; }
  .tg-page--showers .tg-split-copy { align-self: center; }
}
.tg-split-copy { min-width: 0; }

/* ---- option cards ---- */
.tg-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 34px; list-style: none; padding: 0; }
.tg-option {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 14px;
  padding: 22px 24px;
}
.tg-option strong {
  display: block;
  font-family: var(--tg-display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--tg-navy);
  margin-bottom: 7px;
}
.tg-option span { font-size: 15.5px; line-height: 1.6; color: var(--tg-muted); display: block; }

/* ---- centred narrow block ---- */
.tg-narrow { max-width: 64ch; margin-inline: auto; text-align: center; }
.tg-narrow p { margin-inline: auto; }
/* a brand logo inside a centred block has to be centred too — the mark
   itself is display:block so it would otherwise sit hard left */
.tg-narrow .tg-brandmark img { margin-inline: auto; }

/* ---- closing band ---- */
.tg-band { background: var(--tg-navy); color: #fff; padding-block: clamp(46px, 6vw, 80px); text-align: center; }
.tg-band h2 { color: #fff; margin-bottom: .45em; }
.tg-band p { color: #C7D6E4; max-width: 56ch; margin-inline: auto; }
.tg-band-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.tg-options-head { margin-top: clamp(34px, 5vw, 56px); }
.tg-options-foot { margin-top: 26px; max-width: 70ch; color: var(--tg-muted); }

/* the hero tagline is an h2 for parity with the original markup */
.tg-phero h2.tg-phero-sub {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.45;
  color: var(--tg-cyan);
  font-weight: 600;
  margin: 0 0 18px;
  font-family: var(--tg-display);
  font-style: italic;
  letter-spacing: 0;
}

/* brand logos sitting above a section heading */
.tg-brandmark { margin-bottom: 18px; }
.tg-brandmark img {
  max-width: 180px;
  width: auto;
  height: auto;
  max-height: 54px;
  object-fit: contain;
  display: block;
}
.tg-section--navy .tg-brandmark img,
.tg-phero .tg-brandmark img { filter: brightness(0) invert(1); }

/* second split inside the same section needs breathing room */
.tg-split--gap { margin-top: clamp(34px, 5vw, 58px); }

.tg-inline-link {
  color: var(--tg-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tg-inline-link:hover { color: var(--tg-navy); }

/* ==========================================================================
   Home
   ========================================================================== */

.tg-hhero {
  position: relative;
  background: var(--tg-navy);   /* shows through until the first slide paints */
  color: #fff;
  min-height: clamp(460px, 68vh, 680px);
  display: grid;             /* was flex: the inner block shrank to its content
                                and margin:auto centred it off the page gutter */
  align-content: center;
}
.tg-hhero-inner { width: 100%; }
.tg-hhero-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  /* Sized for the BRIGHTEST slide, not the average one. The sunset image puts
     near-white sky (L=0.98) directly behind the headline, which needs ~0.49
     alpha for 3:1 and ~0.71 under the smaller sub-heading. These stops clear
     both with roughly a third again in hand, so the hero copy survives a
     longer headline or a different crop at another viewport width. The right
     edge still opens up to 0.10 so the glass house stays visible. */
  background: linear-gradient(100deg,
    rgba(22,43,67,.82) 0%,
    rgba(22,43,67,.70) 38%,
    rgba(22,43,67,.42) 64%,
    rgba(22,43,67,.06) 90%);
}

/* On a narrow screen the copy runs the full width, so a left-to-right falloff
   leaves the end of each line sitting on bare sky. Below the site's 980px
   breakpoint the scrim becomes vertical and close to flat instead: the hero
   image is mostly decorative at that size, and the text has to win. */
@media (max-width: 980px) {
  .tg-hhero-scrim {
    background: linear-gradient(180deg,
      rgba(22,43,67,.58) 0%,
      rgba(22,43,67,.76) 20%,
      rgba(22,43,67,.76) 86%,
      rgba(22,43,67,.60) 100%);
  }
}
.tg-hhero-inner { position: relative; z-index: 2; padding-block: clamp(50px, 8vw, 90px); }

/* ---- hero slideshow -----------------------------------------------------
   The copy is identical on every slide, so only the image crossfades. Nothing
   moves and nothing reflows, which keeps the headline readable throughout.
   Without JavaScript the first slide keeps `is-active` from the template and
   the others stay at opacity 0 — a correct static hero.

   The dots and pause button were removed on 30 Oct at the client's request, so
   the only thing that changes a slide now is the timer in tg-hero.js, and
   prefers-reduced-motion is the only way a visitor can stop it. */
.tg-hslides { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.tg-hslide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .9s ease-in-out;
}
.tg-hslide.is-active { opacity: 1; }
.tg-hslide img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .tg-hslide { transition: none; }   /* the script also stops auto-advancing */
}
.tg-hhero h1 {
  font-family: var(--tg-display);
  font-weight: 700; font-style: italic;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.06; letter-spacing: -.025em;
  color: #fff; margin: 0 0 14px; max-width: 16ch;
}
.tg-hhero h1 span {
  display: inline-block;
  font-size: .52em;
  line-height: 1.2;
  margin-top: .35em;
}
.tg-hhero h1.tg-hhero-h1--two { max-width: 24ch; }
.tg-hhero-sub {
  /* White, not the softer #C7D6E4 the other heroes use. That grey needs a very
     dark backdrop to clear 4.5:1, and the overlay was deliberately lightened on
     30 Oct — on the sunset slide the grey measured 3.7:1. White carries the same
     line at 5:1 under the lighter overlay, which is what the client asked for. */
  color: #FFFFFF;
  font-size: clamp(15px, 1.6vw, 18px);
  margin: 0 0 24px;
  max-width: 46ch;   /* the new line runs long; this keeps it to two lines */
}

/* two-line heading: big line then a smaller second line, as the original had */
.tg-page h2 span {
  display: inline-block;
  font-size: .58em;
  line-height: 1.28;
  font-style: normal;
  font-weight: 600;
  margin-top: .4em;
  color: var(--tg-deep);
}
.tg-section--navy h2 span { color: var(--tg-cyan); }

/* navy offset frame behind the showroom photo */
.tg-framed { position: relative; }
.tg-framed::before {
  content: "";
  position: absolute;
  inset: -16px -16px 28px 16px;
  background: var(--tg-navy);
  border-radius: 14px;
  z-index: 0;
}
.tg-framed img { position: relative; z-index: 1; }
@media (max-width: 860px) { .tg-framed::before { inset: -10px -10px 20px 10px; } }

.tg-btn--sm { font-size: 13.5px; padding: 11px 22px; }

/* screen-reader-only text */
.tg-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- brochure / document lists ----------------------------------------
   Thirteen of these on one page, so they are a quiet list rather than the
   row of solid buttons the builder used. The badge chip is white with a
   border rather than pale-filled, so it reads on both the white and the
   pale sections. */
.tg-docs { margin-top: 26px; }
.tg-docs-head {
  font-family: var(--tg-body);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tg-muted);
  margin: 0 0 8px;
}
/* Full width under their section now rather than squeezed into the text
   column, which is what left the hole beside the photo. */
.tg-docs { margin-top: clamp(26px, 3.4vw, 42px); }
.tg-docs ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0 32px;
}
.tg-docs a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  /* fill the grid cell so the rules line up across columns — without this a
     three-line label leaves its neighbour's underline floating mid-row */
  height: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--tg-line);
  text-decoration: none;
  color: var(--tg-deep);            /* 4.95:1 on white, 4.52:1 on the pale */
  font-size: 15px; font-weight: 600; line-height: 1.35;
}
.tg-docs-label { flex: 1 1 auto; }
.tg-docs a:hover .tg-docs-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tg-docs-badge {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  color: var(--tg-deep);
}
.tg-docs a:focus-visible {
  outline: 3px solid var(--tg-deep);
  outline-offset: 2px;
}

/* services tick list */
/* ---- photo band --------------------------------------------------------
   A full-bleed photograph with a light card floated over it. Built 30 Oct for
   the home page's Windows & Doors block after the flat white version did not
   land with the client, then reused for "Selling your home?" and "Local
   Service. Personal Attention." so the three read as one family.

   The heading is white over a scrim rather than dark text sitting directly on
   the photo — that only worked on the old site because its image happened to
   be pale in that corner, and it would not survive a change of picture. */
.tg-photoband {
  position: relative;
  overflow: hidden;
  padding-block: clamp(52px, 7vw, 104px);
  color: #fff;
}
.tg-photoband-bg { position: absolute; inset: 0; z-index: 0; }
.tg-photoband-bg img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.tg-photoband-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  /* darkest on the right, where the heading and card sit */
  background: linear-gradient(to left,
    rgba(22,43,67,.88) 0%,
    rgba(22,43,67,.78) 38%,
    rgba(22,43,67,.42) 72%,
    rgba(22,43,67,.20) 100%);
}
.tg-photoband-inner { position: relative; z-index: 2; }
.tg-photoband-panel { margin-left: auto; max-width: 620px; }

.tg-photoband h2 { max-width: 22ch; color: #fff; }
.tg-photoband h2 span { color: var(--tg-cyan); }   /* the deep blue would vanish here */

.tg-photoband-card {
  margin-top: 22px;
  background: var(--tg-surface);
  /* the section sets color:#fff for the heading over the photo; without this
     the card's paragraphs inherit it and vanish against the white */
  color: var(--tg-ink);
  border-radius: 16px;
  padding: clamp(22px, 2.8vw, 32px) clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 30px);
  box-shadow: 0 26px 60px -32px rgba(0,0,0,.75);
}
.tg-photoband-card .tg-ticks { margin-top: 0; gap: 12px 22px; }
.tg-photoband-card .tg-services-note { margin-top: 24px; max-width: none; }
.tg-photoband-card > p:last-child { margin-bottom: 0; }

/* ---- full-width brand row ----------------------------------------------
   The Shodor block used .tg-narrow, which centred it in a 64ch column and
   left it looking undersized against the sections around it. Across the full
   container instead, with the mark and heading on the left and the copy on
   the right so the lines stay a readable length. */
.tg-brandrow {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: clamp(26px, 4vw, 58px);
  /* centred, not top-aligned: the mark and heading are much shorter than the
     copy, and `start` left an obvious hole under them */
  align-items: center;
}
.tg-brandrow-head h2 { margin-top: 0; }
.tg-brandrow-copy p:last-child { margin-bottom: 0; }

/* ---- photo showcase track ----------------------------------------------
   A manual horizontal track for the client's own installation photos. Their
   pictures are portrait (480x640), which is why the cards are portrait too —
   forcing them into landscape cards is what threw away half of each frame in
   the page sections above. Nothing auto-advances. */
.tg-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.tg-showcase-head h2 { margin-bottom: .35em; }
.tg-showcase-head p { margin: 0; color: var(--tg-muted); max-width: 54ch; }

.tg-showcase-nav { display: flex; gap: 10px; flex: none; }
.tg-showcase-nav[hidden] { display: none; }
.tg-showcase-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--tg-line);
  border-radius: 999px;
  background: var(--tg-surface);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.tg-showcase-btn::before {
  content: "";
  width: 10px; height: 10px;
  border-top: 2px solid var(--tg-deep);
  border-right: 2px solid var(--tg-deep);
}
.tg-showcase-btn[data-tg-scroll="prev"]::before { transform: rotate(-135deg); margin-left: 3px; }
.tg-showcase-btn[data-tg-scroll="next"]::before { transform: rotate(45deg);   margin-right: 3px; }
.tg-showcase-btn:hover:not(:disabled) { border-color: var(--tg-deep); background: var(--tg-pale); }
.tg-showcase-btn:disabled { opacity: .35; cursor: default; }
.tg-showcase-btn:focus-visible { outline: 3px solid var(--tg-deep); outline-offset: 2px; }

.tg-showcase-track {
  list-style: none;
  margin: 0; padding: 0 0 8px;
  display: flex;
  gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tg-showcase-track > li {
  flex: 0 0 clamp(210px, 24vw, 280px);
  scroll-snap-align: start;
}
.tg-showcase-track img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  background: var(--tg-pale);
}
.tg-showcase-track:focus-visible { outline: 3px solid var(--tg-deep); outline-offset: 4px; }

@media (max-width: 680px) {
  .tg-showcase-head { flex-direction: column; align-items: flex-start; }
  .tg-showcase-track > li { flex-basis: 70%; }
}
@media (max-width: 860px) {
  .tg-brandrow { grid-template-columns: 1fr; gap: 16px; }
}
.tg-photoband-card .tg-services-note p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .tg-photoband-panel { margin-left: 0; max-width: none; }
  .tg-photoband-scrim {
    background: linear-gradient(180deg,
      rgba(22,43,67,.72) 0%,
      rgba(22,43,67,.80) 100%);
  }
}

/* ---- balanced split ----------------------------------------------------
   The home page's "about" row paired a 4:3 photo with a long paragraph, so
   the image finished 287px short of the text and floated at the top of it —
   the imbalance the client flagged. Here the photo fills its column instead
   of keeping its own aspect, and the text column takes the larger share, as
   the old site's did. Scoped to this one row so the other split sections,
   which are already balanced, are untouched. */
@media (min-width: 861px) {
  /* a touch more room for the copy, as the old site had */
  .tg-split--balanced { grid-template-columns: 45fr 55fr; }
}


.tg-ticks {
  list-style: none; padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 26px;
}
.tg-ticks li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--tg-navy);
  line-height: 1.5;
}
.tg-ticks li::before {
  content: "\2713";
  position: absolute; left: 0; top: -1px;
  color: var(--tg-deep);
  font-weight: 700;
  font-size: 17px;
}
.tg-services-note { margin-top: 32px; max-width: 72ch; }

/* gallery strip */
.tg-gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--tg-navy);
}
.tg-gallery-strip figure { margin: 0; }
.tg-gallery-strip img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4/3; object-fit: cover;
}
@media (max-width: 760px) { .tg-gallery-strip { grid-template-columns: 1fr 1fr; } .tg-gallery-strip figure:last-child { display: none; } }

/* testimonials */
.tg-testimonials h2 { text-align: center; max-width: none; margin-bottom: clamp(28px, 4vw, 44px); }
/* auto-fit with an upper bound, so this still makes three columns when there
   are three reviews but centres a sensible card when there is only one —
   `repeat(3, 1fr)` left two empty columns after two reviews were removed. */
.tg-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .tg-quotes { grid-template-columns: 1fr; } }
.tg-quote {
  margin: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 26px 24px 22px;
  position: relative;
}
.tg-quote blockquote { margin: 0; }
.tg-quote blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--tg-display);
  font-size: 46px; line-height: .7;
  color: var(--tg-cyan);
  margin-bottom: 10px;
}
.tg-quote p { color: #D4E1EC; font-size: 15.5px; line-height: 1.62; margin: 0 0 .9em; }
.tg-quote .tg-quote-lead { color: var(--tg-cyan); font-weight: 600; font-size: 14px; }
.tg-quote figcaption {
  font-family: var(--tg-display);
  font-weight: 700; color: #fff; font-size: 15px;
  margin-top: 14px;
}

/* The lead review. Sits above the three-up row at full width because it runs
   about four times their length. The blockquote keeps its own measure — a
   single column of this much text across the whole wrap would be unreadable —
   while the card itself stays full width. */
.tg-quote--feature {
  margin-bottom: 22px;
  padding: clamp(28px, 3.6vw, 40px) clamp(24px, 3.4vw, 40px) clamp(24px, 3vw, 32px);
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.2);
}
.tg-quote--feature blockquote {
  max-width: 68ch;
  margin-inline: auto;
  /* Divi puts a 5px rule down the left of every blockquote. In the narrow
     cards it lands on the card edge and looks deliberate; here the centred
     measure pushes it ~200px into open space, so it goes. The oversized
     quote mark already marks this as a quotation. */
  border-left: 0;
  padding-left: 0;
}
.tg-quote--feature blockquote::before {
  font-size: 58px;
  text-align: center;
}
.tg-quote--feature p {
  font-size: 16.5px;
  line-height: 1.68;
}
.tg-quote--feature figcaption {
  text-align: center;
  font-size: 16px;
  margin-top: 18px;
}

/* ==========================================================================
   Footer / contact
   The footer is a Divi Theme Builder layout (#120), not a PHP template, so it
   is styled rather than rebuilt. Forminator renders its fields client-side,
   hence the !important on form controls — the plugin ships its own inline CSS.
   ========================================================================== */

.et-l--footer { font-family: var(--tg-body); }

/* heading block */
.et-l--footer .et_pb_text_0_tb_footer h2 {
  font-family: var(--tg-display);
  font-weight: 700; font-style: italic;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: .35em;
}

/* left column: address, hours, links */
.et-l--footer .et_pb_column_3_tb_footer h3 {
  font-family: var(--tg-display);
  font-weight: 700; font-style: italic;
  font-size: 20px;
  margin-bottom: 18px;
}
.et-l--footer .et_pb_column_3_tb_footer p { line-height: 1.75; }
.et-l--footer .et_pb_column_3_tb_footer a { color: var(--tg-cyan); text-decoration: none; }
.et-l--footer .et_pb_column_3_tb_footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.et-l--footer .et_pb_column_3_tb_footer strong { color: #fff; }

/* "Call now" button */
.et-l--footer .et_pb_button {
  font-family: var(--tg-accent) !important;
  font-size: 15px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  background: var(--tg-btn-bg) !important;
  color: var(--tg-btn-fg) !important;    /* 4.95:1 */
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 26px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.et-l--footer .et_pb_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(3,120,166,.5);
  padding: 13px 26px !important;
}
.et-l--footer .et_pb_button::after { display: none !important; }

/* ---- Forminator ---- */
.et-l--footer .forminator-row { margin-bottom: 14px !important; }

.et-l--footer .forminator-input,
.et-l--footer .forminator-textarea,
.et-l--footer .iti__tel-input {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-family: var(--tg-body) !important;
  font-size: 15.5px !important;
  color: var(--tg-ink) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 52px;
}
.et-l--footer .forminator-textarea { min-height: 140px; line-height: 1.6 !important; }

.et-l--footer .forminator-input::placeholder,
.et-l--footer .forminator-textarea::placeholder { color: #7B8A99 !important; opacity: 1; }

.et-l--footer .forminator-input:focus,
.et-l--footer .forminator-textarea:focus,
.et-l--footer .iti__tel-input:focus {
  outline: none !important;
  border-color: var(--tg-cyan) !important;
  box-shadow: 0 0 0 3px rgba(42,195,255,.35) !important;
}

/* phone field wrapper, so the country selector matches the other inputs */
.et-l--footer .iti { width: 100%; }
.et-l--footer .iti__selected-country { border-radius: 10px 0 0 10px !important; }

/* submit */
.et-l--footer .forminator-button,
.et-l--footer .forminator-button-submit,
.et-l--footer .forminator-custom-form button[type="submit"] {
  font-family: var(--tg-accent) !important;
  font-size: 15px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: var(--tg-btn-bg) !important;
  color: var(--tg-btn-fg) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  min-height: 0 !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.et-l--footer .forminator-button:hover,
.et-l--footer .forminator-button-submit:hover,
.et-l--footer .forminator-custom-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(3,120,166,.55);
  background: var(--tg-btn-bg) !important;
  color: var(--tg-btn-fg) !important;
}

/* error/response text needs to read on navy */
.et-l--footer .forminator-response-message { color: #fff !important; font-size: 14.5px; }

/* manufacturer logos */
.et-l--footer .et_pb_column_3_tb_footer img {
  max-height: 30px;
  width: auto;
  opacity: .85;
  margin-right: 14px;
}

/* the contact section carried a lot of dead space at the foot */
.et-l--footer .et_pb_section_3_tb_footer { padding-bottom: clamp(36px, 5vw, 56px) !important; }

/* intl-tel-input reserves space on the left for the country selector; the
   blanket padding above clobbered it, so the flag sat on the placeholder. */
.et-l--footer .iti--separate-dial-code .iti__tel-input,
.et-l--footer .iti__tel-input { padding-left: 96px !important; }
.et-l--footer .iti__selected-country {
  background: transparent !important;
  border: 0 !important;
  padding-left: 14px !important;
  height: 100% !important;
}
.et-l--footer .iti__selected-dial-code { color: var(--tg-ink); font-size: 15.5px; }
.et-l--footer .iti { display: block; }
.et-l--footer .iti__country-list { color: var(--tg-ink); text-align: left; }

/* ==========================================================================
   Blog index
   ========================================================================== */

.tg-blog { background: var(--tg-surface); }

.tg-blog-head {
  background: var(--tg-navy);
  color: #fff;
  padding-block: clamp(44px, 6vw, 78px) clamp(40px, 5vw, 64px);
}
.tg-blog-head h1 {
  font-family: var(--tg-display);
  font-weight: 700; font-style: italic;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.06; letter-spacing: -.025em;
  color: #fff; margin: 0 0 14px;
}
.tg-blog-head .tg-eyebrow { color: var(--tg-cyan); }
.tg-blog-intro { color: #C7D6E4; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; max-width: 58ch; margin: 0; }

.tg-blog-body { padding-block: clamp(36px, 5vw, 60px) clamp(48px, 7vw, 86px); }

/* lead post */
.tg-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  text-decoration: none;
  background: var(--tg-pale);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: clamp(30px, 4vw, 50px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tg-feature:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -22px rgba(22,43,67,.55); }
.tg-feature-media img { display: block; width: 100%; height: 100%; aspect-ratio: 16/11; object-fit: cover; }
.tg-feature-copy { padding: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 44px) clamp(22px, 3vw, 40px) 0; min-width: 0; }
.tg-feature-copy h2 {
  font-family: var(--tg-display);
  font-weight: 700; font-style: italic;
  font-size: clamp(22px, 2.6vw, 33px);
  line-height: 1.16; letter-spacing: -.018em;
  color: var(--tg-navy);
  margin: 8px 0 12px;
  text-wrap: balance;
}
.tg-feature-copy p { font-size: 16px; line-height: 1.65; color: var(--tg-muted); margin: 0 0 16px; }
.tg-feature-cta {
  font-family: var(--tg-body);
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--tg-deep);
}
@media (max-width: 860px) {
  .tg-feature { grid-template-columns: 1fr; }
  .tg-feature-copy { padding: 22px 24px 28px; }
  .tg-feature-media img { aspect-ratio: 16/9; }
}

/* grid of the rest */
.tg-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .tg-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tg-post-grid { grid-template-columns: 1fr; } }

.tg-post-grid .tg-card-body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tg-muted);
  margin: 8px 0 0;
}

/* pagination */
.tg-pagination { margin-top: clamp(34px, 5vw, 54px); }
.tg-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tg-pagination li { margin: 0; }
.tg-pagination a,
.tg-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--tg-line);
  font-size: 14.5px; font-weight: 600;
  color: var(--tg-navy);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tg-pagination a:hover { border-color: var(--tg-deep); color: var(--tg-deep); }
.tg-pagination .current {
  background: var(--tg-navy);
  border-color: var(--tg-navy);
  color: #fff;
}
.tg-pagination .dots { border-color: transparent; }

.tg-blog-empty { color: var(--tg-muted); font-size: 17px; }

/* The footer's mobile-only "Call now" bar is position:fixed at the bottom of
   the viewport with no body offset, so it sat on top of the last ~68px of every
   page. Reserve that space. Pre-existing Divi behaviour, not introduced here. */
@media (max-width: 980px) {
  body { padding-bottom: 68px; }
}

/* Header logo at ~70% of its previous size.
   Divi sizes it as a percentage of the header, which shrinks on scroll, so
   keeping percentages preserves that behaviour: 82% -> 57%, 54% -> 38%. */
#logo { max-height: 57% !important; }
@media (max-width: 980px) {
  #logo { max-height: 38% !important; }
}

/* ==========================================================================
   Announcement bar
   Its own band rather than a third cyan strip: a deep teal from the same hue
   family as the brand blue, so it reads as a notice without clashing with the
   brand-blue contact strip above it or the navy header. White on it is 7.18:1.
   Change --tg-announce-bg to recolour the whole bar.
   ========================================================================== */

:root {
  --tg-announce-bg:   #025E82;   /* deep brand blue — white on it is 7.18:1 */
  --tg-announce-fg:   #FFFFFF;
  --tg-announce-mark: #7FDBFF;   /* 4.61:1 on the bar — the cyan tint is 3.54 */
}

.tg-announce {
  background: var(--tg-announce-bg);
  color: var(--tg-announce-fg);
  position: relative;
  z-index: 5;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.14);
}
.tg-announce[hidden] { display: none !important; }

/* a thin brand-blue rule along the top edge to tie it to the palette */
.tg-announce::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--tg-announce-mark);
}

.tg-announce-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* Scaled up 8 Nov — the client wanted this to carry more weight. */
  padding-block: clamp(20px, 2.4vw, 28px);
}

.tg-announce-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--tg-body);
  font-size: clamp(16.5px, 1.5vw, 19.5px);
  line-height: 1.4;
  color: var(--tg-announce-fg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
}

.tg-announce-lead {
  font-family: var(--tg-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(21px, 2.1vw, 27px);
  letter-spacing: -.01em;
  color: var(--tg-announce-mark);
}
.tg-announce-text span { opacity: .94; }

.tg-announce-close {
  flex: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--tg-announce-fg);
  font-size: 23px;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 6px;
  opacity: .6;
  transition: opacity .15s ease, background .15s ease;
}
.tg-announce-close:hover { opacity: 1; background: rgba(255,255,255,.14); }
.tg-announce-close:focus-visible { outline: 2px solid var(--tg-announce-mark); outline-offset: 2px; opacity: 1; }

@media (max-width: 720px) {
  .tg-announce-inner { padding-block: 13px; gap: 10px; align-items: flex-start; }
  .tg-announce-text { font-size: 14.5px; text-align: left; justify-content: flex-start; }
  .tg-announce-lead { font-size: 16px; }
  .tg-announce-close { margin-top: -2px; }
}