/* ==========================================================================================
   Company pages: About Us, Events, Global Presence and Contact Us.
   Measured from the reference pages at 1440 and 390 wide. Reuses the parts in site.css
   (section, container, tag, title, text, btn, tabs, product cards, form fields, world map);
   only what those pages do differently lives here.
   ========================================================================================== */

/* the reference sets its content 10px inside the 1366 container */
.co-in { padding: 0 10px; }

/* ================================ ABOUT US ================================ */

/* ---------- intro: text and tabs on the left, the figure card and drawings on the right ---------- */
.ab-intro { padding: 90px var(--gutter) 90px; }
.ab-intro .grid { display: grid; grid-template-columns: minmax(0, 788fr) minmax(0, 518fr); gap: 40px; align-items: start; }
.ab-intro .tag { margin-bottom: 20px; }
.ab-intro .title { margin-bottom: 20px; }
.ab-intro .text p { margin-bottom: 15px; }

.ab-stat { background: var(--light); border-radius: 10px; padding: 20px; }
.ab-stat .row { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.ab-stat .ic { width: 74px; height: 77px; flex: 0 0 74px; background: var(--red); color: var(--white); display: grid; place-items: center; font-size: 37px; }
.ab-stat .num { margin-top: 14px; font: 600 30px/36px var(--font); color: var(--black); }
.ab-stat p { font: 600 15px/22.5px var(--font); letter-spacing: 0.5px; color: var(--text); }
.ab-sketches { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 20px; }
.ab-sketches img { width: 415px; max-width: 100%; height: auto; }

/* tabs: a red top rule on the open tab, a grey one on the others, as on the reference */
.ab-tabs { margin-top: 84px; }
.ab-tabs [role="tablist"] { margin-bottom: 0; border-bottom: 0; }
.ab-tabs [role="tab"] { flex: 1 1 auto; padding: 15px 28px; font-size: 20px; line-height: 30px; white-space: nowrap; border-top: 2px solid var(--line); }
.ab-tabs [role="tab"][aria-selected="true"] { border-top: 4px solid var(--red); }
.ab-tabs [role="tabpanel"] { padding: 20px 10px 0; }
.ab-tabs [role="tabpanel"] > p { font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); }
.ab-tabs [role="tabpanel"] > .lead-b { font: 700 20px/30px var(--font); letter-spacing: 0; color: var(--text); margin-bottom: 20px; }

.ab-cards { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 20px; margin-top: 20px; }
.ab-card { border: 1px solid var(--line); border-radius: 10px; padding: 27px 20px 20px; background: var(--white); transition: box-shadow 0.3s; }
.ab-card:hover { box-shadow: 0 5px 5px rgba(158, 158, 158, 0.5); }
.ab-card h3 { font: 600 21px/25.2px var(--font); color: var(--black); margin-bottom: 15px; }
.ab-card p { font: 400 15px/22.5px var(--font); letter-spacing: 0; color: var(--muted); }

.ab-dots { margin-top: 26px; }
.ab-dots li { position: relative; padding: 0 0 4px 23px; font: 400 16px/24px var(--font); color: var(--black); }
.ab-dots li + li { margin-top: 4px; }
.ab-dots li::before { content: "\f192"; font-family: "Font Awesome 5 Free"; font-weight: 400; position: absolute; left: 0; top: 0; color: var(--red); font-size: 14px; }
.ab-dots b { font-weight: 700; }

.ab-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ab-box { border: 1px solid var(--line); }
.ab-box h3 { background: var(--blue); color: var(--light); font: 700 22px/22px var(--font); text-transform: uppercase; padding: 10px; }
.ab-box .in { padding: 10px 10px 12px; }
.ab-box strong { display: block; font: 700 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); }
.ab-box ul { list-style: disc; padding-left: 40px; }
.ab-box li { font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); }

/* the band heading animates, which lifts it into its own layer; the card row needs one too so it paints above the band */
.ab-products .pcards { position: relative; }

