/* ============================================================
   THOMAS GARDEA — PHOTOSHOOTS / PORTRAIT SESSIONS
   Component: photoshoots/main  ->  [tg_component id="photoshoots/main"]

   Same design language as components/events/middle: near-black ink
   on paper, the hologram photo as the accent (Tesla Blue only on the
   booking form, focus rings and small links), hard corners (radius 0),
   hairline rules, oversized uppercase display type, mono kickers,
   film grain. Everything is scoped under #tg-shoots so it cannot
   collide with the WordPress theme.

   Prefix: tgp-   Root: #tg-shoots

   Nothing here clips the page. The one rotated element (the service
   area marquee) is clipped by its own section instead of by the
   root, so the fixed-position pieces (timecode rail, cursor peek,
   lightbox) can live inside #tg-shoots and still inherit the tokens.
   ============================================================ */

#tg-shoots {

    /* ---- Colour ---- */
    --tgp-paper: #f6f6f4;
    --tgp-card: #ffffff;
    --tgp-ink: #0b0b0b;
    --tgp-muted: #5f5f5f;          /* body copy on paper, 5.9:1 */
    --tgp-dim: #6b6b6b;            /* micro labels on paper, 4.9:1 */
    --tgp-line: rgba(0, 0, 0, 0.13);      /* decorative hairline */
    --tgp-line-strong: rgba(0, 0, 0, 0.32); /* structural hairline */
    --tgp-line-ui: #6b6b6b;        /* borders that outline a control, 4.9:1 */
    --tgp-blue: #3E6AE1;           /* focus rings and the booking form only */
    --tgp-blue-ink: #2F55C0;       /* small blue text on paper, 6.1:1 */
    --tgp-blue-lite: #7E9BFF;      /* blue on the dark contact sheet, 7.4:1 */
    --tgp-blue-soft: rgba(62, 106, 225, 0.10);
    --tgp-red: #A0201A;            /* form errors on paper, 7.1:1 */

    /* ---- Chromatic accent: the site's hologram photo over a fallback,
       straight from TG-DESIGN-SYSTEM.md. Never a hand-made gradient. ---- */
    --tgp-holo-img: url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif');
    --tgp-holo: linear-gradient(100deg, #ffd6e8 0%, #ffe9d6 20%, #fdffd6 40%, #d6ffe4 60%, #d6ecff 80%, #e6d6ff 100%);
    --tgp-holo-metal: linear-gradient(120deg, #c7ccd6 0%, #a9b2bf 45%, #d3cbd8 100%);
    --tgp-holo-stack: var(--tgp-holo-img), var(--tgp-holo);
    --tgp-holo-stack-ink: var(--tgp-holo-img), var(--tgp-holo-metal);

    /* ---- Page edges: the same 16-40px side cushion and 1400px content
       width as the header, footer and every other TG page ---- */
    --tgp-gut: clamp(16px, 3vw, 40px);
    --tgp-max: 1400px;

    /* ---- Type ---- */
    --tgp-font: "Haas Grot Text Trial", "Helvetica Neue", "Inter", -apple-system, Arial, sans-serif;
    --tgp-disp: "Haas Grot Disp Trial", "Haas Grot Text Trial", "Helvetica Neue", "Inter", -apple-system, Arial, sans-serif;
    --tgp-mono: "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

    /* ---- Spacing scale, 8px base ---- */
    --tgp-s1: 8px;
    --tgp-s2: 16px;
    --tgp-s3: 24px;
    --tgp-s4: 40px;
    --tgp-s5: 64px;
    --tgp-s6: 96px;

    /* Left indent that lines paragraphs up under a numbered row */
    --tgp-indent: clamp(50px, 6vw, 82px);

    /* ---- Motion ---- */
    --tgp-ease: cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    z-index: 1;
    background: var(--tgp-paper);
    color: var(--tgp-ink);
    font-family: var(--tgp-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#tg-shoots *,
#tg-shoots *::before,
#tg-shoots *::after { box-sizing: border-box; }

#tg-shoots a { color: inherit; }

#tg-shoots img { max-width: 100%; height: auto; display: block; }

/* The layout rules below out-specify the browser's own [hidden]
   styling, so restate it or hiding the form would do nothing. */
#tg-shoots [hidden] { display: none !important; }

/* Film grain, same texture as the gallery widget */
#tg-shoots::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.42;
    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");
}

/* ============================================================
   SHARED PIECES
   ============================================================ */

/* Standard visually-hidden utility. The !important is the usual
   one for this pattern — it has to beat whatever the theme does
   to a positioned element. */
.tgp-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

#tg-shoots .tgp-section {
    position: relative;
    z-index: 2;
    max-width: calc(var(--tgp-max) + 2 * var(--tgp-gut));
    margin: 0 auto;
    padding: clamp(56px, 7.5vw, 100px) var(--tgp-gut);
}

/* ---------- Small mono label (hero only) ---------- */
#tg-shoots .tgp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tgp-muted);
}

/* ---------- Display type scale ----------
   Five steps, and nothing outside them:
   xl hero / l section head / ml band label / m statement / s question */
#tg-shoots .tgp-display {
    margin: 0;
    font-family: var(--tgp-disp);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

#tg-shoots .tgp-display-xl { font-size: clamp(38px, 10.5vw, 128px); line-height: 0.92; }
#tg-shoots .tgp-display-l  { font-size: clamp(30px, 6.4vw, 74px); }
#tg-shoots .tgp-display-ml { font-size: clamp(26px, 5vw, 56px); letter-spacing: -0.03em; }
#tg-shoots .tgp-display-m  { font-size: clamp(23px, 3.6vw, 42px); letter-spacing: -0.028em; }
#tg-shoots .tgp-display-s  { font-size: clamp(18px, 2.1vw, 26px); letter-spacing: -0.02em; }

