@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..900&family=Space+Grotesk:wght@400;500;700&display=swap');

/* ==========================================================================
   TG MEDIA — FRONT PAGE  ([tg_component id="home/main"])

   Endless look: stark white paper, near-black ink, static film grain, huge
   Archivo 900 italic display type, square corners, monochrome except the one
   chromatic hologram accent.

   SCOPING RULE — every selector in this file starts with #tg-home. Nothing
   here may touch *, html, body, bare img/a/h1-h6 or ::selection at global
   scope: global CSS from a component once made the WordPress header menu
   unclickable. The design tokens live on #tg-home rather than :root for the
   same reason — they cannot collide with the theme's own variables.

   The page background is NOT set here. It is an inline <style> at the top of
   index.html, on purpose: an inline block comes after the theme's stylesheets
   in document order, which is the only reason it wins.
   ========================================================================== */

#tg-home {
  /* ---- ink & paper ---- */
  --ink: #0a0a0a;
  --ink-mute: #5c5c5c;   /* readable gray — 6.7:1 on white. Use for body copy. */
  --ink-soft: #6b6b6b;   /* 5.3:1 on white: the lightest gray small text may use */
  --paper: #ffffff;
  --paper-dim: #f4f4f2;
  --hairline: #e6e6e6;
  --rule: #cfcfcf;

  /* ---- THE CHROMATIC / HOLOGRAM SYSTEM ----------------------------------
     A real hologram photo hosted on the site, layered OVER a CSS gradient so
     the design never breaks if the image is unreachable.
     --holo-stack      surfaces (buttons, strips)
     --holo-stack-ink  small accents (<=14px): photo multiplied over metallic
                       gray, so all colour comes from the photo, never a
                       rainbow. Image missing -> clean metallic gray. */
  --holo-img: url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif');
  --holo: linear-gradient(100deg, #ffd6e8 0%, #ffe9d6 20%, #fdffd6 40%, #d6ffe4 60%, #d6ecff 80%, #e6d6ff 100%);
  --holo-metal: linear-gradient(120deg, #c7ccd6 0%, #a9b2bf 45%, #d3cbd8 100%);
  --holo-stack: var(--holo-img), var(--holo);
  --holo-stack-ink: var(--holo-img), var(--holo-metal);

  /* ---- type ---- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;
  --line-hair: rgba(0, 0, 0, 0.13);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.76, 0, 0.24, 1);

  /* ---- spacing scale: 4px base ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-sec: clamp(56px, 9vw, 120px);   /* rhythm between sections */
}

/* --------------------------------------------------------------------------
   SCOPED RESET
   -------------------------------------------------------------------------- */
#tg-home, #tg-home *, #tg-home *::before, #tg-home *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#tg-home {
  display: block;
  position: relative;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#tg-home ::selection { background: var(--ink); color: var(--paper); }

#tg-home img, #tg-home svg { display: block; max-width: 100%; }

#tg-home a { color: inherit; text-decoration: none; }

#tg-home button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

#tg-home ol, #tg-home ul { list-style: none; }

/* One visible focus style for everything interactive. Never removed. */
#tg-home a:focus-visible,
#tg-home button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Controls are not selectable text — fast clicks were highlighting labels. */
#tg-home .tgh-q { -webkit-user-select: none; user-select: none; }

/* Centered column, matching every other TG page. overflow-x: clip is the
   safety net against any single element pushing the page sideways; it is on
   the wrapper, not on #tg-home, so it can never clip the fixed grain/cursor. */
#tg-home .tgh-wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 40px);
  overflow-x: clip;
}

/* ==========================================================================
   FILM GRAIN — static. NEVER animated.
   ========================================================================== */
#tg-home .tgh-grain {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: 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");
}

/* Slow shimmer for chromatic SURFACES only. */
@keyframes tgh-holo-drift {
  0%   { background-position: 0% 50%, 0% 50%; }
  100% { background-position: 100% 50%, 100% 50%; }
}

