/* Hallmark · genre: playful · page: contact · theme: custom (site tokens) · tone: playful-bold · anchor hue: 265
 * idea: "the three dots are the interface" — the banner's full stop is a chat bubble that is typing,
 * and the form is a new message in a mail app ("Titik Mail") on a laptop that opens as you scroll.
 * sections: banner · write (laptop + Titik Mail) · channels · visit (drawn map + live studio time) · FAQ
 * Contact Form 7: the compose window styles CF7's own markup (.wpcf7-form-control-wrap,
 * .wpcf7-list-item, .wpcf7-not-valid-tip), so the mockup and the plugin look the same.
 */

.tmail [hidden],
.visit [hidden] {
  display: none !important;
}

/* Line icons (page-contact.php → contact_icon()). */
.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Banner ------------------------------------------------------------------ */

.c-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, var(--page-max));
  justify-content: center;
  /* clears the fixed header and the announcement bar, as on the home banner */
  padding: calc(var(--header-h) + var(--promo-h, 2.5rem) + var(--ruler-offset, 0px) + var(--space-2xl)) var(--gutter) var(--space-3xl);
}

.c-hero__grid {
  mask-image: linear-gradient(to bottom, var(--color-ink) 55%, transparent);
}

.c-hero > :not(canvas) {
  position: relative;
  z-index: 1;
}

/* "Studio open now · Jakarta 14:32 WIB" — also used on the studio card below. */
.studio-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
}

.studio-status__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-muted);
}

.studio-status.is-open .studio-status__dot {
  background-color: var(--color-blue);
}

.studio-status.is-open .studio-status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-blue);
}

@media (prefers-reduced-motion: no-preference) {
  .studio-status.is-open .studio-status__dot::after {
    animation: status-ping 2.4s var(--ease-out) infinite;
  }
}

@keyframes status-ping {
  from {
    opacity: 0.55;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 3;
  }
}

.c-hero__status {
  justify-self: start;
  margin-block-end: var(--space-xl);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 600;
}

.c-hero__title {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: var(--leading-hero);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.c-hero__line {
  display: block;
}

/* Two lines that hug opposite edges, like the home banner. */
@media (min-width: 48rem) {
  .c-hero__line + .c-hero__line {
    text-align: end;
  }
}

/* The full stop: a blue chat bubble with three dots typing. */
.c-hero__typing {
  display: inline-flex;
  align-items: center;
  gap: 0.055em;
  height: 0.34em;
  margin-inline-start: 0.12em;
  padding-inline: 0.09em;
  border-radius: 0.17em 0.17em 0.17em 0.03em;
  background-color: var(--color-blue);
  vertical-align: 0.02em;
}

.c-hero__typing i {
  width: 0.065em;
  height: 0.065em;
  border-radius: 50%;
  background-color: var(--color-paper);
}

@media (prefers-reduced-motion: no-preference) {
  .c-hero__typing i {
    animation: typing 1.3s var(--ease-in-out) infinite;
  }

  .c-hero__typing i:nth-child(2) { animation-delay: 0.16s; }
  .c-hero__typing i:nth-child(3) { animation-delay: 0.32s; }
}

@keyframes typing {
  0%,
  55%,
  100% {
    opacity: 0.55;
    translate: 0 0;
  }

  25% {
    opacity: 1;
    translate: 0 -0.05em;
  }
}

.c-hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-lg) var(--space-xl);
  margin-block-start: var(--space-xl);
}

.c-hero__lede {
  max-width: 36ch;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.45;
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Write: the laptop -------------------------------------------------------- */

.write {
  position: relative;
  overflow: clip;
  padding: var(--space-4xl) var(--gutter);
  background-color: var(--color-paper-2);
}

.write__inner {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

/* While the laptop scrolls in, contact.js adds .is-opening and drives --open (0 closed → 1
 * open) and --screen (0 off → 1 on). Without JS or with reduced motion the lid is just open. */
.laptop {
  --open: 1;
  --bezel: clamp(0.4rem, 1vw, 0.8rem);
  width: min(100%, 72rem);
  margin-inline: auto;
  perspective: 2400px;
  perspective-origin: 50% 0%;
}

.laptop__lid {
  position: relative;
  width: calc(100% - 2 * clamp(0.75rem, 4%, 3.5rem));
  margin-inline: auto;
  padding: var(--bezel);
  padding-block-start: calc(var(--bezel) * 1.6);
  border-radius: 1.1rem 1.1rem 0.35rem 0.35rem;
  background-image: linear-gradient(150deg, var(--color-ink-3), var(--color-ink) 35%, var(--color-ink) 70%, var(--color-ink-2));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--color-paper) 14%, transparent),
    0 2.5rem 3rem -2.25rem var(--color-shadow);
  transform-origin: 50% 100%;
}