#tg-shoots .tgp-outline {
    position: relative;
    /* inline-block so the word's box is exactly one line tall, the same
       box its hologram copy below fills; as a plain inline its box was
       taller and the copy sat high. */
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 2px var(--tgp-ink);
}

/* Hovering the headline fades its hollow words to the hologram; the
   black outline stays on. A gradient clipped to text cannot fade by
   itself, so the hologram is a copy of the word (data-text) laid over
   it whose opacity eases in and out. */
#tg-shoots .tgp-outline[data-text]::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    white-space: nowrap;
    pointer-events: none;
    color: transparent;
    -webkit-text-stroke: 2px var(--tgp-ink);
    background-image: var(--tgp-holo-stack);
    background-size: 220% 220%, 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transition: opacity 0.6s var(--tgp-ease);
}

#tg-shoots .tgp-display:hover .tgp-outline[data-text]::after { opacity: 1; }

/* A thin word inside a bold heading ("Studio or location") */
#tg-shoots .tgp-light { font-weight: 400; margin: 0 0.1em; letter-spacing: 0; }

/* Line-mask reveal: each line slides up out of its own crop */
#tg-shoots .tgp-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em;
    margin-bottom: -0.06em;
}

#tg-shoots .tgp-line-inner {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 1.05s var(--tgp-ease);
    will-change: transform;
}

#tg-shoots .tgp-in .tgp-line:nth-child(1) .tgp-line-inner { transition-delay: 0s; }
#tg-shoots .tgp-in .tgp-line:nth-child(2) .tgp-line-inner { transition-delay: 0.08s; }
#tg-shoots .tgp-in .tgp-line:nth-child(3) .tgp-line-inner { transition-delay: 0.16s; }
#tg-shoots .tgp-in .tgp-line:nth-child(4) .tgp-line-inner { transition-delay: 0.24s; }
#tg-shoots .tgp-in .tgp-line-inner { transform: translateY(0); }

/* ---------- Generic scroll reveal ---------- */
#tg-shoots .tgp-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--tgp-ease), transform 0.85s var(--tgp-ease);
}

#tg-shoots .tgp-reveal.tgp-in { opacity: 1; transform: translateY(0); }

/* ---------- Small shared text roles ---------- */
#tg-shoots .tgp-head { margin-bottom: clamp(32px, 4.6vw, 60px); }
#tg-shoots .tgp-head .tgp-kicker { margin-bottom: clamp(20px, 3vw, 34px); }
#tg-shoots .tgp-head .tgp-display { max-width: 20ch; }

#tg-shoots .tgp-lede {
    margin: clamp(18px, 2.4vw, 26px) 0 0;
    max-width: 58ch;
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--tgp-muted);
}

#tg-shoots .tgp-mini {
    margin: 0 0 var(--tgp-s2);
    font-family: var(--tgp-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tgp-dim);
}

/* ---------- Buttons ---------- */
#tg-shoots .tgp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border: 1px solid var(--tgp-ink);
    border-radius: 0;
    background: none;
    font-family: var(--tgp-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tgp-ink);
    cursor: pointer;
    transition: background 0.3s var(--tgp-ease), color 0.3s var(--tgp-ease), border-color 0.3s var(--tgp-ease), transform 0.3s var(--tgp-ease);
}

#tg-shoots .tgp-btn-solid {
    background: var(--tgp-ink);
    color: var(--tgp-card);
}

#tg-shoots .tgp-btn-solid:hover {
    background-color: var(--tgp-card);
    background-image: var(--tgp-holo-stack);
    background-size: 220% 220%, 100% 100%;
    color: var(--tgp-ink);
}
#tg-shoots .tgp-btn-line:hover { background: var(--tgp-ink); color: var(--tgp-card); }
#tg-shoots .tgp-btn:active { transform: translateY(1px); }
#tg-shoots .tgp-btn[disabled] { opacity: 0.55; cursor: progress; }

/* Focus rings stay visible everywhere on this page, on purpose */
#tg-shoots a:focus-visible,
#tg-shoots button:focus-visible,
#tg-shoots input:focus-visible,
#tg-shoots select:focus-visible,
#tg-shoots [tabindex]:focus-visible {
    outline: 3px solid var(--tgp-blue);
    outline-offset: 2px;
}

/* ---------- The photo slot placeholder ----------
   A deliberate empty frame: hairline box, corner crop marks,
   mono label. JS adds .is-filled once a real photo drops in. */
#tg-shoots .tgp-slot {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    background: rgba(11, 11, 11, 0.035);
    border: 1px solid var(--tgp-line-strong);
}

#tg-shoots .tgp-slot::before {
    content: "";
    position: absolute;
    inset: 9px;
    pointer-events: none;
    background:
        linear-gradient(var(--tgp-line-strong), var(--tgp-line-strong)) left top / 13px 1px no-repeat,
        linear-gradient(var(--tgp-line-strong), var(--tgp-line-strong)) left top / 1px 13px no-repeat,
        linear-gradient(var(--tgp-line-strong), var(--tgp-line-strong)) right top / 13px 1px no-repeat,
        linear-gradient(var(--tgp-line-strong), var(--tgp-line-strong)) right top / 1px 13px no-repeat,
        linear-gradient(var(--tgp-line-strong), var(--tgp-line-strong)) left bottom / 13px 1px no-repeat,
        linear-gradient(var(--tgp-line-strong), var(--tgp-line-strong)) left bottom / 1px 13px no-repeat,
        linear-gradient(var(--tgp-line-strong), var(--tgp-line-strong)) right bottom / 13px 1px no-repeat,
        linear-gradient(var(--tgp-line-strong), var(--tgp-line-strong)) right bottom / 1px 13px no-repeat;
}

