/* Form dialogs: the package request on /pricing and the enquiry on the
   homepage. A white sheet over the blurred navy page, a sky-blue head with
   the quarter sun in its corner, light fields that ring sky blue on focus and
   one yellow button. Square corners, as everywhere on the site.
   Everything vertical is sized from the screen height (--fd-y), so the whole
   sheet fits the window without a scrollbar; on phones it rises from the
   bottom. If a very short window still needs to scroll, it scrolls with no
   bar drawn. */
html:has(.fdialog[open]) { overflow: hidden; scrollbar-gutter: stable; }

.fdialog {
  --fd-x: clamp(1.25rem, 5vw, 2.5rem);
  --fd-y: clamp(1rem, 4.2vh, 2.5rem);
  --fd-field: clamp(2.875rem, 6.6vh, 3.25rem);
  --fd-error: #c0392f;
  width: min(42rem, 100% - 2rem);
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.3s var(--ease), translate 0.3s var(--ease), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
.fdialog::-webkit-scrollbar { display: none; }
.fdialog[open] { opacity: 1; translate: 0 0; }
@starting-style { .fdialog[open] { opacity: 0; translate: 0 18px; } }
.fdialog::backdrop {
  background: rgb(10 22 40 / 0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
.fdialog[open]::backdrop { background: rgb(10 22 40 / 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@starting-style { .fdialog[open]::backdrop { background: rgb(10 22 40 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }

/* Short windows get a tighter rhythm, so the package form still fits with
   its artwork list showing. Phones set their own below. */
@media (max-height: 700px) {
  .fdialog { --fd-y: clamp(0.875rem, 3.6vh, 2.5rem); }
}

@media (max-width: 559px) {
  .fdialog { --fd-y: clamp(0.875rem, 3.1vh, 2rem); --fd-field: 3.25rem; width: 100%; max-height: 94dvh; margin: auto 0 0; translate: 0 100%; }
  @starting-style { .fdialog[open] { translate: 0 100%; } }
}

/* ---- Head: sky blue, the sun rising out of the top corner ---- */
.fd-head { position: relative; overflow: hidden; padding: calc(var(--fd-y) * 1.1) 4.5rem var(--fd-y) var(--fd-x); background: var(--brand); color: var(--ink); }
@media (min-width: 560px) { .fd-head { padding-right: 6rem; } }
.fd-head::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: clamp(5.5rem, min(20vw, 17vh), 9rem); aspect-ratio: 1;
  border-radius: 0 0 0 100%; background: var(--sun);
}
.fd-head > :not(.fd-close) { position: relative; }
.fd-title { font-size: clamp(1.6rem, min(5.4vw, 5.2vh), 2.6rem); }
.fd-intro { margin-top: calc(var(--fd-y) * 0.4); max-width: 44ch; font-size: 1rem; line-height: 1.5; color: rgb(10 22 40 / 0.78); }
.fd-close {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color 0.2s ease;
}
.fd-close:hover { background: rgb(10 22 40 / 0.1); }
.fd-close:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.fd-close svg { width: 1.375rem; height: 1.375rem; }

/* The package being requested, as white tags, and its total. */
.fd-recap { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: calc(var(--fd-y) * 0.5); }
.fd-recap li { padding: 0.4rem 0.7rem; background: rgb(255 255 255 / 0.92); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.fd-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-top: calc(var(--fd-y) * 0.5); }
.fd-total-sum { font-size: clamp(1.7rem, min(5vw, 5vh), 2.5rem); }
.fd-total-note { font-size: 0.875rem; color: rgb(10 22 40 / 0.7); }

/* ---- Fields: separate light boxes with the label above, a sky ring on
   focus, red when they need fixing. Box and textarea heights come from the
   screen height so the sheet always fits. ---- */
.fd-form { padding: var(--fd-y) var(--fd-x); }
.fd-grid { display: grid; gap: clamp(0.75rem, 2.2vh, 1.25rem) 1rem; }
@media (min-width: 560px) {
  .fd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--full { grid-column: 1 / -1; }
}
/* On phones the short pairs (first and last name, phone and company) stay
   side by side and everything else runs full width, so the sheet still fits. */
@media (max-width: 559px) {
  .fd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field:not(.field--half) { grid-column: 1 / -1; }
  .field--half { display: flex; flex-direction: column; }
  .field--half label { gap: 0.5rem; font-size: 0.8125rem; white-space: nowrap; }
  .field--half .field-opt { font-size: 0.6875rem; }
  .field--half input { margin-top: auto; }
  .fd-grid .field textarea { height: clamp(4.5rem, 11vh, 7rem); }
}
.field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-bottom: 0.45rem; font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.field-opt { font-size: 0.75rem; font-weight: 500; color: rgb(10 22 40 / 0.45); }
.field input,
.field textarea {
  display: block; width: 100%; height: var(--fd-field); padding: 0.75rem 1rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #f1f5f9; border: 1px solid #dbe3ec; border-radius: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { height: clamp(4.5rem, 14vh, 8.5rem); line-height: 1.5; resize: none; scrollbar-width: none; }
.field textarea::-webkit-scrollbar { display: none; }
.field input:hover,
.field textarea:hover { border-color: #b4c3d3; }
.field input:focus,
.field textarea:focus { outline: none; background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(43 173 233 / 0.2); }
.field [aria-invalid="true"] { border-color: #d0453c; background: #fff6f5; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(208 69 60 / 0.15); }
.field-error { margin-top: 0.4rem; font-size: 0.8125rem; font-weight: 500; color: var(--fd-error); }
.field-error:empty { display: none; }

/* Artwork: drawn like the other boxes, the real file input laid over it so a
   click or a drop both work; chosen files list underneath as tags. */
.file-pick { position: relative; }
.field .file-pick input[type="file"] { position: absolute; inset: 0; z-index: 1; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.file-box {
  display: flex; align-items: center; gap: 0.6rem; height: var(--fd-field); padding: 0 1rem;
  background: #f1f5f9; border: 1px dashed #b4c3d3; color: rgb(10 22 40 / 0.65);
  font-size: 0.9375rem; font-weight: 500; white-space: nowrap; overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.file-box svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--brand-deep); }
.file-text { overflow: hidden; text-overflow: ellipsis; }
.file-pick:hover .file-box { border-color: var(--brand); background: #eaf6fd; }
.file-pick:has(input:focus-visible) .file-box { border-color: var(--brand); box-shadow: 0 0 0 4px rgb(43 173 233 / 0.2); }
.file-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.file-list:empty { display: none; }
.file-list li { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; padding: 0.3rem 0.35rem 0.3rem 0.65rem; background: #eaf6fd; font-size: 0.8125rem; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; font-weight: 600; }
.file-size { flex: none; color: rgb(10 22 40 / 0.55); }
.file-list button {
  display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.file-list button:hover { background: rgb(10 22 40 / 0.08); }
.file-error { margin-top: 0.5rem; }
.file-hint { margin-top: 0.4rem; font-size: 0.75rem; line-height: 1.35; color: rgb(10 22 40 / 0.5); }
/* On short windows and phones the hint steps aside once files are chosen
   (the list shows what was added, and any error restates the limit), so the
   sheet still fits without scrolling. */
@media (max-height: 760px), (max-width: 559px) {
  .fd-form:has(.file-list li) .file-hint { display: none; }
}

/* Bots fill every field; people never see this one. */
.fd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- The yellow button, its arrow nudging on hover ---- */
.fd-submit {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  width: 100%; height: clamp(3rem, 7vh, 3.5rem); margin-top: var(--fd-y); padding: 0 1.5rem;
  border: 0; border-radius: 0; background: var(--sun); color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background-color 0.2s ease;
}
.fd-submit svg { width: 1.25rem; height: 1.25rem; transition: translate 0.3s var(--ease); }
.fd-submit:hover { background: #ffdf55; }
.fd-submit:hover svg { translate: 4px 0; }
.fd-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fd-submit:disabled { opacity: 0.7; cursor: progress; }
.fd-status { margin-top: 1rem; font-size: 0.875rem; font-weight: 500; color: var(--fd-error); }
.fd-status:empty { display: none; }

/* ---- Sent ---- */
.fd-done { padding: calc(var(--fd-y) * 1.25) var(--fd-x); }
.fd-done:focus { outline: none; }
.fd-done-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--sun); color: var(--ink); }
.fd-done-icon svg { width: 1.75rem; height: 1.75rem; }
.fd-done-title { margin-top: calc(var(--fd-y) * 0.75); font-size: clamp(1.5rem, 4.4vw, 2.1rem); }
.fd-done p { margin-top: 0.75rem; max-width: 40ch; line-height: 1.55; color: rgb(10 22 40 / 0.72); }
.fd-done .fd-submit { width: auto; min-width: 12rem; display: inline-flex; }

/* ---- Our number, under the form ---- */
.fd-call { display: flex; align-items: center; gap: 1rem; padding: calc(var(--fd-y) * 0.6) var(--fd-x); border-top: 1px solid #e3e9f0; background: #f6f8fb; }
.fd-call-icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; background: var(--ink); color: var(--sun); }
.fd-call-icon svg { width: 1.25rem; height: 1.25rem; }
.fd-call p { font-size: 0.875rem; line-height: 1.35; color: rgb(10 22 40 / 0.6); }
.fd-call a { display: block; font-size: 1.25rem; font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; color: var(--ink); transition: color 0.2s ease; }
.fd-call a:hover { color: var(--brand-deep); }

@media (prefers-reduced-motion: reduce) {
  .fdialog, .fdialog::backdrop, .fd-submit svg { transition: none; }
}