/* ---------- the four panel mosaic ---------- */
.ab-mosaic { padding: 10px var(--gutter) 0; }
.ab-mosaic .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 300px 300px; }
.ab-mosaic .panel { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.ab-mosaic .panel h3 { font: 600 25px/25px var(--font); text-transform: uppercase; margin-bottom: 15px; color: inherit; }
.ab-mosaic .panel p { font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: inherit; }
.ab-mosaic .m-red { grid-area: 1 / 1; background: var(--red); color: var(--white); border-radius: 10px 0 0 0; }
.ab-mosaic .m-dark { grid-area: 1 / 3; background: var(--dark); color: var(--white); border-radius: 0 10px 0 0; }
.ab-mosaic .m-pale { grid-area: 2 / 2; background: var(--light); color: var(--black); }
.ab-mosaic .ph { overflow: hidden; background: #ddd; }
.ab-mosaic .ph img { width: 100%; height: 100%; object-fit: cover; }
.ab-mosaic .ph-1 { grid-area: 2 / 1; border-radius: 0 0 0 10px; }
.ab-mosaic .ph-2 { grid-area: 2 / 3; border-radius: 0 0 10px 0; }
.ab-mosaic .ph-3 { grid-area: 1 / 2; }

/* ---------- who we work with (the reference's logo cards) ---------- */
.ab-clients { padding: 90px var(--gutter) 80px; }
.ab-clients .title { text-align: center; margin-bottom: 20px; }
.ab-clients .grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.ab-client {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px 20px;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 0 5px rgba(185, 185, 185, 0.5); background: var(--white);
}
.ab-client .logo { width: 180px; max-width: 100%; height: 72px; margin-top: 1px; display: grid; place-items: center; font-size: 46px; color: var(--blue); }
.ab-client .line { width: 118px; height: 2px; background: var(--red); margin: 19px 0 18px; }
.ab-client h3 { font: 700 16px/21px var(--font); color: var(--black); }

/* ---------- policies: dark half with the red slash, light half ---------- */
.ab-policy { position: relative; overflow: hidden; padding: 0 var(--gutter); background: linear-gradient(90deg, var(--dark) 50%, var(--light) 50%); }
.ab-policy .container { display: grid; grid-template-columns: minmax(0, 672fr) minmax(0, 694fr); min-height: 611px; }
.ab-policy .left { position: relative; background: var(--dark); padding: 40px 40px 40px 170px; display: flex; flex-direction: column; justify-content: center; }
.ab-policy .right { background: var(--light); padding: 40px 100px 40px 70px; display: flex; flex-direction: column; justify-content: center; }
.ab-policy .slash { position: absolute; left: -100px; top: 21px; width: 240px; height: calc(100% - 76px); }
.ab-policy .title { margin-bottom: 24px; }
.ab-policy .left .title { color: var(--light); }
.ab-policy .left p, .ab-policy .left li { color: var(--white); }
.ab-policy p { font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); margin-bottom: 15px; }
.ab-policy ul { list-style: disc; padding-left: 40px; }
.ab-policy li { font: 500 16px/24px var(--font); letter-spacing: 0.5px; }
.ab-policy .sign { font-weight: 700; margin-bottom: 0; }
.ab-policy .right .title + p { margin-bottom: 15px; }
.ab-policy .right .title.next { margin-top: 29px; }

/* ---------- work with us card ---------- */
.ab-join { padding: 80px var(--gutter) 80px; }
.ab-join .card {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 245px; padding: 50px 104px 50px 60px;
  border: 1px solid var(--line); border-radius: 20px;
  background-color: #FAF8F6;
  background-image: linear-gradient(#EFEDEB 1px, transparent 1px), linear-gradient(90deg, #EFEDEB 1px, transparent 1px);
  background-size: 79px 79px; background-position: 52px 69px;
}
.ab-join .title { margin-bottom: 24px; }
.ab-join .copy { max-width: 780px; }
.ab-join .copy p { font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); }
.ab-join .btn { flex: 0 0 auto; padding: 12px 20px; }

/* ================================ EVENTS ================================ */
.ev-intro { padding: 70px var(--gutter) 94px; text-align: center; }
.ev-intro .title { margin-bottom: 20px; }
.ev-intro .text p { margin-bottom: 15px; }
.ev-intro .text p:last-child { margin-bottom: 0; }

.ev-band { padding: 80px var(--gutter) 90px; background: linear-gradient(var(--light) 50%, var(--white) 50%); }
.ev-band .head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; margin-bottom: 40px; }
.ev-band .head .title { margin: 0; }
.ev-band .head p { font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); }
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.ev-card { background: var(--light); border: 1px solid var(--line); box-shadow: 0 5px 10px rgba(226, 226, 226, 0.5); padding-bottom: 10px; text-align: center; }
.ev-card .pic { display: block; background: var(--white); aspect-ratio: 427 / 240; overflow: hidden; }
.ev-card .pic svg { display: block; width: 100%; height: 100%; }
.ev-card:nth-child(3n+2) .pic svg { transform: rotate(1.4deg) scale(0.97); }
.ev-card:nth-child(3n) .pic svg { transform: rotate(-0.8deg) scale(1.01); }
.ev-card h3 { font: 700 20px/24px var(--font); color: var(--black); margin: 21px 10px 5px; }
.ev-card .when { margin: 0 10px; font: 500 16px/24px var(--font); letter-spacing: 0; color: var(--red); text-transform: uppercase; }
.ev-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============================= GLOBAL PRESENCE ============================= */
.gp-intro { padding: 90px var(--gutter) 104px; }
.gp-intro .grid { display: grid; grid-template-columns: minmax(0, 518fr) minmax(0, 788fr); gap: 40px; align-items: start; }
.gp-intro .title { margin-bottom: 20px; }
.gp-intro .lede { font: 700 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); margin: 0 0 15px; }
.gp-intro .text p { margin-bottom: 15px; }
.gp-intro .text p:last-child { margin-bottom: 0; }
.gp-intro .text strong.red { color: var(--red); }
.gp-map { padding: 10px var(--gutter) 90px; }
.gp-map .title { text-align: center; margin-bottom: 21px; }
/* the reference map sits in a 1366 x 765 box. The shared map script fits the land into a 1200 x 560 frame and
   centres it (x 167 to 1033), so the drawing is scaled until the land fills the box's height; the frame's empty
   sides fall outside the box. The box keeps its size before the map loads, so the page does not jump. */
