/* /tentang/, /hubungi/ and their /en/ twins: the trust pages. Loaded after site.css on these four
   pages only. Tokens come from site.css; every picture is generated clay or a real app screen. */

/* hero: short h1, the answer, then a generated scene that is eager-loaded and never animated in,
   so the first paint is never an empty box */
.tr-hero { padding-bottom: var(--s10); }
.tr-hero .wrap > *, .tr-hero .tr-hero-copy > * { animation: none; }
.tr-hero h1 { max-width: 18ch; }
.tr-hero .answer { max-width: 60ch; margin-bottom: 0; }
.tr-scene { margin: var(--s10) 0 0; border-radius: var(--radius-card); overflow: hidden; background: var(--tile); }
.tr-scene img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 893; object-fit: cover; }
@media (min-width: 60rem) {
  .tr-hero-split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: center; }
  .tr-hero-split .tr-scene { margin: 0; }
  .tr-hero-split .answer { font-size: var(--t-body); }
}

/* stats band: big numbers on one hairline */
.tr-stats { padding-top: 0; }
.tr-stats .stats { border-top: 1px solid var(--hairline); padding-top: var(--s10); }

/* split tile: picture on one side, words on the other; .is-flip swaps the sides on wide screens */
.tr-split { display: grid; background: var(--tile); border-radius: var(--radius-card); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tr-split:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(29, 29, 31, .3); }
.tr-split-art { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.tr-split-art picture, .tr-split-art img { display: block; width: 100%; height: 100%; }
.tr-split-art img { object-fit: cover; }
.tr-split-art.is-phone { aspect-ratio: auto; height: 380px; display: flex; justify-content: center; padding-top: var(--s10); }
.tr-split-art.is-phone picture { width: min(300px, 78%); height: auto; }
.tr-split-art.is-phone img { height: auto; object-fit: initial; filter: drop-shadow(0 30px 40px rgba(29, 29, 31, .18)); transition: transform .6s var(--ease); }
.tr-split:hover .is-phone img { transform: translateY(-12px); }
.tr-split-copy { padding: var(--s8) var(--s6) var(--s10); align-self: center; }
.tr-split-copy h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); margin-bottom: var(--s5); }
.tr-split-copy > p:not(.tr-link) { color: var(--muted); font-size: var(--t-lead); line-height: 1.5; max-width: 45ch; }
.tr-split-copy .badges { margin: var(--s6) 0 0; }
.tr-list { list-style: none; padding: 0; margin: 0 0 var(--s6); display: grid; gap: var(--s3); max-width: 48ch; }
.tr-list li { position: relative; margin: 0; padding-left: var(--s5); color: var(--muted); line-height: 1.5; }
.tr-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.tr-link { margin: var(--s6) 0 0; }
.tr-link a, .tr-more a { font-weight: var(--wt-medium); }
@media (min-width: 52rem) {
  .tr-split { grid-template-columns: 1fr 1fr; min-height: 480px; }
  .tr-split-art { aspect-ratio: auto; }
  .tr-split.is-flip .tr-split-art { order: 2; }
  .tr-split-copy { padding: var(--s16); }
  .tr-split-art.is-phone { height: 100%; max-height: 560px; padding-top: var(--s16); align-self: end; }
  .tr-split-art.is-phone picture { width: min(320px, 80%); }
}

/* statement between the tiles */
.tr-statement .tr-big { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1.06; letter-spacing: -.022em; font-weight: var(--wt-strong); color: var(--text); max-width: 18ch; margin-bottom: var(--s6); }

/* clay cells: rows always fill (4 across, 2 by 2, or 1) */
.tr-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .tr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .tr-grid { gap: var(--s5); } .tr-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.tr-grid > .cell { grid-column: auto; grid-row: auto; }
.tr-grid .clay, .tr-route .clay { width: 80px; height: 80px; object-fit: contain; }
.tr-grid .cell p a { font-weight: var(--wt-medium); }
.tr-more { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: var(--s8) 0 0; max-width: none; }

/* contact routes: three equal doors, the address is the biggest thing on each */
.tr-routes { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .tr-routes { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.tr-route { display: flex; flex-direction: column; gap: var(--s2); background: var(--tile); border-radius: var(--radius-card); padding: var(--s8); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tr-route:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(29, 29, 31, .3); }
.tr-route .clay { display: block; width: 88px; height: 88px; margin-bottom: var(--s4); }
.tr-route h3 { margin: 0; }
.tr-route p { margin: 0; color: var(--muted); font-size: var(--t-small); max-width: 40ch; }
.tr-desc { flex: 1; }
.tr-act { display: grid; gap: var(--s1); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--hairline); }
.tr-mail { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); font-weight: var(--wt-strong); letter-spacing: -.01em; overflow-wrap: anywhere; }
.tr-mail:hover { text-decoration: underline; }
.tr-mail.is-page::after { content: "\2192"; margin-left: var(--s2); transition: transform .18s var(--ease); }
.tr-mail.is-page:hover::after { transform: translateX(3px); }
@media (max-width: 40rem) { .tr-route { padding: var(--s6) var(--s5); } }

@media (prefers-reduced-motion: reduce) {
  .tr-split, .tr-route, .tr-split-art.is-phone img, .tr-mail.is-page::after { transition: none; }
  .tr-split:hover, .tr-route:hover, .tr-split:hover .is-phone img { transform: none; }
}

/* pass 2 fixes: one left edge, quieter notes, aligned doors */
.wrap.tr-statement { max-width: var(--w-page); }
.tr-split-copy > p.tr-note { font-size: var(--t-body); }
.tr-split-art.is-made img { object-position: 64% 50%; }
.tr-facts { background: var(--tile); border-radius: var(--radius-card); padding: var(--s2) var(--s8); }
.tr-facts table { font-size: var(--t-body); }
.tr-facts tbody th { width: 30%; }
.tr-facts tr:last-child th, .tr-facts tr:last-child td { border-bottom: 0; }
@media (max-width: 40rem) { .tr-facts { padding: var(--s1) var(--s5); } .tr-facts tbody th { width: 40%; } }
@media (min-width: 56rem) {
  .tr-routes { grid-template-rows: repeat(4, auto); row-gap: 0; }
  .tr-route { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; }
  .tr-route h3 { margin-bottom: var(--s2); }
}
.tr-grid .cell p a { display: inline; padding-block: 0; }
.tr-act { align-content: start; }