/* Contact form dialog, shared by the portfolio and the guest app page (assets/contact-form.js builds it).
   Self-contained: it brings its own colours and buttons, and is navy on every page and theme. */
dialog.cform {
  --cf-ink: #F4EDE1;
  --cf-ink-2: rgba(244, 237, 225, .78);
  --cf-ink-3: rgba(244, 237, 225, .6);
  --cf-gold: #E8B04B;
  --cf-gold-ink: #F0C26A;
  --cf-teal: #4A9EAA;
  --cf-teal-ink: #7FCBD5;
  --cf-glass: rgba(255, 255, 255, .07);
  --cf-glass-strong: rgba(255, 255, 255, .12);
  --cf-glass-hi: rgba(255, 255, 255, .3);
  --cf-edge: rgba(255, 255, 255, .14);
  --cf-ease: cubic-bezier(.2, .8, .2, 1);
  box-sizing: border-box;
  margin: auto; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: hidden auto;
  border: 0; border-radius: 32px; color: var(--cf-ink);
  font: 400 16px/1.6 Manrope, system-ui, sans-serif; text-align: left;
  background: radial-gradient(120% 140% at 0% 0%, #1B3266 0%, #0F1D3A 45%, #091330 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 100px -30px rgba(5, 12, 35, .7);
  overscroll-behavior: contain;
}
dialog.cform *, dialog.cform *::before, dialog.cform *::after { box-sizing: border-box; }
dialog.cform[open] { animation: cf-pop .55s cubic-bezier(.22, .8, .3, 1); }
dialog.cform::backdrop { background: rgba(8, 14, 32, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: cf-fade .4s var(--cf-ease); }
@keyframes cf-pop { from { opacity: 0; transform: translateY(32px) scale(.97); } }
@keyframes cf-fade { from { opacity: 0; } }

/* the glows are clipped by their own layer, so they don't make the dialog scrollable */
.cform .orbs { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cform .orb { position: absolute; border-radius: 50%; filter: blur(10px); }
.cform .orb.a { width: 320px; height: 320px; right: -130px; top: -150px; background: radial-gradient(circle, rgba(232, 176, 75, .42), transparent 65%); }
.cform .orb.b { width: 300px; height: 300px; left: -140px; bottom: -170px; background: radial-gradient(circle, rgba(74, 158, 170, .42), transparent 65%); }
.cform-in { position: relative; padding: clamp(26px, 5vw, 40px); }

.cform .cf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cf-teal-ink);
}
.cform .cf-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cf-teal); box-shadow: 0 0 0 4px rgba(74, 158, 170, .25); }
.cform h3 {
  font: 500 clamp(34px, 6vw, 44px)/1 Fraunces, Georgia, serif; letter-spacing: -.02em; color: var(--cf-ink);
  margin: 14px 0 10px;
}
.cform h3 em {
  font-style: italic; font-weight: 400; padding-right: .06em;
  background: linear-gradient(100deg, var(--cf-gold) 10%, #F3D08A 45%, var(--cf-teal) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cform .sub { color: var(--cf-ink-2); margin: 0 0 26px; font-size: 16px; line-height: 1.5; }

.cform .x {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--cf-ink); background: var(--cf-glass-strong); box-shadow: inset 0 1px 0 var(--cf-glass-hi), inset 0 0 0 1px var(--cf-edge);
  transition: background-color .3s var(--cf-ease), transform .3s var(--cf-ease);
}
.cform .x:hover { background: rgba(255, 255, 255, .2); }
.cform .x:active { transform: scale(.9); }
.cform .x svg { width: 20px; height: 20px; }

.cform .fields { display: grid; gap: 16px; }
@media (min-width: 560px) { .cform .fields { grid-template-columns: 1fr 1fr; } .cform .f-msg { grid-column: 1 / -1; } }
.cform .f label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--cf-ink-2); margin: 0 0 8px; }
.cform input, .cform textarea {
  display: block; width: 100%; margin: 0; font: 500 16px/1.4 Manrope, system-ui, sans-serif; color: var(--cf-ink);
  background: var(--cf-glass); border: 0; border-radius: 16px; padding: 14px 16px;
  box-shadow: inset 0 0 0 1px var(--cf-edge), inset 0 1px 2px rgba(0, 0, 0, .25);
  transition: box-shadow .3s var(--cf-ease), background-color .3s var(--cf-ease);
}
.cform input::placeholder, .cform textarea::placeholder { color: var(--cf-ink-3); opacity: .75; }
.cform input:hover, .cform textarea:hover { background: var(--cf-glass-strong); }
.cform input:focus, .cform textarea:focus { outline: none; background: var(--cf-glass-strong); box-shadow: inset 0 0 0 1.5px var(--cf-gold), 0 0 0 4px rgba(232, 176, 75, .18); }
.cform [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #F08A7E, 0 0 0 4px rgba(240, 138, 126, .14); }
.cform textarea { min-height: 140px; resize: vertical; }
.cform .err-msg { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #F4A79D; }
.cform .err-msg:empty { display: none; }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cform .alert {
  display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; padding: 14px 16px; border-radius: 16px;
  font-size: 14px; line-height: 1.5; color: var(--cf-ink);
  background: rgba(240, 138, 126, .12); box-shadow: inset 0 0 0 1px rgba(240, 138, 126, .3);
}
.cform .alert[hidden] { display: none; }
.cform .alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #F4A79D; }
.cform .alert a { color: var(--cf-gold-ink); font-weight: 700; }

.cform .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.cform .foot small { color: var(--cf-ink-3); font-size: 13px; }
@media (max-width: 559px) { .cform .foot { flex-direction: column-reverse; align-items: stretch; text-align: center; } }

.cform .cf-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; min-width: 160px; padding: 0 26px; margin: 0; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 15px/1 Manrope, system-ui, sans-serif; letter-spacing: .01em; text-decoration: none;
  transition: transform .3s var(--cf-ease), box-shadow .3s var(--cf-ease), background-color .3s var(--cf-ease);
}
.cform .cf-btn:active { transform: scale(.96); }
.cform .cf-btn svg { width: 18px; height: 18px; flex: none; }
.cform .cf-gold {
  color: #1B1405; background: linear-gradient(180deg, #F3C66E, #E2A537);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(150, 90, 0, .25), 0 10px 24px -8px rgba(200, 130, 20, .55);
}
.cform .cf-gold::before {
  content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 999px 999px 40% 40% / 999px 999px 20px 20px;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none;
}
.cform .cf-gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 34px -10px rgba(200, 130, 20, .5); }
.cform .cf-glass { color: var(--cf-ink); background: var(--cf-glass-strong); box-shadow: inset 0 1px 0 var(--cf-glass-hi), inset 0 0 0 1px var(--cf-edge); }
.cform .cf-glass:hover { background: rgba(255, 255, 255, .2); }
.cform .cf-btn .spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.2px solid rgba(27, 20, 5, .25); border-top-color: #1B1405; animation: cf-spin .8s linear infinite; }
.cform .cf-btn.busy { pointer-events: none; }
.cform .cf-btn.busy .spin { display: block; }
.cform .cf-btn.busy .arrow { display: none; }
@keyframes cf-spin { to { transform: rotate(360deg); } }

/* success view */
.cform .done { text-align: center; padding: 18px 0 6px; }
.cform .done[hidden], .cform form[hidden] { display: none; }
.cform .done .check {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%;
  color: #1B1405; background: linear-gradient(180deg, #F3C66E, #E2A537);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 34px -10px rgba(200, 130, 20, .6), 0 0 0 10px rgba(232, 176, 75, .12);
  animation: cf-pop-check .7s cubic-bezier(.34, 1.56, .64, 1) both;
}
.cform .done .check svg { width: 34px; height: 34px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: cf-draw .5s var(--cf-ease) .25s forwards; }
.cform .done h3 { margin-top: 0; }
.cform .done .sub { max-width: 34ch; margin: 0 auto 26px; }
@keyframes cf-pop-check { from { transform: scale(.4); opacity: 0; } }
@keyframes cf-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  dialog.cform[open], dialog.cform::backdrop, .cform .done .check, .cform .done .check svg { animation: none; }
  .cform .done .check svg { stroke-dashoffset: 0; }
}