.worldmap { width: 100%; aspect-ratio: 1366 / 765; overflow: hidden; }
.worldmap svg { display: block; width: 120%; max-width: none; height: auto; margin-left: -10%; }
.worldmap.map-failed { background: var(--light); }

/* =============================== CONTACT US =============================== */
.ct-cards { padding: 75px var(--gutter) 80px; }
.ct-cards .title { text-align: center; margin-bottom: 20px; }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ct-card { min-height: 243px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; text-align: center; background: var(--white); transition: box-shadow 0.3s; }
.ct-card:hover { box-shadow: 0 5px 5px rgba(158, 158, 158, 0.5); }
.ct-card .ic {
  display: inline-grid; place-items: center; width: 61px; height: 61px; margin-top: 1px; border-radius: 50%;
  background: var(--red); border: 3px solid var(--light); color: var(--light); font-size: 25px;
}
.ct-card h3 { font: 600 21px/25.2px var(--font); color: var(--black); margin: 29px 0 15px; }
.ct-card p, .ct-card a { font: 400 15px/22.5px var(--font); letter-spacing: 0; color: var(--muted); overflow-wrap: anywhere; }
.ct-card a { text-decoration: underline; text-decoration-color: rgba(122, 122, 122, 0.4); text-underline-offset: 3px; transition: color 0.2s; }
.ct-card a:hover { color: var(--red); }

