/* ============================================================
   TG MEDIA — SITE HEADER
   Endless look: white paper, ink type, one hologram accent.
   Everything is scoped under #tg-header except the one rule
   that hides the theme's own header.
   ============================================================ */

/* The theme's header is replaced by this one. */
.wp-site-blocks > header.wp-block-template-part { display: none !important; }

#tg-header {
  --h-ink: #0a0a0a;
  --h-paper: #ffffff;
  --h-mute: #5c5c5c;
  --h-soft: #6b6b6b;   /* 5.3:1 on white: the lightest gray small text may use */
  --h-line: rgba(0, 0, 0, 0.13);

  --h-holo-img: url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif');
  --h-holo-stack: var(--h-holo-img), linear-gradient(100deg, #ffd6e8 0%, #ffe9d6 20%, #fdffd6 40%, #d6ffe4 60%, #d6ecff 80%, #e6d6ff 100%);
  --h-holo-stack-ink: var(--h-holo-img), linear-gradient(120deg, #c7ccd6 0%, #a9b2bf 45%, #d3cbd8 100%);
  --h-holo-stack-vivid: var(--h-holo-img), linear-gradient(100deg, #ff7fc3 0%, #ffab66 20%, #e3c93b 40%, #35d98c 60%, #4fa9ff 80%, #b06cff 100%);
  --h-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --h-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --h-mono: 'SF Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;
  --h-ease: cubic-bezier(0.76, 0, 0.24, 1);
  --h-out: cubic-bezier(0.16, 1, 0.3, 1);

  --h-h: 72px;          /* bar height at rest */
  --h-gap: 10px;        /* inset once lifted */
  --h-lift-h: 58px;     /* bar height once lifted */
  /* Page edges, shared with the footer and every page: a 16-40px cushion,
     and content no wider than 1400px. The white bar still runs edge to
     edge; only what sits inside it stops at the content edge. */
  --h-max: 1400px;
  --h-edge: max(clamp(16px, 3vw, 40px), calc((100% - var(--h-max)) / 2));
  /* Once lifted, the floating bar (and the menu under it) spans the content
     width plus the same small overhang it has on a laptop. */
  --h-side: max(var(--h-gap), calc((100% - var(--h-max)) / 2 - clamp(16px, 3vw, 40px) + var(--h-gap)));
  --h-offset: calc(var(--tgh-top, 0px) + var(--wp-admin--admin-bar--height, 0px));

  position: sticky;
  top: var(--h-offset);
  z-index: 9990;
  height: var(--h-h);
  font-family: var(--h-display);
  color: var(--h-ink);
}

#tg-header *,
#tg-header *::before,
#tg-header *::after { box-sizing: border-box; margin: 0; padding: 0; }

#tg-header a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
#tg-header button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#tg-header a:focus-visible,
#tg-header button:focus-visible { outline: 2px solid var(--h-ink); outline-offset: 3px; }

/* ---------- accessibility: shared by every page (this file loads on all of them) ---------- */

/* Text for screen readers only. */
.tg-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Pause motion" (the switch in the menu) puts tg-still on <html>. Everything
   that animates jumps straight to its finished state and stays there. */
html.tg-still *,
html.tg-still *::before,
html.tg-still *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Skip link: hidden until it is tabbed to. The theme's own copy comes after
   this header in the page, too late to skip anything, so it is switched off. */
.wp-site-blocks > .skip-link { display: none !important; }
#tg-header .tgh-skip {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: var(--h-edge);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  background: var(--h-ink);
  color: var(--h-paper);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
#tg-header .tgh-skip:not(:focus) {
  width: 1px; height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
#tg-header .tgh-skip:focus-visible { outline-color: var(--h-paper); outline-offset: -5px; }

/* ---------- the bar ---------- */
#tg-header .tgh-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--h-h);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--h-edge);
  background: var(--h-paper);
  border: 1px solid transparent;
  border-bottom-color: var(--h-ink);
  transition: top 0.6s var(--h-ease), left 0.6s var(--h-ease), right 0.6s var(--h-ease),
              height 0.6s var(--h-ease), padding 0.6s var(--h-ease),
              border-color 0.6s var(--h-ease), background-color 0.4s linear;
}
#tg-header.is-lifted .tgh-bar,
#tg-header.is-open .tgh-bar {
  top: var(--h-gap); left: var(--h-side); right: var(--h-side);
  height: var(--h-lift-h);
  padding: 0 clamp(14px, 2.2vw, 28px);
  border-color: var(--h-ink);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#tg-header.is-open .tgh-bar { background: var(--h-paper); }

/* wordmark: TG MEDIA rolls over to THOMAS GARDEA while the menu is open */
#tg-header .tgh-logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -0.04em;
  line-height: 1;
}
#tg-header .tgh-roll {
  display: inline-grid;
  height: 1.05em;
  overflow: hidden;
  padding-right: 0.12em; /* italic overhang */
}
#tg-header .tgh-roll > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: transform 0.7s var(--h-ease);
}
#tg-header .tgh-roll > span + span { transform: translateY(105%); }
#tg-header.is-open .tgh-roll > span:first-child { transform: translateY(-105%); }
#tg-header.is-open .tgh-roll > span + span { transform: translateY(0); }

