/* =====================================================================
   QAA Trade Services — page styles for
   /supply-chain/trade-services/ and /fa/supply-chain/trade-services/.
   Loaded after /assets/css/main.css and the page's own inline :root
   tokens, so it only ADDS the components this page needs (all prefixed
   .ts-) on top of the site's existing colors, fonts, .btn / .btn-gold,
   .phero, .band, .sec-head and .eyebrow. Logical properties throughout
   (inline-start/end) so the FA page mirrors correctly under dir="rtl".
   Every animation and transition here is switched off under
   prefers-reduced-motion: reduce (last block in this file).
   ===================================================================== */

#page-trade-services{--ts-goldT:#8a6a22;--ts-edge:#e6deee}

/* Anchor targets and focused form controls land below the sticky header */
#page-trade-services section[id],
#page-trade-services [id^="ts-branch-"],
.ts-form input,.ts-form select,.ts-form textarea,.ts-form fieldset{scroll-margin-top:calc(var(--qaa-header-h,81px) + 24px)}

/* ---------- hero ---------- */
.ts-hero{background:
  radial-gradient(ellipse at 92% 12%,rgba(80,64,151,.9) 0,transparent 55%),
  linear-gradient(115deg,#321249 0%,#27103d 60%,#312c85 100%);
  padding:40px 0 64px}
.ts-hero::after{content:"";position:absolute;width:680px;height:680px;border:1px solid rgba(255,255,255,.05);border-radius:50%;inset-inline-end:-340px;top:-260px;pointer-events:none;animation:tsSpin 90s linear infinite}
.ts-hero .breadcrumbs,.ts-hero .breadcrumbs a{color:rgba(255,255,255,.62)}
.ts-hero .breadcrumbs a:hover{color:var(--gold)}
.ts-hero .bc-cur{color:#fff}
.ts-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:18px}
.ts-kicker{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--gold);margin-bottom:16px}
/* same scale as the site's other hero headings (.phero h1) */
.ts-hero h1{color:#fff;font-size:clamp(32px,5vw,52px);line-height:1.12;letter-spacing:-.02em;font-weight:700;max-width:18ch}
.ts-hero h1 em{font-style:normal;color:var(--gold)}
.ts-hero .ts-lead{color:rgba(255,255,255,.84);font-size:17px;line-height:1.75;max-width:56ch;margin-top:20px}
.ts-hero-actions{display:flex;gap:16px 22px;align-items:center;flex-wrap:wrap;margin-top:28px}
.ts-textlink{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.3)}
.ts-textlink:hover{color:var(--gold);border-color:var(--gold)}
.ts-note{display:flex;gap:10px;align-items:center;margin-top:24px;font-size:13px;color:rgba(255,255,255,.7)}
.ts-note::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* hero illustration (inline SVG, decorative) */
.ts-art{position:relative;min-height:340px;display:grid;place-items:center}
.ts-art::before{content:"";position:absolute;inset:12% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(200,169,107,.10),transparent 70%);pointer-events:none}
.ts-art svg{width:100%;max-width:460px;height:auto;overflow:visible}
.ts-art-label{position:absolute;font-size:12px;color:rgba(255,255,255,.8);border:1px solid rgba(200,169,107,.22);background:rgba(50,28,74,.94);padding:10px 14px;border-radius:10px;box-shadow:0 10px 26px -12px rgba(24,8,39,.55);animation:tsLabelIn .7s ease both}
.ts-art-label b{display:block;color:var(--gold);font-weight:700;font-size:11px;letter-spacing:.08em;margin-bottom:3px}
.ts-art-label.top{top:10px;inset-inline-start:8px;animation-delay:.5s}
.ts-art-label.bottom{bottom:6px;inset-inline-end:0;animation-delay:.75s}
/* Route diagram (partials/trade-services-hero-art.php, brief 2026-10-09):
   only the dots travelling the routes (SMIL in the SVG) and a slow pulse
   on the Dubai hub move; the endless floating of the old artwork is gone. */