/* ==========================================================================
   CUSTOM CURSOR — desktop only.
   Both elements are display:none !important until script.js adds
   .tgh-cursor-on (fine pointer + no reduced-motion). The !important is the
   overlay-safety rule from the design system: a fixed element that is not in
   use must be unambiguously gone even if an optimizer strips a rule. They
   also carry pointer-events:none at all times.
   ========================================================================== */
#tg-home .tgh-cur-dot,
#tg-home .tgh-cur-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 3000;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  display: none !important;
}
#tg-home .tgh-cur-dot {
  width: 7px; height: 7px;
  background: #ffffff;
  transform: translate(-50%, -50%);
}
#tg-home .tgh-cur-ring {
  width: 34px; height: 34px;
  border: 1px solid #ffffff;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out), background-color 0.28s;
}
#tg-home.tgh-cursor-on .tgh-cur-dot { display: block !important; }
#tg-home.tgh-cursor-on .tgh-cur-ring { display: flex !important; }

#tg-home .tgh-cur-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;      /* difference-blend keeps this visible on any background */
  opacity: 0;
  transition: opacity 0.2s;
}
#tg-home .tgh-cur-ring.is-active { width: 62px; height: 62px; background: #ffffff; }
#tg-home .tgh-cur-ring.is-active .tgh-cur-label { opacity: 1; }
#tg-home .tgh-cur-ring.is-down { width: 26px; height: 26px; }

/* Hide the native cursor ONLY once the custom one is confirmed running, and
   only inside this component. Never on body. */
@media (hover: hover) and (pointer: fine) {
  #tg-home.tgh-cursor-on,
  #tg-home.tgh-cursor-on a,
  #tg-home.tgh-cursor-on button { cursor: none; }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
#tg-home .tgh-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
#tg-home .tgh-reveal.tgh-in { opacity: 1; transform: none; }

/* small, consistent stagger per group */
#tg-home .tgh-h1-line:nth-child(2) { transition-delay: 0.09s; }
#tg-home .tgh-h1-line:nth-child(3) { transition-delay: 0.18s; }
#tg-home .tgh-fig:nth-child(3n + 2) { transition-delay: 0.07s; }
#tg-home .tgh-fig:nth-child(3n + 3) { transition-delay: 0.14s; }
#tg-home .tgh-qlist > li:nth-child(2) { transition-delay: 0.07s; }
#tg-home .tgh-qlist > li:nth-child(3) { transition-delay: 0.14s; }
#tg-home .tgh-qlist > li:nth-child(4) { transition-delay: 0.21s; }

/* ==========================================================================
   SHARED TYPE
   ========================================================================== */
#tg-home .tgh-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

#tg-home .tgh-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(34px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

#tg-home .tgh-sub {
  margin-top: var(--sp-3);
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--ink-mute);
}

#tg-home .tgh-sec { padding: var(--sp-sec) 0; }
#tg-home .tgh-sec-head { margin-bottom: clamp(28px, 4vw, 56px); }

/* ---- text link with a growing rule ---- */
#tg-home .tgh-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--ink);
  transition: box-shadow 0.4s var(--ease-out), color 0.3s;
}
#tg-home .tgh-link::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.45s var(--ease-out);
}
#tg-home .tgh-link:hover::after,
#tg-home .tgh-link:focus-visible::after { transform: translateX(6px); }

/* ==========================================================================
   LOAD-IN — the hero comes into focus once, the way a lens pulls focus.
   Pure CSS with fill-mode "backwards": the end state is simply no rule at
   all, so if an animation never runs the page is still fully visible.
   ========================================================================== */
@keyframes tgh-focus {
  from { filter: blur(30px); opacity: 0; transform: scale(1.02); }
}
@keyframes tgh-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
}
@keyframes tgh-from-right {
  from { opacity: 0; transform: translate3d(60px, 0, 0); }
}
@keyframes tgh-fade {
  from { opacity: 0; }
}

