/* ===========================================================================
   RELENTIX — contact: the brief, as one familiar form

   The whole brief now reads in one screen on a laptop: title and direct
   contact on the left, a single card on the right with labelled boxed fields
   in a two-column grid, package chips, a short message box and the send
   button. Loaded last on contact.html, so it overrides the older ruled-sheet
   styling in contact.html and cinematic.css.
   =========================================================================== */

/* one screen: the section fills the viewport and centres its content */
.brief-doc{min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h,72px) + clamp(28px,4vh,48px)) 0 clamp(32px,5vh,56px)}
.brief-doc>.wrap{width:100%}
/* desktop: the title rail holds still beside the card while the form scrolls
   past it, then releases at the end of the section so the footer follows */
.brief-split{align-items:start;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(40px,5vw,88px)}
.brief-rail{position:sticky;top:calc(var(--nav-h,72px) + 40px)}
.brief-rail .brief-h1{font-size:clamp(52px,6vw,96px)}
.brief-rail .brief-lead{max-width:30ch}
.rail-direct{margin-top:clamp(28px,4vh,44px)}

/* the card */
.brief-sheet.bf-card{position:relative;background:rgba(7,14,36,.78);color:#F8FAFC;
  border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:clamp(22px,2.4vw,32px);box-shadow:0 30px 80px -40px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.bf-field{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0}
.bf-wide{grid-column:1 / -1}

.bf label,.bf legend{display:block;padding:0;margin:0 0 7px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#A9B6C8}
.bf .req{font-style:normal;color:var(--ink-pink,#FFABEE);margin-left:2px}

.bf input,.bf select,.bf textarea{
  width:100%;height:46px;padding:0 14px;margin:0;
  font-family:var(--serif);font-size:17px;color:#F8FAFC;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);border-radius:10px;
  outline:0;appearance:none;-webkit-appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.bf input::placeholder,.bf textarea::placeholder{color:#64748B}
.bf input:hover,.bf select:hover,.bf textarea:hover{border-color:rgba(255,255,255,.24)}
.bf input:focus,.bf select:focus,.bf textarea:focus{border-color:#00A3FF;background:rgba(0,163,255,.06);box-shadow:0 0 0 3px rgba(0,163,255,.18)}
.bf textarea{height:88px;padding:11px 14px;line-height:1.5;resize:vertical}

.bf select{cursor:pointer;padding-right:40px;color:#64748B;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.bf select.has{color:#F8FAFC}
.bf select option{color:#0F172A;background:#fff}

/* package chips (the old track, restyled; same buttons and JS) */
.bf .btrack.bf-pkgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0}
.bf .bf-pkgs .stop{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:none;
  padding:10px 13px;border-radius:10px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.bf .bf-pkgs .stop:hover{border-color:rgba(255,255,255,.26)}
.bf .bf-pkgs .stop:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(0,163,255,.25)}
.bf .bf-pkgs .stop b{font-family:var(--serif);font-size:16px;font-weight:600;color:#E2E8F0;letter-spacing:0}
.bf .bf-pkgs .stop small{font-family:var(--mono);font-size:11px;color:#94A3B8;letter-spacing:.02em}
.bf .bf-pkgs .stop.on{border-color:#00A3FF;background:rgba(0,163,255,.12)}
.bf .bf-pkgs .stop.on b{color:#fff}
.bf .bf-pkgs .stop.on small{color:#7CCBFF}

/* footer row: note + send */
.bf-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.bf-note{margin:0;font-family:var(--serif);font-size:15px;color:#94A3B8}
.bf .brief-submit{width:auto;margin:0;flex:none}

/* success panel sits inside the card */
.bf-card .ok{background:#070E24;border-radius:16px;color:#F8FAFC}

/* short laptop screens: tighten so the card still fits */
@media (min-width:901px) and (max-height:780px){
  .bf-grid{gap:11px 14px}
  .bf input,.bf select{height:42px}
  .bf textarea{height:70px}
  .bf-foot{margin-top:16px}
  .brief-rail .brief-h1{font-size:clamp(48px,5vw,80px)}
}

/* tablet and phone: stacked, scrolls naturally */
@media (max-width:900px){
  .brief-doc{min-height:0;display:block}
  .brief-split{grid-template-columns:1fr}
  .brief-rail{position:static}
}
@media (max-width:560px){
  .bf-grid{grid-template-columns:1fr}
  .bf .btrack.bf-pkgs{grid-template-columns:1fr 1fr}
  .bf-foot{flex-direction:column-reverse;align-items:stretch}
  .bf .brief-submit{width:100%;justify-content:center}
  .bf-note{text-align:center}
}

/* "Other" business type: the follow-up question slides in under the select */
.bf-other[hidden]{display:none}
.bf-other:not([hidden]){animation:bf-in .35s cubic-bezier(.16,1,.3,1)}
@keyframes bf-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* a required field left empty on submit */
.bf input.bad,.bf select.bad{border-color:#FF7ADB;box-shadow:0 0 0 3px rgba(255,122,219,.16)}
@media (prefers-reduced-motion:reduce){.bf-other:not([hidden]){animation:none}}

/* very short laptop screens: a touch tighter so the card still fits when the
   "Other" question is open */
@media (min-width:901px) and (max-height:720px){
  .brief-doc{padding-top:calc(var(--nav-h,72px) + 18px);padding-bottom:20px}
  .bf-grid{gap:9px 14px}
  .bf label{margin-bottom:5px}
  .bf input,.bf select{height:40px}
  .bf textarea{height:58px}
  .bf-foot{margin-top:14px}
}

/* ===================================================== round 3 refinements */

/* dropdowns in the site's night palette: dark native list, brand highlight */
.bf select{color-scheme:dark}
.bf select option{background:#0B1430;color:#E2E8F0}
.bf select option:checked{background:#0E3A66;color:#fff}
.bf select option[disabled]{color:#64748B}

/* budget: four quiet boxes in a 2 x 2 grid */
.bf-budget{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-radius:12px}
.bf-budget .bud{height:46px;padding:0 14px;border-radius:10px;cursor:pointer;
  font-family:var(--serif);font-size:16.5px;color:#94A3B8;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.bf-budget .bud:hover{color:#E2E8F0;border-color:rgba(255,255,255,.22)}
.bf-budget .bud:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(0,163,255,.25)}
.bf-budget .bud.on{color:#fff;border-color:#00A3FF;background:rgba(0,163,255,.12)}
.bf-budget.bad{box-shadow:0 0 0 3px rgba(255,122,219,.16)}
.bf-budget.bad .bud{border-color:rgba(255,122,219,.55)}

/* ---- left side: formal, with a measured entrance ---- */
.brief-rail .rail-eyebrow{margin:0 0 18px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-pink,#FFABEE);
  display:flex;align-items:center;gap:12px}
.brief-rail .rail-eyebrow::before{content:'';width:28px;height:1px;background:currentColor;opacity:.7}
.brief-rail .brief-lead{max-width:34ch;margin-top:22px;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:#B9C8DC}

.rail-list{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.10);max-width:440px}
.rail-list li{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:baseline;gap:12px;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.rl-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#7C8AA0}
.rl-v{font-family:var(--serif);font-size:18px;color:#E2E8F0;display:inline-flex;align-items:center;gap:8px;min-width:0}
a.rl-v{transition:color .2s ease}
a.rl-v svg{width:15px;height:15px;flex:none;opacity:.5;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease}
a.rl-v:hover{color:#7CCBFF}
a.rl-v:hover svg{opacity:1;transform:translate(2px,-2px)}

/* entrance: eyebrow, title, lead, then each row, one after another */
@media (prefers-reduced-motion:no-preference){
  .brief-rail>*,.rail-list li{opacity:0;transform:translateY(12px);animation:rail-in .8s cubic-bezier(.16,1,.3,1) forwards}
  .brief-rail>.rail-eyebrow{animation-delay:.05s}
  .brief-rail>.brief-h1{animation-delay:.12s}
  .brief-rail>.brief-lead{animation-delay:.22s}
  .brief-rail>.rail-list{opacity:1;transform:none;animation:none}
  .rail-list li{animation-delay:calc(.34s + var(--i) * .09s)}
}
@keyframes rail-in{to{opacity:1;transform:none}}

@media (min-width:901px) and (max-height:720px){
  .bf-budget{gap:8px}
  .bf-budget .bud{height:40px}
  .rail-list li{padding:11px 0}
}

/* when an "Other" follow-up is open, give back the height it takes */
.bf:has(.bf-other:not([hidden])) textarea{height:62px}
@media (min-width:901px) and (max-height:720px){
  .bf:has(.bf-other:not([hidden])) textarea{height:40px}
  .bf:has(.bf-other:not([hidden])) .bf-grid{gap:7px 14px}
}

/* ===================================================== cosy dropdowns
   Desktop: public/bf-select.js swaps the native list for a warm paper panel.
   The field itself keeps the dark form styling; only the open list is light. */
.bfs{position:relative}
.bfs .bfs-native{position:absolute;inset:0;opacity:0;pointer-events:none}
.bfs-btn{width:100%;height:46px;padding:0 40px 0 14px;text-align:left;cursor:pointer;
  font-family:var(--serif);font-size:17px;color:#F8FAFC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(255,255,255,.035) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center/16px;
  border:1px solid rgba(255,255,255,.13);border-radius:10px;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.bfs-btn.is-empty{color:#64748B}
.bfs-btn:hover{border-color:rgba(255,255,255,.24)}
.bfs-btn:focus-visible,.bfs.is-open .bfs-btn{outline:0;border-color:#00A3FF;background-color:rgba(0,163,255,.06);box-shadow:0 0 0 3px rgba(0,163,255,.18)}
.bfs:has(.bfs-native.bad) .bfs-btn{border-color:#FF7ADB;box-shadow:0 0 0 3px rgba(255,122,219,.16)}

.bfs-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;
  max-height:264px;overflow-y:auto;overscroll-behavior:contain;
  background:#FBF8F3;border:1px solid rgba(120,98,70,.14);border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 22px 48px -14px rgba(2,6,23,.6),0 4px 12px rgba(2,6,23,.18);
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.985);transform-origin:top center;
  transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1),visibility 0s linear .2s;
  scrollbar-width:thin;scrollbar-color:rgba(120,98,70,.3) transparent}
.bfs.is-open .bfs-list{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1)}
.bfs-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:9px;cursor:pointer;
  font-family:var(--serif);font-size:16.5px;line-height:1.3;color:#2B2A33}
.bfs-opt svg{width:16px;height:16px;flex:none;color:#0A84D6;opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .2s cubic-bezier(.16,1,.3,1)}
.bfs-opt.is-act{background:#F0EADF}
.bfs-opt.is-sel{color:#0B4F8A;font-weight:600}
.bfs-opt.is-sel svg{opacity:1;transform:none}

/* touch devices keep the native picker: give it the same light, warm list */
@media not ((hover:hover) and (pointer:fine)){
  .bf select{color-scheme:light}
  .bf select option{background:#FBF8F3;color:#2B2A33}
}
@media (min-width:901px) and (max-height:720px){.bfs-btn{height:40px}}
@media (prefers-reduced-motion:reduce){.bfs-list{transition:none}}

/* "Not sure? We'll recommend" reads as the helpful default: a little heavier */
.bf-budget .bud:last-child{font-weight:600;color:#C9D4E3}
.bf-budget .bud:last-child.on{color:#fff}

/* contact rows: icon tiles instead of text labels; each lights in its own colour */
.rail-list li{grid-template-columns:42px minmax(0,1fr);align-items:center;gap:16px}
.rl-ico{--c:#00A3FF;--g:rgba(0,163,255,.14);
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  color:#94A3B8;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  transition:color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.rl-ico svg{width:19px;height:19px}
.rl-ico[data-k="Instagram"]{--c:#FF7ADB;--g:rgba(255,122,219,.14)}
.rl-ico[data-k="Response"]{--c:#7CCBFF;--g:rgba(124,203,255,.12)}
.rail-list li:hover .rl-ico,.rail-list li:focus-within .rl-ico{
  color:var(--c);background:var(--g);border-color:var(--c);
  box-shadow:0 0 0 4px var(--g),0 8px 22px -10px var(--c);transform:translateY(-1px)}
.rail-list li:hover a.rl-v{color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.rl-ico{transition:none}}

/* budget boxes on narrow screens: never clip the text */
.bf-budget .bud{height:auto;min-height:46px;padding:8px 12px;line-height:1.25;white-space:nowrap}
/* an even two-by-two at every width: no box spans the row. On the narrowest
   phones the longest label wraps inside its own box instead. */
@media (max-width:640px){
  .bf-budget{grid-template-columns:1fr 1fr;gap:10px}
  .bf-budget .bud{min-height:56px;white-space:normal;text-wrap:balance;background:#030716}
  .bf-budget .bud.on{background:rgba(0,163,255,.14)}
}
@media (min-width:901px) and (max-height:720px){.bf-budget .bud{min-height:40px;padding:6px 12px}}
/* bolder still, and brighter */
.bf-budget .bud:last-child{font-weight:700;color:#E2E8F0;letter-spacing:.005em}

/* dropdown panel: a faint wash of the brand's two colours, pale blue into pale pink */
.bfs-list{
  background:linear-gradient(155deg,#EEF4FF 0%,#F5F0FC 50%,#FCEFF7 100%);
  border-color:rgba(118,104,190,.18);
  scrollbar-color:rgba(118,104,190,.3) transparent}
.bfs-opt{color:#2A2A40}
.bfs-opt.is-act{background:rgba(124,108,255,.10)}
.bfs-opt.is-sel{color:#1E4F8F}
.bfs-opt.is-sel svg{color:#D44FA8}
@media not ((hover:hover) and (pointer:fine)){
  .bf select option{background:#F4F1FB;color:#2A2A40}
}

/* fuller pastel blend: both colours clearly present across the whole panel */
.bfs-list{
  background:
    radial-gradient(120% 90% at 0% 0%,#D3E6FF 0%,transparent 62%),
    radial-gradient(120% 90% at 100% 100%,#FAD3EE 0%,transparent 62%),
    linear-gradient(135deg,#DDEBFF 0%,#EADFFB 50%,#FBDDF1 100%);
  border-color:rgba(140,110,200,.28)}
.bfs-opt.is-act{background:rgba(255,255,255,.58)}
.bfs-opt.is-sel{color:#173F7A}
@media not ((hover:hover) and (pointer:fine)){
  .bf select option{background:#EADFFB}
}

/* ===================================================== sending + result
   While the brief travels to Make the arrow disc becomes a turning ring, the
   label says what is happening and the fields settle back. The success panel
   carries the request's reference; a failure is said in one line under the
   button, with the way out. */
.bf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.brief-submit .arr{position:relative}
.brief-submit .arr svg{transition:transform .45s var(--ease-out,cubic-bezier(.16,1,.3,1)),opacity .2s ease}
.brief-submit .arr::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid rgba(2,6,23,.22);border-top-color:currentColor;
  opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .35s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.brief-submit.is-sending{cursor:progress;pointer-events:none}
.brief-submit.is-sending .arr svg{opacity:0;transform:scale(.4)}
.brief-submit.is-sending .arr::after{opacity:1;transform:none;animation:bs-turn .75s linear infinite}
.brief-submit.is-sending .bs-label::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:bs-dots 1.2s steps(4,end) infinite}
.brief-submit:disabled{opacity:1}
@keyframes bs-turn{to{transform:rotate(360deg)}}
@keyframes bs-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}

.bf .bf-grid{transition:opacity .35s ease,filter .35s ease}
.bf[aria-busy="true"] .bf-grid{opacity:.5;filter:saturate(.6);pointer-events:none}

.bf-error{margin:14px 0 0;font-family:var(--serif);font-size:15.5px;line-height:1.5;color:#FFC4EF}
.bf-error a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,171,238,.6)}
.bf input#fe.bad{border-color:#FF7ADB}

.bf-card .ok{align-items:flex-start;text-align:left;padding:clamp(28px,5vw,56px)}
.bf-card .ok .ok-in{width:100%;max-width:440px;margin:auto;display:flex;flex-direction:column;align-items:flex-start}
.bf-card .ok h3{margin:0;font-size:clamp(34px,4.4vw,46px);line-height:1;color:#F8FAFC;text-wrap:balance}
.bf-card .ok h3::after{content:'';display:block;width:44px;height:3px;margin-top:20px;
  background:linear-gradient(90deg,#00A3FF 0 62%,#FF7ADB 62% 100%)}
.bf-card .ok p{max-width:42ch;margin:22px 0 0;font-size:18px;line-height:1.6;color:#B9C8DC;text-wrap:pretty}
.bf-card .ok p b{color:#F8FAFC;font-weight:600;overflow-wrap:anywhere}
.bf-card .ok .ok-ref{width:100%;margin:32px 0 0;padding:16px 0;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.bf-card .ok .ok-ref dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#94A3B8}
.bf-card .ok .ok-ref dd{margin:0;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:#F8FAFC;font-variant-numeric:tabular-nums;user-select:all}
.bf-card .ok #okx{margin-top:32px}
@media (prefers-reduced-motion:no-preference){
  .bf-card .ok.show .ok-in>*{animation:ok-in .6s var(--ease-out,cubic-bezier(.16,1,.3,1)) both}
  .bf-card .ok.show .ok-in>:nth-child(2){animation-delay:.08s}
  .bf-card .ok.show .ok-in>:nth-child(3){animation-delay:.16s}
  .bf-card .ok.show .ok-in>:nth-child(4){animation-delay:.24s}
}
@keyframes ok-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .brief-submit.is-sending .arr::after{animation:none;border-color:currentColor}
  .brief-submit.is-sending .bs-label::after{animation:none;content:'...'}
  .bf .bf-grid{transition:none}
}

/* ===================================================== DPDP consent
   A plain notice line and one unticked box per purpose, set in the card's
   own type and colours. The box is a custom square so it matches the boxed
   fields; the native input stays focusable underneath for keyboards and
   screen readers. */
.bf-consent{margin-top:4px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.bf .bf-notice{margin:0 0 12px;font-family:var(--serif);font-size:14.5px;line-height:1.55;color:#94A3B8}
.bf .bf-notice a{color:#CFE6FF;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(124,203,255,.45)}
.bf .bf-notice a:hover{color:#fff}
.bf label.bf-check{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0 0 10px;cursor:pointer;
  font-family:var(--serif);font-size:15.5px;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;color:#CBD5E1}
.bf label.bf-check:last-child{margin-bottom:0}
.bf .bf-check input{flex:none;width:18px;height:18px;margin:2px 0 0;padding:0;border-radius:5px;cursor:pointer;
  background:rgba(255,255,255,.035) center/12px no-repeat;border:1px solid rgba(255,255,255,.28)}
.bf .bf-check input:checked{border-color:#00A3FF;background-color:#00A3FF;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23020617' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>")}
.bf .bf-check input:focus-visible{border-color:#00A3FF;box-shadow:0 0 0 3px rgba(0,163,255,.25)}
.bf .bf-check input.bad{border-color:#FF7ADB;box-shadow:0 0 0 3px rgba(255,122,219,.16)}
@media (min-width:901px) and (max-height:780px){
  .bf-consent{padding-top:12px}
  .bf .bf-notice{margin-bottom:9px;font-size:14px}
  .bf label.bf-check{margin-bottom:7px;font-size:15px}
}

/* Cloudflare Turnstile security check, sits above the send row */
.bf-captcha{margin-top:16px;min-height:65px}
.bf-captcha:empty{min-height:0;margin:0}

/* ------------------------------------------------------- phone: the open sheet
   On a phone the card chrome cost ~40px of width, which pushed the 300px
   Cloudflare check past the screen edge and dragged the card's right side
   off with it. The form now sits open on the page between two hairlines,
   full width of the text column. Labels read as plain words, not tracked
   capitals, and the fields sit recessed (darker than the page) so each one
   reads as a place to type. */
@media (max-width:640px){
  .brief-split{gap:44px}
  .brief-sheet.bf-card{
    background:none;border:0;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    padding:28px 0 8px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .bf-grid{grid-template-columns:1fr;gap:20px}
  .bf-field>label,.bf-field>legend{
    margin:0 0 9px;
    font-family:var(--disp,'Saira Condensed',sans-serif);font-size:17px;font-weight:600;
    letter-spacing:.02em;text-transform:none;color:#E2E8F0;
  }
  .bf-consent>legend{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#A9B6C8}
  .bf input,.bf select,.bf textarea{
    height:52px;padding:0 16px;font-size:18px;
    background:#030716;border-color:rgba(255,255,255,.12);border-radius:10px;
  }
  .bf textarea{height:120px;padding:13px 16px}
  .bf select{padding-right:44px;background-color:#030716;background-position:right 16px center}
  .bf input:focus,.bf select:focus,.bf textarea:focus{background:#04102a}
  /* the check and the button span the column, nothing wider */
  .bf-turnstile,#bfCaptcha{max-width:100%}
  .bf .brief-submit{min-height:54px}
}