/* ==========================================================================
   TW International Suppliers, Inc. — English one-page mini-site (layout: tw)
   Reuses main.css components; re-tints the tokens with the TW brand
   (indigo #28347E from the original page, sky blue from the TW logo,
   red #CB0214 hover accent from the original buttons).
   ========================================================================== */

.tw-site {
  --navy: #28347E;
  --navy-900: #161D4F;
  --navy-700: #1F2A6B;
  --lime: #1BA2DC;            /* accent: bars, outlines, bullets, focus ring */
  --lime-700: #1590C4;
  --green: #1BA2DC;
  --green-ink: #1570A8;       /* accent text on white (5.4:1) */
  --mint: #EDF6FC;
  --tw-sky-light: #7FD0F2;    /* accent text on indigo / dark photo (6.5:1) */
  --tw-red: #CB0214;
  --tw-brochure: #24275A;     /* background of the original TW brochure artwork */
}
.tw-site ::selection { background: var(--tw-sky-light); color: var(--navy-900); }
/* Dark surfaces: the TW accent (--lime) is too dim for small text on indigo, so eyebrows and the
   focus ring use the light sky blue there. :where() keeps white cards inside them on main.css colours. */
.tw-site :is(.section--navy, .section--photo, .panel--navy, .tw-hero, .tw-brochure) :where(h6, .eyebrow) { color: var(--tw-sky-light); }
.tw-site :is(.section--navy, .section--photo, .panel--navy, .tw-hero, .tw-brochure) :focus-visible { outline-color: var(--tw-sky-light); }
.tw-site .btn--primary:hover { background: var(--tw-red); color: var(--white); }
.tw-site .btn--light:hover { background: var(--tw-sky-light); color: var(--navy-900); }
.tw-site .nav__sublink:hover,
.tw-site .nav__sublink:focus-visible { background: var(--mint); color: var(--navy); box-shadow: inset 4px 0 0 var(--lime); }
.tw-site :is(.input, .select, .textarea):focus { box-shadow: 0 0 0 3px rgba(27, 162, 220, .4); }
.tw-site .logo-strip img { filter: none; opacity: 1; }

/* ---------- Header ---------- */
.tw-header__logo img { width: 180px; }
.tw-nav__logo img { width: 150px; }
.tw-social { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.tw-social__link {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--navy); transition: background-color .2s, color .2s, transform .25s var(--ease);
}
.tw-social__link svg { width: 18px; height: 18px; fill: currentColor; }
.tw-social__link:hover { background: var(--mint); color: var(--navy); transform: translateY(-2px); }
.tw-social--dark .tw-social__link { background: rgba(255, 255, 255, .1); color: var(--white); }
.tw-social--dark .tw-social__link:hover { background: var(--tw-sky-light); color: var(--navy-900); }
.tw-nav__social { flex-wrap: nowrap; margin-left: .5rem; }
.tw-nav .nav__link[data-active]::after { transform: none; }  /* section in view (set by tw.js) */

@media (min-width: 1025px) and (max-width: 1200px) {
  .tw-header__logo img { width: 140px; }
  .tw-nav__social { margin-left: 0; gap: 0; }
}
@media (max-width: 1024px) {
  .tw-nav__social { margin: 1.25rem 20px 0; gap: .5rem; }
  .tw-nav__social .tw-social__link { background: var(--gray-50); }
}
@media (max-width: 767px) {
  .tw-header__logo img { width: 150px; }
}

/* ---------- Hero with background video ---------- */
.tw-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(470px, 30vw + 220px, 640px); padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  background: var(--navy-900); color: var(--white);
}
.tw-hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tw-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(22, 29, 79, .93) 0%, rgba(22, 29, 79, .8) 38%, rgba(22, 29, 79, .35) 68%, rgba(22, 29, 79, .08) 100%);
}
.tw-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--lime), var(--navy) 70%);
}
.tw-hero__inner > * { max-width: 620px; }
.tw-hero h1 { max-width: 16ch; margin: 0; color: var(--white); }
.tw-hero .lead { margin-top: 1.1rem; color: rgba(255, 255, 255, .9); }
.tw-hero .btn-row { margin-top: 2rem; }
.tw-hero__toggle {
  position: absolute; right: clamp(16px, 3vw, 32px); bottom: 24px; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  background: rgba(8, 11, 45, .55); color: var(--white); cursor: pointer; transition: background-color .2s, color .2s;
}
.tw-hero__toggle:hover { background: var(--white); color: var(--navy); }
.tw-hero__toggle[hidden] { display: none; }
.tw-hero__icon-pause, .tw-hero__toggle[data-state="playing"] .tw-hero__icon-play { display: none; }
.tw-hero__toggle[data-state="playing"] .tw-hero__icon-pause { display: block; }
@media (max-width: 767px) {
  .tw-hero { min-height: 540px; align-items: flex-end; }
  .tw-hero::before { background: linear-gradient(180deg, rgba(22, 29, 79, .4) 0%, rgba(22, 29, 79, .88) 36%, rgba(22, 29, 79, .95) 100%); }
  .tw-hero .btn-row .btn { flex: 1 1 auto; }
  .tw-hero__toggle { top: 16px; bottom: auto; }
}