/* ==========================================================================
   1. HERO — liquid chrome behind poster type
   ========================================================================== */
/* isolation + a solid paper fill are what make the headline's difference
   blend work: it inverts against this box (paper and metal), nothing else. */
#tg-home .tgh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: calc(100vh - 72px);       /* 72px = the site header bar */
  min-height: calc(100svh - 72px);
  background: var(--paper);
}

#tg-home .tgh-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#tg-home .tgh-metal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: tgh-fade 2.6s var(--ease-out) 0.2s backwards;
}
/* The frame sets where the metal lives and how big it is. The canvas covers
   the whole hero so a dragged droplet can travel anywhere inside it. */
#tg-home .tgh-metal-frame {
  position: absolute;
  top: 4%;
  right: 2%;
  width: 62%;
  height: 84%;
}

/* No z-index here, on purpose: a z-index would wall the headline off in its
   own layer, and its difference blend would have no paper to invert against
   (the type vanishes). Being positioned and later in the markup is enough to
   sit above the metal. */
#tg-home .tgh-hero-in {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 2.4vw, 32px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 40px) clamp(16px, 3vw, 40px) clamp(24px, 4vw, 48px);
  pointer-events: none;                 /* droplets underneath stay grabbable */
}
#tg-home .tgh-hero-in a,
#tg-home .tgh-hero-in button,
#tg-home .tgh-sub { pointer-events: auto; }

#tg-home .tgh-h1 {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  /* sized so the longest line ("FOR EVERYONE", about 8.3em) never wraps */
  font-size: clamp(38px, min(10.4vw, 18.5vh), 164px);
  line-height: 0.86;
  white-space: nowrap;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-user-select: none;
  user-select: none;
}
/* The difference blend (ink on paper, paper on chrome) sits on each line,
   not on .tgh-h1, so SOLUTIONS can drop it when it turns to hologram.
   will-change keeps every line on its own compositing layer for good:
   iPhone Safari only blends a layer against the WebGL metal, and once the
   blur-in animation ended it flattened the lines and they stayed plain
   white - invisible on the paper. Do not remove it. */
#tg-home .tgh-h1-line {
  display: block;
  mix-blend-mode: difference;
  will-change: transform;
  animation: tgh-focus 2.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
#tg-home .tgh-h1-line:nth-child(2) { animation-delay: 0.12s; }
#tg-home .tgh-h1-line:nth-child(3) { animation-delay: 0.24s; }
/* SOLUTIONS is two stacked copies inside .tgh-h1-split:
   .tgh-holo  underneath - the design system's holo-stack-vivid recipe, the
              same as "media" on the events page: the hosted hologram photo
              over its gradient fallback, clipped to the letters. Invisible
              until hover (mouse) or tap (touch; script.js section 11 toggles
              .is-chrome on the wrapper), then it fades up.
   .tgh-ghost on top - the outline, still on the difference blend, so it
              stays dark on the paper and light over the metal whether or
              not the hologram is showing.
   The wrapper itself must not blend, animate, filter or set will-change:
   any of those would wall the outline's blend off from the page. */