#tg-shoots .tgp-slot-label {
    position: absolute;
    left: 16px;
    bottom: 13px;
    z-index: 2;
    font-family: var(--tgp-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tgp-dim);
}

#tg-shoots .tgp-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#tg-shoots .tgp-slot.is-filled::before { display: none; }
#tg-shoots .tgp-slot.is-filled .tgp-slot-label { display: none; }

/* ============================================================
   01 — HERO
   ============================================================ */

#tg-shoots .tgp-hero {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-width: calc(var(--tgp-max) + 2 * var(--tgp-gut));
    margin: 0 auto;
    padding: clamp(40px, 7vw, 92px) var(--tgp-gut) clamp(24px, 3vw, 40px);
}

/* The hero is as tall as what is in it (it used to fill the screen and
   left a big empty gap above "Studio or location"). */
#tg-shoots .tgp-section.tgp-pricing { padding-top: clamp(40px, 4.5vw, 64px); }

#tg-shoots .tgp-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

#tg-shoots .tgp-hero .tgp-kicker { margin-bottom: clamp(20px, 3vw, 38px); }

#tg-shoots .tgp-hero-sub {
    margin: clamp(22px, 3vw, 38px) 0 0;
    max-width: 46ch;
    text-wrap: pretty;
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--tgp-muted);
}

#tg-shoots .tgp-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: clamp(20px, 2.6vw, 30px) 0 0;
    padding: 0;
    list-style: none;
}

#tg-shoots .tgp-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 16px;
    border: 1px solid var(--tgp-ink);
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#tg-shoots .tgp-chip strong {
    font-family: var(--tgp-disp);
    font-size: 19px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

#tg-shoots .tgp-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(24px, 3vw, 36px);
}

/* Hero photo slots — parallax layers behind the headline */
#tg-shoots .tgp-hero-slots {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

#tg-shoots .tgp-hero-slot {
    position: absolute;
    aspect-ratio: 3 / 4;
    will-change: transform;
}

#tg-shoots .tgp-hero-slot-1 { width: min(210px, 17vw); right: 4%; top: 14%; }
#tg-shoots .tgp-hero-slot-2 { width: min(160px, 13vw); right: 21%; top: 48%; }
#tg-shoots .tgp-hero-slot-3 { width: min(190px, 15vw); right: 7%; bottom: 6%; }
#tg-shoots .tgp-hero-slot-4 { width: min(126px, 11vw); right: 32%; top: 3%; }

@media (max-width: 1080px) {
    #tg-shoots .tgp-hero-slots {
        position: static;
        display: flex;
        gap: 10px;
        margin-top: auto;
        padding-top: clamp(28px, 6vw, 48px);
    }
    #tg-shoots .tgp-hero-slot {
        position: static;
        flex: 1 1 0;
        width: auto;
        inset: auto;
    }
    #tg-shoots .tgp-hero-slot-4 { display: none; }
}

@media (max-width: 560px) {
    #tg-shoots .tgp-hero-slot-3 { display: none; }
    #tg-shoots .tgp-hero-slot { aspect-ratio: 1 / 1; }
    #tg-shoots .tgp-hero-slots { padding-top: clamp(24px, 8vw, 40px); }
}

/* ============================================================
   02 — PRICING LEDGER
   ============================================================ */

#tg-shoots .tgp-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--tgp-ink);
    isolation: isolate;
}

#tg-shoots .tgp-switch-block {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 50%;
    background-image: var(--tgp-holo-stack);
    background-size: 220% 220%, 100% 100%;
    transform: translateX(0);
    transition: transform 0.42s var(--tgp-ease);
}

#tg-shoots .tgp-switch[data-on="1"] .tgp-switch-block { transform: translateX(100%); }

#tg-shoots .tgp-switch-btn {
    position: relative;
    appearance: none;
    min-width: 152px;
    min-height: 52px;
    padding: 14px 22px 14px 38px;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--tgp-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: left;
    color: var(--tgp-ink);
    cursor: pointer;
    transition: color 0.3s var(--tgp-ease), background 0.3s var(--tgp-ease);
}

/* Non-colour signal for the pressed state: a filled square marker */
#tg-shoots .tgp-switch-btn::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.3s var(--tgp-ease);
}

#tg-shoots .tgp-switch-btn[aria-pressed="true"] { color: var(--tgp-ink); }
#tg-shoots .tgp-switch-btn[aria-pressed="true"]::before { opacity: 1; }
#tg-shoots .tgp-switch-btn[aria-pressed="false"]:hover::before { opacity: 0.35; }

/* ---- The stage: location scene left, studio scene right, and a
   frosted glass wall that slides over whichever one is not chosen.
   The wall carries the chosen session's details. ---- */

#tg-shoots .tgp-stage {
    --tgp-wall-ease: cubic-bezier(0.34, 1.32, 0.5, 1);   /* a small spring at the end */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;               /* a set width, or min-height below would widen the stage through the ratio */
    aspect-ratio: 12 / 5;      /* two 6:5 pictures */
    min-height: 560px;         /* room for the studio card on mid-size screens; the pictures crop at the sides */
    margin-top: clamp(28px, 3.6vw, 44px);
    border: 1px solid var(--tgp-ink);
    overflow: hidden;
    isolation: isolate;
    background: #1c140d;
}

#tg-shoots .tgp-scene {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

#tg-shoots .tgp-scene img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--tgp-ease), filter 0.9s var(--tgp-ease);
}

/* The scene behind the glass dims a little. No zoom: Thomas did not
   like the scene growing and shrinking as the wall slides. */
