/* Leans on styles.css for tokens, buttons and .eyebrow — this only adds
   what a form needs, since the main site has no form anywhere else. */

.review-page { background: var(--bone); }

.review-wrap { max-width: 640px; margin: 0 auto; padding: 72px 24px 96px; }

.review-home {
  display: inline-block; margin-bottom: 26px;
  font-size: 14px; color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.review-home:hover { color: var(--ink); }

.review-head { margin-bottom: 32px; }
.review-head h1 { font-family: var(--serif); font-size: clamp(38px, 7vw, 60px); margin: 6px 0 14px; font-weight: 400; }
.review-head h1 em { font-style: italic; color: var(--clay); }
.review-lede { color: var(--ink-soft); line-height: 1.65; margin: 0; }

.review-form { display: grid; gap: 20px; }

.field { display: block; }
.field__label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.field__opt { font-weight: 400; color: var(--muted); }
.field__note { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

.field input, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--clay); }
.field textarea { resize: vertical; line-height: 1.6; }

.field-row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Off-screen rather than display:none — some bots skip hidden fields. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.review-error {
  margin: 0; padding: 12px 14px; border-radius: var(--r-sm);
  background: #FBEAE5; color: #8C2F12; font-size: 14px;
}
.review-closed {
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--bone-deep); color: var(--ink-soft); line-height: 1.6;
}

/* The Google ask is the whole content of the page once a review is sent,
   so it carries the emphasis the form used to. */
.review-google {
  padding: 26px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bone-deep);
}
.review-google h2 {
  margin: 0 0 10px; font-size: 20px; font-weight: 600; line-height: 1.35;
}
.review-google p { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.6; font-size: 15px; }
.review-google__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.review-clip { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.review-clip.is-ready { color: var(--clay); font-weight: 500; }

.review-copy { display: block; margin-top: 16px; }
.review-copy__label {
  display: block; margin-bottom: 6px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.review-copy textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 14px;
  color: var(--ink-soft); background: #fff; line-height: 1.6;
  border: 1px solid var(--line); border-radius: var(--r-sm); resize: vertical;
}

.review-back { margin-top: 28px; }
.review-back a { color: var(--clay); }

/* The one legitimate !important here. A class that sets `display` beats the
   browser's own [hidden] rule, so `el.hidden = true` silently does nothing —
   which is how the submitted review form stayed on screen with its button
   still reading "Sending…", and how the hidden extra quotes and their
   "Read all" button were visible the whole time. Element-specific guards
   were being added one at a time as each was noticed; this covers the lot. */
[hidden] { display: none !important; }