#tg-home .tgh-h1-split {
  position: relative;
  width: fit-content;
  mix-blend-mode: normal;
  will-change: auto;
  animation: none;
  pointer-events: auto;                 /* hover / tap target; the rest of the hero stays click-through */
  cursor: default;
}
#tg-home .tgh-ghost {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  mix-blend-mode: difference;
  will-change: transform;
  animation: tgh-focus 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards;
}
#tg-home .tgh-holo {
  position: absolute;
  inset: 0;
  display: block;
  color: #0a0a0a;                       /* no background-clip: the fill just stays ink */
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  #tg-home .tgh-holo {
    color: transparent;
    background-image: url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif'), linear-gradient(100deg, #ff7fc3 0%, #ffab66 20%, #e3c93b 40%, #35d98c 60%, #4fa9ff 80%, #b06cff 100%);
    background-size: 220% 220%, 100% 100%;
    background-position: 0% 50%, 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: tgh-holo-drift 9s ease-in-out infinite alternate;
    animation-play-state: paused;
  }
}
#tg-home .tgh-h1-split.is-chrome .tgh-holo {
  opacity: 1;
  filter: blur(0);
  animation-play-state: running;
}
@media (hover: hover) and (pointer: fine) {
  #tg-home .tgh-h1-split:hover .tgh-holo {
    opacity: 1;
    filter: blur(0);
    animation-play-state: running;
  }
}

#tg-home .tgh-rise { animation: tgh-up 1.2s var(--ease-out) 0.7s backwards; }
#tg-home .tgh-hero-left .tgh-sub.tgh-rise { animation-delay: 0.9s; }
#tg-home .tgh-mag-wrap.tgh-rise { animation-delay: 1.05s; }

/* ---------- Eyebrow row: label left, EN/ES switch far right ---------- */
#tg-home .tgh-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#tg-home .tgh-hero-top .tgh-eyebrow { margin: 0; min-width: 0; }

/* EN / ES switch — same pattern as the gallery's .tg-lang-switch */
#tg-home .tgh-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-right: -6px;                   /* optical: button padding, not the text, meets the edge */
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
#tg-home .tgh-lang-btn {
  background: none;
  border: none;
  padding: 8px 6px;                     /* generous hit area */
  font: inherit;
  color: var(--ink-mute);
  letter-spacing: inherit;
  position: relative;
  cursor: pointer;
  transition: color 0.25s;
}
#tg-home .tgh-lang-btn.is-active { color: var(--ink); }
#tg-home .tgh-lang-btn.is-active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 3px;
  background-image: var(--holo-stack-ink);
  background-size: 500% 500%, 100% 100%;
  background-position: 35% 45%;
  background-blend-mode: multiply;
  filter: saturate(1.9) contrast(1.2);
}
#tg-home .tgh-lang-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The chosen language stays short; the other spells itself out, its
   letters unfurling one by one and folding back when it is picked. */
#tg-home .tgh-lx { display: inline-flex; align-items: center; }
#tg-home .tgh-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-home .tgh-lx-in {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.25em 0;
  margin: -0.25em 0;
}
#tg-home .tgh-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-home .tgh-lang-btn:not(.is-active) .tgh-lx-tail {
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#tg-home .tgh-lang-btn:not(.is-active) .tgh-lx-in > span {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
  transition-delay: calc(120ms + var(--i) * 22ms);
}
@media (prefers-reduced-motion: reduce) {
  #tg-home .tgh-lx-tail, #tg-home .tgh-lx-in > span { transition: none; }
}

#tg-home .tgh-hero-foot {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: end;
}
#tg-home .tgh-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 32px);
}
#tg-home .tgh-hero-left .tgh-sub {
  margin-top: 0;
  max-width: 38ch;
  color: var(--ink);
}

/* ---- the magnetic button. The wrapper animates in; the link itself is
   moved by script.js (magnet + spring), so the two never fight over
   transform. Round on purpose: it is a dot, and it was asked for. ---- */