#tg-shoots .tgp-stage[data-mode="studio"] .tgp-scene-location img,
#tg-shoots .tgp-stage[data-mode="location"] .tgp-scene-studio img {
    filter: saturate(0.75);
}

#tg-shoots .tgp-glass {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 50%;
    display: grid;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.28) 100%),
        rgba(246, 246, 244, 0.58);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-left: 1px solid rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.12),
        0 24px 60px rgba(0, 0, 0, 0.28);
    transform: translateX(0);
    transition: transform 0.85s var(--tgp-wall-ease);
}

#tg-shoots .tgp-stage[data-mode="location"] .tgp-glass { transform: translateX(100%); }

/* No backdrop blur (older browsers): a more solid pane keeps the text readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #tg-shoots .tgp-glass { background: rgba(246, 246, 244, 0.94); }
}

/* Both cards share one grid cell; only the chosen one shows. */
#tg-shoots .tgp-glass-card {
    grid-area: 1 / 1;
    align-self: center;
    padding: clamp(24px, 4vw, 56px);
    color: var(--tgp-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.35s var(--tgp-ease), transform 0.5s var(--tgp-ease), visibility 0s linear 0.35s;
}

#tg-shoots .tgp-stage[data-mode="studio"] .tgp-glass-card[data-for="studio"],
#tg-shoots .tgp-stage[data-mode="location"] .tgp-glass-card[data-for="location"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.45s var(--tgp-ease) 0.3s, transform 0.6s var(--tgp-ease) 0.3s, visibility 0s;
}

#tg-shoots .tgp-glass-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    padding-bottom: clamp(14px, 1.8vw, 22px);
    border-bottom: 1px solid var(--tgp-ink);
}

#tg-shoots .tgp-glass-name {
    margin: 0;
    font-family: var(--tgp-disp);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-transform: uppercase;
}

#tg-shoots .tgp-glass-price {
    display: flex;
    align-items: baseline;
    margin: 0;
    font-family: var(--tgp-disp);
    font-size: clamp(36px, 4.6vw, 64px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#tg-shoots .tgp-glass-cur {
    font-size: 0.5em;
    transform: translateY(-0.55em);
}

#tg-shoots .tgp-glass-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#tg-shoots .tgp-glass-list li {
    position: relative;
    padding: clamp(10px, 1.2vw, 14px) 0 clamp(10px, 1.2vw, 14px) 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.4;
}

/* The dash is positioned, not a flex item, so a link mid-sentence
   keeps normal word spacing. */
#tg-shoots .tgp-glass-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(clamp(10px, 1.2vw, 14px) + 0.7em);
    width: 14px;
    height: 1px;
    background: var(--tgp-ink);
}

#tg-shoots .tgp-glass-list a {
    color: var(--tgp-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Background picker on the studio glass. Each tile is a paper
   colour; the pressed one gets a thick ink frame and a tick, so the
   choice never rests on colour alone. ---- */

#tg-shoots .tgp-papers { margin-top: clamp(16px, 2vw, 24px); }

#tg-shoots .tgp-papers-h {
    margin: 0 0 12px;
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tgp-ink);
}

#tg-shoots .tgp-papers-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

#tg-shoots .tgp-paper {
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font: inherit;
    color: var(--tgp-ink);
    text-align: left;
    cursor: pointer;
}

#tg-shoots .tgp-paper-sw {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--tgp-ink);
    transition: box-shadow 0.25s var(--tgp-ease), transform 0.35s var(--tgp-wall-ease);
}

#tg-shoots .tgp-paper[data-paper="white"] .tgp-paper-sw { background: #ffffff; }
#tg-shoots .tgp-paper[data-paper="grey"]  .tgp-paper-sw { background: #c9c9c7; }
#tg-shoots .tgp-paper[data-paper="black"] .tgp-paper-sw { background: #131313; }
#tg-shoots .tgp-paper[data-paper="tan"]   .tgp-paper-sw { background: #d8c6ae; }

#tg-shoots .tgp-paper:hover .tgp-paper-sw { transform: translateY(-2px); }

#tg-shoots .tgp-paper[aria-pressed="true"] .tgp-paper-sw { box-shadow: inset 0 0 0 3px var(--tgp-ink), 0 0 0 2px var(--tgp-ink); }

/* The tick on the chosen tile, drawn in the opposite of its colour. */
#tg-shoots .tgp-paper[aria-pressed="true"] .tgp-paper-sw::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 9px;
    height: 16px;
    border: solid var(--tgp-ink);
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

#tg-shoots .tgp-paper[data-paper="black"][aria-pressed="true"] .tgp-paper-sw::after { border-color: #ffffff; }

#tg-shoots .tgp-paper-name {
    font-family: var(--tgp-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* The fifth tile: the words sit inside the square. */
#tg-shoots .tgp-paper-all { position: relative; }

#tg-shoots .tgp-paper-all .tgp-paper-sw {
    background-image: var(--tgp-holo-stack);
    background-size: 220% 220%, 100% 100%;
}

#tg-shoots .tgp-paper-all .tgp-paper-name {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    text-align: center;
    font-size: clamp(8.5px, 0.8vw, 10px);
    font-weight: 700;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

/* Phones: too narrow for the words in a small square, so this tile
   becomes a strip under the four colours. */
@media (max-width: 480px) {
    #tg-shoots .tgp-papers-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #tg-shoots .tgp-paper-all { grid-column: 1 / -1; }
    #tg-shoots .tgp-paper-all .tgp-paper-sw { aspect-ratio: auto; height: 48px; }
    #tg-shoots .tgp-paper-all .tgp-paper-name { aspect-ratio: auto; bottom: 0; font-size: 11px; letter-spacing: 0.16em; }
}