/* MENU / CLOSE */
#tg-header .tgh-toggle {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 6px;
  font-family: var(--h-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
#tg-header .tgh-toggle-word { display: inline-block; min-width: 6ch; text-align: right; }
#tg-header .tgh-icon { position: relative; width: 18px; height: 10px; }
#tg-header .tgh-icon i {
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--h-ease), top 0.5s var(--h-ease);
}
#tg-header .tgh-icon i:first-child { top: 0; }
#tg-header .tgh-icon i:last-child { top: 8.5px; }
#tg-header.is-open .tgh-icon i:first-child { top: 4.25px; transform: rotate(45deg); }
#tg-header.is-open .tgh-icon i:last-child { top: 4.25px; transform: rotate(-45deg); }

/* call + quote */
#tg-header .tgh-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
#tg-header .tgh-call,
#tg-header .tgh-cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* client sign in: a square with a person icon; the word slides out on hover */
#tg-header .tgh-signin {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--h-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
#tg-header .tgh-signin-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M2.5 15c0-3.2 2.5-5.3 5.5-5.3s5.5 2.1 5.5 5.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M2.5 15c0-3.2 2.5-5.3 5.5-5.3s5.5 2.1 5.5 5.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* signed in: solid figure in the hologram foil (small-size recipe: photo multiplied over metal) */
#tg-header.is-signed-in .tgh-signin { padding: 0 12px; }
#tg-header.is-signed-in .tgh-signin-icon {
  width: 18px;
  height: 18px;
  background-color: transparent;
  background-image: var(--h-holo-stack-ink);
  background-size: 400% 400%, 100% 100%;
  background-position: 30% 40%, 0 0;
  background-blend-mode: multiply;
  filter: saturate(2.2) contrast(1.3);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='4.8' r='3.4'/%3E%3Cpath d='M1.7 16c0-3.8 2.8-6.4 6.3-6.4s6.3 2.6 6.3 6.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='4.8' r='3.4'/%3E%3Cpath d='M1.7 16c0-3.8 2.8-6.4 6.3-6.4s6.3 2.6 6.3 6.4z'/%3E%3C/svg%3E");
}
/* signed in: the icon's foil drifts, and the border is foil too (a ring
   masked out of a foil layer, since a border can't carry the photo) */
#tg-header.is-signed-in .tgh-signin-icon { animation: tgh-drift 7s ease-in-out infinite alternate; }
#tg-header.is-signed-in .tgh-signin { position: relative; border-color: transparent; }
#tg-header.is-signed-in .tgh-signin::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 2px;
  background-image: var(--h-holo-stack-ink);
  background-size: 400% 400%, 100% 100%;
  background-blend-mode: multiply;
  filter: saturate(2.2) contrast(1.3);
  animation: tgh-drift 7s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* the owner: an open door */
#tg-header.is-backrooms .tgh-signin-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 1.6h7.3v12.9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M1.5 15.2h13' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.2 1.2l6 1.9v12.4l-6-1.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 1.6h7.3v12.9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M1.5 15.2h13' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.2 1.2l6 1.9v12.4l-6-1.3z'/%3E%3C/svg%3E");
}
#tg-header .tgh-signin[aria-current="page"] { background: var(--h-ink); color: var(--h-paper); }
#tg-header.is-signed-in .tgh-signin[aria-current="page"] { background: none; color: inherit; }