#tg-home .tgh-mag-wrap { display: inline-block; }
#tg-home .tgh-mag {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  min-height: 64px;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
#tg-home .tgh-mag-dot {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* hologram foil wells up from the centre on hover — the one accent here */
#tg-home .tgh-mag-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: var(--holo-stack);
  background-size: 220% 220%, 100% 100%;
  background-position: 0% 50%;
  transform: scale(0);
  transition: transform 0.6s var(--ease-out);
  animation: tgh-holo-drift 9s ease-in-out infinite alternate;
}
#tg-home .tgh-mag-dot svg {
  position: relative;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--ease-out);
}
#tg-home .tgh-mag-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  box-shadow: inset 0 -2px 0 0 transparent;
  transition: box-shadow 0.4s var(--ease-out);
}
#tg-home .tgh-mag:hover .tgh-mag-dot::before,
#tg-home .tgh-mag:focus-visible .tgh-mag-dot::before { transform: scale(1); }
#tg-home .tgh-mag:hover .tgh-mag-dot svg,
#tg-home .tgh-mag:focus-visible .tgh-mag-dot svg { transform: translate(2px, -2px); }
#tg-home .tgh-mag:hover .tgh-mag-label,
#tg-home .tgh-mag:focus-visible .tgh-mag-label { box-shadow: inset 0 -2px 0 0 var(--ink); }
#tg-home .tgh-mag:active .tgh-mag-dot { transform: scale(0.94); }

/* ---- the people contact sheet sits below the hero, leaving the chrome clear ---- */
#tg-home .tgh-people {
  padding: 8px 0;
  background: var(--ink);
}
#tg-home .tgh-photo-rows {
  display: block;
  min-width: 0;
  overflow: hidden;
  /* the script drags it sideways; the page still scrolls up and down */
  touch-action: pan-y;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#tg-home:not(.tgh-cursor-on) .tgh-photo-rows.is-dragging { cursor: grabbing; }
#tg-home .tgh-photo-row { display: block; overflow: hidden; }
#tg-home .tgh-photo-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
#tg-home .tgh-photo-set {
  display: flex;
  flex: none;
  gap: 8px;
  padding-right: 8px;
}
#tg-home .tgh-photo-set img {
  flex: none;
  width: clamp(150px, 16vw, 220px);
  height: clamp(68px, 8vw, 104px);
  object-fit: cover;
  object-position: center 35%;
}
@media (hover: hover) and (pointer: fine) {
  #tg-home .tgh-photo-set img { filter: grayscale(1) contrast(1.04); transition: filter 0.7s ease; }
  #tg-home .tgh-photo-rows:hover .tgh-photo-set img,
  #tg-home .tgh-photo-rows:focus-visible .tgh-photo-set img { filter: grayscale(0) contrast(1); }
}
#tg-home .tgh-photo-rows:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }

@media (max-width: 899px) {
  #tg-home .tgh-metal-frame { top: 10%; right: -6%; width: 100%; height: 52%; }
  #tg-home .tgh-h1 { align-self: start; margin-top: clamp(24px, 8vh, 80px); }
}
/* Phone: the headline keeps its three lines ("FOR EVERYONE" stays on one),
   sized so that longest line fits the screen, and the metal is held up in the
   headline's band, clear of the paragraph below it. The hero is only as tall
   as its content here, so the paragraph sits right under the title instead of
   being pushed to the bottom of a full-screen box. */
@media (max-width: 560px) {
  #tg-home .tgh-hero { min-height: 0; }
  #tg-home .tgh-hero-in { grid-template-rows: auto auto auto; }
  #tg-home .tgh-h1 { font-size: 10.6vw; white-space: nowrap; margin-top: 28px; }
  #tg-home .tgh-metal-frame { top: 52px; right: -8%; width: 80%; height: 190px; }
  #tg-home .tgh-hero-foot { margin-top: 16px; }
  #tg-home .tgh-photo-set img { width: 150px; height: 68px; }
  #tg-home .tgh-ghost { -webkit-text-stroke-width: 1.5px; }
  /* The name sits level with the EN / ES switch; the place drops to the
     line under it. */
  #tg-home .tgh-hero-top { align-items: baseline; }
  #tg-home .tgh-eyebrow-place { display: block; margin-top: 4px; }
  #tg-home .tgh-hero-top .tgh-eyebrow { white-space: nowrap; }
}
/* ==========================================================================
   3. MY SERVICES — 3D tilt cards, one per service.
   script.js section 10 writes --rx / --ry (degrees) on each .tgh-card from a
   spring, so the card leans toward the pointer and settles back. Depth is
   plain CSS: every layer inside the face has its own translateZ. Nothing
   between .tgh-card and a layer may set overflow, filter or opacity < 1 —
   any of those flattens the 3D and the layers stop floating.
   ========================================================================== */