#tg-shoots .tgp-paper:focus-visible { outline: none; }
#tg-shoots .tgp-paper:focus-visible .tgp-paper-sw { outline: 3px solid var(--tgp-blue); outline-offset: 3px; }

/* The room behind the mannequins, one picture per paper colour. */
#tg-shoots .tgp-scene-paper { opacity: 0; }
#tg-shoots .tgp-scene-paper.is-on { opacity: 1; }
#tg-shoots .tgp-scene .tgp-scene-paper { transition: transform 0.9s var(--tgp-ease), filter 0.9s var(--tgp-ease), opacity 0.45s var(--tgp-ease); }

/* ---- "View all backgrounds" window ---- */

html.tgp-noscroll { overflow: hidden; }

#tg-shoots .tgp-bdx {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(11, 11, 11, 0.55);
}

#tg-shoots .tgp-bdx[hidden] { display: none; }

#tg-shoots .tgp-bdx-panel {
    width: min(760px, 100%);
    max-height: min(86vh, 900px);
    display: flex;
    flex-direction: column;
    background: rgba(246, 246, 244, 0.86);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 30px 80px rgba(0, 0, 0, 0.35);
    color: var(--tgp-ink);
}

#tg-shoots .tgp-bdx-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px clamp(18px, 3vw, 32px);
    border-bottom: 1px solid var(--tgp-ink);
}

#tg-shoots .tgp-bdx-h {
    margin: 0;
    font-family: var(--tgp-disp);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

#tg-shoots .tgp-bdx-close {
    min-height: 44px;
    padding: 10px 18px;
    background: none;
    border: 1px solid var(--tgp-ink);
    border-radius: 0;
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tgp-ink);
    cursor: pointer;
}

#tg-shoots .tgp-bdx-close:hover { background: var(--tgp-ink); color: var(--tgp-paper); }

#tg-shoots .tgp-bdx-body {
    overflow-y: auto;
    padding: 8px clamp(18px, 3vw, 32px) 24px;
}

#tg-shoots .tgp-bdx-gh {
    margin: 18px 0 12px;
    font-family: var(--tgp-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#tg-shoots .tgp-bdx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#tg-shoots .tgp-bdx-grid li {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

#tg-shoots .tgp-bdx-sw {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--tgp-ink);
    background: rgba(127, 127, 127, 0.14);
}

#tg-shoots .tgp-bdx-sw img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#tg-shoots .tgp-bdx-sw[data-paper="white"] { background: #ffffff; }
#tg-shoots .tgp-bdx-sw[data-paper="grey"]  { background: #c9c9c7; }
#tg-shoots .tgp-bdx-sw[data-paper="black"] { background: #131313; }
#tg-shoots .tgp-bdx-sw[data-paper="tan"]   { background: #d8c6ae; }

#tg-shoots .tgp-bdx-name {
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.35;
}

#tg-shoots .tgp-bdx-note {
    margin: 22px 0 0;
    font-family: var(--tgp-mono);
    font-size: 12px;
    line-height: 1.7;
}

/* Phones and small tablets: one picture at a time. The location scene
   wipes in over the studio, and the glass card sits under the picture,
   overlapping its bottom edge. */
@media (max-width: 900px) {
    #tg-shoots .tgp-stage {
        display: block;
        aspect-ratio: auto;
        min-height: 0;
        border: 0;
        overflow: visible;
        background: none;
    }
    #tg-shoots .tgp-scene {
        border: 1px solid var(--tgp-ink);
        border-bottom: 0;
        aspect-ratio: 6 / 5;
    }
    #tg-shoots .tgp-scene-location {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 0.7s var(--tgp-ease);
    }
    #tg-shoots .tgp-stage[data-mode="location"] .tgp-scene-location { clip-path: inset(0 0 0 0); }
    #tg-shoots .tgp-stage[data-mode] .tgp-scene img { transform: none; filter: none; }
    #tg-shoots .tgp-glass,
    #tg-shoots .tgp-stage[data-mode="location"] .tgp-glass {
        position: relative;
        width: auto;
        margin: -56px 12px 0;
        transform: none;
        border: 1px solid rgba(255, 255, 255, 0.85);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 18px 40px rgba(0, 0, 0, 0.22);
    }
    #tg-shoots .tgp-glass-card { align-self: start; padding: 22px 20px 18px; }
}

#tg-shoots .tgp-fine {
    margin-top: clamp(28px, 3.4vw, 40px);
    max-width: 66ch;
}

#tg-shoots .tgp-fine p {
    margin: 0 0 10px;
    font-family: var(--tgp-mono);
    font-size: 12px;
    line-height: 1.75;
    color: var(--tgp-muted);
}

#tg-shoots .tgp-fine p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
    #tg-shoots .tgp-switch { display: grid; grid-template-columns: 1fr; width: 100%; }
    #tg-shoots .tgp-switch-block { display: none; }
    #tg-shoots .tgp-switch-btn { width: 100%; }
    #tg-shoots .tgp-switch-btn + .tgp-switch-btn { border-top: 1px solid var(--tgp-ink); }
    #tg-shoots .tgp-switch-btn[aria-pressed="true"] { background-image: var(--tgp-holo-stack); background-size: 220% 220%, 100% 100%; }
}

/* ============================================================
   04 — GALLERY
   ============================================================ */

#tg-shoots .tgp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(24px, 3vw, 36px);
}

#tg-shoots .tgp-filter {
    min-height: 44px;
    padding: 11px 16px;
    background: none;
    border: 1px solid var(--tgp-line-ui);
    border-radius: 0;
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tgp-muted);
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

#tg-shoots .tgp-filter:hover { color: var(--tgp-ink); border-color: var(--tgp-ink); }

