/* Contact page (option B), English and Indonesian. Page-level additions on top of field.css,
   same tokens. Order: hero with one reassurance line, then "What to send us" and the form
   (left) beside the direct channels and the live platforms (right), then three answers.
   Contrast on --paper (#F1F3EF): labels --ink (17:1), hints --ink-2 (7.1:1),
   field borders --ink-3 (4.1:1, above the 3:1 needed for UI boundaries),
   focus ring --cobalt-deep (6.1:1), errors --error (5.9:1). */

.contact { --error: #B42318; --field-bg: #FAFBF9; }

/* ---------- Hero ---------- */
.contact-hero { padding-bottom: clamp(40px, 7vh, 80px); }
.contact-hero .page-hero__lede { max-width: 32ch; }
/* One promise-free line: what a first conversation needs, nothing about speed or price. */
.contact-hero__note {
  max-width: 46ch;
  margin-top: clamp(18px, 2.6vh, 26px);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.contact-hero__quick { display: none; }

/* ---------- Two columns: what to send and the form left, direct channels right ---------- */
.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 72px;
  padding-top: clamp(36px, 6vh, 64px);
  padding-bottom: var(--section-y);
  /* Hairline inset to the page margins, like every other rule on the site. */
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) 50% 0 / calc(100% - 2 * var(--margin)) 1px no-repeat;
}
.contact__write { grid-column: 1 / span 7; max-width: 720px; }
.contact__direct { grid-column: 9 / span 4; }
.contact__h {
  margin-bottom: clamp(20px, 3vh, 28px);
  font: 400 clamp(1.75rem, 2.6vw, 2.6rem)/1.1 var(--serif);
  font-variation-settings: "opsz" 48;
  letter-spacing: -.016em;
}