/* Only while it opens; once open it stays flat — crisp text, no 3D layer. */
.laptop.is-opening .laptop__lid {
  transform: rotateX(calc((1 - var(--open)) * -84deg));
}

/* camera */
.laptop__lid::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--bezel) * 0.8 - 0.15rem);
  left: 50%;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: var(--color-ink-3);
  translate: -50% 0;
}

.laptop__screen {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: 0.45rem;
  background-color: var(--color-paper-2);
}

/* Glass: a faint sheen on top, and the screen "off" (ink) until the lid is nearly open. */
.laptop__glass {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-image: linear-gradient(115deg, color-mix(in oklch, var(--color-paper) 10%, transparent) 0%, color-mix(in oklch, var(--color-paper) 3%, transparent) 38%, transparent 38.5%);
  pointer-events: none;
}

.laptop__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-ink);
  opacity: calc(1 - var(--screen, 1));
}

.laptop__base {
  position: relative;
  height: clamp(0.75rem, 1.8vw, 1.35rem);
  border-radius: 0.2rem 0.2rem 1.4rem 1.4rem / 0.2rem 0.2rem 100% 100%;
  background-image: linear-gradient(to bottom, var(--color-paper) 0 12%, var(--color-rule) 55%, color-mix(in oklch, var(--color-rule) 65%, var(--color-ink-3)));
  box-shadow: 0 1.25rem 1.75rem -1rem var(--color-shadow);
}

.laptop__groove {
  position: absolute;
  inset-block-start: 0;
  left: 50%;
  width: clamp(4rem, 14%, 9rem);
  height: 42%;
  border-radius: 0 0 0.6rem 0.6rem;
  background-color: color-mix(in oklch, var(--color-rule) 75%, var(--color-ink-3));
  translate: -50% 0;
}

/* Titik Mail --------------------------------------------------------------- */

.tmail {
  --tmail-top: 3.5rem;
  --tmail-panel: var(--color-paper);
  --tmail-tint: color-mix(in oklch, var(--color-blue) 12%, var(--color-paper));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "top"
    "side"
    "compose"
    "main";
  min-width: 0;
  padding-block-end: var(--space-sm);
  background-color: var(--color-paper-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Zero specificity, so every button class below can set its own colour. */
:where(.tmail) button {
  color: inherit;
  font: inherit;
}

/* Top bar */
.tmail__top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--tmail-top);
  padding: var(--space-xs) var(--space-md);
}

/* The menu icon, as three dots. */
.tmail__burger {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.5rem;
}

.tmail__burger i {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: var(--color-muted);
}

.tmail__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tmail__logo {
  width: 1.6rem;
  height: auto;
  color: var(--color-blue);
}

.tmail__search {
  display: none;
  flex: 1;
  align-items: center;
  gap: var(--space-sm);
  max-width: 40rem;
  height: 2.5rem;
  margin-inline-start: var(--space-xl);
  padding-inline: var(--space-md);
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--color-ink) 6%, var(--color-paper-2));
  color: var(--color-muted);
}

.tmail__avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-inline-start: auto;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: var(--color-paper);
  font-weight: 700;
}

/* Side: Compose + folders (a row on small screens, a column on desktop). */
.tmail__side {
  grid-area: side;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: 0 var(--space-sm) var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.tmail__compose {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding: 0 var(--space-lg) 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-md);
  background-color: color-mix(in oklch, var(--color-blue) 20%, var(--color-paper));
  font-weight: 650;
  cursor: pointer;
  transition: box-shadow var(--dur-short) var(--ease-out);
}