#tg-shoots .tgp-filter.is-on {
    background-image: var(--tgp-holo-stack);
    background-size: 220% 220%, 100% 100%;
    border-color: var(--tgp-ink);
    color: var(--tgp-ink);
}

#tg-shoots .tgp-filter.is-on::before {
    content: "\25CF\00a0";
    letter-spacing: 0;
}

#tg-shoots .tgp-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 18px);
}

#tg-shoots .tgp-tile {
    position: relative;
    grid-column: span 4;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--tgp-ease), transform 0.6s var(--tgp-ease);
}

#tg-shoots .tgp-tile.tgp-in { opacity: 1; transform: translateY(0); }
#tg-shoots button.tgp-tile { cursor: pointer; text-align: left; }

#tg-shoots .tgp-t0 { grid-column: span 7; }
#tg-shoots .tgp-t1 { grid-column: span 5; }
#tg-shoots .tgp-t2 { grid-column: span 4; }
#tg-shoots .tgp-t3 { grid-column: span 4; }
#tg-shoots .tgp-t4 { grid-column: span 4; }
#tg-shoots .tgp-t5 { grid-column: span 6; }
#tg-shoots .tgp-t6 { grid-column: span 6; }

#tg-shoots .tgp-t0 .tgp-slot { aspect-ratio: 3 / 2; }
#tg-shoots .tgp-t1 .tgp-slot { aspect-ratio: 4 / 5; }
#tg-shoots .tgp-t2 .tgp-slot { aspect-ratio: 4 / 5; }
#tg-shoots .tgp-t3 .tgp-slot { aspect-ratio: 1 / 1; }
#tg-shoots .tgp-t4 .tgp-slot { aspect-ratio: 4 / 5; }
#tg-shoots .tgp-t5 .tgp-slot { aspect-ratio: 3 / 2; }
#tg-shoots .tgp-t6 .tgp-slot { aspect-ratio: 5 / 4; }

#tg-shoots .tgp-tile .tgp-slot {
    transition: border-color 0.35s ease, transform 0.55s var(--tgp-ease);
}

#tg-shoots button.tgp-tile:hover .tgp-slot,
#tg-shoots button.tgp-tile:focus-visible .tgp-slot {
    border-color: var(--tgp-ink);
    transform: scale(1.012);
}

/* Caption slides up from the lower edge of a real photo */
#tg-shoots .tgp-tile-cap {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 11px 14px;
    background: var(--tgp-ink);
    color: #ffffff;
    font-family: var(--tgp-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: translateY(101%);
    transition: transform 0.45s var(--tgp-ease);
}

#tg-shoots button.tgp-tile:hover .tgp-tile-cap,
#tg-shoots button.tgp-tile:focus-visible .tgp-tile-cap { transform: translateY(0); }

/* Empty tiles keep their caption on show — it is the useful part */
#tg-shoots figure.tgp-tile .tgp-tile-cap {
    position: static;
    transform: none;
    background: none;
    color: var(--tgp-dim);
    font-size: 11px;
    padding: 10px 2px 0;
}

#tg-shoots .tgp-gal-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 40px 0;
    font-family: var(--tgp-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tgp-dim);
}

@media (max-width: 980px) {
    #tg-shoots .tgp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #tg-shoots .tgp-tile,
    #tg-shoots .tgp-t0, #tg-shoots .tgp-t1, #tg-shoots .tgp-t2,
    #tg-shoots .tgp-t3, #tg-shoots .tgp-t4, #tg-shoots .tgp-t5,
    #tg-shoots .tgp-t6 { grid-column: span 1; }
}

@media (max-width: 560px) {
    #tg-shoots .tgp-grid { grid-template-columns: 1fr; }
    #tg-shoots .tgp-t0 .tgp-slot,
    #tg-shoots .tgp-t5 .tgp-slot { aspect-ratio: 3 / 2; }
    #tg-shoots .tgp-t1 .tgp-slot,
    #tg-shoots .tgp-t2 .tgp-slot,
    #tg-shoots .tgp-t4 .tgp-slot { aspect-ratio: 4 / 5; }
}

/* ---------- Lightbox (built by script.js inside #tg-shoots) ---------- */
#tg-shoots .tgp-lb {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(6, 6, 6, 0.96);
}

#tg-shoots .tgp-lb.is-open { display: flex; }

#tg-shoots .tgp-lb-fig {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
}

#tg-shoots .tgp-lb-fig img {
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

#tg-shoots .tgp-lb-cap {
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

#tg-shoots .tgp-lb-btn {
    position: absolute;
    min-height: 48px;
    padding: 12px 18px;
    background: rgba(6, 6, 6, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0;
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

#tg-shoots .tgp-lb-btn:hover { background: #ffffff; color: var(--tgp-ink); }
#tg-shoots .tgp-lb-close { top: 18px; right: 18px; }
#tg-shoots .tgp-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
#tg-shoots .tgp-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

@media (max-width: 760px) {
    #tg-shoots .tgp-lb-prev,
    #tg-shoots .tgp-lb-next { top: auto; bottom: 18px; transform: none; }
    #tg-shoots .tgp-lb-prev { left: 18px; }
    #tg-shoots .tgp-lb-next { right: 18px; }
    #tg-shoots .tgp-lb-fig { padding-bottom: 60px; }
}

/* ============================================================
   05 — SESSION TYPES (index)
   ============================================================ */

#tg-shoots .tgp-index { border-top: 1px solid var(--tgp-line-strong); }

#tg-shoots .tgp-idx { border-bottom: 1px solid var(--tgp-line-strong); }

#tg-shoots .tgp-idx-h { margin: 0; font-weight: 400; }

#tg-shoots .tgp-idx-btn {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto 34px;
    align-items: center;
    gap: clamp(12px, 2vw, 26px);
    width: 100%;
    min-height: 64px;
    padding: clamp(18px, 2.6vw, 30px) 2px;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

#tg-shoots .tgp-idx-name {
    font-family: var(--tgp-disp);
    font-size: clamp(22px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.028em;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.5s var(--tgp-ease);
}

#tg-shoots .tgp-idx-rule {
    height: 1px;
    background: var(--tgp-line-strong);
    transform: translateY(0.1em);
}

