/* "No-obligation advice conversation": the button (under the contact buttons of the site) and the chooser it opens (advice.js).
   Self-contained: own colours, so the chooser looks the same everywhere. The button is made for dark pages;
   .advice-row--light / .advice-btn--light is the version for the light ARCDESIGN pages. */

/* ── the line with the button ── */
.advice-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; color: #DED8CC; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.advice-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 22px;
  border: 1px solid rgb(211 170 118 / .7);
  border-radius: 0;
  background: transparent;
  color: #DED8CC;
  font: 400 13px/1.3 "Anonymous Pro", ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .35s, color .35s, border-color .35s;
}
.advice-btn span { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.advice-btn:hover, .advice-btn:focus-visible { background: #D3AA76; border-color: #D3AA76; color: #1c1c1c; }
.advice-btn:hover span { transform: translateX(4px); }
.advice-btn:focus-visible { outline: 2px solid #DED8CC; outline-offset: 3px; }
/* directly under a contact button (the row sits a little lower, and is centred in the home scene) */
.advice-row--cta { margin-top: 22px; }
.advice-row--center { justify-content: center; font-size: clamp(.95rem, 1.2vw, 1.05rem); }
/* the light ARCDESIGN pages */
.advice-row--light { color: #2E2E2E; }
.advice-btn--light { border-color: rgb(46 46 46 / .55); color: #2E2E2E; }
.advice-btn--light:hover, .advice-btn--light:focus-visible { background: #2E2E2E; border-color: #2E2E2E; color: #F6F3EB; }
.advice-btn--light:focus-visible { outline-color: #4A0404; }

/* ── the chooser ── */
html.is-advice { overflow: hidden; }
.advice {
  --a-brass: #D3AA76;
  --a-oat: #DED8CC;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid rgb(211 170 118 / .38);
  border-radius: 0;
  background: linear-gradient(165deg, #363636, #242424);
  color: var(--a-oat);
  box-shadow: 0 40px 90px -20px rgb(0 0 0 / .85);
  overflow: auto;
}
.advice::backdrop { background: rgb(14 6 8 / .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.advice[open] { animation: advice-in .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes advice-in { from { opacity: 0; transform: translateY(14px); } }
.advice__in { position: relative; padding: clamp(24px, 5vw, 36px); }
.advice__x {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--a-oat); font-size: 26px; line-height: 1; cursor: pointer;
}
.advice__x:hover, .advice__x:focus-visible { color: var(--a-brass); }
.advice__x:focus-visible, .advice__opt:focus-visible, .advice__link:focus-visible { outline: 2px solid var(--a-brass); outline-offset: 2px; }
.advice__tag { margin: 0 0 12px; font: 400 11px "Anonymous Pro", ui-monospace, Consolas, monospace; letter-spacing: .28em; text-transform: uppercase; color: var(--a-brass); }
.advice__h { margin: 0; padding-right: 36px; font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.advice__lede { margin: 12px 0 22px; font-size: 1rem; line-height: 1.5; color: rgb(222 216 204 / .86); }
.advice__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.advice__opt {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid rgb(222 216 204 / .2);
  background: rgb(255 255 255 / .03);
  color: var(--a-oat);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.advice__opt:hover, .advice__opt[aria-expanded="true"] { border-color: var(--a-brass); background: rgb(211 170 118 / .08); }
.advice__ic { width: 26px; height: 26px; color: var(--a-brass); }
.advice__txt { display: grid; gap: 2px; min-width: 0; }
.advice__txt b { font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; }
.advice__txt small { font: 400 13px/1.3 "Anonymous Pro", ui-monospace, Consolas, monospace; letter-spacing: .06em; color: rgb(222 216 204 / .74); overflow-wrap: anywhere; }
.advice__go { font: 400 18px/1 "Anonymous Pro", ui-monospace, Consolas, monospace; color: var(--a-brass); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.advice__opt:hover .advice__go { transform: translateX(3px); }
.advice__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.advice__sub[hidden] { display: none; }
.advice__link {
  min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgb(211 170 118 / .55);
  color: var(--a-oat);
  font: 400 13px "Anonymous Pro", ui-monospace, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s, color .3s;
}
.advice__link:hover { background: var(--a-brass); color: #1c1c1c; }
/* the forms inside the chooser (phone, WhatsApp, plan a meeting) */
.advice__back { margin: 0 0 14px; padding: 8px 0; border: 0; background: none; color: var(--a-brass); font: 400 13px "Anonymous Pro", ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.advice__back:hover, .advice__back:focus-visible { color: var(--a-oat); }
.advice__back:focus-visible, .advice__submit:focus-visible, .advice__form input:focus-visible, .advice__form select:focus-visible { outline: 2px solid var(--a-brass); outline-offset: 2px; }
.advice__h[tabindex]:focus { outline: none; }
.advice__form { display: grid; gap: 18px; }
.advice__field { margin: 0; min-width: 0; }
.advice__field label { display: block; margin: 0 0 7px; font-size: 1rem; font-weight: 500; line-height: 1.4; }
.advice__req, .advice__opt2 { font-weight: 400; color: rgb(222 216 204 / .74); }
.advice__form input[type="text"], .advice__form input[type="tel"], .advice__form input[type="email"], .advice__form select {
  display: block; width: 100%; min-height: 50px; padding: 11px 13px;
  border: 1px solid rgb(222 216 204 / .55); border-radius: 0; background: #232323; color: var(--a-oat);
  font: inherit; font-size: 1rem; line-height: 1.4; -webkit-appearance: none; appearance: none;
}
.advice__form select { padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, #DED8CC 50%), linear-gradient(135deg, #DED8CC 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.advice__form select:disabled { opacity: .6; }
.advice__field.is-bad input[type="text"], .advice__field.is-bad input[type="tel"], .advice__field.is-bad input[type="email"], .advice__field.is-bad select { border: 2px solid #F4B3A6; padding: 10px 12px; }
.advice__hint { margin: 6px 0 0; font-size: .92rem; color: rgb(222 216 204 / .74); }
.advice__err { margin: 7px 0 0; font-size: .95rem; line-height: 1.4; color: #F4B3A6; }
.advice__err[hidden] { display: none; }
.advice__check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 !important; font-weight: 400 !important; line-height: 1.5; cursor: pointer; }
.advice__check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--a-oat); }
.advice__check a { color: var(--a-brass); text-decoration: underline; text-underline-offset: 3px; }
.advice__submit {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 24px;
  border: 1px solid var(--a-oat); border-radius: 0; background: #4A0404; color: var(--a-oat);
  font: 700 13px/1.2 "Anonymous Pro", ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, color .3s;
}
.advice__submit:hover { background: var(--a-oat); color: #1c1c1c; }
.advice__submit[disabled] { opacity: .7; cursor: default; }
.advice__submit--quiet { margin-top: 20px; background: transparent; }
.advice__status { min-height: 1.4em; margin: 0; font-size: .98rem; }
.advice__status.is-bad { color: #F4B3A6; }
.advice__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.advice__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.advice__note { margin: 18px 0 0; font-size: .92rem; line-height: 1.5; color: rgb(222 216 204 / .74); }
.advice__note a { color: var(--a-brass); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) { .advice__sub { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .advice[open] { animation: none; }
  .advice-btn, .advice-btn span, .advice__opt, .advice__go, .advice__link { transition: none; }
}