@media (hover: hover) {
  .tmail__compose:hover {
    box-shadow: 0 0.25rem 0.75rem -0.25rem var(--color-shadow);
  }
}

.tmail__folders {
  display: flex;
  gap: var(--space-2xs);
}

.tmail__folder {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.5rem;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.tmail__folder .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.tmail__folder[aria-current="true"] {
  background-color: var(--tmail-tint);
  font-weight: 700;
}

@media (hover: hover) {
  .tmail__folder:not([aria-current="true"]):hover {
    background-color: color-mix(in oklch, var(--color-ink) 6%, transparent);
  }
}

.tmail__count {
  margin-inline-start: auto;
  font-size: var(--text-xs);
  font-weight: 700;
}

.tmail__count:empty {
  display: none;
}

/* The Sent / Inbox folder gives a little hop when a message lands in it. */
.tmail__folder.is-bump {
  animation: folder-bump 560ms var(--ease-out);
}

@keyframes folder-bump {
  40% {
    background-color: color-mix(in oklch, var(--color-blue) 28%, var(--color-paper));
    scale: 1.06;
  }
}

/* Main: the message list or one open message. */
.tmail__main {
  grid-area: main;
  min-width: 0;
  min-height: 12rem;
  margin-inline: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--tmail-panel);
}

.tmail__heading {
  padding: var(--space-sm) var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  font-weight: 700;
}

.tmail__empty {
  padding: var(--space-xl) var(--space-md);
  color: var(--color-muted);
  text-align: center;
}

.mrow {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background-color: color-mix(in oklch, var(--color-paper-2) 55%, var(--color-paper));
  transition: box-shadow var(--dur-short) var(--ease-out);
}

.mrow.is-unread {
  background-color: var(--color-paper);
}

@media (hover: hover) {
  .mrow:hover {
    z-index: 1;
    box-shadow: 0 0.15rem 0.6rem -0.2rem var(--color-shadow);
  }
}

.mrow__star {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}

.mrow__star .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: scale var(--dur-short) var(--ease-out);
}

.mrow__star[aria-pressed="true"] .icon {
  fill: var(--color-lime);
  stroke: color-mix(in oklch, var(--color-lime) 35%, var(--color-ink));
  scale: 1.15;
}

.mrow__open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "from time"
    "text text";
  gap: 0 var(--space-md);
  min-width: 0;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}

.mrow__from {
  grid-area: from;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrow__text {
  grid-area: text;
  overflow: hidden;
  color: var(--color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrow__subject {
  color: var(--color-ink);
}

.mrow__time {
  grid-area: time;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.mrow.is-unread :is(.mrow__from, .mrow__subject, .mrow__time) {
  color: var(--color-ink);
  font-weight: 750;
}

/* A new message slides in at the top with a short blue wash. */
.mrow.is-new {
  animation: mrow-in var(--dur-flow) var(--ease-out);
}

@keyframes mrow-in {
  from {
    opacity: 0;
    translate: 0 -0.75rem;
    background-color: var(--tmail-tint);
  }

  40% {
    opacity: 1;
    translate: 0 0;
    background-color: var(--tmail-tint);
  }
}

/* Reading pane */
.tmail__read {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) var(--space-xl);
}

.tmail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.5rem;
  margin-inline-start: calc(-1 * var(--space-sm));
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-muted);
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) {
  .tmail__back:hover {
    background-color: color-mix(in oklch, var(--color-ink) 6%, transparent);
    color: var(--color-ink);
  }
}

.tmail__subject {
  font-size: var(--text-md);
  font-weight: 650;
  line-height: var(--leading-snug);
}

.tmail__subject:focus {
  outline: none;
}

.tmail__meta {
  color: var(--color-muted);
}

.tmail__sender {
  color: var(--color-ink);
  font-weight: 700;
}

.tmail__body {
  display: grid;
  gap: var(--space-sm);
  max-width: 62ch;
  padding-block-start: var(--space-xs);
  line-height: var(--leading-body);
  white-space: pre-line; /* line breaks typed in the message stay */
}

.tmail__body ol {
  display: grid;
  gap: var(--space-2xs);
  padding-inline-start: 1.25rem;
  white-space: normal;
}

.tmail__body a {
  color: var(--color-blue-deep);
  font-weight: 650;
}

.tmail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.tmail__tags li {
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  background-color: var(--tmail-tint);
  font-size: var(--text-xs);
  font-weight: 650;
}

/* Compose ------------------------------------------------------------------ */

.compose {
  grid-area: compose;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  margin: 0 var(--space-sm) var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--tmail-panel);
  box-shadow: 0 0 0 1px var(--color-rule);
}