#tg-shoots .tgp-idx-tag {
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tgp-muted);
    white-space: nowrap;
}

#tg-shoots .tgp-pm {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    justify-self: end;
}

#tg-shoots .tgp-pm i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--tgp-ink);
    transition: transform 0.4s var(--tgp-ease);
}

#tg-shoots .tgp-pm i:last-child { transform: rotate(90deg); }
#tg-shoots [aria-expanded="true"] .tgp-pm i:last-child { transform: rotate(0deg); }

#tg-shoots .tgp-idx-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--tgp-ease);
}

#tg-shoots .tgp-idx-inner {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.45s;
}

#tg-shoots .tgp-idx.is-open .tgp-idx-body { grid-template-rows: 1fr; }
#tg-shoots .tgp-idx.is-open .tgp-idx-inner { visibility: visible; transition-delay: 0s; }

#tg-shoots .tgp-idx-inner p {
    margin: 0 0 clamp(20px, 2.6vw, 30px);
    max-width: 62ch;
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--tgp-muted);
}

#tg-shoots .tgp-idx-slot {
    width: min(280px, 62%);
    aspect-ratio: 4 / 5;
    margin: 0 0 clamp(22px, 3vw, 32px);
}

/* On a fine pointer the row opens on hover and the slot rides the
   cursor instead of sitting inline. */
@media (hover: hover) and (pointer: fine) {
    #tg-shoots .tgp-idx:hover .tgp-idx-body { grid-template-rows: 1fr; }
    #tg-shoots .tgp-idx:hover .tgp-idx-inner { visibility: visible; transition-delay: 0s; }
    #tg-shoots .tgp-idx:hover .tgp-idx-name { transform: translateX(8px); }
    #tg-shoots .tgp-idx-slot { display: none; }
}

@media (max-width: 1000px) {
    #tg-shoots .tgp-idx-btn { grid-template-columns: minmax(0, 1fr) 22px; }
    #tg-shoots .tgp-idx-rule,
    #tg-shoots .tgp-idx-tag { display: none; }
}

@media (max-width: 780px) {
    #tg-shoots .tgp-idx-inner p { padding-left: 0; }
    #tg-shoots .tgp-idx-slot { width: 100%; margin-left: 0; }
}

/* Cursor-trailing image peek — same idiom as events/middle */
#tg-shoots .tgp-peek {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(280px, 24vw);
    aspect-ratio: 3 / 4;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    background: var(--tgp-card);
    border: 1px solid var(--tgp-line-strong);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, -50%) scale(0.92);
    transition: opacity 0.3s ease, transform 0.45s var(--tgp-ease);
}

#tg-shoots .tgp-peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#tg-shoots .tgp-peek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}

#tg-shoots .tgp-peek-cap {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font-family: var(--tgp-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tgp-dim);
}

@media (hover: none), (pointer: coarse) {
    #tg-shoots .tgp-peek { display: none; }
}

/* ============================================================
   07 — LOCATIONS
   ============================================================ */

#tg-shoots .tgp-loc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#tg-shoots .tgp-loc-list li {
    padding: 9px 14px;
    border: 1px solid var(--tgp-line-strong);
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tgp-muted);
}

/* ============================================================
   09 — WHY BOOK ME
   ============================================================ */

#tg-shoots .tgp-why .tgp-head { margin-bottom: clamp(24px, 3vw, 40px); }

#tg-shoots .tgp-why-band {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 64px);
    align-items: start;
    padding: clamp(34px, 4.6vw, 60px) 0;
    border-top: 1px solid var(--tgp-line-strong);
}

#tg-shoots .tgp-why-band:last-child { border-bottom: 1px solid var(--tgp-line-strong); }

#tg-shoots .tgp-why-band h3 { margin: 0; }

#tg-shoots .tgp-why-band p {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--tgp-muted);
}

/* The lead band's top rule is a strip of the hologram (small-accent recipe:
   photo over metallic grey, so a failed image falls back to grey). */
#tg-shoots .tgp-why-lead {
    position: relative;
    border-top-color: transparent;
}

#tg-shoots .tgp-why-lead::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 3px;
    background-image: var(--tgp-holo-stack-ink);
    background-size: 500% 500%, 100% 100%;
    background-blend-mode: multiply;
    filter: saturate(1.9) contrast(1.2);
}
#tg-shoots .tgp-why-lead p { color: var(--tgp-ink); }

@media (max-width: 780px) {
    #tg-shoots .tgp-why-band { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   10 — FAQ
   ============================================================ */

#tg-shoots .tgp-faq-list { border-top: 1px solid var(--tgp-line-strong); }
#tg-shoots .tgp-faq-item { border-bottom: 1px solid var(--tgp-line-strong); }
#tg-shoots .tgp-faq-h { margin: 0; font-weight: 400; }

#tg-shoots .tgp-faq-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    width: 100%;
    min-height: 64px;
    padding: clamp(18px, 2.2vw, 26px) 2px;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

#tg-shoots .tgp-faq-q {
    font-family: var(--tgp-disp);
    font-size: clamp(18px, 2.1vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.018em;
    text-transform: uppercase;
}

#tg-shoots .tgp-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s var(--tgp-ease);
}