.ct-main { padding: 0 var(--gutter) 80px; }
.ct-main .grid { display: grid; grid-template-columns: minmax(0, 683fr) minmax(0, 653fr); gap: 30px; align-items: start; }
.ct-map { display: flex; flex-direction: column; justify-content: center; gap: 22px; height: 650px; padding: 30px; background: var(--light); }
.ct-map .note { text-align: center; font: 500 15px/22.5px var(--font); letter-spacing: 0.5px; color: var(--muted); }
.ct-form { padding: 30px; border-radius: 10px; background: var(--white); box-shadow: 0 0 10px #D5D5D5; }
.ct-form .field { margin-bottom: 15px; }
.ct-form .field label { font: 700 15px/25.5px var(--font-alt); color: var(--black); margin-bottom: 3px; }
.ct-form .field input, .ct-form .field select, .ct-form .field textarea {
  height: 41px; padding: 9px; border: 1px solid #DBDBDB; border-radius: 2px; background-color: var(--white);
  font: 400 16px/20.8px var(--font-alt); color: var(--black);
}
.ct-form .field input::placeholder, .ct-form .field textarea::placeholder { color: #888; }
.ct-form .field select {
  height: 40px; padding: 8px 36px 8px 8px; appearance: none; -webkit-appearance: none; line-height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.ct-form .field textarea { height: 140px; min-height: 140px; line-height: 20px; }
.ct-form .btn { margin-top: 5px; padding: 12px 20px; font: 600 16px/23.2px var(--font); }
.ct-form .form-done { font: 500 16px/24px var(--font); }

/* narrower desktops: the three tab titles stay on one line */
@media (max-width: 1340px) {
  .ab-tabs [role="tab"] { font-size: 17px; padding: 15px 16px; }
}
@media (max-width: 1180px) and (min-width: 1025px) {
  .ab-tabs [role="tab"] { font-size: 15px; padding: 15px 10px; }
}

/* ================================ TABLET ================================ */
@media (max-width: 1024px) {
  .ab-intro { padding: 70px var(--gutter); }
  .ab-intro .grid, .gp-intro .grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ab-tabs { margin-top: 50px; }
  .ab-mosaic .grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(300px, auto); }
  .ab-mosaic .m-red { grid-area: 1 / 1; border-radius: 10px 0 0 0; }
  .ab-mosaic .ph-1 { grid-area: 1 / 2; border-radius: 0 10px 0 0; }
  .ab-mosaic .ph-2 { grid-area: 2 / 1; border-radius: 0; }
  .ab-mosaic .m-dark { grid-area: 2 / 2; border-radius: 0; }
  .ab-mosaic .m-pale { grid-area: 3 / 1; border-radius: 0 0 0 10px; }
  .ab-mosaic .ph-3 { grid-area: 3 / 2; border-radius: 0 0 10px 0; }
  /* once the cards wrap, the reference keeps the dark band behind every product card */
  .ab-products { background: #1d1d1d url("../img/bg/dark-texture.svg") center/cover; }
  .ab-clients .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-policy { background: none; padding: 0; }
  .ab-policy .container { grid-template-columns: 1fr; max-width: none; }
  .ab-policy .left { padding: 60px 40px 60px 150px; min-height: 440px; }
  .ab-policy .slash { top: 30px; height: calc(100% - 60px); }
  .ab-policy .right { padding: 60px 40px; }
  .ab-join .card { padding: 50px 40px; }
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-grid .ct-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ct-main .grid { grid-template-columns: 1fr; }
  .ct-main .ct-form { order: -1; }
  .ct-map { height: 650px; }
}

/* ================================= PHONE ================================= */
@media (max-width: 767px) {
  .co-in { padding: 0; }
  /* on a phone the reference lets a two tone title run on, with no forced break */
  br.lg-only { display: none; }
  .ab-intro { padding: 50px 30px 40px; }
  .ab-intro .tag { margin-bottom: 20px; }
  .ab-intro .title { margin-bottom: 20px; }
  .ab-stat { padding: 20px; }
  .ab-stat .row { flex-direction: column; align-items: center; gap: 20px; margin-bottom: 20px; }
  .ab-stat .ic { width: 50px; height: 50px; flex-basis: 50px; font-size: 24px; }
  .ab-stat .num { margin-top: 0; font-size: 24px; line-height: 30px; }
  .ab-stat p { font-size: 16px; line-height: 24px; }
  .ab-sketches img { width: 265px; }

  /* the tabs open like the reference on a phone: each title above its own text */
  .ab-tabs { display: flex; flex-direction: column; margin-top: 40px; }
  .ab-tabs [role="tablist"] { display: contents; }
  .ab-tabs [role="tab"] { padding: 14px 12px; font-size: clamp(14px, 4.2vw, 18px); line-height: 27px; border-top: 2px solid var(--line); }
  .ab-tabs [role="tab"][aria-selected="true"] { border-top: 0; padding: 16px 12px; }
  .ab-tabs .ab-t1 { order: 1; }
  .ab-tabs .ab-p1 { order: 2; }
  .ab-tabs .ab-t2 { order: 3; }
  .ab-tabs .ab-p2 { order: 4; }
  .ab-tabs .ab-t3 { order: 5; }
  .ab-tabs .ab-p3 { order: 6; }
  .ab-tabs [role="tabpanel"] { padding: 20px 10px 20px; }
  .ab-cards, .ab-boxes { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ab-card { padding: 25px 20px 20px; }

  .ab-mosaic { padding: 50px 20px 0; }
  .ab-mosaic .grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  .ab-mosaic .grid > * { grid-area: auto !important; border-radius: 0 !important; }
  .ab-mosaic .panel { padding: 20px 20px 20px; }
  .ab-mosaic .panel h3 { font-size: 22px; line-height: 33px; margin-bottom: 10px; }
  .ab-mosaic .ph { aspect-ratio: 350 / 300; }
  .ab-mosaic .ph-1 { margin-bottom: 44px; }

  .ab-clients { padding: 60px 20px 50px; }
  .ab-clients .grid { grid-template-columns: 1fr; }
  .ab-client { padding-bottom: 18px; }

  .ab-policy .left { padding: 50px 38px; }
  .ab-policy .slash { display: none; }
  .ab-policy .right { padding: 40px 23px; }
  .ab-policy .title { margin-bottom: 20px; }

  .ab-join { padding: 60px 20px 40px; }
  .ab-join .card { flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 25px 25px; }
  .ab-join .title { margin-bottom: 20px; }

  .ev-intro { padding: 50px 20px 50px; }
  .ev-intro .title { margin-bottom: 20px; }
  .ev-band { padding: 50px 20px 50px; }
  .ev-band .head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
  .ev-grid { grid-template-columns: 1fr; gap: 20px; }
  .ev-card h3 { font-size: 16px; line-height: 20px; margin-top: 16px; }
  .ev-card .when { font-size: 14px; line-height: 21px; }

  .gp-intro { padding: 50px 20px 40px; }
  .gp-intro .title { margin-bottom: 20px; }
  .gp-intro .grid { gap: 30px; }
  .gp-map { padding: 20px 20px 50px; }
  .gp-map .title { margin-bottom: 30px; }

  .ct-cards { padding: 50px 20px 30px; }
  .ct-cards .title { margin-bottom: 24px; }
  .ct-grid { grid-template-columns: 1fr; gap: 16px; }
  .ct-card { min-height: 0; padding: 12px 20px 20px; }
  .ct-card h3 { font-size: 16px; line-height: 20px; margin: 18px 0 12px; }
  .ct-card p, .ct-card a { font-size: 14px; line-height: 21px; }
  .ct-main { padding: 0 20px 40px; }
  .ct-form { padding: 10px 10px 20px; }
  .ct-form .btn { width: 100%; justify-content: center; }
  .ct-map { height: auto; min-height: 420px; padding: 20px; }
}