/* 888 Trading enquiry and quotation (v2.5.0, CHG-2026-062). Loaded with assets/js/enquiry.js the first time a visitor opens
   the flow, so no page carries it at first load. Patek register, same tokens as every page (tokens.css): a calm single
   reading column, numbered sections in light capitals (EN) or Noto Sans Thai (TH), hairlines instead of boxes, ink and
   champagne gold, square corners, the site's pill buttons. Phones: the dialog fills the screen. 768px and up: a centred
   sheet with the modal shadow. Every target is 44px or more. Class names start with enq-. */

html.enq-open,html.enq-open body{overflow:hidden}

/* ---------- the dialog ---------- */
.enq{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--c-white);color:var(--c-ink);overflow:hidden}
@supports (height:100dvh){.enq{height:100dvh}}
.enq[open]{display:flex;flex-direction:column}
.enq:not([open]){display:none}
.enq::backdrop{background:rgba(17,16,15,.55)}
@media (min-width:768px){
  .enq{inset:0;width:min(760px,calc(100% - 64px));height:auto;max-height:calc(100% - 64px);margin:auto;box-shadow:var(--shadow-modal)}
  @supports (height:100dvh){.enq{height:auto;max-height:calc(100dvh - 64px)}}
}
@media (prefers-reduced-motion:no-preference){.enq[open]{animation:enqIn var(--t) var(--ease)}}
@keyframes enqIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.enq-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:60px;padding:0 6px 0 var(--gutter);border-bottom:1px solid var(--c-line-soft);background:var(--c-white)}
@media (min-width:768px){.enq-bar{min-height:68px;padding-left:var(--s-7)}}
.enq-logo{display:inline-flex;align-items:center;min-height:44px;width:clamp(132px,34vw,168px);text-decoration:none;font:400 13px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase}
.enq-logo img{width:100%;height:auto}
.enq-x{flex:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-ink)}
.enq-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3}

/* position:relative keeps the visually hidden labels (.sr, absolute) inside the scroll box, so the dialog itself never scrolls */
.enq-scroll{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.enq-in{max-width:640px;margin:0 auto;padding:var(--s-6) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom,0px))}
@media (min-width:768px){.enq-in{padding:var(--s-7) var(--s-7) var(--s-8)}}

/* ---------- heading of the flow ---------- */
.enq-eyebrow{margin-bottom:var(--s-3)}
.enq-title{font:300 var(--fs-h2)/var(--lh-h2) var(--f-display);letter-spacing:var(--ls-heading);text-transform:uppercase;margin:0 0 var(--s-4);text-wrap:balance}
:lang(th) .enq-title{text-transform:none;letter-spacing:0;line-height:1.4}
.enq-title:focus,.enq-h:focus{outline:none}
.enq-lead{color:var(--c-ink-soft);font-size:var(--fs-body);line-height:1.75;max-width:36em;text-wrap:pretty}
:lang(th) .enq-lead{line-height:1.85}
.enq-restored{margin-top:var(--s-4);padding:var(--s-3) 0;border-top:1px solid var(--c-line-soft);border-bottom:1px solid var(--c-line-soft);font-size:var(--fs-small);line-height:1.7;color:var(--c-ink-soft)}
.enq-restored .enq-link{margin-left:var(--s-2)}

/* ---------- numbered sections: hairline above, gold figure, light capitals; one 38px figure column down the page ---------- */
.enq-sec{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--c-line)}
.enq-review{margin-top:0}
.enq-h{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:baseline;margin:0 0 var(--s-3);font:300 20px/1.35 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink);scroll-margin-top:var(--s-5)}
.enq-no{font:400 13px/1 var(--f-display);letter-spacing:.2em;color:var(--c-gold-deep)}
:lang(th) .enq-h{text-transform:none;letter-spacing:0;font-weight:400;font-size:20px;line-height:1.5}
@media (min-width:768px){.enq-h{font-size:22px}:lang(th) .enq-h{font-weight:300;font-size:23px}}
.enq-sublead{margin:0 0 var(--s-5);font-size:var(--fs-small);line-height:1.7;color:var(--c-ink-soft);max-width:38em}
:lang(th) .enq-sublead{line-height:1.8}

/* ---------- 01 category: two product groups as hairline rows, like the Products menu ---------- */
.enq-grp + .enq-grp{margin-top:var(--s-6)}
.enq-grp-h{display:flex;align-items:baseline;gap:var(--s-3);margin:0 0 var(--s-3);font:400 12px/1.6 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-soft)}
:lang(th) .enq-grp-h{font-size:14px;letter-spacing:.01em;text-transform:none}
.enq-gno{flex:none;letter-spacing:.2em;color:var(--c-gold-deep)}
.enq-cats{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line-soft)}
.enq-cats li{border-bottom:1px solid var(--c-line-soft)}
.enq-cat{display:grid;grid-template-columns:38px minmax(0,1fr) 20px;align-items:center;gap:0 var(--s-2);width:100%;min-height:48px;padding:10px 0;text-align:left;font:400 14px/1.45 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink);transition:color var(--t-fast),padding var(--t-fast) var(--ease)}
:lang(th) .enq-cat{font-size:16px;letter-spacing:.01em;text-transform:none}
.enq-cat:focus-visible{color:var(--c-gold-deep);padding-left:6px}
.enq-cat[aria-pressed="true"]{color:var(--c-gold-deep)}
.enq-cno{font-size:12px;letter-spacing:.16em;color:var(--c-gold-deep)}
.enq-csub{display:block;margin-top:2px;font:400 var(--fs-small)/1.55 var(--f-body);letter-spacing:0;text-transform:none;color:var(--c-ink-soft)}
.enq-arr{position:relative;width:20px;height:1px;background:currentColor;opacity:.55}
.enq-arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.enq-cat[aria-pressed="true"] .enq-arr{opacity:1}