/* several doors: a list under the button, same look as the quote list */
#tg-header .tgh-swrap { position: relative; }
#tg-header .tgh-dmenu:empty { display: none; }
#tg-header.is-doors-open .tgh-dmenu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.55s var(--h-out), visibility 0s;
}
#tg-header .tgh-dmenu a[aria-current="page"] { background-image: var(--h-holo-stack); }
/* the list is a continuation of the open button: it takes the button's width */
#tg-header .tgh-dmenu { min-width: 100%; }
#tg-header .tgh-dmenu a { padding-left: 16px; }
@media (hover: hover) and (min-width: 701px) {
  #tg-header.is-doors-open .tgh-signin-label { grid-template-columns: 1fr; }
}
#tg-header .tgh-signin-label {
  display: inline-grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 0.45s var(--h-ease);
}
#tg-header .tgh-signin-label > span { min-width: 0; overflow: hidden; }
#tg-header .tgh-signin-label > span > span { display: inline-block; padding-left: 11px; }
@media (hover: hover) and (min-width: 701px) {
  #tg-header .tgh-signin:hover .tgh-signin-label { grid-template-columns: 1fr; transition-timing-function: var(--h-out); }
}
#tg-header .tgh-signin:focus-visible .tgh-signin-label { grid-template-columns: 1fr; }
#tg-header .tgh-call {
  border: 1px solid var(--h-ink);
  transition: background-color 0.3s, color 0.3s;
}
#tg-header .tgh-call:hover { background: var(--h-ink); color: var(--h-paper); }
#tg-header .tgh-cta {
  border: 1px solid var(--h-ink);
  background-image: var(--h-holo-stack);
  background-size: 220% 220%, 100% 100%;
  background-position: 0% 50%, 0 0;
  animation: tgh-drift 9s ease-in-out infinite alternate;
  transition: transform 0.35s var(--h-out);
}
#tg-header .tgh-cta:hover { transform: translateY(-2px); }
#tg-header .tgh-cta { gap: 10px; }
#tg-header .tgh-caret {
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--h-ease), margin 0.4s var(--h-ease);
}
#tg-header.is-quote-open .tgh-caret { transform: rotate(225deg); margin-top: 3px; }

/* quote submenu */
#tg-header .tgh-qwrap { position: relative; }
#tg-header .tgh-qmenu,
#tg-header .tgh-dmenu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100%;
  width: max-content;
  margin-top: 8px;
  list-style: none;
  background: var(--h-paper);
  border: 1px solid var(--h-ink);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.45s var(--h-ease), visibility 0s linear 0.45s;
}
/* keeps the hover alive across the gap between button and list */
#tg-header .tgh-qmenu::before,
#tg-header .tgh-dmenu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 9px; }
#tg-header.is-quote-open .tgh-qmenu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.55s var(--h-out), visibility 0s;
}
#tg-header .tgh-qmenu li + li,
#tg-header .tgh-dmenu li + li { border-top: 1px solid var(--h-line); }
#tg-header .tgh-qmenu a,
#tg-header .tgh-dmenu a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 22px 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  background-size: 220% 220%, 100% 100%;
  transition: padding 0.35s var(--h-out);
}
#tg-header .tgh-qmenu .tgh-num,
#tg-header .tgh-dmenu .tgh-num { width: auto; padding-top: 0; font-size: 10px; }
#tg-header .tgh-qmenu a:hover,
#tg-header .tgh-qmenu a:focus-visible,
#tg-header .tgh-dmenu a:hover,
#tg-header .tgh-dmenu a:focus-visible {
  background-image: var(--h-holo-stack);
  animation: tgh-drift 9s ease-in-out infinite alternate;
  padding-left: 22px;
  outline-offset: -3px;
}

@keyframes tgh-drift {
  0%   { background-position: 0% 50%, 0 0; }
  100% { background-position: 100% 50%, 0 0; }
}

/* ---------- the shade behind the menu ---------- */
#tg-header .tgh-shade {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(10, 10, 10, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--h-ease), visibility 0s linear 0.6s;
}
#tg-header.is-open .tgh-shade {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--h-ease), visibility 0s;
}

