/* request.html — same tokens as style.css (navy/gold, Bodoni display, Manrope text). Static backdrop, no scroll motion. */
html{color-scheme:dark}
.req-page{min-height:100vh;display:flex;flex-direction:column}
.req-bg{position:fixed;inset:0;z-index:0;background:var(--bg) url(frames/d/0370.webp?v=fgoheggigl) center/cover no-repeat}
.req-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 20%,rgba(198,165,104,.07),transparent 70%),linear-gradient(180deg,rgba(10,18,32,.82),rgba(10,18,32,.94))}
@media (max-aspect-ratio:9/10){.req-bg{background-image:url(frames/m/0370.webp?v=fgoheggigl)}}
.req-top{position:relative;z-index:2;padding:var(--s6) var(--pad)}
.req-mark{font-family:var(--disp);font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.req-mark:hover,.req-mark:focus-visible{color:var(--gold)}
.req-mark:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.req-main{position:relative;z-index:2;flex:1;display:flex;align-items:flex-start;justify-content:center;padding:var(--s5) var(--pad) var(--s9)}
.req-card{width:100%;max-width:680px;padding:var(--s8) clamp(28px,5vw,64px) var(--s8)}
.req-card,.req-done{animation:reqIn .8s var(--ease-out) both}
@keyframes reqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.req-card,.req-done{animation:none}.req-page *{transition:none!important}}

.req-eyebrow{font-size:var(--fs-caps);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--s6)}
/* intake line under the eyebrow (owner-approved Oct 23, 2026): quiet small print like the /privacy/ opener */
.req-intake{margin:calc(-1 * var(--s4)) 0 var(--s6);max-width:56ch;font-size:13px;line-height:1.7;letter-spacing:.02em;color:#c9cfd8;text-wrap:pretty}
.req-label{display:block;font-size:var(--fs-caps);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3);padding:0}
.req-opt{letter-spacing:.12em;text-transform:none;font-weight:500;color:var(--muted);opacity:.8}

/* chosen-area confirmation */
.req-chosen{position:relative;padding:0 0 var(--s6);margin:0 0 var(--s6);border-bottom:1px solid var(--hair)}
.req-title{font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.2vw,40px);line-height:1.1;letter-spacing:-.01em;margin:0 0 var(--s3);text-wrap:balance;color:var(--ink)}
.req-desc{font-family:var(--disp);font-style:italic;font-size:19px;line-height:1.45;color:var(--gold-soft,#d4b67b);margin:0;text-wrap:balance}
.req-change{margin:var(--s4) 0 0;padding:4px 0;background:none;border:0;border-bottom:1px solid var(--hair-strong);cursor:pointer;
  font:600 var(--fs-caps)/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);transition:color var(--t-fast),border-color var(--t-fast)}
.req-change:hover,.req-change:focus-visible{color:var(--gold);border-color:var(--gold)}
.req-change:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* fields */
#reqForm{display:flex;flex-direction:column;gap:var(--s5)}
.req-field{margin:0;min-width:0;border:0;padding:0}
.req-field[hidden]{display:none}
.req-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.req-input,.req-select select{width:100%;min-height:52px;padding:14px 16px;background:rgba(6,11,20,.45);border:1px solid var(--hair);border-radius:0;
  color:var(--ink);font:400 16px/1.5 var(--sans);letter-spacing:.005em;transition:border-color var(--t-fast),background var(--t-fast);-webkit-appearance:none;appearance:none}
.req-input::placeholder{color:rgba(152,163,179,.75)}
.req-input:hover,.req-select select:hover{border-color:var(--hair-strong)}
.req-input:focus,.req-select select:focus{outline:none;border-color:var(--gold);background:rgba(6,11,20,.6)}
.req-input[aria-invalid="true"],.req-select select[aria-invalid="true"]{border-color:#c98a6b}
.req-text{min-height:120px;resize:vertical}
.req-select{position:relative}
.req-select::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg);pointer-events:none}
.req-select select{padding-right:48px;cursor:pointer}
.req-select option,.req-select optgroup{background:#0d1829;color:var(--ink)}
.req-err{margin:var(--s2) 0 0;font-size:13px;line-height:1.5;color:#e0b09a}
.req-err[hidden]{display:none}

/* contact method: quiet segmented choice, touch-sized */
.req-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair)}
.req-seg label{position:relative;display:block;cursor:pointer}
.req-seg label+label{border-left:1px solid var(--hair)}
.req-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.req-seg span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 8px;font-size:14px;letter-spacing:.02em;color:var(--ink-2);transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast)}
.req-seg label:hover span{color:var(--ink)}
.req-seg input:checked+span{color:var(--gold);background:rgba(198,165,104,.08);box-shadow:inset 0 0 0 1px var(--gold)}
.req-seg input:focus-visible+span{outline:1px solid var(--gold);outline-offset:3px}