.enq-chosen{padding:var(--s-4) 0 0;border-top:1px solid var(--c-line-soft)}
.enq-chosen-g{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-3);margin:0 0 var(--s-2);font:400 12px/1.6 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-soft)}
:lang(th) .enq-chosen-g{font-size:14px;letter-spacing:.01em;text-transform:none}
.enq-dash{width:18px;height:1px;background:var(--c-gold);align-self:center}
.enq-chosen-c{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:baseline;margin:0 0 var(--s-2);font:300 var(--fs-h3)/var(--lh-h3) var(--f-display);letter-spacing:var(--ls-heading);text-transform:uppercase}
.enq-chosen-c .enq-ct:first-child{grid-column:1 / -1}
:lang(th) .enq-chosen-c{text-transform:none;letter-spacing:0;font-weight:400;line-height:1.5}

/* quiet text button: gold capitals with a hairline, the site's "more" voice */
.enq-link{display:inline-flex;align-items:center;min-height:44px;padding:0;font:400 var(--fs-more)/1.4 var(--f-display);letter-spacing:var(--ls-more);text-transform:uppercase;color:var(--c-gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
:lang(th) .enq-link{font-size:15px;letter-spacing:.01em;text-transform:none}

/* ---------- 02 questions ---------- */
.enq-q{margin:0 0 var(--s-6);padding:0;border:0;min-width:0}
.enq-q,.enq-field{scroll-margin-top:var(--s-5)}
.enq-l{display:block;margin:0 0 6px;padding:0;font:400 15px/1.55 var(--f-display);color:var(--c-ink)}
:lang(th) .enq-l{font-size:16px;line-height:1.6}
legend.enq-l{width:100%}
.enq-req{margin-left:4px;color:var(--c-gold-deep)}
.enq-hint{margin:0 0 var(--s-2);font:400 var(--fs-small)/1.6 var(--f-body);color:var(--c-ink-soft)}
.enq-opts{list-style:none;margin:var(--s-1) 0 0;padding:0;border-top:1px solid var(--c-line-soft)}
.enq-opts > li{border-bottom:1px solid var(--c-line-soft)}
.enq-opt{display:flex;align-items:center;gap:14px;min-height:46px;padding:10px 0;cursor:pointer;font:400 15px/1.5 var(--f-display);color:var(--c-ink)}
:lang(th) .enq-opt{font-size:16px;line-height:1.55}
.enq-ot{min-width:0}
.enq-note{margin-left:6px;font-size:13px;letter-spacing:.02em;color:var(--c-ink-soft);white-space:nowrap}
.enq-inline{display:flex;flex-wrap:wrap;gap:0 var(--s-6);border-top:0}
.enq-inline > li{flex:none;border-bottom:0}
.enq-inline .enq-ot{white-space:nowrap}   /* short answers (yes / no / not sure, 22 kV …) never break; the row wraps instead */
.enq-inline .enq-opt{min-height:44px;padding:8px 0}
/* square box and round radio, drawn on the native control (keeps the keyboard and screen-reader behaviour) */
.enq-opt input{flex:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border:1px solid var(--c-ink-soft);border-radius:0;background:var(--c-white) center/12px 12px no-repeat;cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast)}
.enq-opt input[type="radio"]{border-radius:50%}
.enq-opt input:checked{border-color:var(--c-ink);background-color:var(--c-ink)}
.enq-opt input[type="checkbox"]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23F6F3EC' stroke-width='1.5'/%3E%3C/svg%3E")}
.enq-opt input[type="radio"]:checked{background:var(--c-white);box-shadow:inset 0 0 0 4px var(--c-white),inset 0 0 0 10px var(--c-ink)}
.enq-opt input:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
.enq-opt input:checked + .enq-ot{color:var(--c-ink)}
.enq-other{margin:var(--s-4) 0 0}
.enq-set .enq-row{display:grid;gap:0 var(--s-5)}
@media (min-width:560px){.enq-set .enq-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.enq-sub{margin-bottom:var(--s-3)}
.enq-field .field-input,.enq-q .field-input{min-height:44px}
.enq-date{min-width:12em;max-width:100%;-webkit-appearance:none;appearance:none;background:transparent;color:var(--c-ink);font:400 16px/1.5 var(--f-ui)}
.enq-date::-webkit-date-and-time-value{text-align:left}
.enq-date.is-empty,.enq-date.is-empty::-webkit-datetime-edit{color:var(--c-ink-soft)}   /* an empty date reads softer than an answer (desktop Safari shows a date even when empty) */
.enq .field-input::placeholder{color:#8f8b84}

/* errors: deep red text and rule (8.3:1 on white), never colour alone (the message says what is missing) */
.enq-err{margin:var(--s-2) 0 0;font:400 14px/1.5 var(--f-display);color:#8E2B1E}
fieldset.enq-q > .enq-err{margin:var(--s-1) 0 var(--s-2)}
.is-bad > .field-input,.is-bad .field-input:not(.enq-other .field-input){border-bottom-color:#8E2B1E}
.enq-q.is-bad > .enq-opts{border-top-color:#8E2B1E}
.enq-alert:empty{display:none}
.enq-alert{margin:0 0 var(--s-4);padding:var(--s-3) 0 var(--s-3) var(--s-4);border-left:2px solid #8E2B1E;font:400 15px/1.6 var(--f-display);color:#8E2B1E}

/* ---------- 03 details ---------- */
.enq-s3 .field{margin-bottom:var(--s-5)}
.enq-attach-note{margin:0;padding:var(--s-4) 0 0;border-top:1px solid var(--c-line-soft);font:400 var(--fs-small)/1.7 var(--f-body);color:var(--c-ink-soft)}

/* ---------- prepare ---------- */
.enq-go{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--c-line)}
.enq-reqnote{margin:0 0 var(--s-4);font-size:var(--fs-small);color:var(--c-ink-soft)}
.enq-submit{width:100%}
@media (min-width:560px){.enq-submit{width:auto;min-width:280px}}
.enq-fine{margin:var(--s-5) 0 0;font-size:var(--fs-small);line-height:1.7;color:var(--c-ink-soft);max-width:38em}
.enq-fine a{color:var(--c-gold-deep)}

/* ---------- 04 review: send first, then the letter ---------- */
.enq-meta{margin:0 0 var(--s-5);border-top:1px solid var(--c-line-soft)}
.enq-meta > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--c-line-soft)}
.enq-meta dt{font:400 12px/1.9 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-soft)}
:lang(th) .enq-meta dt{font-size:14px;letter-spacing:.01em;text-transform:none;line-height:1.7}
.enq-meta dd{margin:0;font:400 15px/1.6 var(--f-display);color:var(--c-ink);overflow-wrap:anywhere}
:lang(th) .enq-meta dd{font-size:16px}
.enq-send{margin-top:var(--s-5)}
.enq-send-h{margin:0 0 var(--s-4);font:400 12px/1.6 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--c-gold-deep)}
:lang(th) .enq-send-h{font-size:14px;letter-spacing:.04em;text-transform:none}
.enq-long{margin:0 0 var(--s-4);padding-left:var(--s-4);border-left:1px solid var(--c-gold);font:400 var(--fs-small)/1.7 var(--f-body);color:var(--c-ink-soft)}
.enq-btns{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@media (min-width:600px){.enq-btns{grid-template-columns:repeat(2,minmax(0,1fr))}.enq-b-mail{grid-column:1 / -1}}   /* the email app on its own row, then Gmail, Outlook (work), Outlook.com and copy two by two */
.enq-btns .btn{width:100%;padding-left:var(--s-4);padding-right:var(--s-4)}
.enq-btns .btn > span{min-width:0}
.enq-b-copy.is-done{background:var(--c-ink);color:var(--c-white);border-color:var(--c-ink)}
.enq-status:empty{display:none}
.enq-status{margin:var(--s-4) 0 0;font:400 15px/1.6 var(--f-display);color:var(--c-ink)}
.enq-attach{margin:var(--s-5) 0 0;padding:var(--s-4) 0 0;border-top:1px solid var(--c-line-soft);font:400 var(--fs-small)/1.7 var(--f-body);color:var(--c-ink-soft)}
.enq-read{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--c-line)}
.enq-letter{margin:0;padding:var(--s-5);background:var(--c-ivory);border:1px solid var(--c-line-soft);font:400 15px/1.75 var(--f-body);color:var(--c-ink);white-space:pre-wrap;overflow-wrap:anywhere}
:lang(th) .enq-letter{line-height:1.85}
@media (max-width:420px){.enq-letter{padding:var(--s-4)}}
.enq-edits{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s-6)}
.enq-after{display:flex;flex-wrap:wrap;gap:0 var(--s-6);margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--c-line-soft)}
.enq-clip{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;border:0;padding:0}

/* hover only where there is a real pointer: on touch screens a tap would leave a row gold and shifted (focus styles stay above) */
@media (hover:hover) and (pointer:fine){
  .enq-x:hover{color:var(--c-gold-deep)}
  .enq-cat:hover{color:var(--c-gold-deep);padding-left:6px}
  .enq-link:hover{color:var(--c-ink)}
  .enq-opt:hover input{border-color:var(--c-ink)}
}

/* large screens keep the same column, slightly wider */
@media (min-width:1800px){.enq{width:min(820px,calc(100% - 64px))}.enq-in{max-width:700px}}
@media (prefers-reduced-motion:reduce){.enq-cat{transition:none}}