#tg-home .tgh-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
#tg-home .tgh-card-stage { perspective: 1000px; }
#tg-home .tgh-card {
  position: relative;
  display: block;
  aspect-ratio: 10 / 13;
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--line-hair);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  will-change: transform;
  touch-action: pan-y;
}
#tg-home .tgh-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

#tg-home .tgh-card-face {
  position: absolute;
  inset: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  transform: translateZ(50px);
  transform-style: preserve-3d;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.18);
}
#tg-home .tgh-card-art,
#tg-home .tgh-card-shade {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
#tg-home .tgh-card-art .tgh-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translateZ(var(--z, 0px));
}
#tg-home .tgh-card-shade {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 45%, rgba(0, 0, 0, 0.6));
  transform: translateZ(1px);
  pointer-events: none;
}

#tg-home .tgh-card-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  transform-style: preserve-3d;
}
#tg-home .tgh-card-text { display: block; transform-style: preserve-3d; }
#tg-home .tgh-card-t {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  transform: translateZ(50px);
}
#tg-home .tgh-card-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transform: translateZ(60px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s;
}
#tg-home .tgh-card:hover .tgh-card-arrow,
#tg-home .tgh-card:focus-visible .tgh-card-arrow {
  background: rgba(255, 255, 255, 0.3);
  transform: translateZ(60px) scale(1.1) rotate(2.5deg);
}

@media (max-width: 1100px) {
  #tg-home .tgh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#tg-home .tgh-card.is-pressed .tgh-card-arrow {
  background: rgba(255, 255, 255, 0.3);
  transform: translateZ(60px) scale(1.15) rotate(8deg);
}
/* Phones: a 2 x 2 grid of shorter cards instead of four screen-tall ones.
   The title gets the full width and the arrow drops to the bottom corner.
   On touch, script.js section 10 leans the cards as they scroll past and
   squishes one when it is pressed. */
@media (max-width: 560px) {
  #tg-home .tgh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #tg-home .tgh-card-stage { perspective: 700px; }
  #tg-home .tgh-card { aspect-ratio: 4 / 5; }
  #tg-home .tgh-card-face { inset: 8px; padding: 10px; transform: translateZ(30px); }
  #tg-home .tgh-card-top { flex: 1; flex-direction: column; justify-content: space-between; gap: 8px; }
  #tg-home .tgh-card-t { font-size: clamp(15px, 4.4vw, 19px); letter-spacing: -0.02em; transform: translateZ(30px); }
  #tg-home .tgh-card-arrow { align-self: flex-end; width: 30px; height: 30px; transform: translateZ(40px); }
  #tg-home .tgh-card-arrow svg { width: 15px; height: 15px; }
  #tg-home .tgh-card.is-pressed .tgh-card-arrow { transform: translateZ(40px) scale(1.15) rotate(8deg); }
}
/* The heading sits above the cards, so a card leaning toward the viewer can
   never draw over it. */
#tg-home .tgh-services .tgh-sec-head { position: relative; z-index: 2; }
#tg-home .tgh-services .tgh-cards { position: relative; z-index: 1; }
/* Touch screens, where the cards lean with the scroll: Safari flickers 3D
   layers that have a visible back side and blurred glass inside a tilted
   card. Hiding the back sides and dropping the arrow's blur (it is barely
   visible over the photo) stops the flicker without changing the lean. */