.compose__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding: 0 var(--space-2xs) 0 var(--space-md);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.compose.is-min .compose__bar {
  border-radius: var(--radius-md);
  cursor: pointer;
}

.compose__title {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 650;
}

.compose__controls {
  display: flex;
}

.compose__ctl {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.compose__ctl .icon {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2;
}

.compose__ctl:focus-visible {
  outline-color: var(--color-blue-soft);
  outline-offset: -2px;
}

@media (hover: hover) {
  .compose__ctl:hover {
    background-color: color-mix(in oklch, var(--color-paper) 14%, transparent);
  }
}

.compose__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.compose.is-min .compose__panel {
  display: none;
}

/* Targets CF7's own classes (.wpcf7 wrapper, .wpcf7-form), so the plugin's output fits as-is.
 * The form is a column: every line keeps its own height (it never shrinks under its content,
 * whatever a plugin adds), and the message takes what is left. When the window is too short,
 * the wrapper scrolls instead (see the desktop rules). */
.compose .wpcf7 {
  display: grid;
  min-height: 0;
}

.compose .wpcf7-form {
  display: flex;
  flex-direction: column;
}

.compose .wpcf7-form > * {
  flex: none;
}

/* Cloudflare Turnstile (CF7 → Integration): moved above the Send row and shown only when
 * Cloudflare needs the visitor to do something (functions.php). */
.compose .wpcf7-turnstile {
  padding-inline: var(--space-md);
}

.compose .wpcf7-turnstile:has(iframe:not([style*="display: none"])) {
  padding-block-start: var(--space-sm);
}

/* CF7's hidden inputs and its screen-reader summary never take a grid row — even when the
 * plugin's stylesheet is switched off. */
.compose .hidden-fields-container,
.compose .wpcf7-form > div[style*="none"] {
  display: none;
}

.compose .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One line of the message header: a small label, then the field. */
.compose__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  min-height: 2.75rem;
  margin: 0 var(--space-md);
  padding: 0;
  border: 0;
  border-block-end: var(--rule-hair) solid var(--color-rule);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.compose__label {
  flex: none;
  min-width: 4.5rem;
  padding: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* The focused line turns blue — the focus indicator for the borderless inputs. */
.compose__row:focus-within {
  border-block-end-color: var(--color-blue);
  box-shadow: 0 1px 0 var(--color-blue);
}

.compose__row:has([aria-invalid="true"]) {
  border-block-end-color: var(--color-error);
}

.compose__recipient {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: 0.15rem 0.7rem 0.15rem 0.3rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  font-weight: 650;
  white-space: nowrap;
}

.compose__recipient span {
  overflow: hidden;
  color: var(--color-muted);
  font-weight: 400;
  text-overflow: ellipsis;
}

.compose__recipient-mark {
  width: 1.25rem;
  height: auto;
  color: var(--color-blue);
}

.compose__row > .wpcf7-form-control-wrap {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.compose__input,
.compose__message {
  width: 100%;
  min-width: 0;
  padding: var(--space-xs) 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-base); /* 16px: no zoom on focus in iOS Safari */
}

.compose__input:focus,
.compose__message:focus {
  outline: none;
}

.compose__input::placeholder,
.compose__message::placeholder {
  color: color-mix(in oklch, var(--color-muted) 80%, transparent);
}

/* Chip rows (CF7 checkbox / radio). The legend floats so it sits on the line like a label. */
.compose__row--chips {
  display: block;
  padding-block: var(--space-xs);
}

.compose__row--chips .compose__label {
  float: left;
  line-height: 2.25rem;
}

.compose__row--chips > .wpcf7-form-control-wrap {
  display: flow-root;
}

.compose__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
}

.compose__chips .wpcf7-list-item {
  margin: 0; /* CF7's stylesheet adds margin-left: 1em */
}

.compose__chips label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

/* The real input covers the chip, invisible: clicks and keyboard work as usual. */
.compose__chips input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.compose__chips .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.8rem 0 0.6rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

/* Each chip carries a titik: a hollow ring, filled once chosen. */
.compose__chips .wpcf7-list-item-label::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color var(--dur-short) var(--ease-out), scale var(--dur-short) var(--ease-out);
}

