/* The Industries hub as Open Rooms (website v2.42.0, from the 2026-09-28 mockup Grant picked on 2026-09-29), and the
   trade pages' hero with the trade's room (website v2.43.0, from the trade-hero mockup Grant picked the same day).
   Loaded after site.css and voice-marketing.css, so the header, footer, buttons, type and theme tokens (--text,
   --muted, --line, --mint, --blue, --cta …) are the site's. This sheet adds the hub (the chooser, the room scene, the
   conversation card and its source sheet), the trade hero, and the room materials both draw with. Dark is the
   default, as on the site; light applies when the visitor picked it (data-theme="light", website v2.47.0). */

/* ---------- Tokens: the hub's scene, and the room materials of the hub and the trade heroes ---------- */

.or {
  --or-stage: #0b1929; --or-glow: #16314f; --or-card: #10223a; --or-card-line: #243d54; --or-chip: rgba(11, 25, 41, .86);
  --or-ease: cubic-bezier(.16, 1, .3, 1);
}
.or, .th-art {
  --ih-art-paper: #c6d1de; --ih-art-wall: #132a44; --ih-art-wall-back: #183352; --ih-art-floor: #1d3654;
  --ih-art-edge: #36526f; --ih-art-ink: #07101c; --ih-art-glass: #23476b; --ih-art-metal: #6e849b;
  --ih-art-wood: #76664f; --ih-art-accent: #35a584; --ih-art-accent-dark: #22765e; --ih-art-skin: #b48c70;
  --ih-art-shadow: #000000; --ih-art-roof: #2c4462;
  --ih-art-warm: #c79a55; --ih-art-sun: rgba(150, 185, 230, .09); --ih-art-glow: rgba(247, 198, 103, .3); --ih-art-hair: #2a1c15; --ih-art-hair-2: #7a3f22;
  --ih-art-hair-3: #b08a55; --ih-art-skin-2: #86593b; --ih-art-skin-3: #cfa98b; --ih-art-shirt: #5d86b3; --ih-art-work: #5b7897;
}
[data-theme="light"] .or {
  --or-stage: #f3f6f9; --or-glow: #ffffff; --or-card: #ffffff; --or-card-line: #e2e6ed; --or-chip: rgba(243, 246, 249, .9);
}
[data-theme="light"] :is(.or, .th-art) {
  --ih-art-paper: #ffffff; --ih-art-wall: #d9e2ec; --ih-art-wall-back: #e7edf3; --ih-art-floor: #cdd7e2;
  --ih-art-edge: #8c9eb3; --ih-art-ink: #1c2a3a; --ih-art-glass: #c1d8ec; --ih-art-metal: #cad4de;
  --ih-art-wood: #d2bf9d; --ih-art-accent: #8bcdb5; --ih-art-accent-dark: #4b9980; --ih-art-skin: #d4a888;
  --ih-art-shadow: #0a1728; --ih-art-roof: #66788d;
  --ih-art-warm: #efc37c; --ih-art-sun: rgba(255, 210, 120, .3); --ih-art-glow: rgba(255, 205, 110, .55); --ih-art-hair: #3b2a21; --ih-art-hair-2: #9a5230;
  --ih-art-hair-3: #d4ad6c; --ih-art-skin-2: #a8714c; --ih-art-skin-3: #efcaab; --ih-art-shirt: #9fc2e4; --ih-art-work: #62778f;
}

/* ---------- Intro ---------- */

/* voice-marketing.css pulls main 88 px up under the header, as on every Voice page; this padding clears it. */
.or { padding: 112px 0 64px; }
.or-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.voice-marketing .or-intro .vm-eyebrow { margin-bottom: 14px; }
.voice-marketing .or-intro h1 { margin: 0 0 14px; font-size: clamp(36px, 4.4vw, 56px); font-weight: 580; line-height: 1.05; letter-spacing: -.055em; text-wrap: balance; }
.voice-marketing .or-deck { max-width: 560px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.65; text-wrap: pretty; }

/* ---------- Layout: the chooser and its note on the left, one room on the right ---------- */