.ts-art .a-ring{transform-box:fill-box;transform-origin:center;animation:tsRing 4s ease-out infinite}
.ts-art .a-check{stroke-dasharray:40;stroke-dashoffset:40;animation:tsDraw 1s ease .9s forwards}
.ts-art .ts-art-names text{font-family:var(--font);font-size:13px;font-weight:600;fill:#fff;paint-order:stroke;stroke:#2a1840;stroke-width:3px;stroke-linejoin:round}
.ts-art .ts-art-names text.hub{font-size:14.5px;font-weight:800;fill:var(--gold,#c8a96b)}
[dir="rtl"] .ts-art .ts-art-names text{font-size:14px}
@keyframes tsDraw{to{stroke-dashoffset:0}}
@keyframes tsRing{0%{opacity:.9;transform:scale(.94)}70%,100%{opacity:0;transform:scale(1.28)}}
@keyframes tsLabelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* uses the individual `translate` property so a revealed element keeps `transform` free for hover */
@keyframes tsRise{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}

/* ---------- scroll reveal (class added by trade-services.js only when
   IntersectionObserver exists and motion is allowed). Content is never
   hidden (brief 2026-10-09): a section waiting to be revealed sits 8px low
   and rises into place once; opacity is not touched. ---------- */
.ts-js .ts-reveal{translate:0 8px;transition:translate .5s cubic-bezier(.2,.7,.3,1)}
.ts-js .ts-reveal.is-visible{translate:none}

/* ---------- strip ---------- */
.ts-strip{background:var(--paper2);border-bottom:1px solid var(--line)}
.ts-strip .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding-top:20px;padding-bottom:20px;font-size:13px;color:var(--muted)}
.ts-strip strong{color:var(--ink);font-weight:700;display:inline-flex;align-items:center;gap:8px}
.ts-strip strong::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- section heads ---------- */
.ts-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:34px}
.ts-head .sec-head{max-width:40ch}
.ts-head > p{max-width:42ch;color:var(--muted);font-size:15.5px;margin:0}

/* ---------- engagement choices ---------- */
.ts-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ts-route{position:relative;display:flex;flex-direction:column;text-align:start;padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:border-color .2s,transform .2s,box-shadow .2s;color:var(--body)}
.ts-route:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(57,23,81,.35)}
.ts-route:focus-visible{outline:2px solid var(--purpleD);outline-offset:3px}
.ts-route .num{font-size:12px;font-weight:700;color:var(--ts-goldT);margin-bottom:20px}
.ts-route h3{font-size:18px;margin-bottom:8px}
.ts-route p{font-size:14.5px;color:var(--muted);margin:0 0 18px}
.ts-route .go{margin-top:auto;font-size:13px;font-weight:700;color:var(--purpleD)}
.ts-route[aria-current="true"]{border-color:var(--purpleD);box-shadow:0 0 0 3px rgba(125,11,153,.14)}
.ts-scope-note{margin-top:18px;font-size:14px;color:var(--muted)}

