/* ==========================================================================
   iottag — company pages stylesheet
   Page-specific components for /company/… — load AFTER main.css and
   platform.css (company pages reuse .hero--photo / .cta-band / .sys-item):
     <link rel="stylesheet" href="…/assets/css/main.css">
     <link rel="stylesheet" href="…/assets/css/platform.css">
     <link rel="stylesheet" href="…/assets/css/company.css">
   Contents:
     1. Partners (partners, prefix pn-)
     2. About (about, prefix ab-)
     3. Careers (careers, prefix cr-)
     4. Contact (contact, prefix ct-)
   ========================================================================== */

/* 1. PARTNERS (partners) — rebuilt 2026-07-16 to Figma 10556:22114 ------------ */
/* Industries We Support Together — bordered 4×2 grid of icon cells */
.pn-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.pn-grid__cell {
  min-height: 160px; padding: 24px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: flex-start;
}
.pn-grid__cell:nth-child(4n) { border-right: 0; }
.pn-grid__cell:nth-child(n+5) { border-bottom: 0; }
.pn-grid__cell img { width: 48px; height: 48px; }
.pn-grid__cell h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) {
  .pn-grid { grid-template-columns: repeat(2, 1fr); }
  .pn-grid__cell:nth-child(4n) { border-right: 1px solid var(--c-line); }
  .pn-grid__cell:nth-child(2n) { border-right: 0; }
  .pn-grid__cell:nth-child(n+5) { border-bottom: 1px solid var(--c-line); }
  .pn-grid__cell:nth-child(n+7) { border-bottom: 0; }
}

/* Why Partner — joined 4-cell benefit strip (icon + title + copy) */
.pn-cards {
  display: flex; width: 100%;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.pn-card {
  flex: 1 1 0; min-width: 0; min-height: 260px;
  padding: 40px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.pn-card + .pn-card { border-left: 1px solid var(--c-line); }
.pn-card img { width: 48px; height: 48px; }
.pn-card h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.pn-card p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); }
@media (max-width: 1100px) {
  .pn-cards { flex-wrap: wrap; }
  .pn-card { flex: 1 1 45%; min-height: 200px; border-top: 1px solid var(--c-line); }
  .pn-card:nth-child(-n+2) { border-top: 0; }
  .pn-card + .pn-card { border-left: 0; }
  .pn-card:nth-child(even) { border-left: 1px solid var(--c-line); }
}

/* white rounded stack of 120px title+copy rows (opportunities / innovation) */
.pn-list {
  width: 100%;
  background: #fff; border-radius: var(--r-md);
  overflow: hidden;
}
.pn-list__row {
  min-height: 120px; padding: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border-bottom: 1px solid rgba(6, 3, 9, .15);
}
.pn-list__row:last-child { border-bottom: 0; }
.pn-list__row h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.pn-list__row p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); }

/* partnership philosophy — pale quote block with a light-blue left rule */
.pn-quote {
  width: 100%;
  background: var(--c-blue-pale);
  border-left: 2px solid var(--c-blue-light);
  padding: 40px 40px 40px 42px;
  display: flex; flex-direction: column; gap: 20px;
}
.pn-quote h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: var(--c-blue);
}
.pn-quote p { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }

/* How We Work Together — 4 numbered steps with pale ">" kink dividers */
.pn-steps {
  display: flex; align-items: stretch; width: 100%; min-height: 240px;
  background: #fff; border-radius: var(--r-md);
  overflow: hidden;
  padding-right: 40px;
}
.pn-step {
  flex: 1 1 0; min-width: 0;
  padding: 40px 0 40px 40px;
  display: flex; gap: 16px; align-items: center;
}
.pn-step__num {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-blue-pale);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; color: #4b5059;
}
.pn-step h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 16px; line-height: 1.5; color: #4b5059;
}
.pn-step p { margin: 4px 0 0; font-family: var(--f-body); font-size: 14px; line-height: 1.2; color: var(--c-ink); }
.pn-step__div { flex-shrink: 0; width: 26px; height: auto; align-self: stretch; }
@media (max-width: 1100px) {
  .pn-steps { flex-wrap: wrap; padding-right: 0; }
  .pn-step { flex: 1 1 45%; padding: 24px; }
  .pn-step__div { display: none; }
}