/* ---------- the panel ---------- */
#tg-header .tgh-panel {
  position: fixed;
  z-index: 2;
  top: calc(var(--h-offset) + var(--h-gap) + var(--h-lift-h) + 8px);
  left: var(--h-side);
  right: var(--h-side);
  max-height: calc(100dvh - var(--h-offset) - var(--h-gap) * 2 - var(--h-lift-h) - 8px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.5vw, 56px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--h-paper);
  border: 1px solid var(--h-ink);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.55s var(--h-ease), visibility 0s linear 0.55s;
}
#tg-header .tgh-panel::before {  /* static film grain */
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--h-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
#tg-header.is-open .tgh-panel {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.8s var(--h-ease) 0.1s, visibility 0s;
}

/* big links, rising out of their own masks one after another */
#tg-header .tgh-nav { position: relative; align-self: start; container-type: inline-size; }
#tg-header .tgh-links { list-style: none; }
#tg-header .tgh-links li { overflow: hidden; padding-right: 0.2em; }
#tg-header .tgh-links a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  /* sized to its column so the longest word (PHOTOSHOOTS) always fits */
  font-size: clamp(30px, calc((100cqi - 48px) / 7.6), 96px);
  font-weight: 900;
  font-style: italic;
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  transform: translateY(105%);
  transition: transform 0.45s var(--h-ease);
}
#tg-header.is-open .tgh-links a {
  transform: translateY(0);
  transition: transform 0.9s var(--h-out) calc(0.3s + var(--i) * 0.07s);
}
#tg-header .tgh-num {
  flex: 0 0 auto;
  width: 3ch;
  padding-top: 0.9em;
  font-family: var(--h-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--h-soft);
  transition: opacity 0.3s;
}
#tg-header .tgh-word {
  display: inline-block;
  padding-right: 0.1em;
  transition: transform 0.55s var(--h-out), color 0.3s;
}

/* client portal: a quiet door under the page links, not another page */
#tg-header .tgh-portal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 460px;
  min-height: 56px;
  margin-top: clamp(22px, 2.6vw, 34px);
  padding: 0 18px;
  border: 1px solid var(--h-ink);
  background-size: 220% 220%, 100% 100%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s, transform 0.3s, padding 0.35s var(--h-out);
}
#tg-header.is-open .tgh-portal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s linear 0.6s, transform 0.9s var(--h-out) 0.6s, padding 0.35s var(--h-out);
}
#tg-header .tgh-portal-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
#tg-header .tgh-arrow {
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.35s var(--h-out);
}
#tg-header .tgh-portal:hover,
#tg-header .tgh-portal:focus-visible,
#tg-header .tgh-portal[aria-current="page"] {
  background-image: var(--h-holo-stack);
  animation: tgh-drift 9s ease-in-out infinite alternate;
  outline-offset: -3px;
}
#tg-header .tgh-portal:hover .tgh-arrow { transform: translateX(4px) rotate(45deg); }

/* the hologram square that slides to the pointed-at link */
#tg-header .tgh-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--h-ink);
  background-image: var(--h-holo-stack);
  background-size: 400% 400%, 100% 100%;
  background-position: 30% 40%, 0 0;
  opacity: 0;
  transform: translateY(var(--mark-y, 0px)) scale(0.4);
  transition: transform 0.55s var(--h-out), opacity 0.3s;
  pointer-events: none;
}
#tg-header.has-mark .tgh-mark {
  opacity: 1;
  transform: translateY(var(--mark-y, 0px)) scale(1);
}
#tg-header.is-open.has-mark .tgh-mark { transition: transform 0.55s var(--h-out), opacity 0.3s 0.8s; }
#tg-header .tgh-links a.is-marked .tgh-num { opacity: 0; }
#tg-header .tgh-links a.is-marked .tgh-word { transform: translateX(0.28em); }
#tg-header .tgh-links a.is-lit .tgh-word {
  /* photo multiplied over metal so the word reads as foil, not a pale wash */
  background-image: var(--h-holo-stack-ink);
  background-size: 180% 180%, 100% 100%;
  background-position: 20% 50%, 0 0;
  background-blend-mode: multiply;
  filter: saturate(2.2) contrast(1.3);
  -webkit-text-stroke: 1px var(--h-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* the heavy-outlined contact box */
#tg-header .tgh-box {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 3px solid var(--h-ink);
  background: var(--h-paper);
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s, transform 0.3s;
}
#tg-header.is-open .tgh-box {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s linear 0.55s, transform 0.9s var(--h-out) 0.55s;
}
#tg-header .tgh-kicker {
  display: block;
  font-family: var(--h-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--h-mute);
}
#tg-header .tgh-phone {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
#tg-header .tgh-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Phone and quotes are hidden in the menu while the top bar shows them;
   the "smaller screens" block below brings each back when the bar hides it. */