/* ---------- Services ---------- */
.tw-service { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.tw-service + .tw-service { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); border-top: 1px solid var(--gray-200); }
.tw-service h3 { font-size: var(--fs-h3); }
.tw-service__sub { margin-top: 1.25rem; font-size: var(--fs-h5); font-weight: 500; color: var(--gray-700); }
.tw-service__list { margin-bottom: 1.25rem; }
@media (min-width: 1025px) {
  .tw-service--reverse > :first-child { order: 2; }
}

/* ---------- Our Team: heading first in the source, chart beside heading + text on desktop ---------- */
.tw-team {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: 1fr auto auto 1fr;
  column-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.tw-team__chart { grid-column: 1; grid-row: 1 / -1; align-self: center; }
.tw-team__head { grid-column: 2; grid-row: 2; margin-bottom: 1.25rem; }
.tw-team__body { grid-column: 2; grid-row: 3; }
.tw-team__body > :last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
  .tw-team { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .tw-team__chart, .tw-team__head, .tw-team__body { grid-column: 1; grid-row: auto; }
  .tw-team__chart { margin-bottom: 2rem; }
  .tw-team__body > p { max-width: 70ch; }  /* same reading measure as the stacked .split__body text above */
}

/* ---------- Team chart (opens in the lightbox) ---------- */
.tw-zoom { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.tw-zoom img { width: 100%; transition: transform .6s var(--ease); }
.tw-zoom:hover img { transform: scale(1.03); }
.tw-zoom__hint {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border-radius: 999px; background: var(--navy); color: var(--white);
  font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-sm);
}

@media (max-width: 1024px) {
  #ourteam .tw-zoom { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 480px) {  /* icon only, so the chip does not cover the bottom name of the chart */
  .tw-zoom__hint { right: 10px; bottom: 10px; padding: .55rem; }
  .tw-zoom__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Gallery ---------- */
.tw-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.tw-gallery > li { grid-column: span 2; }
.tw-gallery > li:nth-child(-n+2) { grid-column: span 3; }
.tw-gallery a { position: relative; height: 100%; box-shadow: var(--shadow-sm); }
.tw-gallery img { height: 100%; aspect-ratio: 16 / 10; }
.tw-gallery > li:nth-child(-n+2) img { aspect-ratio: 16 / 9; }
.tw-gallery img.tw-gallery__img--low { object-position: 50% 80%; }
.tw-gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.75rem 1.1rem .9rem;
  background: linear-gradient(180deg, rgba(8, 11, 45, 0), rgba(8, 11, 45, .72) 50%, rgba(8, 11, 45, .9));
  color: var(--white); font: 500 1.0625rem/1.3 var(--font-head); text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
@media (max-width: 767px) {
  .tw-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tw-gallery > li, .tw-gallery > li:nth-child(-n+2) { grid-column: span 1; }
  .tw-gallery > li:first-child { grid-column: 1 / -1; }
  .tw-gallery img, .tw-gallery > li:nth-child(-n+2) img { aspect-ratio: 1 / 1; }
  .tw-gallery > li:first-child img { aspect-ratio: 16 / 9; }
  .tw-gallery__caption { padding: 2rem .7rem .6rem; font-size: .875rem; }
}

/* ---------- Brochure (rebuilt from the original TW flyer) ---------- */
.tw-brochure {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1rem + 3vw, 4rem);
  padding: clamp(1.5rem, .75rem + 3vw, 3.5rem); border-radius: var(--radius-lg);
  background: var(--tw-brochure); color: var(--white);
}
.tw-brochure__art img { width: 100%; }
.tw-brochure h2 { font-size: var(--fs-h3); color: var(--white); }
.tw-brochure p { color: rgba(255, 255, 255, .88); }
.tw-brochure__links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.tw-brochure__links .tw-social__link { background: rgba(255, 255, 255, .1); color: var(--white); }
.tw-brochure__links .tw-social__link:hover { background: var(--tw-sky-light); color: var(--navy-900); }
.tw-brochure__site { display: inline-flex; align-items: center; gap: .5rem; color: var(--white); font-weight: 700; text-decoration: none; }
.tw-brochure__site:hover { color: var(--tw-sky-light); text-decoration: underline; }
.tw-brochure__site svg { flex: none; }
.tw-brochure__photos { grid-column: 1 / -1; width: 100%; border-radius: var(--radius); }
@media (max-width: 1024px) {
  .tw-brochure { grid-template-columns: minmax(0, 1fr); }
  .tw-brochure__art { width: 100%; max-width: 520px; margin-inline: auto; }
}

/* ---------- Contact ---------- */
.tw-contact__info h3, .tw-contact__form h3 { font-size: var(--fs-h4); }
.tw-contact__info .contact-list { margin-top: 1.25rem; }
.tw-contact__info .contact-list li > div { min-width: 0; overflow-wrap: anywhere; }
.tw-contact__info .contact-list svg { fill: var(--tw-sky-light); }
@media (min-width: 560px) and (max-width: 1024px) {
  .tw-contact__info .contact-list { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); column-gap: 1.5rem; }
}
.tw-contact__label {
  display: block; margin-bottom: .1rem; font: 500 .8125rem/1.5 var(--font-head);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tw-sky-light);
}
.tw-contact__follow { margin: 1.75rem 0 .6rem; }
.tw-contact__form h3 { margin-bottom: 1.25rem; }
.tw-contact__alt { margin: 1.5rem 0 0; text-align: center; }
.tw-contact__alt a { color: var(--green-ink); font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Certifications & memberships ---------- */
.tw-card__title { font-size: var(--fs-h4); }
.tw-certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; margin-top: 1.75rem; }
.tw-cert img { width: 100%; max-width: 190px; height: 110px; margin: 0 auto 1.1rem; object-fit: contain; }
.tw-cert__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.5; }
.tw-card .tw-cert__list li { color: var(--gray-700); }
.tw-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 2rem 1.5rem; margin-top: 1.75rem; }
.tw-members li { display: grid; place-items: center; width: 100%; }
.tw-members img { width: 100%; max-width: 170px; max-height: none; height: 96px; }
@media (max-width: 1024px) {
  .tw-affiliations { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .tw-members { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .tw-certs { grid-template-columns: minmax(0, 1fr); }
  .tw-members { gap: 1.5rem 1rem; }
  .tw-members img { max-width: 130px; height: 80px; }
}

/* ---------- Monthly market intelligence reports ---------- */
.tw-reports-wrap { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); border-radius: var(--radius-lg); background: var(--gray-50); }
.tw-reports { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.tw-report {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tw-report:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tw-report__top {
  position: relative; display: flex; flex-direction: column; gap: .2rem; padding: 2.25rem 1.75rem 1.75rem;
  background: linear-gradient(135deg, #28347E 0%, #4A5F9E 100%); color: var(--white);
}
.tw-report__icon { margin-bottom: .9rem; }
.tw-report__badge {
  position: absolute; top: 1.1rem; right: 1.1rem; padding: .25rem .7rem; border-radius: 999px;
  background: var(--white); color: var(--navy); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tw-report__month { font: 700 var(--fs-h4)/1.2 var(--font-head); }
.tw-report__name { font-size: .9375rem; opacity: .92; }
.tw-report__meta { margin-top: .5rem; font-size: .8125rem; opacity: .85; }
.tw-report__cta {
  display: flex; align-items: center; gap: .5rem; padding: 1rem 1.75rem; border-top: 3px solid var(--tw-red);
  color: var(--navy); font-weight: 600;
}
.tw-report:hover .tw-report__cta { color: var(--tw-red); }
.tw-reports__title { margin-bottom: 1rem; font-size: var(--fs-h5); }
.tw-report-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.tw-report-row {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tw-report-row svg { flex: none; color: var(--tw-red); }
.tw-report-row__text { flex: 1; min-width: 0; }
.tw-report-row__text strong { display: block; color: var(--navy); font-family: var(--font-head); font-size: 1.0625rem; }
.tw-report-row__meta { flex: none; font-size: .875rem; color: var(--gray-600); white-space: nowrap; }
.tw-report-row:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
@media (max-width: 1024px) {
  .tw-reports { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) and (max-width: 1024px) {
  .tw-report { flex-direction: row; }
  .tw-report__top { flex: 1; }
  .tw-report__cta { flex: none; border-top: 0; border-left: 3px solid var(--tw-red); }
}
@media (max-width: 479px) {
  .tw-report-row { flex-wrap: wrap; gap: .25rem .9rem; }
  .tw-report-row__meta { width: 100%; padding-left: calc(28px + .9rem); }
}

/* ---------- Footer ---------- */
.tw-footer { padding: clamp(2.75rem, 2rem + 2vw, 4rem) 0 1.75rem; border-top: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-700); font-size: .9375rem; }
.tw-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.tw-footer__logo { display: inline-block; }
.tw-footer__logo img { width: 210px; }
.tw-footer__brand p { margin-top: 1rem; }
.tw-footer__title { margin-bottom: .75rem; font: 700 .8125rem/1.4 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.tw-footer__list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.tw-footer__list a { color: var(--gray-700); text-decoration: none; overflow-wrap: anywhere; }
.tw-footer__list a:hover { color: var(--navy); text-decoration: underline; }
.tw-footer .tw-social { margin-left: -8px; }
.tw-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); font-size: .875rem;
}
.tw-footer__bottom p { margin: 0; }
@media (max-width: 1024px) {
  .tw-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .tw-footer__top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .tw-footer .tw-social { justify-content: center; margin-left: 0; }
  .tw-footer__bottom { flex-direction: column; text-align: center; }
}

/* ---------- WhatsApp (TW number, no QR code) ---------- */
.tw-wa__tip { width: 220px; }

@media print {
  .tw-footer, .tw-hero__video, .tw-hero__toggle { display: none !important; }
}