/* 2. ABOUT (about) ----------------------------------------------------------- */
/* hero overlay — 80% brand gradient + blur, as on the technology heroes */
.hero__ovl--ab {
  position: absolute; inset: 0; z-index: 1;
  opacity: .8;
  background: var(--grad-hero);
  backdrop-filter: blur(4px);
}
/* eyebrow + 40px section heading (2026-07 About redesign, Figma 10556:19519) */
.ab-eb {
  margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #1e729c;
}
.ab-h2 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2;
  letter-spacing: -.01em; color: #4b5059;
}
/* 18px semibold lead copy (mission body, section sub-lines) */
.ab-lead { font-family: var(--f-body); font-weight: 600; font-size: 18px; line-height: 1.35; color: #5c616b; }
.ab-lead p { margin: 0; font: inherit; color: inherit; }

/* Our mission — rounded photo card beside the mission copy */
.ab-mission { display: flex; gap: 60px; align-items: center; width: 100%; }
.ab-mission > img {
  flex: 0 0 450px; width: 450px; height: 360px;
  object-fit: cover; border-radius: var(--r-md);
}
.ab-mission > div { flex: 1 1 0; min-width: 320px; }
@media (max-width: 1000px) {
  .ab-mission { flex-wrap: wrap; }
  .ab-mission > img { flex: 1 1 100%; width: 100%; height: auto; }
}

/* Our belief — joined 5-cell principles strip, cream final cell */
.ab-beliefs {
  display: flex; width: 100%;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.ab-belief {
  flex: 1 1 0; min-width: 0; min-height: 280px;
  padding: 40px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.ab-belief + .ab-belief { border-left: 1px solid var(--c-line); }
.ab-belief img { width: 34px; height: 34px; }
.ab-belief h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.ab-belief--cream { background: #fdf6e5; }
@media (max-width: 1100px) {
  .ab-beliefs { flex-wrap: wrap; }
  .ab-belief { flex: 1 1 45%; min-height: 200px; border-top: 1px solid var(--c-line); }
  .ab-belief:nth-child(-n+2) { border-top: 0; }
  .ab-belief + .ab-belief { border-left: 0; }
  .ab-belief:nth-child(even) { border-left: 1px solid var(--c-line); }
}

/* Our people — 3 stat cards over a pale-blue mission band */
.ab-team {
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.ab-team__row { display: flex; }
.ab-team__card {
  flex: 1 1 0; min-width: 0; min-height: 200px;
  padding: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.ab-team__card + .ab-team__card { border-left: 1px solid var(--c-line); }
.ab-team__card img { width: 40px; height: 40px; }
.ab-team__card h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.ab-team__num {
  font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2;
  letter-spacing: -.01em; color: var(--c-blue);
}
.ab-team__band {
  margin: 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-blue-pale);
  padding: 24px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.ab-team__band img { width: 40px; height: 40px; flex-shrink: 0; }
@media (max-width: 800px) {
  .ab-team__row { flex-direction: column; }
  .ab-team__card + .ab-team__card { border-left: 0; border-top: 1px solid var(--c-line); }
}

/* joined photo strip — 2px seams inside one rounded container (Our Purpose) */
.ab-strip { display: flex; gap: 2px; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.ab-strip .photo-card { border-radius: 0; }
@media (max-width: 1100px) {
  .ab-strip { flex-wrap: wrap; gap: 8px; }
  .ab-strip .photo-card { min-width: 240px; border-radius: var(--r-md); }
}

/* bordered understanding grid — 6 icon cells over a full-width cream note */
.ab-grid {
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.ab-grid__row { display: flex; }
.ab-grid__row + .ab-grid__row { border-top: 1px solid var(--c-line); }
.ab-cell {
  flex: 1 1 0; min-width: 0; min-height: 200px;
  padding: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.ab-cell + .ab-cell { border-left: 1px solid var(--c-line); }
.ab-cell img { width: 48px; height: 48px; }
.ab-cell h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.ab-note {
  flex: 1 1 0; min-height: 200px;
  background: #fdf6e5;
  padding: 24px;
  display: flex; gap: 16px; align-items: center; justify-content: center;
}
.ab-note img { width: 48px; height: 48px; flex-shrink: 0; }
.ab-note p {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) {
  .ab-grid__row { flex-wrap: wrap; }
  .ab-cell { flex: 1 1 45%; min-height: 160px; border-top: 1px solid var(--c-line); }
  .ab-grid__row:first-child .ab-cell:nth-child(-n+2) { border-top: 0; }
  .ab-note p { font-size: 20px; }
}

/* map beside the applications/outcomes info cards (Designed For Resource…) */
.ab-map { flex: 1 1 0; min-width: 320px; max-width: 780px; align-self: center; }
.ab-map img { width: 100%; height: auto; display: block; }

/* full-bleed joined photo band (Trusted In …) */
.ab-photos { display: flex; gap: 1px; width: 100%; }
.ab-photos img { flex: 1 1 0; min-width: 0; height: 200px; object-fit: cover; }
@media (max-width: 960px) { .ab-photos { flex-wrap: wrap; } .ab-photos img { flex: 1 1 50%; } }

/* CTA: "Why Organisations Choose iottag?" icon cards on photo band (Figma 12781:11597) */
.ab-cta { gap: 40px; }
.ab-cta__head {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2;
  letter-spacing: -.01em; color: #fff; text-align: center;
}
.ab-cta__grid {
  position: relative; z-index: 2; width: 100%; max-width: 1280px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px;
}
.ab-cta__item { display: flex; gap: 16px; align-items: flex-start; }
.ab-cta__ic {
  width: 48px; height: 48px; flex-shrink: 0;
  background: var(--c-blue-pale); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.ab-cta__ic img { width: 24px; height: 24px; }
.ab-cta__item h3 { margin: 0 0 2px; font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -.01em; color: #fff; text-align: left; }
.ab-cta__item p, .cta-band .ab-cta__item p { margin: 0; font: 400 14px/1.2 var(--f-body); color: #fff; text-align: left; }
@media (max-width: 700px) { .ab-cta__grid { grid-template-columns: 1fr; } }

/* 3. CAREERS (careers, prefix cr-) -------------------------------------------- */
/* What We Build - three columns of white icon tiles + orange note */
.cr-cols { display: flex; gap: 40px; width: 100%; }
.cr-col { flex: 1 1 0; min-width: 280px; display: flex; flex-direction: column; gap: 20px; justify-content: flex-start; }
.cr-item { display: flex; gap: 16px; align-items: center; }
.cr-item__ic {
  width: 48px; height: 48px; flex-shrink: 0;
  background: #fff; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.cr-item__ic img { width: 24px; height: 24px; }
.cr-item span { font-family: var(--f-alt); font-size: 20px; line-height: 1.4; letter-spacing: -.01em; color: #4b5059; }

/* Work at iottag banner (2026-07-16 redesign): 400px gradient card, photo at 30% */
.cr-banner {
  position: relative; width: 100%; height: 400px;
  border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(135deg, #0c477d 0%, #2f4f5b 49%, #073459 100%);
  display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center;
  padding: 24px;
}
.cr-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.cr-banner p {
  position: relative; z-index: 1; margin: 0; max-width: 900px;
  font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3;
  letter-spacing: -.01em; color: #fff; text-align: center;
}
.cr-note {
  flex: 1;
  background: #fdf6e5;                       /* web-orange lightest */
  border-left: 2px solid var(--c-orange);
  padding: 17px 40px 17px 42px;
  display: flex; align-items: center;
}
.cr-note p { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--c-orange); }
@media (max-width: 1100px) { .cr-cols { flex-wrap: wrap; } }

/* Who we are looking for - bordered 5x2 grid of white icon cells */
.cr-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  width: 100%;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.cr-grid__cell {
  min-height: 180px; padding: 24px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
}
.cr-grid__cell:nth-child(5n) { border-right: 0; }
.cr-grid__cell:nth-child(n+6) { border-bottom: 0; }
.cr-grid__cell img { width: 40px; height: 40px; }
.cr-grid__cell h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) {
  .cr-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-grid__cell { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .cr-grid__cell:nth-child(2n) { border-right: 0; }
  .cr-grid__cell:nth-child(n+9) { border-bottom: 0; }
}

/* culture / technology split rows - copy beside a 480x420 rounded photo */
.cr-split { display: flex; gap: 80px; align-items: center; width: 100%; }
.cr-split--flip { flex-direction: row-reverse; }
.cr-split__copy { flex: 1 1 0; min-width: 320px; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.cr-split__img { width: 480px; max-width: 100%; height: 420px; object-fit: cover; border-radius: var(--r-md); flex-shrink: 0; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
@media (max-width: 1100px) {
  .cr-split, .cr-split--flip { flex-direction: column; gap: 40px; align-items: flex-start; }
  .cr-split__img { width: 100%; }
}

/* CTA sizing to the redesign's Heading 1 */
.cr-cta .h2 { font-size: 56px; }
@media (max-width: 640px) { .cr-cta .h2 { font-size: 32px; } }

/* 4. CONTACT (contact, prefix ct-) -------------------------------------------- */
/* flat navy page-title band (Figma header is a 220px strip, headline bottom) */
.ct-hero {
  min-height: 220px;
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 20px) var(--pad-x) 50px;
  background: #2d3357;   /* flat navy — the Figma OVL layer is invisible over it */
}
/* enquiry band — intro copy beside the floating form card */
.ct-wrap { display: flex; gap: 60px; align-items: center; width: 100%; }

/* white form card — overlaps the navy band above */
.ct-card {
  /* 620px basis biases the split toward the card (Figma: card 680 / intro 460) */
  flex: 1 1 620px; min-width: 320px; max-width: 680px; margin-left: auto;
  background: #fff;
  border: 1px solid rgba(6,3,9,.15); border-radius: var(--r-md);
  box-shadow: 0 32px 64px -12px rgba(0,0,0,.14);
  padding: 41px;
  /* the card floats over BOTH neighbours: ~34px up into the navy band
     (pad-top 40 − 74) and ~34px down into the pale section below (the
     negative bottom margin shrinks its flow footprint so the section
     ends before the card's visual bottom) */
  margin-top: -74px;
  margin-bottom: -74px;
  position: relative; z-index: 2;
}
/* card footer: mini reassurances left, submit right (Figma 12781:11307) */
.ct-form__foot { display: flex; gap: 40px; align-items: center; }
.ct-form__foot .btn { flex-shrink: 0; }
.ct-form { display: flex; flex-direction: column; gap: 40px; }
.ct-form__rows { display: flex; flex-direction: column; gap: 20px; }
.ct-form__row { display: flex; gap: 20px; }
.ct-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-field label { font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); }
.ct-field input, .ct-field textarea {
  width: 100%; height: 40px; padding: 9px 20px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  font-family: var(--f-body); font-size: 16px; color: var(--c-ink);
}
.ct-field textarea { height: 93px; padding-top: 10px; resize: vertical; }
.ct-field input:focus, .ct-field textarea:focus {
  outline: none; border-color: var(--c-blue);
  box-shadow: 0 0 0 1px var(--c-blue);
}
@media (max-width: 1100px) {
  .ct-wrap { flex-wrap: wrap; gap: 40px; }
  .ct-card { margin-top: 0; margin-bottom: 0; max-width: none; }
}
@media (max-width: 640px) { .ct-form__row { flex-direction: column; } .ct-card { padding: 24px; } }

/* ---- 2026-07-16 contact redesign (Figma 10559:24050, prefix ct2-) ---------- */
/* hero band carries only the blue kicker; the page H1 is the 40px intro title */
.ct-hero__kicker { width: min(100%, var(--maxw)); margin: 0 auto; font: 700 20px/1.5 var(--f-body); color: #4cc4fe; }

/* intro column beside the floating form card */
.ct2-intro { flex: 1 1 0; min-width: 320px; display: flex; flex-direction: column; gap: 40px; }
.ct2-intro h1 { margin: 0; font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: -.01em; color: #4b5059; }
.ct2-lead { margin: 0; font: 600 16px/1.2 var(--f-body); color: var(--c-ink); }
.ct2-copy { margin: 0; font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
/* intro paragraphs are regular weight in the redesign (Figma 12545:25215) */
.ct2-intro .ct2-lead { font-weight: 400; }
/* mini reassurances sit inside the form card (Figma 12781:11273) */
.ct2-minis { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 200px 1fr; gap: 4px 8px; }
.ct2-mini { display: flex; gap: 4px; align-items: center; font: 600 14px/1.2 var(--f-body); color: var(--c-ink); }
.ct2-mini img { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 900px) {
  .ct-form__foot { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 640px) { .ct2-minis { grid-template-columns: 1fr; } }

/* section heading (Ubuntu Medium 40 near-black, centered) */
.ct2-h2 { margin: 0; font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: -.01em; color: #4b5059; text-align: center; }

/* common discussion topic cards (2×2) */
.ct2-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; }
.ct2-topic { min-height: 120px; background: #fff; border: 1px solid var(--c-blue-tint); border-radius: var(--r-md); padding: 24px; display: flex; gap: 16px; align-items: center; }
.ct2-topic img { width: 40px; height: 40px; flex-shrink: 0; }
.ct2-topic h3 { margin: 0 0 4px; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.ct2-topic p { margin: 0; font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
@media (max-width: 900px) { .ct2-topics { grid-template-columns: 1fr; } }

/* global presence / office maps: dotted world svg + white pill pins */
.ct2-map { position: relative; flex: 1 1 0; min-width: 320px; max-width: 720px; }
.ct2-map > img { width: 100%; height: auto; }
.ct2-pin {
  /* translate(-100%) only offsets the pill body — the ::after tail hangs 7px
     below `top`, so pull up 7px so the tail TIP lands exactly on the coord */
  position: absolute; transform: translate(-50%, -100%); margin-top: -7px;
  background: #fff; border: 1px solid #1e729c; border-radius: var(--r-md);
  padding: 4px 8px; white-space: nowrap;
  font: 400 12px/1.2 var(--f-body); color: var(--c-ink);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.2);
}
.ct2-pin::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top: 7px solid #1e729c; border-bottom: 0; }
.ct2-globe-copy { flex: 0 1 600px; min-width: 300px; display: flex; flex-direction: column; gap: 40px; }

/* "What happens next?" numbered steps card — number circle LEFT of the text */
.ct2-steps { display: flex; width: 100%; min-height: 200px; background: #fff; border-radius: var(--r-md); overflow: hidden; }
.ct2-step { flex: 1 1 0; min-width: 0; padding: 40px; display: flex; gap: 16px; align-items: center; }
.ct2-step__num { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--c-blue-pale); display: flex; align-items: center; justify-content: center; font: 700 20px/1 var(--f-alt); color: #4b5059; }
.ct2-step h3 { margin: 0 0 4px; font: 700 16px/1.5 var(--f-alt); color: #4b5059; }
.ct2-step p { margin: 0; font: 400 14px/1.2 var(--f-body); color: var(--c-grey); }
.ct2-steps__sep { flex: 0 0 24px; align-self: stretch; }
.ct2-steps__sep svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .ct2-steps { flex-direction: column; } .ct2-steps__sep { display: none; } }

/* "Meet Our Specialists" tab card (visual tabs — one designed panel) */
/* "Speak with specialists in" — 3×3 capability grid + two photos (Figma 12781:11385) */
.ct2-sws { display: flex; gap: 20px; width: 100%; align-items: stretch; }
.ct2-sws__grid {
  flex: 1 1 69%; min-width: 0; height: 420px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
}
.ct2-sws__cell {
  background: rgba(255,255,255,.9); padding: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  /* borders (not grid gaps) — 1px gaps vanish at sub-pixel under html{zoom:.8} */
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.ct2-sws__cell:nth-child(3n) { border-right: 0; }
.ct2-sws__cell:nth-child(n+7) { border-bottom: 0; }
.ct2-sws__cell img { width: 40px; height: 40px; }
.ct2-sws__cell span { font: 400 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.ct2-sws__shots { flex: 1 1 31%; min-width: 280px; display: flex; flex-direction: column; gap: 20px; }
.ct2-sws__shots img { flex: 1 1 0; min-height: 0; width: 100%; height: 200px; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 1100px) {
  .ct2-sws { flex-direction: column; }
  .ct2-sws__grid { height: auto; }
  .ct2-sws__cell { min-height: 120px; }
  .ct2-sws__shots { flex-direction: row; }
  .ct2-sws__shots img { height: 220px; }
}
@media (max-width: 640px) {
  .ct2-sws__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .ct2-sws__cell { min-height: 0; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .ct2-sws__cell:last-child { border-bottom: 0; }
  .ct2-sws__shots { flex-direction: column; }
}

/* office detail cards — single 4-across strip, no map (Figma 12716:16345) */
.ct2-offices { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.ct2-office { min-height: 200px; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.ct2-office + .ct2-office { border-left: 1px solid var(--c-line); }
.ct2-office h3 { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.ct2-office__sub { margin: 0; font: 400 14px/1.2 var(--f-body); color: var(--c-grey); min-height: 34px; }
.ct2-office__line { display: flex; gap: 4px; align-items: center; font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
.ct2-office__line img { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1100px) {
  .ct2-offices { grid-template-columns: repeat(2, 1fr); }
  .ct2-office { min-height: 0; }
  .ct2-office + .ct2-office { border-left: 0; }
  .ct2-office:nth-child(even) { border-left: 1px solid var(--c-line); }
  .ct2-office:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}
@media (max-width: 640px) {
  .ct2-offices { grid-template-columns: 1fr; }
  .ct2-office:nth-child(even) { border-left: 0; }
  .ct2-office + .ct2-office { border-top: 1px solid var(--c-line); }
}

/* support capability panel: cream photo + stacked rows on pale tint */
.ct2-panel { display: flex; width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.ct2-panel__photo { position: relative; width: 400px; flex-shrink: 0; background: #fdf6e5; border-right: 1px solid rgba(6,3,9,.15); }
.ct2-panel__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct2-panel__rows { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ct2-panel__row { min-height: 88px; padding: 16px 24px; display: flex; flex-direction: column; justify-content: center; }
.ct2-panel__row + .ct2-panel__row { border-top: 1px solid rgba(6,3,9,.15); }
.ct2-panel__row h3 { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.ct2-panel__row p { margin: 0; font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
@media (max-width: 900px) {
  .ct2-panel { flex-direction: column; }
  .ct2-panel__photo { width: 100%; height: 260px; border-right: 0; border-bottom: 1px solid rgba(6,3,9,.15); }
}

/* CTA band: "Why Organisations Choose iottag?" over the photo (Figma 12545:26936) */
.ct2-cta .ct2-why__head { color: #fff; }
.ct2-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
.ct2-why__item { display: flex; gap: 16px; align-items: flex-start; }
.ct2-why__item .ct2-why__ic { width: 48px; height: 48px; flex-shrink: 0; background: var(--c-blue-pale); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; }
.ct2-why__item img { width: 24px; height: 24px; }
/* .cta-band centers every <p> (main.css) — outrank it so the why-item copy
   stays left-aligned (.cta-band prefix lifts specificity above the base rule) */
.cta-band .ct2-why__item h3, .ct2-why__item h3 { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #fff; text-align: left; }
.cta-band .ct2-why__item p, .ct2-why__item p { margin: 0; font: 400 14px/1.2 var(--f-body); color: #fff; text-align: left; }
@media (max-width: 700px) { .ct2-why__grid { grid-template-columns: 1fr; } }

/* 3. WHY IOTTAG (why-iottag, prefix wi-) -------------------------------------- */
/* hero mini-cards — staggered 3+2 rows of pale-blue 180×160 tiles */
.wi-cards { display: flex; flex-direction: column; gap: 8px; align-items: center; flex-shrink: 0; }
.wi-cards__row { display: flex; gap: 8px; }
.wi-card {
  width: 180px; height: 160px;
  background: var(--c-blue-pale);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.wi-card img { width: 24px; height: 24px; }
.wi-card h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.3;
  letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1240px) { .wi-cards { display: none; } }

/* approach-bar variants (base in technology.css §1) */
.approach-bar--white { background: #fff; }
.approach-bar--orange { background: #fdf6e5; border-left-color: var(--c-orange); }
.approach-bar--orange p {
  margin: 0; flex: 1 1 0; min-width: 260px;
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em;
}

/* environment photo cards are shorter than the 320px default */
.wi-envs { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wi-envs .photo-cards .photo-card { height: 160px; }

/* trusted-section world map (full-strength render, unlike the home .worldmap) */
.wi-map { flex: 1 1 0; min-width: 320px; max-width: 780px; align-self: center; }
.wi-map img { width: 100%; height: auto; display: block; }

/* 2026-07-16 redesign (Figma 10562:24646): cell labels drop 24 → 20px.
   Labels reserve two lines so icons stay on one row when a label wraps. */
.ab-grid--wi h3 { font-size: 20px; min-height: 56px; }

/* mission strip captions sit in a dark navy band (Figma rgba(15,57,78,.8)) */
.ab-strip--band .photo-card { padding: 0; }
.ab-strip--band .photo-card__title {
  width: 100%;
  background: rgba(15,57,78,.8);
  padding: 20px 40px;
  font-size: 20px;
}

/* hero dash lists (design duplicates the list twice — reproduced as designed) */
.wi-hero-lists { display: flex; gap: 40px; }
.wi-hero-lists ul { margin: 0; padding: 0; list-style: none; }
.wi-hero-lists li { font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: #fff; }
.wi-hero-lists li::before { content: "- "; }

/* "From Operations to Executive Leadership" timeline — 100px photo circles
   (ring baked in the export) joined by 1px hairlines */
.wi-levels { display: flex; width: 100%; }
.wi-levels__col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  padding: 8px 0;
}
.wi-levels__ring { display: flex; align-items: center; gap: 8px; width: 100%; height: 108px; }
.wi-levels__ring::before, .wi-levels__ring::after { content: ""; flex: 1 1 0; height: 1px; background: var(--c-line); }
.wi-levels__col:first-child .wi-levels__ring::before,
.wi-levels__col:last-child .wi-levels__ring::after { background: transparent; }
.wi-levels__ring img { width: 108px; height: 108px; display: block; flex-shrink: 0; }
.wi-levels__label {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059; text-align: center;
}
.wi-levels__cap {
  margin: 0; padding: 0 24px;
  font-family: var(--f-body); font-size: 16px; line-height: 1.2;
  color: #5c616b; text-align: center;
}
@media (max-width: 960px) {
  .wi-levels { flex-wrap: wrap; gap: 24px; justify-content: center; }
  .wi-levels__col { flex: 1 1 40%; min-width: 220px; }
  .wi-levels__ring::before, .wi-levels__ring::after { background: transparent; }
}