.compose__chips input:checked + .wpcf7-list-item-label {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  color: var(--color-paper);
}

.compose__chips input:checked + .wpcf7-list-item-label::before {
  background-color: currentColor;
  scale: 1.15;
}

.compose__chips input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .compose__chips label:hover .wpcf7-list-item-label {
    border-color: var(--color-ink);
  }

  .compose__chips label:hover input:checked + .wpcf7-list-item-label {
    border-color: var(--color-blue-deep);
  }
}

/* Message */
/* Takes the room left (not the textarea's rows="10"), never less than the message's minimum. */
.compose .wpcf7-form > .compose__body {
  flex: 1 0 0;
  min-height: 8rem;
}

.compose__body {
  display: grid;
  min-height: 0;
  margin: var(--space-xs) var(--space-xs) 0;
  padding: 0 var(--space-xs);
  border-radius: var(--space-xs);
  transition: background-color var(--dur-short) var(--ease-out);
}

.compose__body:focus-within {
  background-color: color-mix(in oklch, var(--color-blue) 5%, transparent);
}

.compose__body > .wpcf7-form-control-wrap {
  position: relative;
  display: grid;
  min-height: 0;
}

.compose__message {
  height: 100%;
  min-height: 8rem;
  line-height: 1.55;
  resize: none;
}

/* Send row; the discard button sits at its right end (outside the CF7 form). */
.compose__foot {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 3.75rem var(--space-sm) var(--space-md);
}

.compose__send {
  min-height: 2.5rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-blue);
  color: var(--color-paper);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  transition: background-color var(--dur-short) var(--ease-out), scale 140ms var(--ease-out);
}

.compose__send:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.compose__send:active {
  scale: 0.97;
}

.compose__send[aria-disabled="true"] {
  background-color: var(--color-blue-deep);
  cursor: progress;
}

@media (hover: hover) {
  .compose__send:hover {
    background-color: var(--color-blue-deep);
  }
}