/* What to send us: three things, side by side where the column is wide enough. */
.send { margin-bottom: clamp(56px, 8vh, 88px); }
.send__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; }
.send__item { position: relative; padding-top: 16px; border-top: 1px solid var(--rule-strong); }
.send__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; background: var(--cobalt); }
.send__what {
  margin-bottom: 8px;
  font: 400 clamp(1.2rem, 1.45vw, 1.4rem)/1.2 var(--serif);
  font-variation-settings: "opsz" 36;
  letter-spacing: -.006em;
  text-wrap: balance;
}
.send__item p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ---------- Form ---------- */
.form { display: grid; gap: 28px; }
.form[hidden], .form-done[hidden] { display: none; }
.form__note { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.field { display: grid; gap: 8px; min-width: 0; }
.field__label { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.field__optional { font-weight: 400; color: var(--ink-2); }
.field__hint { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.field__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.field__count { font-size: 14px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.field__count.is-met { color: var(--cobalt-deep); }
.field__input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--field-bg);
  color: var(--ink);
  font: 400 17px/1.45 var(--sans);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field__input::placeholder { color: var(--ink-2); opacity: 1; }
textarea.field__input { min-height: 196px; resize: vertical; }
.field__input:hover { border-color: var(--ink-2); }
.field__input:focus { outline: 2px solid var(--cobalt-deep); outline-offset: 2px; border-color: var(--cobalt-deep); }
.field__select { position: relative; }
.field__select .field__input { padding-right: 46px; cursor: pointer; text-overflow: ellipsis; }
.field__select i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink-2); pointer-events: none; }
/* Error: red border drawn inside (no layout shift), message with icon under the field. */
.field__input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__input[aria-invalid="true"]:focus { border-color: var(--error); }
.field__error { display: flex; align-items: flex-start; gap: 8px; font: 500 15px/1.45 var(--sans); color: var(--error); }
.field__error:empty { display: none; }
.field__error i { flex: none; margin-top: 2px; font-size: 18px; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.form__honest { max-width: 30ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* Error summary: top of the form, links to each field, receives focus on a failed submit. */
.form__summary { padding: 20px 24px 22px; border: 2px solid var(--error); background: var(--field-bg); }
.form__summary[hidden] { display: none; }
.form__summary-title { margin-bottom: 10px; font: 600 18px/1.3 var(--sans); color: var(--ink); }
.form__summary-list { list-style: none; display: grid; gap: 6px; }
.form__summary-list a { font-weight: 500; color: var(--error); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) { .form__summary-list a:hover { color: var(--ink); } }

/* Success panel */
.form-done { padding: clamp(28px, 4vw, 44px); border-top: 2px solid var(--cobalt); background: var(--paper-2); }
.form-done__title {
  margin-bottom: 16px;
  font: 400 clamp(1.6rem, 2.3vw, 2.2rem)/1.15 var(--serif);
  font-variation-settings: "opsz" 48;
  letter-spacing: -.012em;
}
.form-done p { max-width: 52ch; margin-bottom: 14px; color: var(--ink-2); text-wrap: pretty; }
.form-done p a { color: var(--cobalt-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) { .form-done p a:hover { color: var(--ink); } }
.form-done .btn { margin-top: 14px; }

/* ---------- Direct channels ---------- */
.contact__wa-note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.channel { margin-top: clamp(36px, 5vh, 52px); padding-top: 16px; border-top: 1px solid var(--rule-strong); }
.channel__h { margin-bottom: 10px; font: 600 14px/1.3 var(--sans); color: var(--ink-2); }
.channel__email {
  font: 380 clamp(1.9rem, 2.7vw, 2.75rem)/1.1 var(--serif);
  font-variation-settings: "opsz" 60;
  letter-spacing: -.016em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cobalt);
  text-decoration-thickness: .05em;
  text-underline-offset: .14em;
  overflow-wrap: anywhere;
}
@media (hover: hover) { .channel__email:hover { color: var(--cobalt-deep); } }
.channel__lines { font-size: 19px; line-height: 1.75; }
.channel__lines a { text-decoration-color: var(--rule-strong); text-underline-offset: 4px; }
@media (hover: hover) { .channel__lines a:hover { color: var(--cobalt-deep); text-decoration-color: currentColor; } }
.channel__aside { margin-left: 6px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.channel address { font-size: 17px; line-height: 1.65; }
.channel__map { margin-top: 20px; aspect-ratio: 4 / 3; background: var(--paper-2); outline: 1px solid var(--rule); }
.channel__map iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; filter: grayscale(1) contrast(1.04); transition: filter .5s ease; }
.channel__map:hover iframe, .channel__map:focus-within iframe { filter: none; }
.channel .link-arrow { margin-top: 12px; }

/* See our work live: compact rows, name left and address right, one hairline between rows. */
.live-links__intro { max-width: 34ch; margin-bottom: 12px; font: italic 400 1.12rem/1.35 var(--serif); color: var(--ink); }
.live-links { list-style: none; }
.live-links li + li { border-top: 1px solid var(--rule); }
.live-links a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding-block: 11px;
  color: var(--ink);
  text-decoration: none;
}
.live-links__name { font: 600 16px/1.4 var(--sans); }
.live-links__url {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font: 400 15px/1.4 var(--sans);
  color: var(--cobalt-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.live-links__url i { flex: none; font-size: 14px; transition: transform .4s var(--ease-out); }
@media (hover: hover) {
  .live-links a:hover .live-links__url { color: var(--ink); }
  .live-links a:hover .live-links__url i { transform: translate(2px, -2px); }
}

/* ---------- Three answers: the Services FAQ, compact (native details/summary) ---------- */
.faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 24px;
  align-items: start;
  padding-top: clamp(56px, 9vh, 96px);
  padding-bottom: var(--section-y);
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) 50% 0 / calc(100% - 2 * var(--margin)) 1px no-repeat;
}
.faq__aside { grid-column: 1 / span 4; }
.faq__aside .contact__h { margin-bottom: 10px; }
.faq__list { grid-column: 6 / span 7; border-bottom: 1px solid var(--rule-strong); interpolate-size: allow-keywords; }
.faq__item { border-top: 1px solid var(--rule-strong); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  list-style: none;
  cursor: pointer;
  font: 400 clamp(1.25rem, 1.6vw, 1.55rem)/1.25 var(--serif);
  font-variation-settings: "opsz" 36;
  letter-spacing: -.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:focus-visible { outline-offset: 4px; }
.faq__q-text { text-wrap: balance; transition: color .3s ease; }
.faq__icon { flex: none; margin-top: .18em; font-size: 22px; color: var(--cobalt-deep); transition: transform .5s var(--ease-out); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding-bottom: 26px; }
.faq__a p { max-width: 58ch; color: var(--ink-2); text-wrap: pretty; }
@media (hover: hover) { .faq__q:hover .faq__q-text { color: var(--cobalt-deep); } }
/* The answer opens smoothly where the browser can animate details (reduced motion: instant). */
.faq__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
/* field.css stops motion with html.is-reduced *, which never reaches this pseudo-element. */
html.is-reduced .faq__item::details-content { transition: none; }

/* ---------- Responsive ---------- */
/* Phones under 375px: with the EN/ID switcher in the bar, field.css's 24px gap pushes the
   menu button 7px past the edge. A tighter gap keeps it whole (candidate for field.css). */
@media (max-width: 374px) { .masthead__bar { gap: 14px; } }
@media (max-width: 1240px) {
  /* The write column is too narrow for three columns: one thing per row, term beside text. */
  .send__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .send__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--gutter); padding-block: 16px 18px; }
  .send__what { margin-bottom: 0; }
}
@media (max-width: 1100px) {
  .contact__write { grid-column: 1 / span 7; }
  .contact__direct { grid-column: 8 / span 5; }
  .faq__aside { grid-column: 1 / span 5; }
  .faq__list { grid-column: 6 / span 7; }
}
@media (max-width: 767px) {
  .contact-hero__note { font-size: 17px; }
  .contact-hero__quick { display: flex; }
  .contact { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .contact__write, .contact__direct { grid-column: 1 / -1; max-width: none; }
  .send__item { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .form { gap: 24px; }
  .channel__map { aspect-ratio: 1; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__aside, .faq__list { grid-column: 1 / -1; }
  .faq__q { gap: 16px; padding-block: 18px; }
}