/* ==========================================================================
   Contact — "The file opens"
   A three-step intake with a live file card that writes itself as you answer,
   echoing the credential card on the homepage. A smoke-ring seal (Paper
   Shaders) closes behind the card as the answers land, and sending puts the
   card into an envelope. Loads after site.css.
   ========================================================================== */

@property --seam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- Hero + fast path ---------------------------------------------------- */
.chero { position: relative; padding: clamp(7.5rem, 12vw, 9.5rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; isolation: isolate; }
.chero::before { content: ''; position: absolute; z-index: -1; inset: -40% 30% auto -10%; height: 110%;
  background: radial-gradient(45% 45% at 40% 50%, rgba(61,123,255,.15), transparent 70%); pointer-events: none; }
.chero__title { font-weight: 500; font-size: clamp(2.3rem, 1rem + 5vw, 4.8rem); line-height: 1; letter-spacing: -.05em; margin-top: 1rem; }
.chero__title em { color: var(--blue-2); }
.chero__lead { margin-top: 1.4rem; max-width: 48ch; color: var(--ink-2); font-size: clamp(1rem, .96rem + .3vw, 1.12rem); }

/* the people who want to talk now shouldn't have to scroll past a form */
.fast { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.fast__a { display: inline-flex; align-items: center; gap: .9rem; height: 56px; padding: 0 1.4rem; border-radius: 999px;
  border: 1px solid var(--line-2); transition: border-color .4s, background .4s, transform .4s var(--ease); }
.fast__a:hover { border-color: rgba(127,176,255,.45); background: rgba(61,123,255,.08); transform: translateY(-2px); }
.fast__a svg { width: 18px; height: 18px; fill: none; stroke: var(--blue-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fast__k { color: var(--ink-3); font: 500 .68rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; display: block; margin-bottom: .25rem; }
.fast__v { font-size: .98rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ---- Layout -------------------------------------------------------------- */
.cgrid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start; padding-bottom: clamp(4rem, 8vw, 7rem); }

/* ---- Step rail ----------------------------------------------------------- */
.srail { display: flex; align-items: center; gap: .75rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.srail__i { display: flex; align-items: center; gap: .6rem; color: var(--ink-3); font: 500 .7rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.srail__d { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums; transition: background .45s, border-color .45s, color .45s; }
.srail__i.is-on { color: var(--ink); }
.srail__i.is-on .srail__d { background: var(--blue); border-color: var(--blue); color: #fff; }
.srail__i.is-done .srail__d { background: rgba(61,123,255,.18); border-color: rgba(127,176,255,.5); color: var(--blue-2); }
.srail__line { flex: 1; height: 1px; background: var(--line); }

/* ---- Steps --------------------------------------------------------------- */
.fstep { border: 0; padding: 0; margin: 0; min-width: 0; }
/* without JS every step stays on the page as one long form; once the script
   takes over it adds .is-live and drives visibility with [hidden] */
.js #intake:not(.is-live) .fstep + .fstep { display: none; }
.fstep[hidden] { display: none; }
.fstep__h { font-size: clamp(1.4rem, 1.15rem + .9vw, 2rem); font-weight: 500; letter-spacing: -.04em; padding: 0; }
.fstep__h em { color: var(--blue-2); }
.fstep__sub { margin-top: .7rem; color: var(--ink-2); font-size: .98rem; max-width: 48ch; }
.fstep__body { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* selectable chips built on real radios */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chips input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chips label { display: inline-flex; align-items: center; height: 44px; padding: 0 1.15rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; letter-spacing: -.01em;
  transition: color .3s, border-color .3s, background .3s; }
.chips label:hover { color: var(--ink); border-color: var(--line-2); }
.chips input:checked + label { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.chips input:focus-visible + label { outline: 2px solid var(--blue-2); outline-offset: 2px; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.fld { display: grid; gap: .5rem; margin-top: 1.1rem; }
.fld > label { color: var(--ink-3); font: 500 .68rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.fld input, .fld textarea { width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: 12px; padding: .85rem 1rem; transition: border-color .3s; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--blue-2); }
.fld textarea { resize: vertical; min-height: 116px; }
.fld__err { color: #ff9a9a; font-size: .8rem; min-height: 1em; }
.fld__hint { color: var(--ink-3); font-size: .78rem; margin-top: -.1rem; }

.fnav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.fnav__back { background: none; border: 0; cursor: pointer; color: var(--ink-3); font: 500 .72rem/1 var(--mono);
  letter-spacing: .07em; text-transform: uppercase; transition: color .3s; }
.fnav__back:hover { color: var(--ink); }
.fnav button.btn { cursor: pointer; font: 500 .95rem/1 var(--sans); }
.fnote { margin-top: 1.25rem; color: var(--ink-3); font-size: .82rem; max-width: 46ch; }
.fnote--legal { margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .74rem; line-height: 1.55; max-width: 54ch; }

/* ---- The live file card -------------------------------------------------- */
.fcard { position: relative; z-index: 2; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, #0c1428, #070b16 60%); border: 1px solid var(--line); }
.fcard::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  opacity: 0; transition: opacity .6s;
  background: conic-gradient(from var(--seam), transparent 0 66%, rgba(127,176,255,.95) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.fcard.is-ready::after { opacity: 1; animation: seam 4s linear infinite; }
@keyframes seam { to { --seam: 360deg; } }
.fcard__glow { position: absolute; inset: auto -20% -40% -20%; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(61,123,255,.2), transparent); }

.fcard__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.fcard__top img { height: 34px; width: auto; }
.fcard__id { color: var(--ink-3); font: 500 .66rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: right; font-variant-numeric: tabular-nums; }
.fcard__b { position: relative; z-index: 1; padding: 1.5rem; }
.fcard__k { color: var(--blue-2); font: 500 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fcard__t { margin-top: .6rem; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); font-weight: 500; letter-spacing: -.035em; }
.fcard__rows { margin-top: 1.5rem; }
.fcard__rows > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding: .8rem 0; border-top: 1px solid var(--line); }
.fcard__rows dt { color: var(--ink-3); font: 500 .66rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.fcard__rows dd { color: var(--ink); font-size: .95rem; letter-spacing: -.01em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fcard__rows dd.is-blank { color: var(--ink-3); }
.fcard__foot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; border-top: 1px solid var(--line); }
.fcard__for { color: var(--ink-3); font-size: .76rem; line-height: 1.5; }
.fcard__for b { display: block; color: var(--ink-2); font-weight: 500; }

/* ---- The side column: seal behind, envelope in front ---------------------- */
.fside { position: sticky; top: 108px; }
/* the smoke ring, larger than the card so it haloes out around it; the CSS
   ring underneath is what shows until (or unless) the shader mounts */
/* square and centred on the column, so it never reshapes when the card
   turns into the shorter envelope */
.fhalo { position: absolute; z-index: -1; left: 50%; top: 50%; width: 175%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 58%, rgba(61,123,255,.16) 70%, rgba(92,208,255,.06) 80%, transparent 90%); }
.fhalo.is-live { background: none; }
/* once the card is an envelope the seal draws in closer around it */
.fhalo { transition: scale 1.6s var(--ease); }
.fside:has(.is-sending, .is-sent) .fhalo { scale: .78; }
.fhalo canvas { opacity: 0; transition: opacity 1.4s var(--ease); }
.fhalo.is-live canvas { opacity: 1; }

.fwrap { position: relative; border-radius: 22px; }
.fwrap.is-sending { overflow: hidden; }
.env { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1.62; perspective: 1100px; visibility: hidden; }
.env > span { position: absolute; inset: 0; }
.env__back { z-index: 1; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(175deg, #0f1c3a, #0a1226); }
/* the pocket: a V cut into the front panel, its edge drawn by a lighter layer
   one pixel larger underneath */
.env__front { z-index: 3; border-radius: 0 0 16px 16px; background: rgba(127,176,255,.34);
  clip-path: polygon(0 30%, 50% 66%, 100% 30%, 100% 100%, 0 100%); }
.env__front::before { content: ''; position: absolute; inset: 1px; border-radius: 0 0 15px 15px;
  background: linear-gradient(170deg, #13244a, #0b1429 70%);
  clip-path: polygon(0 calc(30% + 1px), 50% calc(66% + 1px), 100% calc(30% + 1px), 100% 100%, 0 100%); }
.env__flap { z-index: 1; bottom: auto !important; height: 66%; transform-origin: 50% 0; transform: rotateX(180deg);
  clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #1a2e5c, #0e1a36); backface-visibility: visible; }
.env__to { position: absolute; left: 1.4rem; bottom: 1.25rem; color: var(--ink-3); font: 500 .6rem/1.5 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; }
.env__to span { display: block; color: var(--blue-2); }
.env__to b { display: block; margin: .15rem 0 .1rem; color: var(--ink); font: 500 1.05rem/1.2 var(--sans); letter-spacing: -.02em; text-transform: none; }
.env__stamp { position: absolute; right: 1.3rem; bottom: 1.3rem; padding: .5rem .85rem; border-radius: 8px; border: 1.5px solid rgba(92,208,255,.75);
  color: var(--cyan); font: 500 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: rotate(-8deg) scale(1.5); }
/* the finished state; also what reduced motion jumps straight to */
.fwrap.is-sent .fcard { display: none; }
.fwrap.is-sent .env { position: relative; visibility: visible; }
.fwrap.is-sent .env__flap { transform: none; z-index: 4; }
.fwrap.is-sent .env__stamp { opacity: 1; transform: rotate(-8deg); }

/* stamped once the file is complete */
.seal { position: absolute; right: 1.35rem; bottom: 1.15rem; z-index: 2; padding: .45rem .8rem; border-radius: 8px;
  border: 1.5px solid rgba(127,176,255,.7); color: var(--blue-2); font: 500 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transform: rotate(-9deg) scale(1.5); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.fcard.is-ready .seal { opacity: 1; transform: rotate(-9deg) scale(1); }

/* ---- Sent ---------------------------------------------------------------- */
.sent { display: none; outline: none; }
.sent.is-on { display: block; }
.sent__k { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sent__k span { color: var(--blue-2); }
.sent__k i { font-style: normal; margin: 0 .4em; }
.sent__h { margin-top: 1.1rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; }
.sent__h em { color: var(--blue-2); }
.sent__p { margin-top: 1rem; color: var(--ink-2); max-width: 48ch; }
.sent__mail { margin-top: 1.1rem; padding: .95rem 1.1rem; border-radius: 12px; border: 1px solid rgba(92,208,255,.3);
  background: rgba(92,208,255,.06); color: var(--ink-2); font-size: .92rem; max-width: 52ch; }
.sent__mail b { color: var(--cyan); font-weight: 500; }
.sent__prep { margin-top: clamp(1.75rem, 3vw, 2.25rem); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.sent__pk { color: var(--ink-3); line-height: 1.6; max-width: 52ch; }
.sent__docs { margin-top: 1rem; display: grid; gap: .1rem; counter-reset: doc; }
.sent__docs li { counter-increment: doc; display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; padding: .7rem 0;
  border-bottom: 1px solid var(--line); color: var(--ink); font-size: .96rem; }
.sent__docs li::before { content: counter(doc, decimal-leading-zero); color: var(--cyan); font: 500 .68rem/1 var(--mono); }
.sent__row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); }

/* ---- Details band -------------------------------------------------------- */
.cband { padding: clamp(3.5rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--line); }
.cband__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 2.25rem;
  background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cband__i { padding: clamp(1.4rem, 2.4vw, 1.9rem); background: var(--bg); }
.cband__i dt { color: var(--ink-3); font: 500 .68rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; margin-bottom: .7rem; }
.cband__i dd { color: var(--ink-2); font-size: .93rem; line-height: 1.6; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cband__i a:hover { color: var(--ink); }
@media (max-width: 980px) { .cband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cband__grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .cgrid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  /* on a phone the card belongs after the answers, not stuck to the viewport */
  .fside { position: relative; top: auto; order: 2; max-width: 520px; }
  .fhalo { width: 125%; }
  .frow { grid-template-columns: 1fr; }
}
.srail[hidden] { display: none; }
/* the halo is allowed past the column, never past the viewport */
main { overflow-x: clip; }