#tg-header .tgh-box-call,
#tg-header .tgh-box-quote { display: none; flex-direction: column; gap: 12px; }
#tg-header .tgh-qlist { list-style: none; border: 1px solid var(--h-ink); }
#tg-header .tgh-qlist li + li { border-top: 1px solid var(--h-line); }
#tg-header .tgh-qlist a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background-size: 220% 220%, 100% 100%;
  transition: padding 0.35s var(--h-out);
}
#tg-header .tgh-qlist .tgh-num { width: auto; padding-top: 0; font-size: 10px; }
#tg-header .tgh-qlist a:hover,
#tg-header .tgh-qlist a:focus-visible {
  background-image: var(--h-holo-stack);
  animation: tgh-drift 9s ease-in-out infinite alternate;
  padding-left: 22px;
  outline-offset: -3px;
}
#tg-header .tgh-lang {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--h-soft);
  user-select: none;
}
#tg-header .tgh-lang button {
  position: relative;
  min-width: 44px;
  height: 44px;
  letter-spacing: 0.14em;
  color: var(--h-soft);
}
#tg-header .tgh-lang button:first-child { text-align: left; min-width: 34px; }
#tg-header .tgh-lang > span { margin: 0 6px; } /* room for the spelled-out word */
#tg-header .tgh-lang button[aria-pressed="true"] { color: var(--h-ink); }
#tg-header .tgh-lang button[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 20px;
  height: 3px;
  transform: translateX(-50%);
  background-image: var(--h-holo-stack-ink);
  background-size: 400% 400%, 100% 100%;
  background-blend-mode: multiply;
  filter: saturate(2) contrast(1.25);
}
#tg-header .tgh-lang button:first-child[aria-pressed="true"]::after { left: 0; transform: none; }
/* language switch and the pause-motion switch sit together */
#tg-header .tgh-prefs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; }
#tg-header .tgh-motion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h-soft);
  user-select: none;
  transition: color 0.3s;
}
#tg-header .tgh-motion:hover { color: var(--h-ink); }
#tg-header .tgh-a11y {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h-soft);
  transition: color 0.3s;
}
#tg-header .tgh-a11y:hover,
#tg-header .tgh-a11y[aria-current="page"] { color: var(--h-ink); }
/* two bars while motion plays; a solid square once it is paused */
#tg-header .tgh-motion-icon {
  width: 10px; height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
#tg-header .tgh-motion[aria-pressed="true"] { color: var(--h-ink); }
#tg-header .tgh-motion[aria-pressed="true"] .tgh-motion-icon { background: currentColor; }
#tg-header .tgh-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--h-soft);
}

/* photo cards */
#tg-header .tgh-cards {
  align-self: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 16px);
}
#tg-header .tgh-card { display: flex; flex-direction: column; gap: 10px; }
#tg-header .tgh-frame {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f4f4f2;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.35s var(--h-ease);
}
#tg-header.is-open .tgh-frame { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--h-ease) 0.45s; }
#tg-header.is-open .tgh-card + .tgh-card .tgh-frame { transition-delay: 0.55s; }
#tg-header .tgh-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.4s var(--h-out);
}
#tg-header.is-open .tgh-frame img { transform: scale(1); }
#tg-header.is-open .tgh-card:hover .tgh-frame img { transform: scale(1.05); }
#tg-header .tgh-card .tgh-kicker { color: var(--h-ink); }
/* "See the work": two stacked photos, the top one fades in and out */
#tg-header .tgh-card-shuffle .tgh-frame { position: relative; }
#tg-header .tgh-card-shuffle .tgh-over {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s linear, transform 1.4s var(--h-out);
}
#tg-header .tgh-card-shuffle .tgh-over.is-shown { opacity: 1; }