/* consent, honeypot, spam check, send error */
.req-check{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.6;color:var(--ink-2)}
.req-check input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--gold);cursor:pointer}
/* small Bravo Brief line in the thank-you state (links to SUBSTACK_URL) */
.req-brief{margin:calc(-1 * var(--s3)) 0 var(--s7);font-size:13px;line-height:1.7;color:var(--muted)}
/* privacy small print under the consent line, aligned with its text (18px box + gap) */
.req-fine{margin:var(--s3) 0 0 calc(18px + var(--s3));max-width:52ch;font-size:12.5px;line-height:1.6;letter-spacing:.005em;color:var(--muted);text-wrap:pretty}
.req-check input[aria-invalid="true"]{outline:1px solid #c98a6b;outline-offset:2px}
.req-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.req-ts:empty{display:none}
.req-send-err{margin-top:var(--s4);font-size:14px}
.req-send-err a{color:var(--gold);text-underline-offset:3px}
.req-actions .btn[disabled]{opacity:.6;cursor:wait}

.req-actions{padding-top:var(--s3)}
.req-actions .btn{cursor:pointer;min-height:56px}

/* confirmation */
.req-done{text-align:center;padding:var(--s5) 0}
.req-done:focus{outline:none}
.req-done .rule-orn{margin-bottom:var(--s6)}
.req-thanks{font-family:var(--disp);font-weight:400;font-size:var(--fs-d2);line-height:1.06;margin:0 0 var(--s4)}
.req-thanks-line{font-size:17px;line-height:1.7;color:var(--ink-2);margin:0 auto var(--s7);max-width:30em;text-wrap:balance}
.req-thanks-line em{font-family:var(--disp);font-style:italic;font-size:1.12em;color:var(--gold-soft,#d4b67b)}

/* consent line link to /privacy/ */
.req-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair-strong);text-underline-offset:3px;transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.req-link:hover,.req-link:focus-visible{color:var(--gold);text-decoration-color:var(--gold)}
.req-link:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* footer on /request/ and /privacy/ (same markup and look as the home footer) */
.req-page .foot{margin-top:auto}

/* /privacy/: the notice in the request card, plain reading measure */
.pv{max-width:760px}
.pv-title{font-family:var(--disp);font-weight:400;font-size:var(--fs-d2);line-height:1.06;letter-spacing:-.01em;margin:0 0 var(--s3);color:var(--ink)}
.pv-date{font-size:13px;letter-spacing:.06em;color:var(--muted);margin:0 0 var(--s7)}
.pv h2{font-size:var(--fs-caps);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:var(--s7) 0 var(--s3)}
.pv p,.pv li{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:0;text-wrap:pretty}
.pv ul{margin:0;padding:0 0 0 1.1em}
.pv li+li{margin-top:var(--s2)}
.pv li::marker{color:var(--gold-d)}
.pv b{color:var(--ink);font-weight:600}
.pv a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair-strong);text-underline-offset:3px;overflow-wrap:anywhere}
.pv a:hover,.pv a:focus-visible{color:var(--gold);text-decoration-color:var(--gold)}
/* "Who we are": quiet small print, the size of the "Last updated" line */
.pv .pv-who{font-size:13px;line-height:1.7;letter-spacing:.02em;color:#c9cfd8}
.pv .pv-who+.pv-who{margin-top:2px}
.pv-sep{margin:0 .6em;color:var(--muted)}
/* Veteran badge: one soft-gold flag + letter-spaced caps (owner-approved Oct 23, 2026). Inline SVG: no asset, no CSP change.
   Variant = data-flag on .pv-badge in site/home/privacy.html: "B" solid with a plain canton (owner pick, Oct 23, 2026; committed default),
   "A" solid with star dots, "C" thin outline. Switch by editing that one attribute; the notice HTML carries no comment about it. */
.pv .pv-badge{display:flex;align-items:center;gap:10px;margin:0 0 var(--s3);color:#d4b67b;font-size:var(--fs-caps);font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:1}
.pv-flag{flex:none;display:block;width:26px;height:14px;shape-rendering:crispEdges}
.pv-flag circle{shape-rendering:geometricPrecision}
.pv-badge[data-flag="A"] .f-plain,.pv-badge[data-flag="A"] .f-line,
.pv-badge[data-flag="B"] .f-stars,.pv-badge[data-flag="B"] .f-line,
.pv-badge[data-flag="C"] .f-solid{display:none}

@media (max-width:700px){
  .pv-title{font-size:clamp(34px,10vw,44px)}
  .req-top{padding:var(--s5) 24px}
  .req-main{padding:var(--s2) 14px var(--s8)}
  .req-card{padding:var(--s7) 24px}
  .req-row{grid-template-columns:1fr}
  .req-title{font-size:clamp(28px,8vw,34px)}
  .req-desc{font-size:17px}
  .req-actions .btn,.req-done .btn{width:100%}
}