.compose__tip {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

@media (hover: none) {
  .compose__tip {
    display: none;
  }
}

/* "Protected by reCAPTCHA": the badge itself is hidden on this page (Google allows it when the
   form says so). */
.compose__legal {
  padding: 0 var(--space-md) var(--space-sm);
  padding-inline-end: 3.5rem; /* clear of the discard button */
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.compose__legal a {
  color: inherit;
  text-decoration: underline;
}

.grecaptcha-badge {
  visibility: hidden;
}

.compose__discard {
  position: absolute;
  inset-block-end: var(--space-sm);
  inset-inline-end: var(--space-sm);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}

@media (hover: hover) {
  .compose__discard:hover {
    background-color: color-mix(in oklch, var(--color-ink) 6%, transparent);
    color: var(--color-ink);
  }
}

/* CF7's own messages: field errors stay (styled below); the summary line and the spinner
 * give way to Titik Mail's toast and the Send button's "Sending…". */
.compose .wpcf7-response-output,
.compose .wpcf7-spinner {
  display: none;
}

.compose .wpcf7-not-valid-tip {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  padding-inline-start: var(--space-xs);
  background-color: var(--tmail-panel);
  color: var(--color-error);
  font-size: var(--text-xs);
  font-weight: 650;
  translate: 0 -50%;
  pointer-events: none;
}

.compose__body .wpcf7-not-valid-tip {
  inset-block: auto var(--space-xs);
  translate: none;
}

.compose.is-shaking {
  animation: compose-shake 420ms var(--ease-out);
}

@keyframes compose-shake {
  20% { translate: -0.5rem 0; }
  40% { translate: 0.4rem 0; }
  60% { translate: -0.25rem 0; }
  80% { translate: 0.1rem 0; }
}

/* The sent message, flying to the Sent folder (contact.js). */
.tmail__flight {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: var(--color-paper);
  box-shadow: 0 0.75rem 1.5rem -0.5rem var(--color-shadow);
  pointer-events: none;
}

/* "New message" notification and the toast */
.tmail__notify {
  position: absolute;
  inset-block-start: calc(var(--tmail-top) + var(--space-xs));
  inset-inline-end: var(--space-md);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: min(22rem, calc(100% - 2 * var(--space-md)));
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-ink);
  color: var(--color-paper);
  text-align: start;
  box-shadow: 0 1rem 2rem -0.75rem var(--color-shadow);
  cursor: pointer;
  animation: notify-in var(--dur-reveal) var(--ease-out);
}

.tmail__notify:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

@keyframes notify-in {
  from {
    opacity: 0;
    translate: 1.5rem 0;
  }
}

.tmail__notify-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.tmail__notify-mark svg {
  width: 1.2rem;
  height: auto;
}

.tmail__notify-text {
  display: grid;
  min-width: 0;
}

.tmail__notify-text span {
  overflow: hidden;
  color: var(--color-muted-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tmail__toast {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: calc(100% - 2 * var(--space-md));
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  border-radius: var(--space-xs);
  background-color: var(--color-ink);
  color: var(--color-paper);
  box-shadow: 0 0.75rem 1.5rem -0.75rem var(--color-shadow);
  visibility: hidden;
  opacity: 0;
  translate: 0 1rem;
  pointer-events: none;
  transition:
    opacity var(--dur-short) var(--ease-out),
    translate var(--dur-long) var(--ease-out),
    visibility 0s linear var(--dur-short);
}

.tmail__toast.is-on {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  transition-delay: 0s;
}

.tmail__toast-action {
  min-height: 2.25rem;
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--space-2xs);
  background: none;
  color: var(--color-blue-soft);
  font-weight: 700;
  cursor: pointer;
}

.tmail__toast-action:focus-visible {
  outline-color: var(--color-blue-soft);
}

/* Desktop: the real mail-app layout — sidebar, list, and the compose window floating
 * bottom-right over the list, inside a 3:2 screen (16:10 on wide screens). */
@media (min-width: 64rem) {
  .laptop__screen {
    aspect-ratio: 3 / 2;
  }

  /* Safety net: if the message ever outgrows the window, the form scrolls inside it. */
  .compose .wpcf7 {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .tmail {
    position: absolute;
    inset: 0;
    grid-template-columns: clamp(11rem, 19%, 15rem) minmax(0, 1fr);
    grid-template-rows: var(--tmail-top) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "side main";
    padding-block-end: 0;
  }

  .tmail__top {
    padding-block: 0;
  }

  .tmail__search {
    display: flex;
  }

  .tmail__side {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-sm) var(--space-md) var(--space-sm);
    overflow: visible;
  }

  .tmail__compose {
    align-self: start;
    min-height: 3.25rem;
  }

  .tmail__folders {
    flex-direction: column;
  }

  .tmail__folder {
    width: 100%;
    min-height: 2.15rem;
  }

  .tmail__main {
    min-height: 0;
    margin: 0 var(--space-md) var(--space-md) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mrow__open {
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto;
    grid-template-areas: "from text time";
    align-items: center;
    padding-block: 0.7rem;
  }

  .compose {
    position: absolute;
    inset-block: calc(var(--tmail-top) + var(--space-xs)) 0;
    inset-inline-end: var(--space-lg);
    width: min(38rem, 58%);
    margin: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--color-ink) 8%, transparent),
      0 1rem 2.5rem -0.75rem var(--color-shadow);
  }

  .compose.is-min {
    inset-block-start: auto;
    width: min(22rem, 36%);
  }

  @media (max-width: 79.99rem) {
    .compose {
      width: 64%;
    }
  }

  .compose.is-min .compose__bar {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .compose__row {
    min-height: 2.4rem;
  }

  .compose__input,
  .compose__message {
    font-size: var(--text-sm);
  }

  .compose__message {
    min-height: 4.5rem;
  }

  .compose .wpcf7-form > .compose__body {
    min-height: 4.5rem;
  }

  .compose__chips {
    gap: var(--space-2xs);
  }

  .compose__chips .wpcf7-list-item-label {
    min-height: 1.85rem;
    padding: 0 0.7rem 0 0.55rem;
    font-size: 0.8125rem;
  }

  .compose__row--chips .compose__label {
    line-height: 1.85rem;
  }
}

@media (min-width: 80rem) {
  .laptop__screen {
    aspect-ratio: 16 / 10;
  }
}

/* Channels ------------------------------------------------------------------ */

.channels {
  padding: var(--space-4xl) var(--gutter);
}

.channels__inner {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

.channel-list {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 56rem) {
  .channel-list {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}

.channel {
  --channel-fill: var(--color-blue);
  --channel-ink: var(--color-paper);
  position: relative;
  display: grid;
}

.channel--email {
  --channel-fill: var(--color-ink);
}

.channel--instagram {
  --channel-fill: var(--color-lime);
  --channel-ink: var(--color-ink);
}

/* Hover: the card fills with its colour from where the pointer came in (contact.js sets
 * --fx / --fy) — the same move as the buttons, at card size. */
.channel__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-height: 15rem;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-long) var(--ease-in-out), border-color var(--dur-long) var(--ease-in-out);
}

.channel--email .channel__link {
  padding-block-end: 4.75rem; /* room for the Copy button */
}

.channel__link::before {
  content: "";
  position: absolute;
  inset-block-start: var(--fy, 100%);
  inset-inline-start: var(--fx, 0%);
  z-index: -1;
  width: 320%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--channel-fill);
  translate: -50% -50%;
  scale: 0;
  transition: scale var(--dur-long) var(--ease-in-out);
}

.channel__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.channel__link:focus-visible,
.channel__link:hover {
  border-color: transparent;
  color: var(--channel-ink);
}

.channel__link:focus-visible::before,
.channel__link:hover::before {
  scale: 1;
  transition-duration: calc(var(--dur-reveal) * 1.1);
}

.channel__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.channel__value {
  margin-block-start: auto;
  padding-block-start: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.channel__note {
  color: color-mix(in oklch, currentColor 72%, transparent);
}

.channel__go {
  position: absolute;
  inset-block-start: var(--space-lg);
  inset-inline-end: var(--space-lg);
  width: 1.5rem;
  height: 1.5rem;
  transition: translate var(--dur-long) var(--ease-out);
}

@media (hover: hover) {
  .channel__link:hover .channel__go {
    translate: 0.2rem -0.2rem;
  }
}

/* WhatsApp: a small typing bubble that starts typing when you hover the card. */
.channel__bubble {
  position: absolute;
  inset-block-start: calc(var(--space-lg) + 2.25rem);
  inset-inline-end: var(--space-lg);
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.9rem 0.9rem 0.2rem 0.9rem;
  background-color: var(--color-blue);
  transition: background-color var(--dur-long) var(--ease-in-out);
}

.channel__bubble i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background-color: var(--color-paper);
}

.channel__link:is(:hover, :focus-visible) .channel__bubble {
  background-color: var(--color-paper);
}

.channel__link:is(:hover, :focus-visible) .channel__bubble i {
  background-color: var(--color-blue);
}

@media (prefers-reduced-motion: no-preference) {
  .channel__link:is(:hover, :focus-visible) .channel__bubble i {
    animation: bubble-type 1.1s var(--ease-in-out) infinite;
  }

  .channel__bubble i:nth-child(2) { animation-delay: 0.14s; }
  .channel__bubble i:nth-child(3) { animation-delay: 0.28s; }
}

@keyframes bubble-type {
  0%,
  55%,
  100% {
    translate: 0 0;
  }

  25% {
    translate: 0 -0.2rem;
  }
}

.channel__copy {
  position: absolute;
  inset-block-end: var(--space-lg);
  inset-inline-start: var(--space-lg);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.channel__copy .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.channel__copy.is-copied {
  border-color: var(--color-lime);
  background-color: var(--color-lime);
}

@media (hover: hover) {
  .channel__copy:hover {
    border-color: var(--color-ink);
  }
}

/* Visit ------------------------------------------------------------------- */

.visit {
  padding: var(--space-4xl) var(--gutter);
  background-color: var(--color-paper-2);
}

.visit__inner {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

.visit__grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 56rem) {
  .visit__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

/* The drawn map: soft blue land, white streets, a river, the brand's dot grid on top. */
.visit__map {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 20rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background-color: color-mix(in oklch, var(--color-blue) 7%, var(--color-paper));
}

.visit__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--color-blue) 22%, transparent) 0 1.1px, transparent 1.6px);
  background-size: 1.5rem 1.5rem;
  pointer-events: none;
}