/* ---------- wide screens: phone and quotes live in the top bar, so the
   middle box would be empty. Links take its width; language and tagline
   become a quiet strip along the bottom of the menu. ---------- */
@media (min-width: 901px) {
  #tg-header .tgh-panel {
    grid-template-columns: minmax(0, 2.25fr) minmax(0, 1.1fr);
    row-gap: clamp(28px, 3vw, 44px);
  }
  #tg-header .tgh-nav { grid-area: 1 / 1; }
  #tg-header .tgh-cards { grid-area: 1 / 2; }
  #tg-header .tgh-box {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--h-ink);
    background: none;
  }
  #tg-header .tgh-box .tgh-tag { order: -1; }
  #tg-header .tgh-lang button:last-child { min-width: 34px; text-align: right; }
}

/* ---------- smaller screens ---------- */
/* Below 1300px the right-hand group no longer fits beside a centred MENU,
   so the bar becomes: logo | sign in, phone, quote | menu. */
@media (max-width: 1300px) {
  #tg-header .tgh-bar { grid-template-columns: 1fr auto auto; column-gap: 6px; }
  #tg-header .tgh-actions { grid-area: 1 / 2; }
  #tg-header .tgh-toggle { grid-area: 1 / 3; justify-self: end; padding-left: 14px; }
}
@media (max-width: 900px) {
  #tg-header .tgh-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #tg-header .tgh-nav { grid-column: 1 / -1; }
  #tg-header .tgh-call { display: none; }
  #tg-header .tgh-box-call { display: flex; }
}
@media (max-width: 700px) {
  #tg-header { --h-h: 60px; --h-lift-h: 54px; --h-gap: 8px; }
  /* bar: logo | sign-in square | menu. Phone and quotes move into the menu. */
  #tg-header .tgh-qwrap { display: none; }
  #tg-header .tgh-box-quote { display: flex; }
  #tg-header .tgh-bar { column-gap: 0; }
  #tg-header .tgh-toggle { padding-left: 6px; }
  #tg-header .tgh-panel { grid-template-columns: minmax(0, 1fr); padding: 26px 20px 22px; gap: 26px; }
  #tg-header .tgh-cards { display: none; }
  #tg-header .tgh-links a { gap: 10px; }
  #tg-header .tgh-num { width: 2.6ch; padding-top: 0.75em; }
  #tg-header .tgh-mark { width: 16px; height: 16px; }
  #tg-header .tgh-portal { max-width: none; }
}
@media (max-width: 380px) {
  #tg-header .tgh-toggle { gap: 8px; padding-left: 6px; }
  #tg-header .tgh-toggle-word { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #tg-header *,
  #tg-header *::before,
  #tg-header *::after { transition: none !important; animation: none !important; }
}

/* ---------- EN/ES: the chosen language stays short; the other one
   spells itself out ("ENGLISH?" / "ESPAÑOL?"). Its extra letters
   unfurl out of the abbreviation one by one, and fold back in when
   that language is picked. Same pattern in every EN/ES switch. ---------- */
#tg-header .tg-lx { display: inline-flex; align-items: center; }
#tg-header .tg-lx-tail {
  display: inline-grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
#tg-header .tg-lx-in {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.25em 0;
  margin: -0.25em 0;
}
#tg-header .tg-lx-in > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(1em);
  filter: blur(3px);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.5, 0, 0.75, 0), filter 0.2s ease;
  transition-delay: calc((5 - var(--i)) * 22ms);
}
#tg-header .tgh-lang button:not([aria-pressed="true"]) .tg-lx-tail {
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#tg-header .tgh-lang button:not([aria-pressed="true"]) .tg-lx-in > span {
  opacity: 1;
  transform: none;
  filter: none;
  /* No transform here: letters appear in place, sharpening out of a blur. */
  transition: opacity 0.3s ease, filter 0.3s ease;
  transition-delay: calc(120ms + var(--i) * 22ms);
}
@media (prefers-reduced-motion: reduce) {
  #tg-header .tg-lx-tail, #tg-header .tg-lx-in > span { transition: none; }
}