.request-scene::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,#0c0c0a,rgba(12,12,10,0) 34%),linear-gradient(90deg,rgba(12,12,10,.68),rgba(12,12,10,.93))} /* taste-skill-ignore: neutral scrim over a photo */
.request-scene{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 180px)}.request-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,100px);padding-block:36px 28px}.request-intro h1{font-size:clamp(36px,4.6vw,64px);line-height:1.05;letter-spacing:-.035em;margin:0 0 24px;text-wrap:balance}.request-intro h1 span{display:block;color:#e8c547}.request-intro p{max-width:34ch;line-height:1.65;color:#e2dece}.request-form{display:grid;gap:16px;max-width:620px}.request-form label{display:grid;gap:8px;font-size:14px}.request-form input,.request-form select,.request-form textarea{width:100%;border:1px solid #736c50;background:#10110e;color:#f7f5ed;padding:13px 14px;font:inherit;font-size:16px;min-height:48px;border-radius:12px}.request-form textarea{resize:vertical;min-height:96px}.request-form input::placeholder,.request-form textarea::placeholder{color:#c2bda9}.request-form input:focus,.request-form select:focus,.request-form textarea:focus{outline:2px solid #e8c547;outline-offset:-1px;border-color:#e8c547}.request-form small{color:#d2cebe;font-size:13px;line-height:1.5}.request-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.request-form .cta{border:0;cursor:pointer;justify-content:center;font-family:inherit}.request-form .cta:disabled{opacity:.65;cursor:not-allowed}.request-form [readonly]{opacity:.8}.request-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.request-privacy{font-size:16px;line-height:1.6;color:#d2cebe}.request-privacy summary{cursor:pointer;padding:8px 0;min-height:36px}.request-privacy p{margin:8px 0}.request-status{font-size:14px;line-height:1.6;overflow-wrap:anywhere;margin:0}.request-status[data-error=true]{color:#ffc3ad}.request-success{padding:28px 0;max-width:38ch}.request-success h2{font-size:32px;color:#e8c547}.request-success p{line-height:1.7;overflow-wrap:anywhere}.request-intro .text-link{margin-top:18px}.request-form [hidden]{display:none}.request-form fieldset{border:0;padding:0;margin:0;display:contents}@media(max-width:760px){.request-layout{grid-template-columns:1fr;gap:20px;padding-block:24px}.request-intro h1{font-size:34px;margin-bottom:12px}.request-intro p{max-width:none;margin:0;font-size:16px}.request-intro .text-link{margin-top:8px}.request-row{grid-template-columns:1fr;gap:16px}.request-form{gap:16px}.request-form input,.request-form select,.request-form textarea{font-size:16px}.request-scene .page-photo{object-position:35% center}.request-privacy summary{min-height:44px}.request-page .work-strip{padding-bottom:16px}}
.request-form[hidden],.request-success[hidden]{display:none}
.request-form [aria-invalid=true]{border-color:#e8907a}
@media(min-width:761px){.request-intro h1 span{white-space:nowrap}}
/* the photograph ends with the form, so the concept strip below shows on a laptop's first screen (owner, 27 Oct 2026) */
/* 2.6vw is about the lift of the strip's -3deg tilt at its ends (tan 3° × half the width), so the raised end clears the form */
@media(min-width:761px){.request-scene{min-height:0}.request-page .work-strip{padding-top:calc(2.6vw + 22px);padding-bottom:clamp(12px,1.2vw,18px)}}
/* the dropdowns draw their own gold chevron, so their text lines up with the text fields (the browser's own arrow box
   pushed it 8 px right) */
.request-form select{appearance:none;-webkit-appearance:none;padding-right:44px;background:#10110e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23e8c547' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center}
/* "How we use your details" opens with the site's own gold chevron instead of the browser's triangle */
.request-privacy summary{list-style:none;display:flex;align-items:center;gap:12px}
.request-privacy summary::-webkit-details-marker{display:none}
.request-privacy summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid #e8c547;border-bottom:2px solid #e8c547;transform:rotate(-45deg);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.request-privacy[open] summary::before{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.request-privacy summary::before{transition:none}}
/* between phone and wide laptop the two dropdowns are too narrow side by side ("Not decided / not applicable" was cut
   off), so they stack until the form column is wide enough */
@media(min-width:761px) and (max-width:1279px){.request-row:has(select){grid-template-columns:1fr}}
/* the reply time sits right under the send button (owner, 28 Oct 2026) */
.request-reply{margin:-6px 0 0;font-size:14px;line-height:1.5;color:#d2cebe;text-align:center}
.request-privacy summary{min-height:44px}
/* the reply-time line added 36 px to the form; the same 36 px come out of the spacing on laptops, so the concept strip
   stays where Orhan balanced it on the first screen (27 Oct 2026) */
@media(min-width:761px){.request-layout{padding-block:24px 14px}.request-form{gap:13px}.request-reply{margin-top:-5px}}
/* a field in use shows one bold frame on its own edge (Orhan, 28 Oct 2026): gold, red while its entry is invalid; once
   left, an invalid field keeps the red border above */
.request-form [aria-invalid=true]:focus{border-color:#e8907a;outline-color:#e8907a}

/* the side option under the send button, as under every other main button (critique 11, 28 Oct 2026) */
.request-reply a{color:#f7f5ed;text-decoration:underline;text-decoration-color:rgba(232,197,71,.6);text-underline-offset:3px}
@media(hover:hover){.request-reply a:hover{color:#e8c547}}
/* our own field messages and the one-tap phone fix (request.js); the thank-you screen leads with the reply time (owner, 28 Oct 2026) */
.field-error:empty{display:none}
.request-field{display:grid;gap:6px}
.field-error{margin:0;font-size:14px;line-height:1.5;color:#ffc3ad}
.phone-fix{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 18px;border:1px solid #736c50;border-radius:99px;background:none;color:#f7f5ed;font:inherit;font-size:14px;cursor:pointer}
@media(hover:hover){.phone-fix:hover{border-color:#e8c547}}
.phone-fix:focus-visible{outline:2px solid #e8c547;outline-offset:2px}
.request-success .request-reference{font-size:13px;line-height:1.5;color:#a9a493}
.request-success p a{color:#f7f5ed;text-decoration:underline;text-decoration-color:rgba(232,197,71,.6);text-underline-offset:3px}
/* the open topic and package lists match the form: dark, rounded, gold for the chosen one, where the browser lets a
   site style them (customizable select); other browsers keep their own list (owner, 28 Oct 2026) */
@supports (appearance:base-select){.request-form select,.request-form select::picker(select){appearance:base-select}.request-form select::picker-icon{display:none}.request-form select::picker(select){margin-block:6px;padding:6px;border:1px solid #736c50;border-radius:12px;background:#10110e;color:#f7f5ed}.request-form option{min-height:44px;padding:10px 12px;border-radius:8px;font-size:16px;line-height:1.4;color:#f7f5ed}.request-form option::checkmark{color:#e8c547}.request-form option:checked{color:#e8c547}.request-form select[name=topic] option[value=""]{color:#a9a493}.request-form option:focus-visible{outline:2px solid #e8c547;outline-offset:-2px}@media(hover:hover){.request-form option:hover{background:#24241d}}}
/* browsers that draw their own open list still draw it dark */
.request-form select{color-scheme:dark}
/* no grey tap flash on the fields and the phone fix (mobile-native) */
.request-form :is(input,select,textarea,button){-webkit-tap-highlight-color:transparent}
/* the thank-you screen and the send status take focus only to be read out; no box is drawn round them */
.request-success:focus,.request-status:focus{outline:none}