.or-layout {
  display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "nav stage" "other stage"; column-gap: 36px; align-items: start;
}
.or-nav { grid-area: nav; position: relative; }
.or-stage { grid-area: stage; }
.or-other { grid-area: other; }

/* ---------- The chooser: one row per trade (desktop), a grid of buttons (tablet, phone) ---------- */

.or-picker { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.or-picker > li { margin: 0; }
.or-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 12px 10px 12px 16px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; text-align: left;
  text-decoration: none; cursor: pointer; transition: background-color 160ms ease, color 160ms ease;
}
.or-num { flex: none; width: 22px; color: var(--blue); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.or-name { flex: 1; min-width: 0; }
.or-arrow { flex: none; width: 17px; height: 17px; color: var(--muted-2); transition: transform 180ms var(--or-ease), color 160ms ease; }
.or-choice:hover { color: var(--text); background: var(--surface-soft); }
.or-choice[aria-selected="true"] { color: var(--text); background: var(--surface-soft); }
.or-choice[aria-selected="true"] .or-arrow { color: var(--text); transform: rotate(45deg); }
.or-rail { display: none; position: absolute; top: 0; left: 0; width: 2px; height: var(--or-rail-h, 0); transform: translateY(var(--or-rail-y, 0)); background: var(--mint); border-radius: 2px; pointer-events: none; }
.or[data-or-enhanced] .or-rail { display: block; }
.voice-marketing .or-other { margin: 26px 0 0; padding: 0 10px 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.or-other a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The stage: every panel in one cell, so the tallest reserves the space and nothing jumps ---------- */

.or-stage { display: grid; min-width: 0; }
.or-panel { grid-area: 1 / 1; display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.voice-marketing .or-stage > .or-panel[hidden] { display: grid !important; visibility: hidden; }

.or-scene {
  position: relative; display: flex; flex-direction: column; min-height: 540px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  background: radial-gradient(ellipse 62% 74% at 74% 38%, var(--or-glow), transparent 74%), var(--or-stage);
}
.or-view { position: absolute; inset: 0; }
.or-room { position: absolute; inset: 0; pointer-events: none; }
.or-room .ih-world { position: absolute; top: 2px; right: -5%; display: block; width: 108%; height: auto; max-width: none; }

.or-id { position: absolute; z-index: 1; top: 22px; left: 24px; display: flex; align-items: center; gap: 11px; }
.or-id img { flex: none; width: 36px; height: 36px; }
.voice-marketing .or-biz { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; color: var(--text); }
.voice-marketing .or-fictional { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--muted-2); }
.voice-marketing .or-moment { position: absolute; z-index: 1; top: 76px; left: 24px; max-width: min(40ch, calc(100% - 48px)); margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* The way to the trade's page: the room's primary action, the site's filled button, at the right end of the room's
   header row (on phones, first in the room, right under the chooser). It follows the business name in Tab order. */
.voice-marketing .or-cta { position: absolute; z-index: 3; top: 17px; right: 22px; gap: 10px; min-height: 50px; padding: 13px 22px; font-size: 15.5px; }
.voice-marketing .or-cta svg { width: 17px; height: 17px; transition: transform 160ms ease; }

/* ---------- The conversation card ---------- */

.or-call {
  position: relative; z-index: 2; display: flex; flex: 1 0 auto; flex-direction: column;
  width: min(410px, calc(100% - 48px)); margin: 116px 0 24px 24px;
  border: 1px solid var(--or-card-line); border-radius: 18px; background: var(--or-card); box-shadow: var(--shadow);
}
.voice-marketing .or-call-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); font-size: 12px; line-height: 1.4; color: var(--muted-2); }
.or-count { font-variant-numeric: tabular-nums; }
.or-call[data-or-sheet-open] .or-count { visibility: hidden; }
.or-call-body { display: grid; flex: 1 0 auto; padding: 18px 22px 4px; }
.or-call-body > * { grid-area: 1 / 1; min-width: 0; }
/* The hidden exchange and the closed sheet keep their room, so the card's size never changes. */
.voice-marketing .or-call-body > [hidden] { display: block !important; visibility: hidden; }

.or-turns { position: relative; list-style: none; margin: 0; padding: 0 0 0 22px; }
.or-turns::before { content: ""; position: absolute; top: 9px; bottom: 12px; left: 3px; width: 1px; background: var(--line); }
.or-turn { position: relative; }
.or-turn + .or-turn { margin-top: 16px; }
.or-turn::before { content: ""; position: absolute; top: 6px; left: -22px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 3px var(--or-card); }
.or-turn.is-agent::before { background: var(--mint); }
.or-turn b { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.or-turn.is-agent b { color: var(--mint); }
.voice-marketing .or-turn p { margin: 0; font-size: 16px; line-height: 1.58; color: var(--text); text-wrap: pretty; }
.voice-marketing .or-turn.is-caller p { font-size: 17.5px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
.or-turn .ind-from { display: block; margin-top: 7px; font-size: 13px; }

.or-sheet h3 { margin: 0 0 9px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.or-sheet ul { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.or-sheet li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.or-sheet li::before { content: ""; position: absolute; top: .6em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.or-sheet li.is-pilot { color: var(--muted); }
.or-sheet li.is-pilot::before { background: none; box-shadow: inset 0 0 0 1.5px var(--mint); }
.or-sheet ul + h3 { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.voice-marketing .or-scope { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }

.or-next {
  align-self: flex-end; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 0 14px 4px; padding: 6px 8px;
  border: 0; border-radius: 8px; background: none; color: var(--link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.or-next svg { flex: none; width: 16px; height: 16px; transition: transform 160ms ease; }
.or-next[data-or-back] svg { transform: rotate(180deg); }
.or-next:hover span { text-decoration: underline; text-underline-offset: 4px; }
.or-sheet-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 12px 20px;
  border: 0; border-top: 1px solid var(--line-soft); border-radius: 0 0 17px 17px; background: none;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 550; line-height: 1.4; text-align: left; cursor: pointer;
}
.or-sheet-toggle > svg { flex: none; width: 18px; height: 18px; }
.or-sheet-toggle .or-chevron { margin-left: auto; width: 16px; height: 16px; transition: transform 180ms var(--or-ease); }
.or-sheet-toggle[aria-expanded="true"] { color: var(--text); }
.or-sheet-toggle[aria-expanded="true"] .or-chevron { transform: rotate(180deg); }
.or-sheet-toggle:hover { color: var(--text); background: var(--surface-soft); }
/* While the sheet is open, the conversation's next button steps aside too. */
.or-call[data-or-sheet-open] .or-next { visibility: hidden; }

/* ---------- Below the room: the way to the trade's page ---------- */

/* A quieter repeat under the room, for a visitor who has just read the conversation. */
.voice-marketing .or-again { margin: 14px 0 0; }
.voice-marketing .or-again .vm-text-link { min-height: 44px; }

.or :is(a, button):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.or .or-choice:focus-visible { outline-offset: -3px; border-radius: 4px; }
.or .or-sheet-toggle:focus-visible { outline-offset: -4px; border-radius: 0 0 17px 17px; }
.or .or-cta:focus-visible { outline-offset: 3px; border-radius: 12px; }

/* ---------- Motion: the rail slides; a chosen room settles in and a turn fades in (open-rooms.js, only when the
   visitor makes the change, never on load). Nothing loops, nothing plays on its own. ---------- */

@media (prefers-reduced-motion: no-preference) {
  .or-rail { transition: transform 240ms var(--or-ease), height 240ms var(--or-ease); }
  .or-cta:hover svg, .or-again a:hover svg { transform: translateX(3px); }
  .or-next:hover svg { transform: translateX(3px); }
  .or-next[data-or-back]:hover svg { transform: rotate(180deg) translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .or-choice, .or-arrow, .or-chevron, .or-next svg, .or-cta svg { transition: none; }
}

/* ---------- Without JavaScript: the links go to the trade pages; the first room shows both exchanges and its sheet ---------- */

html:not(.js) .or-call-body { display: block; }
html:not(.js) .or-call-body > [hidden] { display: block !important; visibility: visible; margin-top: 18px; }
html:not(.js) .or-call-body > .or-sheet { padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* ---------- Up to 1099 px: the chooser becomes a grid of buttons above a full-width room ---------- */

@media (max-width: 1099px) {
  .or-layout { display: block; }
  .or-nav { margin-bottom: 18px; }
  .or-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; }
  .or-choice { min-height: 50px; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
  .or-choice[aria-selected="true"] { border-color: var(--mint-line); box-shadow: inset 0 -2px 0 var(--mint); }
  .or-choice .or-arrow, .or[data-or-enhanced] .or-rail { display: none; }
  .voice-marketing .or-other { margin-top: 24px; padding: 0; }
}
@media (max-width: 899px) {
  .or-call { width: min(380px, 56%); }
  .or-room .ih-world { width: 112%; right: -8%; top: 16px; }
}

/* ---------- Phone: the room on top, the conversation under it ---------- */

@media (max-width: 719px) {
  .or { padding: 100px 0 44px; }
  .or-intro { margin-bottom: 24px; }
  .voice-marketing .or-intro h1 { font-size: clamp(32px, 9vw, 40px); }
  .voice-marketing .or-deck { font-size: 16px; }
  .or-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .or-choice { min-height: 48px; gap: 8px; padding: 8px 10px; font-size: 14px; line-height: 1.25; }
  .or-num { width: 18px; font-size: 11.5px; }
  /* One panel at a time, at its own height: below the card there is only the page's end. */
  .voice-marketing .or-stage > .or-panel[hidden] { display: none !important; }
  .or-nav { margin-bottom: 12px; }
  .or-scene { min-height: 0; border-radius: 18px; }
  .voice-marketing .or-cta { position: relative; top: auto; right: auto; order: -1; flex: none; justify-content: space-between; margin: 10px 10px 0; padding: 13px 18px; font-size: 15px; text-align: left; }
  .or-view { position: relative; inset: auto; flex: none; height: 232px; overflow: hidden; }
  .or-room .ih-world { width: 152%; right: -8%; top: 2px; }
  .or-id { top: 14px; left: 14px; gap: 9px; }
  .or-id img { width: 30px; height: 30px; }
  .voice-marketing .or-biz { font-size: 14px; }
  .voice-marketing .or-fictional { font-size: 11.5px; }
  .voice-marketing .or-moment { top: 194px; left: 12px; max-width: calc(100% - 24px); padding: 3px 8px; border-radius: 6px; background: var(--or-chip); font-size: 12px; }
  .or-call { width: auto; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .or-call-body { padding: 18px 18px 4px; }
  /* The sheet takes the room it needs when it opens; the two exchanges still share one height. */
  .voice-marketing .or-call-body > .or-sheet[hidden] { display: none !important; }
  .voice-marketing .or-turn p { font-size: 15.5px; }
  .voice-marketing .or-turn.is-caller p { font-size: 17px; }
  .or-sheet-toggle { padding-inline: 18px; }
}
/* The smallest phones (320 x 568): a tighter intro and chooser keep the room's button above the fold. */
@media (max-width: 359px) {
  .or { padding-top: 96px; }
  .voice-marketing .or-intro .vm-eyebrow { margin-bottom: 10px; }
  .voice-marketing .or-intro h1 { margin-bottom: 10px; font-size: 28px; }
  .voice-marketing .or-deck { font-size: 15px; line-height: 1.55; }
  .or-intro { margin-bottom: 16px; }
  .or-picker { gap: 5px; }
  .or-choice { min-height: 44px; padding: 5px 8px; font-size: 13.5px; }
  .voice-marketing .or-cta { padding: 12px 14px; font-size: 14.5px; }
  .or-num { display: none; }
  .or-view { height: 206px; }
  .voice-marketing .or-moment { top: 170px; }
  .voice-marketing .or-turn.is-caller p { font-size: 16px; }
}

/* ---------- Trade hero (website v2.43.0): the page's words on the left, the trade's room on the right, where the
   phone rings while everyone is busy and Voice answers. src/industries.ts writes it; the room is src/industryRooms.ts.
   ---------- */

/* The hero's own colours: the ring, the answered display, the rain and the glow behind the room. */
.th-art { --th-ring: var(--blue); --th-live: var(--mint); --th-rain: #9fb8d3; --th-glow: rgba(29, 64, 102, .55); }
[data-theme="light"] .th-art { --th-rain: #7890ab; --th-glow: rgba(205, 222, 236, .7); }

.voice-marketing .vm-hero.th-hero { padding: clamp(100px, 12vh, 116px) 0 clamp(28px, 5vh, 56px); text-align: left; }
.th-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 2.6vw, 44px); }
.th-copy { min-width: 0; }
.voice-marketing .th-hero .vm-breadcrumb { justify-content: flex-start; margin-bottom: 20px; }
.voice-marketing .vm-hero.th-hero h1 { max-width: none; margin: 0 0 22px; font-size: clamp(36px, 3.6vw, 54px); line-height: 1.04; }
/* The accent line balances on its own when it wraps, as on phones. */
.vm-hero.th-hero h1 span { display: inline-block; text-wrap: balance; }
.voice-marketing .th-hero .hero-copy { max-width: 34em; margin: 0; font-size: 17.5px; line-height: 1.65; }
.voice-marketing .th-hero .hero-actions { justify-content: flex-start; }

/* The room runs past the text's right edge into the page margin: up to 160 px on wide screens, half a gutter on narrow. */
.th-art { position: relative; min-width: 0; margin-right: max(-160px, min(calc(var(--gutter) / -2), calc((var(--content-max) - 100vw) / 2))); pointer-events: none; }
.th-art::before { content: ""; position: absolute; inset: 4% 2% 0 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--th-glow), transparent); }
.th-canvas { position: relative; }
.th-world { display: block; width: 100%; height: auto; }

/* ---------- Trade hero, the phone: its display, and the rings while it rings ---------- */

.th-art .th-display { fill: var(--th-live); }
.th-art .th-ring { opacity: 0; }

/* ---------- Trade hero, Voice answering: a bubble over the phone, with a waveform ---------- */

.th-voice {
  --lift: 24px;
  position: absolute; left: var(--x); top: var(--y); transform: translate(calc(-1 * var(--tail, 50%)), calc(-100% - var(--lift))); transform-origin: var(--tail, 50%) 100%;
  display: inline-flex; align-items: center; padding: 8px 13px;
  border: 1px solid var(--mint-line); border-radius: 999px; background: var(--surface-raised);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45); white-space: nowrap;
}
[data-theme="light"] .th-voice { box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 26px -12px rgba(16, 24, 40, .28); }
/* The bubble's tail, pointing down at the phone. */
.th-voice::after {
  content: ""; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  border: solid var(--mint-line); border-width: 0 1px 1px 0; background: var(--surface-raised); transform: rotate(45deg);
}
.th-bars { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.th-bars i { display: block; width: 3px; height: 18px; border-radius: 2px; background: var(--mint); transform: scaleY(var(--h)); }
.th-bars i:nth-child(1) { --h: .34; --p: .8; }
.th-bars i:nth-child(2) { --h: .72; --p: .42; }
.th-bars i:nth-child(3) { --h: 1; --p: .56; }
.th-bars i:nth-child(4) { --h: .58; --p: .95; }
.th-bars i:nth-child(5) { --h: .3; --p: .66; }

/* ---------- Trade hero, the roofing yard's rain: nothing falls in the still room ---------- */

.th-art .th-rain, .th-art .th-ripple { opacity: 0; }
.th-rain .is-far { opacity: .38; }
.th-rain .is-near { opacity: .5; }

/* ---------- Trade hero, motion: once, when the room comes into view (voice-marketing.js adds .is-playing). The room
   stays still for --th-start, then the phone rings twice while everyone stays busy; then its display turns mint and
   Voice's bubble opens over it. Nobody picks up the handset. The movement lasts under five seconds and ends on the
   frame that the still room shows.
   The script in the page's head (src/industries.ts) adds .th-motion unless the visitor asks for reduced motion, as
   the homepage's player decides (src/samplePlayer.ts), and ?motion=full adds it anyway, for demos and captures.
   Without it, or without JavaScript, the room shows its final frame and nothing moves.
   Each moving part names its animation in --th-motion, and one rule plays them all. That rule is !important, and more
   specific than voice-marketing.css's, which stops every animation on the Voice pages under reduced motion, so
   ?motion=full also works there. ---------- */

/* --th-start: how long the room stays still before anything moves, so a visitor reading the headline first still sees
   the ring. The movement itself lasts 4.86 s from there. */
.th-art { --th-start: 1.5s; }
.th-art .th-handset { --th-motion: th-rattle 1.8s linear calc(var(--th-start) + .5s) both; transform-box: fill-box; transform-origin: 50% 100%; }
.th-art .is-mobile { --th-motion: th-buzz 1.8s linear calc(var(--th-start) + .5s) both; transform-box: fill-box; transform-origin: 50% 50%; }
.th-art .th-display { --th-motion: th-display 2.5s linear var(--th-start) both; }
.th-art .th-ring-in { --th-motion: th-radiate 1.8s linear calc(var(--th-start) + .5s) both; transform-box: fill-box; transform-origin: 50% 50%; }
.th-art .th-ring-out { --th-motion: th-radiate 1.8s linear calc(var(--th-start) + .6s) both; transform-box: fill-box; transform-origin: 50% 50%; }
.th-voice { --th-motion: th-pop .42s cubic-bezier(.2, 1.35, .4, 1) calc(var(--th-start) + 2.5s) both; }
.th-bars i { --th-motion: th-talk .34s ease-in-out calc(var(--th-start) + 2.6s + var(--i) * 55ms) 6 alternate both; }
.th-art .th-rain { --th-motion: th-rain-veil 4.6s linear var(--th-start) both; }
.th-art .th-drops.is-near { --th-motion: th-fall .46s linear var(--th-start) 10 both; }
.th-art .th-drops.is-far { --th-motion: th-fall .66s linear var(--th-start) 7 both; }
.th-art .th-ripple { --th-motion: th-ripple .9s ease-out calc(var(--th-start) + var(--d)) 2 both; transform-box: fill-box; transform-origin: 50% 50%; }

.th-motion .th-art :is(.th-handset, .is-mobile, .th-display, .th-ring-in, .th-ring-out, .th-voice, .th-bars i, .th-rain, .th-drops, .th-ripple) { animation: var(--th-motion) !important; }
.th-motion .th-art .th-ring { opacity: 1; }
/* Waiting to be seen: every animation holds its first frame, so the phone is quiet until then. */
.th-motion .th-art:not(.is-playing) :is(.th-handset, .is-mobile, .th-display, .th-ring-in, .th-ring-out, .th-voice, .th-bars i, .th-rain, .th-drops, .th-ripple) { animation-play-state: paused !important; }

/* Two bursts of rattling, 0.7 s each with 0.4 s between, as a phone rings. */
@keyframes th-rattle {
  0%, 38.9%, 61.1%, 100% { transform: none; }
  2.8%, 8.3%, 13.9%, 19.4%, 25%, 30.6%, 36.1%, 63.9%, 69.4%, 75%, 80.6%, 86.1%, 91.7%, 97.2% { transform: translateY(-3px) rotate(-7deg); }
  5.6%, 11.1%, 16.7%, 22.2%, 27.8%, 33.3%, 66.7%, 72.2%, 77.8%, 83.3%, 88.9%, 94.4% { transform: translateY(-3px) rotate(7deg); }
}
@keyframes th-buzz {
  0%, 38.9%, 61.1%, 100% { transform: none; }
  2.8%, 8.3%, 13.9%, 19.4%, 25%, 30.6%, 36.1%, 63.9%, 69.4%, 75%, 80.6%, 86.1%, 91.7%, 97.2% { transform: translate(-1.5px, -1px) rotate(-4deg); }
  5.6%, 11.1%, 16.7%, 22.2%, 27.8%, 33.3%, 66.7%, 72.2%, 77.8%, 83.3%, 88.9%, 94.4% { transform: translate(1.5px, 1px) rotate(4deg); }
}
/* The display: dark, lit in the ring's colour through each burst, then mint once Voice has answered (at 2.5 s). */
@keyframes th-display {
  0%, 19.9%, 48%, 63.9%, 92%, 99.9% { fill: var(--ih-art-glass); }
  20%, 47.9%, 64%, 91.9% { fill: var(--th-ring); }
  100% { fill: var(--th-live); }
}
/* Two rings go out from the phone in each burst. */
@keyframes th-radiate {
  0%, 19.4%, 61.1%, 80.6% { opacity: 0; transform: scale(.72); animation-timing-function: ease-out; }
  6%, 25.4%, 67.1%, 86.6% { opacity: 1; transform: scale(.9); }
  19.3%, 38.8%, 80.5%, 99.9% { opacity: 0; transform: scale(1.12); }
  38.9%, 61%, 100% { opacity: 0; transform: scale(.72); }
}
@keyframes th-pop {
  from { opacity: 0; transform: translate(calc(-1 * var(--tail, 50%)), calc(-100% - var(--lift))) scale(.55); }
  to { opacity: 1; transform: translate(calc(-1 * var(--tail, 50%)), calc(-100% - var(--lift))); }
}
@keyframes th-talk {
  from { transform: scaleY(var(--h)); }
  to { transform: scaleY(var(--p)); }
}
@keyframes th-rain-veil { 0% { opacity: 0; } 6%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes th-fall { to { transform: translate(var(--fx), var(--fy)); } }
@keyframes th-ripple { from { opacity: .85; transform: scale(.25); } to { opacity: 0; transform: scale(1); } }

/* ---------- Trade hero on tablets: the words above, the room under them ---------- */

@media (max-width: 960px) {
  .th-grid { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .voice-marketing .vm-hero.th-hero { text-align: center; }
  .voice-marketing .th-hero .vm-breadcrumb, .voice-marketing .th-hero .hero-actions { justify-content: center; }
  .voice-marketing .th-hero .hero-copy { margin: 0 auto; }
  .th-art { width: min(100%, 700px); margin: 0 auto; }
}

/* ---------- Trade hero on phones: the room runs edge to edge under the buttons ---------- */

@media (max-width: 760px) {
  .voice-marketing .vm-hero.th-hero { padding: 100px 0 12px; }
  .voice-marketing .th-hero .vm-breadcrumb { margin-bottom: 16px; }
  .voice-marketing .vm-hero.th-hero h1 { margin-bottom: 16px; font-size: clamp(31px, 8.4vw, 40px); }
  .voice-marketing .th-hero .hero-copy { font-size: 16px; line-height: 1.6; }
  .voice-marketing .th-hero .hero-actions { margin-top: 22px; }
  .th-art { width: auto; margin: 6px calc(-1 * var(--gutter)) 0; }
  .th-voice { --lift: 16px; padding: 6px 10px; }
  .th-bars { height: 15px; gap: 2.5px; }
  .th-bars i { width: 2.5px; height: 15px; }
}
/* The smallest phones (320 x 568): a tighter top keeps both buttons above the fold. At 28 px (29 until v2.43.2) the
   headline's first sentence keeps to one line in Spanish too ("Las bahías están llenas." is 274 px at 29). */
@media (max-width: 359px) {
  .voice-marketing .vm-hero.th-hero { padding-top: 92px; }
  .voice-marketing .th-hero .vm-breadcrumb { margin-bottom: 12px; }
  .voice-marketing .vm-hero.th-hero h1 { font-size: 28px; }
  .voice-marketing .th-hero .hero-copy { font-size: 15px; line-height: 1.55; }
}

/* ---------- Forced colors: the rooms step back ---------- */

@media (forced-colors: active) {
  .or-choice[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .or-room, .th-art { opacity: .3; }
}