@media (hover: none), (pointer: coarse) {
  #tg-home .tgh-card,
  #tg-home .tgh-card-face,
  #tg-home .tgh-card-art .tgh-layer,
  #tg-home .tgh-card-shade,
  #tg-home .tgh-card-t,
  #tg-home .tgh-card-arrow {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #tg-home .tgh-card-arrow { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Safari on phones decides frame by frame which floating layer is in
     front, and while a card is tilted it sometimes puts the photo over the
     title and arrow, so they blink in and out. Here the photo, title and
     arrow are drawn as one flat picture in page order (title always on top),
     and that picture still floats off the card frame and tilts with it. */
  #tg-home .tgh-card-face,
  #tg-home .tgh-card-art,
  #tg-home .tgh-card-top,
  #tg-home .tgh-card-text { transform-style: flat; }
}

/* ==========================================================================
   4. SELECTED WORK — parallax photo band
   Photos are grayscale at rest and bloom into colour on hover, but ONLY on
   devices that can hover. Touch devices get full colour immediately, since
   they would otherwise never see it.
   ========================================================================== */
#tg-home .tgh-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 26px);
  align-items: start;
}
#tg-home .tgh-fig { display: block; }
#tg-home .tgh-ph {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--paper-dim);
}
/* NOTE: no transition on .tgh-ph — the parallax loop writes its transform
   every frame, and a transition on the same property fights it. */
#tg-home .tgh-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter 0.7s ease;
}
#tg-home .tgh-r34 .tgh-ph { aspect-ratio: 3 / 4; }
#tg-home .tgh-r45 .tgh-ph { aspect-ratio: 4 / 5; }
#tg-home .tgh-r11 .tgh-ph { aspect-ratio: 1 / 1; }
#tg-home .tgh-r43 .tgh-ph { aspect-ratio: 4 / 3; }
#tg-home .tgh-fig figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (hover: hover) and (pointer: fine) {
  #tg-home .tgh-fig img { filter: grayscale(1) contrast(1.04); }
  #tg-home .tgh-fig:hover img { filter: grayscale(0) contrast(1); transform: scale(1.035); }
}
/* the staggered drop that makes the band read as three columns */
@media (min-width: 720px) {
  #tg-home .tgh-drop { margin-top: clamp(24px, 5vw, 72px); }
}

#tg-home .tgh-work-more { margin-top: clamp(28px, 4vw, 52px); }
/* ==========================================================================
   5. GET A QUOTE — four tiles. Hover inverts the tile to ink.
   The same list is copied into the quote panel (.tgh-dlg) by script.js.
   ========================================================================== */
#tg-home .tgh-quote { border-top: 1px solid var(--ink); }

#tg-home .tgh-qlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
#tg-home .tgh-qlist > li { display: block; }
#tg-home .tgh-q {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  height: 100%;
  min-height: clamp(160px, 18vw, 240px);
  padding: clamp(18px, 2.4vw, 32px);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  isolation: isolate;
}
#tg-home .tgh-q::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.5s var(--ease-out);
}
#tg-home .tgh-q:hover::before,
#tg-home .tgh-q:focus-visible::before { transform: scaleY(1); transform-origin: bottom center; }
#tg-home .tgh-q-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  transition: color 0.35s ease;
}
#tg-home .tgh-q-word {
  align-self: end;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transition: color 0.35s ease, transform 0.5s var(--ease-out);
}
#tg-home .tgh-q-how {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.35s ease;
}
#tg-home .tgh-q-how::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.45s var(--ease-out);
}
#tg-home .tgh-q:hover .tgh-q-word,
#tg-home .tgh-q:focus-visible .tgh-q-word { color: var(--paper); transform: translateX(8px); }
#tg-home .tgh-q:hover .tgh-q-n,
#tg-home .tgh-q:focus-visible .tgh-q-n { color: rgba(255, 255, 255, 0.62); }
#tg-home .tgh-q:hover .tgh-q-how,
#tg-home .tgh-q:focus-visible .tgh-q-how { color: rgba(255, 255, 255, 0.82); }
#tg-home .tgh-q:hover .tgh-q-how::after,
#tg-home .tgh-q:focus-visible .tgh-q-how::after { transform: translateX(6px); }
#tg-home .tgh-q:focus-visible { outline: 2px solid var(--paper); outline-offset: -8px; }