.visit__streets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.visit__streets path {
  fill: none;
  stroke-linecap: round;
}

.visit__river {
  stroke: color-mix(in oklch, var(--color-blue) 28%, var(--color-paper));
  stroke-width: 16;
}

.visit__road {
  stroke: var(--color-paper);
  stroke-width: 7;
}

.visit__road--main {
  stroke-width: 13;
}

.visit__road--lane {
  stroke-width: 3.5;
}

.visit__pin {
  position: absolute;
  inset-block-start: 54%;
  inset-inline-start: 56%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: var(--color-paper);
  box-shadow: 0 0 0 0.3rem var(--color-paper), 0 1rem 1.5rem -0.5rem var(--color-shadow);
  translate: -50% -50%;
}

.visit__pin-mark {
  position: relative;
  width: 1.6rem;
  height: auto;
}

.visit__pulse {
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-blue);
  border-radius: 50%;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .visit__pulse {
    animation: pin-pulse 3s var(--ease-out) infinite;
  }

  .visit__pulse + .visit__pulse {
    animation-delay: 1.5s;
  }
}

@keyframes pin-pulse {
  from {
    opacity: 0.7;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 3.2;
  }
}

.visit__tag {
  position: absolute;
  inset-block-start: calc(54% + 2.5rem);
  inset-inline-start: 56%;
  z-index: 1;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  translate: -50% 0;
}