#tg-shoots .tgp-faq-inner {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.42s;
}

#tg-shoots .tgp-faq-item.is-open .tgp-faq-a { grid-template-rows: 1fr; }
#tg-shoots .tgp-faq-item.is-open .tgp-faq-inner { visibility: visible; transition-delay: 0s; }

#tg-shoots .tgp-faq-inner p {
    margin: 0 0 clamp(22px, 2.6vw, 30px);
    max-width: 64ch;
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--tgp-muted);
}

@media (max-width: 640px) {
    #tg-shoots .tgp-faq-btn { grid-template-columns: minmax(0, 1fr) 22px; }
    #tg-shoots .tgp-faq-inner p { padding-left: 0; }
}

/* ============================================================
   11 — BOOK
   ============================================================ */

#tg-shoots .tgp-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(26px, 3.4vw, 44px) clamp(24px, 4vw, 56px);
    max-width: 900px;
}

#tg-shoots .tgp-field { display: flex; flex-direction: column; }

#tg-shoots .tgp-label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tgp-muted);
}

#tg-shoots .tgp-input {
    width: 100%;
    min-height: 52px;
    padding: 10px 2px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tgp-line-ui);
    border-radius: 0;
    font-family: var(--tgp-disp);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tgp-ink);
    transition: border-color 0.3s ease;
}

#tg-shoots .tgp-input:focus { border-bottom-color: var(--tgp-blue); }
#tg-shoots .tgp-input:focus-visible { outline-offset: 4px; }
#tg-shoots .tgp-input[aria-invalid="true"] { border-bottom-color: var(--tgp-red); }

#tg-shoots .tgp-selectwrap { position: relative; }

#tg-shoots .tgp-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    cursor: pointer;
}

#tg-shoots .tgp-selectarrow {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -10px;
    width: 10px;
    height: 10px;
    border-right: 1px solid var(--tgp-ink);
    border-bottom: 1px solid var(--tgp-ink);
    transform: rotate(45deg);
    pointer-events: none;
}

#tg-shoots .tgp-fieldhint,
#tg-shoots .tgp-fielderr {
    margin: 10px 0 0;
    font-family: var(--tgp-mono);
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.06em;
}

#tg-shoots .tgp-fieldhint { color: var(--tgp-dim); }
#tg-shoots .tgp-fielderr { color: var(--tgp-red); }
#tg-shoots .tgp-fielderr:empty { display: none; }
#tg-shoots .tgp-fielderr::before { content: "\2192\00a0"; }

#tg-shoots .tgp-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
}

#tg-shoots .tgp-form-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding-top: clamp(8px, 1.5vw, 16px);
}

#tg-shoots .tgp-form-note {
    margin: 0;
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tgp-dim);
}

#tg-shoots .tgp-formerr {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--tgp-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--tgp-red);
}

#tg-shoots .tgp-formerr:empty { display: none; }

#tg-shoots .tgp-done { max-width: 640px; }

#tg-shoots .tgp-done-tc {
    margin: 0 0 var(--tgp-s2);
    font-family: var(--tgp-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tgp-blue-ink);
}

#tg-shoots .tgp-done h3 { margin: 0 0 var(--tgp-s3); }
#tg-shoots .tgp-done h3:focus { outline: none; }
#tg-shoots .tgp-done h3:focus-visible { outline: 3px solid var(--tgp-blue); outline-offset: 4px; }

#tg-shoots .tgp-done-copy {
    margin: 0;
    font-family: var(--tgp-mono);
    font-size: 13px;
    line-height: 1.8;
    color: var(--tgp-muted);
}

@media (max-width: 720px) {
    #tg-shoots .tgp-form { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION — everything visible, nothing moving
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    #tg-shoots .tgp-line-inner,
    #tg-shoots .tgp-reveal,
    #tg-shoots .tgp-tile {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    #tg-shoots .tgp-hero-slot { transform: none !important; }
    #tg-shoots .tgp-peek { display: none; }
    #tg-shoots .tgp-switch-block,
    #tg-shoots .tgp-glass,
    #tg-shoots .tgp-glass-card,
    #tg-shoots .tgp-scene img,
    #tg-shoots .tgp-scene-location,
    #tg-shoots .tgp-idx-body,
    #tg-shoots .tgp-faq-a,
    #tg-shoots .tgp-tile-cap { transition-duration: 0.01ms; }
}

/* ============================================================
   LATER ADDITIONS
   ============================================================ */

/* Anything switched off by the script stays off, whatever its
   own display rule says (buttons, sections, the photo row). */
#tg-shoots [hidden] { display: none !important; }

/* A photo frame with no photo in it yet does not show. It appears
   by itself as soon as its data-src is filled in. */
#tg-shoots .tgp-slot:not(.is-filled) { display: none; }

/* Jumping to a section leaves room for the site header. */
#tg-shoots .tgp-section { scroll-margin-top: 96px; }

/* Text links: the phone number and the links inside paragraphs. */
#tg-shoots .tgp-link,
#tg-shoots .tgp-call a {
    color: var(--tgp-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#tg-shoots .tgp-link:hover,
#tg-shoots .tgp-call a:hover { color: var(--tgp-blue-ink); }

#tg-shoots .tgp-call {
    margin: var(--tgp-s2) 0 0;
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--tgp-muted);
}

/* The phone number is a full-size tap target on a phone. */
#tg-shoots .tgp-call a {
    display: inline-block;
    padding: 12px 0;
}

/* Location lists: a short line, then the places. */
#tg-shoots .tgp-faq-inner p:not(:last-child) { margin-bottom: var(--tgp-s2); }
#tg-shoots .tgp-faq-inner .tgp-loc-list { margin-bottom: clamp(22px, 2.6vw, 30px); }