#tg-home .tgh-call {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-6);
  margin-top: clamp(28px, 4vw, 52px);
}
#tg-home .tgh-call-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}
#tg-home .tgh-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  box-shadow: inset 0 -2px 0 0 transparent;
  transition: box-shadow 0.4s var(--ease-out);
}
#tg-home .tgh-tel:hover { box-shadow: inset 0 -3px 0 0 var(--ink); }

/* ==========================================================================
   QUOTE PANEL — a native <dialog>, so Escape, focus trapping and the
   background going inert come from the browser. It sits in the top layer,
   above the custom cursor, so the normal pointer comes back inside it.
   ========================================================================== */
#tg-home .tgh-dlg {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
  cursor: auto;
}
#tg-home .tgh-dlg a,
#tg-home .tgh-dlg button { cursor: pointer; }
#tg-home .tgh-dlg::backdrop {
  background: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#tg-home .tgh-dlg[open] { animation: tgh-up 0.55s var(--ease-out); }
#tg-home .tgh-dlg[open]::backdrop { animation: tgh-fade 0.4s ease; }

#tg-home .tgh-dlg-in { padding: clamp(18px, 3vw, 32px); }
#tg-home .tgh-dlg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
#tg-home .tgh-dlg-h {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
#tg-home .tgh-dlg-x {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  transition: background 0.3s, color 0.3s;
}
#tg-home .tgh-dlg-x:hover { background: var(--ink); color: var(--paper); }
#tg-home .tgh-dlg-x svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
/* inside the panel the tiles become a single column of rows */
#tg-home .tgh-dlg .tgh-qlist { grid-template-columns: 1fr; }
#tg-home .tgh-dlg .tgh-qlist > li { opacity: 1; transform: none; }
#tg-home .tgh-dlg .tgh-q {
  grid-template-columns: 2.6em minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px var(--sp-3);
  min-height: 0;
  padding: 16px 18px;
}
#tg-home .tgh-dlg .tgh-q-n { grid-row: 1 / span 2; padding-top: 6px; }
#tg-home .tgh-dlg .tgh-q-word { font-size: clamp(24px, 4vw, 32px); }
#tg-home .tgh-dlg-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}
#tg-home .tgh-dlg-call a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--ink);
}

/* ==========================================================================
   MOBILE — everything must work at 390px
   ========================================================================== */
@media (max-width: 719px) {
  #tg-home .tgh-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tg-home .tgh-fig figcaption { font-size: 10px; letter-spacing: 0.14em; }
}

@media (max-width: 700px) {
  #tg-home .tgh-qlist { grid-template-columns: 1fr; }
  #tg-home .tgh-q { min-height: 132px; }
}

@media (max-width: 420px) {
  #tg-home .tgh-eyebrow { font-size: 10px; letter-spacing: 0.24em; }
}

/* ==========================================================================
   REDUCED MOTION — nothing animates, everything is visible and usable.
   script.js also stops the metal and the magnet. Scoped to #tg-home.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #tg-home, #tg-home *, #tg-home *::before, #tg-home *::after {
    animation: none !important;
    transition: none !important;
  }
  #tg-home .tgh-reveal { opacity: 1 !important; transform: none !important; }
  #tg-home .tgh-ph { transform: none !important; }
  #tg-home .tgh-fig img { filter: none !important; transform: none !important; }
  #tg-home .tgh-cur-dot, #tg-home .tgh-cur-ring { display: none !important; }
  #tg-home .tgh-mag { transform: none !important; }
  #tg-home .tgh-card { transform: none !important; }
}