.visit__north {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 50%;
  background-color: var(--color-paper);
  font-family: var(--font-display);
}

.visit__card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-xl);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
}

.visit__clock {
  display: grid;
  gap: var(--space-xs);
}

.visit__label,
.visit__facts dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.visit__time {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 1;
}

.visit__time span {
  color: var(--color-blue);
  font-size: 0.4em;
}

.visit__state {
  font-weight: 650;
}

.visit__local {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.visit__facts {
  display: grid;
  gap: var(--space-md);
}

.visit__facts div {
  display: grid;
  gap: var(--space-2xs);
}

.visit__facts address {
  font-style: normal;
}

/* FAQ --------------------------------------------------------------------- */

.faq {
  padding: var(--space-4xl) var(--gutter);
}

.faq__inner {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .faq__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: start;
  }

  .faq__inner > .section-head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--ruler-offset, 0px) + var(--space-2xl));
  }
}

.faq__list {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.faq__item {
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Plus → minus, and the circle fills blue: the open answer is "titik"-marked. */
.faq__icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 50%;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 0.85rem;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  translate: -50% -50%;
  transition: rotate var(--dur-long) var(--ease-out);
}

.faq__icon::after {
  rotate: 90deg;
}

.faq__item[open] .faq__icon {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  color: var(--color-paper);
}

.faq__item[open] .faq__icon::after {
  rotate: 0deg;
}

@media (hover: hover) {
  .faq__q:hover .faq__icon {
    border-color: var(--color-ink);
  }

  .faq__item[open] .faq__q:hover .faq__icon {
    border-color: var(--color-blue);
  }
}

.faq__a {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  max-width: 62ch;
  padding-block-end: var(--space-lg);
  color: var(--color-muted);
  line-height: var(--leading-body);
}

/* Answers glide open where the browser can animate to height: auto. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .faq__item {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--dur-long) var(--ease-out),
        content-visibility var(--dur-long) allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }
  }
}