/* ---------- services catalogue ---------- */
.ts-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ts-service{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;padding:28px 28px 22px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.ts-service > div{display:flex;flex-direction:column;min-width:0}
.ts-service:hover{border-color:rgba(200,169,107,.55);transform:translateY(-2px);box-shadow:0 18px 36px -30px rgba(57,23,81,.45)}
.ts-service:focus-within{border-color:rgba(125,11,153,.35)}
/* icon: a line icon on a node — one gold point where the routes meet */
.ts-icon{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#faf7fc;border:1px solid var(--ts-edge);color:var(--purpleD);transition:border-color .2s ease,background .2s ease}
.ts-icon::after{content:"";position:absolute;top:-3px;inset-inline-end:-3px;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid var(--gold);transition:background .2s ease}
.ts-icon svg{width:22px;height:22px}
.ts-service:hover .ts-icon{border-color:rgba(200,169,107,.6);background:#fff}
.ts-service:hover .ts-icon::after{background:var(--gold)}
.ts-service h3{font-size:18px;margin:2px 0 8px;line-height:1.35}
.ts-service > div > p{font-size:15px;color:var(--body);margin:0 0 16px;max-width:58ch}
.ts-service details{border:1px solid var(--line);border-radius:12px;background:#fcfbfd;margin:0 0 12px}
.ts-service details[open]{background:#fff}
.ts-service summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:10px 14px;font-size:13.5px;font-weight:700;color:var(--ink);border-radius:12px}
.ts-service summary:focus-visible{outline:2px solid var(--purpleD);outline-offset:2px}
.ts-service summary::-webkit-details-marker{display:none}
.ts-service summary::after{content:"+";font-size:18px;line-height:1;color:var(--purpleD)}
.ts-service details[open] summary::after{content:"−"}
.ts-service details ul{margin:0;padding:0 14px 6px;padding-inline-start:32px;font-size:14px;color:var(--body)}
.ts-service details li{margin:0 0 6px}
.ts-service details li::marker{color:var(--gold)}
.ts-service details .ts-fine{margin:0;padding:8px 14px 14px;font-size:13px;color:var(--muted);border-top:1px dashed var(--line)}
.ts-service .ts-cta{margin-top:auto;align-self:flex-start}
.ts-cta{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:13.5px;font-weight:700;color:var(--purpleD);padding:6px 0;background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 6px)/0 1px;transition:background-size .22s ease,color .15s ease}
[dir="rtl"] .ts-cta{background-position:100% calc(100% - 6px)}
.ts-cta:hover{color:var(--vivid);background-size:calc(100% - 22px) 1px}
.ts-cta:focus-visible{outline:2px solid var(--purpleD);outline-offset:3px;border-radius:4px}
.ts-cta .ar{transition:transform .18s ease}
.ts-cta:hover .ar{transform:translateX(3px)}
[dir="rtl"] .ts-cta:hover .ar{transform:translateX(-3px)}

/* ---------- coverage: text 40% | artwork 60%, country detail below ---------- */
.ts-coverage{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:28px 56px;align-items:center}
.ts-coverage p{color:var(--body);font-size:16px;margin-top:14px;max-width:56ch}
.ts-coverage .ts-small{font-size:14px;color:var(--muted)}
.ts-network{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:#f6f4f8;box-shadow:0 26px 50px -42px rgba(19,0,24,.4)}
.ts-network img{display:block;width:100%;height:auto}
.ts-countries{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;position:relative}
.ts-country{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px}
.ts-country::before{content:"";position:absolute;top:-1px;inset-inline-start:22px;width:36px;height:2px;background:var(--gold);border-radius:2px}
.ts-country-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ts-countries .code{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#f4eef9;border:1px solid var(--ts-edge);color:var(--purpleD);font-size:11.5px;font-weight:800;letter-spacing:.04em}
.ts-country h3{font-size:17px;margin:0;color:var(--ink)}
.ts-country ul{list-style:none;margin:0;padding:0}
.ts-country li{position:relative;padding-inline-start:16px;font-size:14.5px;color:var(--body);line-height:1.5;margin:0 0 6px}
.ts-country li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--gold)}
.ts-country-svc{margin:14px 0 0 !important;padding-top:12px;border-top:1px dashed var(--line);font-size:13px !important;color:var(--muted) !important;line-height:1.6}
.ts-country-more{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:2px 0 0 !important;font-size:14px !important;max-width:none !important}
.ts-country-more .code{width:30px;height:30px;background:var(--paper2);color:var(--muted);font-size:13px}
.ts-country-more strong{color:var(--ink);font-weight:700}
.ts-country-more small{color:var(--muted);font-size:13.5px}
.ts-country-more small::before{content:"— ";color:var(--gold)}

/* ---------- delivery standards ---------- */
.ts-standards{background:linear-gradient(135deg,#2a1640,#301844);color:#fff;padding:56px 0}
.ts-standards h2{color:#fff;font-size:clamp(24px,3vw,34px);max-width:30ch}
.ts-standards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px}
.ts-standards-grid b{display:flex;gap:10px;font-size:15px;font-weight:700;margin-bottom:6px;color:#fff}
.ts-standards-grid b::before{content:"✓";color:var(--gold);font-weight:800}
.ts-standards-grid span{font-size:13.5px;color:rgba(255,255,255,.7)}
.ts-standards .ts-partner{display:inline-flex;gap:8px;margin-top:30px;font-size:14px;font-weight:700;color:var(--gold);border-bottom:1px solid rgba(200,169,107,.45);padding-bottom:3px}
.ts-standards .ts-partner:hover{color:#fff}

/* ---------- process: 01 → 02 → 03 → 04 ---------- */
.ts-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:34px}
.ts-step{position:relative;padding:0}
.ts-step .num{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:1.5px solid var(--gold);color:var(--purpleD);font-size:15px;font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 5px #fff}
.ts-step:first-child .num{background:var(--purpleD);border-color:var(--purpleD);color:#fff}
/* connector to the next step, ending in a small chevron */
.ts-step:not(:last-child)::after{content:"";position:absolute;top:24px;inset-inline-start:60px;inset-inline-end:-16px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(200,169,107,.35))}
.ts-step:not(:last-child)::before{content:"";position:absolute;top:21px;inset-inline-end:-16px;width:6px;height:6px;border-top:1.5px solid var(--gold);border-inline-end:1.5px solid var(--gold);transform:rotate(45deg)}
[dir="rtl"] .ts-step:not(:last-child)::after{background:linear-gradient(270deg,var(--gold),rgba(200,169,107,.35))}
[dir="rtl"] .ts-step:not(:last-child)::before{transform:rotate(-45deg)}
.ts-step h3{font-size:17px;margin:20px 0 8px;line-height:1.35}
.ts-step p{font-size:14.5px;color:var(--muted);margin:0;max-width:30ch}
.ts-process-note{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);max-width:80ch}

/* ---------- FAQ ---------- */
.ts-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.ts-faq details{border-bottom:1px solid var(--line);padding:18px 0}
.ts-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-size:16px;font-weight:700;color:var(--ink)}
.ts-faq summary::-webkit-details-marker{display:none}
.ts-faq summary::after{content:"+";color:var(--purpleD);font-size:20px;line-height:1;flex:0 0 auto}
.ts-faq details[open] summary::after{content:"−"}
.ts-faq details p{margin:10px 0 0;font-size:15px;color:var(--body);animation:tsRise .3s ease both}

/* ---------- request ---------- */
#request{background:linear-gradient(180deg,#fff 0,#faf8fc 100%)}
.ts-request{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px;align-items:start}
@media (min-width:981px){.ts-request-intro{position:sticky;top:112px}}
.ts-request-intro p{color:var(--body);font-size:15.5px;margin-top:14px}
.ts-request-intro .ts-small{font-size:13.5px;color:var(--muted)}
.ts-contactnote{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.ts-contactnote a{display:inline-flex;gap:8px;margin-top:8px;font-weight:700;color:var(--purpleD)}
.ts-contactnote a:hover{color:var(--vivid)}

.ts-form{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 34px 30px;min-width:0;box-shadow:0 30px 60px -48px rgba(40,16,64,.45)}
.ts-form::before{content:"";position:absolute;top:-1px;inset-inline:34px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(200,169,107,.15));border-radius:2px}
[dir="rtl"] .ts-form::before{background:linear-gradient(270deg,var(--gold),rgba(200,169,107,.15))}
.ts-form h3{font-size:21px;margin-bottom:6px}
.ts-form .ts-sub{font-size:14px;color:var(--muted);margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ts-form fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
.ts-form fieldset[disabled]{display:none}
.ts-form legend,.ts-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px;padding:0}
/* top-level question groups carry a small gold node */
.ts-form > fieldset:not(.ts-branch) > legend{font-size:14.5px;margin-bottom:12px}
.ts-form > fieldset:not(.ts-branch) > legend::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--gold);margin-inline-end:9px;vertical-align:.1em}
.ts-req{color:#b42318;margin-inline-start:2px}
.ts-opt{font-weight:500;color:var(--muted);font-size:12.5px}
.ts-hint{display:block;font-size:12.5px;color:var(--muted);margin:-2px 0 8px;font-weight:500}
.ts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ts-field{display:flex;flex-direction:column;min-width:0}
.ts-field.wide{grid-column:1/-1}
.ts-form input[type="text"],.ts-form input[type="email"],.ts-form input[type="tel"],.ts-form select,.ts-form textarea{
  width:100%;min-width:0;min-height:48px;border:1px solid #d6cde0;border-radius:10px;background:#fff;padding:12px 13px;
  font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
.ts-form input:hover,.ts-form select:hover,.ts-form textarea:hover{border-color:#bfb0cf}
.ts-form textarea{min-height:110px;resize:vertical;line-height:1.6}
.ts-form input:focus,.ts-form select:focus,.ts-form textarea:focus{outline:none;border-color:var(--purpleD);box-shadow:0 0 0 3px rgba(125,11,153,.16)}
.ts-form [aria-invalid="true"]{border-color:#b42318 !important;box-shadow:0 0 0 3px rgba(180,35,24,.12) !important}
.ts-form input::placeholder,.ts-form textarea::placeholder{color:#9a93a3}
.ts-err{display:block;font-size:12.5px;color:#b42318;margin-top:6px;font-weight:600}
.ts-err:empty{display:none}
.ts-ltr{direction:ltr;text-align:start}
[dir="rtl"] .ts-ltr{text-align:right}

/* choice cards (engagement + scope) */
.ts-choices{display:grid;gap:10px}
.ts-choices.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ts-choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts-choice{position:relative;display:flex;gap:10px;align-items:flex-start;min-height:48px;padding:13px 14px;border:1px solid #d6cde0;border-radius:12px;background:#fff;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.45;transition:border-color .15s,background .15s}
.ts-choice:hover{border-color:#a98bc2;background:#fdfbfe}
.ts-choice input{margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--purpleD)}
.ts-choice:has(input:checked){border-color:var(--purpleD);background:#faf5fd;box-shadow:inset 0 0 0 1px var(--purpleD)}
.ts-choice:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

/* service checkboxes grouped under the 8 groups */
.ts-checkgroups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.ts-checkgroup{border:1px solid var(--line);border-radius:12px;padding:12px 14px 8px;background:#fcfbfd;transition:border-color .15s ease,background .15s ease}
.ts-checkgroup:has(input:checked){border-color:rgba(125,11,153,.35);background:#fff}
.ts-checkgroup .gname{display:block;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ts-goldT);margin-bottom:4px}
.ts-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.45;padding:7px 0;min-height:36px}
.ts-check:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:1px;border-radius:6px}
.ts-check input{margin:3px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--purpleD)}

/* conditional detail groups */
.ts-branch{border-top:1px solid var(--line);padding-top:20px;animation:tsRise .35s ease both}
.ts-branch > legend{float:left;width:100%;font-size:14px;color:var(--purpleD);margin-bottom:12px}
[dir="rtl"] .ts-branch > legend{float:right}
.ts-branch > legend + *{clear:both}
.ts-inline{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:13.5px;color:var(--body);cursor:pointer}
.ts-inline input{width:16px;height:16px;accent-color:var(--purpleD);margin:0}
.ts-qty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,130px);gap:10px}
.ts-safety{font-size:12.5px;color:var(--muted);background:var(--paper2);border-radius:10px;padding:10px 12px;margin-top:12px}

.ts-summary{border:1px solid #f1b8b3;background:#fff6f5;border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:14px;color:#7a1d15}
.ts-summary:focus{outline:2px solid #b42318;outline-offset:2px}
.ts-summary ul{margin:8px 0 0;padding-inline-start:20px}
.ts-summary a{text-decoration:underline;color:inherit}

.ts-submit{width:100%;justify-content:center;min-height:54px;margin-top:10px;font-size:15.5px !important;padding:16px 22px !important;border-radius:12px !important;border:0;letter-spacing:.01em;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease !important}
.ts-submit:hover{transform:translateY(-1px) !important;box-shadow:0 12px 24px -14px rgba(184,146,58,.7) !important}
.ts-submit:focus-visible{outline:2px solid var(--purpleD);outline-offset:3px}
.ts-submit[disabled]{opacity:.65;cursor:progress}
.ts-privacy{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.ts-status{margin-top:14px;padding:14px 16px;border-radius:12px;font-size:14.5px;line-height:1.7}
.ts-status:empty{display:none}
.ts-status.is-error{background:#fff6f5;border:1px solid #f1b8b3;color:#7a1d15}
.ts-status.is-pending{background:var(--paper2);color:var(--body)}
.ts-success{background:#f3fbf4;border:1px solid #b5dfbd;color:#14532d;border-radius:14px;padding:22px}
.ts-success:focus{outline:2px solid var(--gold);outline-offset:3px}
.ts-success h3{color:#14532d;font-size:19px;margin-bottom:8px}
.ts-success p{margin:0}
.ts-success .ref{margin-top:10px;font-size:14px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .ts-hero-grid,.ts-coverage,.ts-faq,.ts-request{grid-template-columns:1fr;gap:30px}
  .ts-countries{grid-template-columns:1fr;margin-top:4px;gap:14px}
  /* process: vertical, the connector runs down between the numbers */
  .ts-steps{grid-template-columns:1fr;gap:0;max-width:640px}
  .ts-step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding-bottom:26px}
  .ts-step .num{grid-row:1/span 2}
  .ts-step h3{margin:11px 0 6px}
  .ts-step p{max-width:none}
  .ts-step:not(:last-child)::after{top:54px;bottom:6px;inset-inline-start:24px;inset-inline-end:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--gold),rgba(200,169,107,.35))}
  [dir="rtl"] .ts-step:not(:last-child)::after{background:linear-gradient(180deg,var(--gold),rgba(200,169,107,.35))}
  .ts-step:not(:last-child)::before{display:none}
  .ts-art{min-height:280px}
  .ts-art svg{max-width:360px}
  .ts-standards-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .ts-routes,.ts-catalog{grid-template-columns:1fr}
  .ts-catalog{gap:14px}
  .ts-service{grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 18px 16px}
  .ts-icon{width:44px;height:44px}
  .ts-country-more{align-items:flex-start}
  .ts-choices.three{grid-template-columns:1fr}
  .ts-checkgroups{grid-template-columns:1fr}
  .ts-grid{grid-template-columns:1fr}
  .ts-form{padding:26px 18px 22px;border-radius:14px}
  .ts-form::before{inset-inline:18px}
  .ts-form input[type="text"],.ts-form input[type="email"],.ts-form input[type="tel"],.ts-form select,.ts-form textarea{font-size:16px}
  .ts-head{display:block}
  .ts-head > p{margin-top:12px}
  .ts-hero{padding:28px 0 40px}
  .ts-hero .ts-lead{font-size:16px}
  .ts-art-label{font-size:11px}
  .ts-strip .container{display:grid;grid-template-columns:1fr 1fr}
}
/* Phones and small tablets: the diagram sits under the text, at most 240px
   tall; the top label moves into the flow above it and the bottom label is
   dropped, so neither can cover the routes. */
@media (max-width:767px){
  .ts-art{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .ts-art::before{display:none}
  .ts-art-label.top{position:static;align-self:flex-start;animation:none}
  .ts-art-label.bottom{display:none}
  .ts-art svg{max-height:240px;max-width:100%;margin:0 auto}
}
@media (max-width:480px){
  .ts-standards-grid{grid-template-columns:1fr}
  .ts-choices.two{grid-template-columns:1fr}
  .ts-art-label.top{inset-inline-start:0}
}
[dir="rtl"] .ts-hero h1{font-size:clamp(28px,4.4vw,45px);letter-spacing:0;line-height:1.3;max-width:22ch}
[dir="rtl"] .ts-route h3,[dir="rtl"] .ts-service h3,[dir="rtl"] .ts-step h3,[dir="rtl"] .ts-country h3{letter-spacing:0;line-height:1.5}
[dir="rtl"] .ts-step .num{font-size:16px}
[dir="rtl"] .ts-kicker{letter-spacing:0;font-size:13px}

/* ---------- guided journey: toggles, suggestions, request bar, steps ---------- */
.ts-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button.ts-toggle{appearance:none;background:none;border:1px solid var(--ts-edge);border-radius:999px;padding:8px 16px 8px 12px;font:inherit;font-size:13.5px;font-weight:700;color:var(--purpleD);cursor:pointer;min-height:44px;gap:10px;transition:background .18s ease,border-color .18s ease,color .18s ease}
[dir="rtl"] button.ts-toggle{padding:8px 12px 8px 16px}
button.ts-toggle:hover{border-color:var(--purpleD);background:#faf5fd}
button.ts-toggle:focus-visible{outline:2px solid var(--purpleD);outline-offset:3px}
.ts-toggle-ic{position:relative;flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor}
.ts-toggle-ic::before,.ts-toggle-ic::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.ts-toggle-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
button.ts-toggle[aria-pressed="true"]{background:var(--purpleD);border-color:var(--purpleD);color:#fff}
button.ts-toggle[aria-pressed="true"] .ts-toggle-ic{border-color:#fff;background:#fff}
button.ts-toggle[aria-pressed="true"] .ts-toggle-ic::before{width:5px;height:1.8px;background:var(--purpleD);transform:translate(-80%,0) rotate(45deg)}
button.ts-toggle[aria-pressed="true"] .ts-toggle-ic::after{width:9px;height:1.8px;background:var(--purpleD);transform:translate(-30%,-60%) rotate(-50deg)}
.ts-service.is-selected{border-color:var(--purpleD);box-shadow:0 0 0 1px var(--purpleD)}
.ts-service.is-suggested:not(.is-selected){border-color:rgba(200,169,107,.75)}
.ts-suggest{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;padding:3px 10px;border-radius:999px;background:#fbf6ea;color:var(--ts-goldT);font-size:12px;font-weight:700}
.ts-suggest::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

.ts-bar{position:fixed;inset-inline:0;bottom:0;z-index:350;background:#fff;border-top:1px solid var(--line);box-shadow:0 -12px 30px -24px rgba(40,16,64,.5);padding:10px 0}
.ts-bar[hidden]{display:none}
.ts-bar-in{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.ts-bar-t{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.ts-bar-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.ts-bar-list li{display:inline-flex;align-items:center;gap:2px;padding-inline-start:12px;border:1px solid var(--ts-edge);border-radius:999px;background:#faf7fc;font-size:13px;font-weight:600;color:var(--ink)}
.ts-bar-x{appearance:none;border:0;background:none;width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1;color:var(--purpleD);cursor:pointer}
.ts-bar-x:hover{background:#efe6f6}
.ts-bar-x:focus-visible,.ts-bar-add:focus-visible,.ts-bar-go:focus-visible{outline:2px solid var(--purpleD);outline-offset:2px}
.ts-bar-count{display:none;font-size:13.5px;font-weight:600;color:var(--body)}
.ts-bar-add{font-size:13px;font-weight:700;color:var(--purpleD);padding:10px 4px;white-space:nowrap}
.ts-bar-go{white-space:nowrap;border-radius:999px !important;padding:11px 20px !important;font-size:14px !important;border:0}
html.ts-bar-on #back-to-top-float{bottom:86px !important}

.ts-stage{display:flex;align-items:center;gap:10px;margin:8px 0 18px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ts-goldT)}
[dir="rtl"] .ts-stage{letter-spacing:0;text-transform:none;font-size:14px}
.ts-stage-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--purpleD);color:#fff;font-size:12.5px;letter-spacing:0}
.ts-stage::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.ts-form > .ts-stage:not(:first-of-type){margin-top:30px}
.ts-stage + .ts-branch{border-top:0;padding-top:0}
@media (max-width:760px){
  .ts-bar{padding:8px 0}
  .ts-bar-in{flex-wrap:nowrap;gap:12px}
  .ts-bar-list,.ts-bar-t,.ts-bar-add{display:none}
  .ts-bar-count{display:block;flex:1 1 auto;min-width:0;font-size:13px;line-height:1.35}
  .ts-bar-go{flex:0 0 auto;padding:10px 14px !important;font-size:13px !important;min-height:44px}
  html.ts-bar-on #back-to-top-float{bottom:78px !important}
}

/* ---------- reduced motion: every animation AND transition off ---------- */
@media (prefers-reduced-motion:reduce){
  #page-trade-services *,#page-trade-services *::before,#page-trade-services *::after{animation:none !important;transition:none !important}
  .ts-js .ts-reveal{opacity:1 !important;transform:none !important;translate:none !important}
  .ts-art .a-check{stroke-dashoffset:0 !important}
  .ts-art .a-movers{display:none}
  .ts-route:hover,.ts-service:hover,.ts-submit:hover{transform:none !important}
  html{scroll-behavior:auto}
}
/* SEO 2026-10-07: H1 names the service, the old headline stays as tagline; intro text, grouped catalog, who-it-is-for */
.ts-tagline{color:#fff;font-size:clamp(18px,2.2vw,22px);font-weight:600;line-height:1.4;margin:14px 0 0;max-width:34ch}
.ts-intro{background:#fff;border-bottom:1px solid var(--line,rgba(19,0,24,.1))}
.ts-intro .container{padding-top:34px;padding-bottom:34px}
.ts-intro p{max-width:68ch}
.ts-intro p + p{margin-top:12px}
.ts-hero .ts-lead + .ts-lead{margin-top:10px}
.ts-intro p{font-size:16.5px;line-height:1.8;color:var(--body,#363636);margin:0}
.ts-intro p.ts-intro-links{margin-top:14px;font-size:15px;color:var(--muted,#747474)}
.ts-intro a{color:var(--purpleD,#7d0b99);font-weight:700}
/* Catalogue, brief 2026-10-09 (A5): one grid; the group name is a small
   label above each card instead of a row of its own; tighter cards; the
   description shows at most three lines until "What this covers" is open. */
.ts-catalog{gap:16px}
.ts-service{padding:22px 22px 18px;gap:18px}
.ts-service .ts-group-h,.ts-service > div > p.ts-group-h{display:block;max-width:none;margin:0 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;color:var(--goldD,#b8923a)}
[dir="rtl"] .ts-service .ts-group-h,[dir="rtl"] .ts-service > div > p.ts-group-h{letter-spacing:0;text-transform:none;font-size:13px}
.ts-service h3{margin:0 0 6px}
.ts-service > div > p:not(.ts-group-h):not(.ts-svc-note){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;margin-bottom:12px}
.ts-service:has(details[open]) > div > p:not(.ts-group-h){-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;display:block}
.ts-service .ts-svc-note{margin:0 0 12px;padding:10px 12px;font-size:13.5px;line-height:1.65;color:var(--ink,#130018);background:#fbf8f1;border-inline-start:3px solid var(--gold,#c8a96b);border-radius:8px}
.ts-head{margin-bottom:22px}
.ts-who-list{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.ts-who-list li{background:#fff;border:1px solid var(--line,rgba(19,0,24,.1));border-radius:12px;padding-block:14px;padding-inline:40px 16px;position:relative;font-weight:600;color:var(--ink,#130018);font-size:15px;line-height:1.5}
.ts-who-list li::before{content:"";position:absolute;inset-inline-start:16px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--gold,#c8a96b)}
[dir="rtl"] .ts-who-list li{padding:14px 40px 14px 16px}
[dir="rtl"] .ts-who-list li::before{left:auto;right:16px}
.ts-who-cta{margin:24px 0 0}

/* Persian page (2026-10-07): prose inside cards uses the card's full width
   (the English measures in ch are narrow columns in Persian), and cards grow
   with their text. English is untouched: every rule is under [dir="rtl"]. */
[dir="rtl"] .ts-route p.fa-prose,[dir="rtl"] .ts-service > div > p.fa-prose,[dir="rtl"] .ts-step p.fa-prose,
[dir="rtl"] .ts-sample-after p.fa-prose,[dir="rtl"] .ts-standards-grid span.fa-prose,[dir="rtl"] .ts-faq details p.fa-prose{max-width:none}
[dir="rtl"] .ts-route,[dir="rtl"] .ts-service,[dir="rtl"] .ts-step,[dir="rtl"] .ts-standards-grid > div{height:auto;min-width:0}
/* WhatsApp contact: its own block in the request intro (2026-10-07).
   Site palette only; the button is the site's own .btn.btn-gold, like every
   other WhatsApp button on the site. */
.ts-wa-card{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding:20px;border-radius:16px;background:var(--paper2);border:1px solid var(--line);border-inline-start:4px solid var(--gold)}
.ts-wa-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--purpleD);color:#fff}
.ts-wa-body{min-width:0}
.ts-wa-title{margin:0 0 4px;font-size:16px;font-weight:800;color:var(--ink)}
.ts-wa-text{margin:0 0 14px;font-size:14px;line-height:1.75;color:var(--muted)}
.ts-wa-card .btn{white-space:nowrap}
@media (max-width:520px){.ts-wa-card{padding:16px}.ts-wa-card .btn{width:100%;justify-content:center;white-space:normal}}

/* ---------- sample report (brief 2026-10-09, A6) ---------- */
.ts-sample .ts-sample-flag{display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:999px;background:#fbf3e2;border:1px solid rgba(200,169,107,.55);color:#7a5a1c;font-size:12.5px;font-weight:700;line-height:1.5}
/* first column stays put while the table scrolls sideways on small screens */
.ts-sample .ts-sample-table{border-collapse:separate;border-spacing:0}
.ts-sample .ts-sample-table th,.ts-sample .ts-sample-table td{border-width:0 1px 1px 0}
[dir="rtl"] .ts-sample .ts-sample-table th,[dir="rtl"] .ts-sample .ts-sample-table td{border-width:0 0 1px 1px}
.ts-sample .ts-sample-table tr > :first-child{border-inline-start-width:1px}
.ts-sample .ts-sample-table thead th{border-top-width:1px}
.ts-sample .ts-sample-table tbody th,.ts-sample .ts-sample-table thead th:first-child{position:sticky;inset-inline-start:0;z-index:1;background:#fcfbfe}
.ts-sample .ts-sample-table thead th:first-child{background:var(--paper2,#f7f7fa)}
@media (max-width:760px){.ts-sample .ts-sample-table tbody th,.ts-sample .ts-sample-table thead th:first-child{min-width:120px;box-shadow:6px 0 10px -8px rgba(19,0,24,.25)}[dir="rtl"] .ts-sample .ts-sample-table tbody th,[dir="rtl"] .ts-sample .ts-sample-table thead th:first-child{box-shadow:-6px 0 10px -8px rgba(19,0,24,.25)}}

/* ---------- coverage (brief 2026-10-09, A7): inline route diagram + five cards, 2 + 1 + 2 ---------- */
.ts-network{padding:18px 16px 10px;background:#fff}
.ts-cov-svg{display:block;width:100%;height:auto}
.ts-cov-svg text{font-family:var(--font);fill:var(--ink,#130018)}
.ts-cov-cols text{font-size:11.5px;font-weight:800;letter-spacing:.1em;fill:var(--goldD,#b8923a)}
[dir="rtl"] .ts-cov-cols text{letter-spacing:0;font-size:14px}
.ts-cov-names text{font-size:13.5px;font-weight:700}
.ts-cov-names text.muted{fill:var(--muted,#747474);font-weight:600}
[dir="rtl"] .ts-cov-names text{font-size:14.5px}
.ts-cov-key text{font-size:11.5px;fill:var(--muted,#747474)}
[dir="rtl"] .ts-cov-key text{font-size:12.5px}
.ts-countries{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.ts-country-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.ts-country-col-h{margin:0 !important;font-size:11.5px !important;font-weight:800;letter-spacing:.1em;color:var(--goldD,#b8923a) !important;max-width:none !important}
[dir="rtl"] .ts-country-col-h{letter-spacing:0;font-size:14px !important}
.ts-coverage .ts-country-text{margin:0 0 8px;font-size:14.5px;line-height:1.7;max-width:none;color:var(--body,#363636)}
.ts-country-svc-l{font-weight:700;color:var(--ink,#130018)}
.ts-coverage .ts-country-note{margin:10px 0 0;padding:10px 12px;font-size:13.5px;line-height:1.65;max-width:none;background:var(--paper2,#f7f7fa);border-radius:8px;color:var(--body,#363636)}
.ts-coverage .ts-country-note b{color:var(--ink,#130018)}
@media (max-width:980px){.ts-countries{grid-template-columns:1fr}}
/* Persian: justified text leaves wide gaps in the narrow three-column cards; align to the start there. */
@media (min-width:981px){[dir="rtl"] .ts-coverage .ts-country-text.fa-prose,[dir="rtl"] .ts-coverage .ts-country-note.fa-prose{text-align:start;text-align-last:auto}}

/* ---------- form (brief 2026-10-09, B7) ---------- */
.ts-response-note{margin:22px 0 12px;font-size:14px;line-height:1.7;color:var(--body,#363636)}

/* From CARAVAN block (Issue 08 articles): one column on phones, two on tablets */
@media(max-width:900px){.ts-caravan .rel-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ts-caravan .rel-grid{grid-template-columns:1fr}}

/* Persian page: every multi-line paragraph and list item justified (2026-10-11); centred blocks stay centred */
html[dir=rtl] #content p,html[dir=rtl] #content li{text-align:justify;text-align-last:right}
html[dir=rtl] #content [style*="text-align:center"] p{text-align:center;text-align-last:center}