/* corporate.css — components for landing-tesa-corporate.html
   Built only from the existing TESA tokens (--prog-ink / --prog-accent /
   --prog-line / --prog-muted / --prog-gold / --prog-ok / --prog-card-shadow).
   The CI is unchanged; only the content structure is new. */

/* ---- credibility stat band ---- */
.co-stats {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 2.2rem;
}
.co-stat {
  background: #fff; border: 1px solid var(--prog-line); border-radius: 14px;
  padding: 1.3rem 1.4rem; box-shadow: var(--prog-card-shadow); text-align: center;
}
.co-stat b {
  display: block; font-size: 2.1rem; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: var(--prog-accent);
}
.co-stat span { display: block; margin-top: .35rem; font-size: .88rem; color: var(--prog-muted); }
.section--dark .co-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.section--dark .co-stat b { color: #9FC2E6; }
.section--dark .co-stat span { color: rgba(255,255,255,.72); }

/* ---- numbered offering cards ---- */
.co-offer { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: 2rem; }
.co-card {
  background: #fff; border: 1px solid var(--prog-line); border-top: 4px solid var(--prog-accent);
  border-radius: 16px; padding: 1.6rem; box-shadow: var(--prog-card-shadow);
  display: flex; flex-direction: column; gap: .6rem;
}
.co-card__n {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--prog-accent-soft); color: var(--prog-accent);
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
}
.co-card h3 { font-size: 1.12rem; font-weight: 800; color: var(--prog-ink); margin: 0; }
.co-card p { font-size: .93rem; line-height: 1.65; color: var(--prog-muted); margin: 0; }
.co-card ul { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.co-card li { position: relative; padding-left: 1.3rem; font-size: .89rem; color: var(--prog-muted); line-height: 1.55; }
.co-card li::before { content: "✓"; position: absolute; left: 0; color: var(--prog-ok); font-weight: 800; }
.co-card__foot { margin-top: auto; padding-top: .9rem; }
.co-card__foot a { font-size: .88rem; font-weight: 700; color: var(--prog-accent); }
.co-card__foot a:hover { text-decoration: underline; }

/* ---- topic pills ---- */
.co-topics { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.co-topic {
  border: 1.5px solid var(--prog-line); border-radius: 999px;
  padding: .55rem 1.1rem; font-size: .93rem; font-weight: 600; color: var(--prog-ink);
  background: #fff;
}
.co-topic b { color: var(--prog-accent); font-weight: 800; }
.section--dark .co-topic { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; }
.section--dark .co-topic b { color: #9FC2E6; }

/* ---- differentiator rows ---- */
.co-why { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2rem; }
.co-why div { border-left: 3px solid var(--prog-accent); padding-left: 1rem; }
.co-why b { display: block; color: var(--prog-ink); font-size: 1rem; margin-bottom: .25rem; }
.co-why p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--prog-muted); }

/* ---- split hero: copy left, programme illustration right ----
   Loaded after program.css / edge-vision.css, so these win the specificity
   ties against .hero--prog / .hero--ev on the same elements. */
.hero__content--split { max-width: 1180px; width: 100%; }
.hero__art { display: none; }

/* ---- hero key visual: photograph + live overlay ----
   The overlay SVG shares the photograph's pixel grid, so it is stretched to the
   same box (preserveAspectRatio="none" on the SVG, inset:0 here) and every
   coordinate in it lands on the matching feature in the picture.

   Resting CSS is the finished state and keyframes animate *from* the entrance,
   so `animation: none` under prefers-reduced-motion leaves a complete, still
   image rather than a blank one. */
.qp {
  position: relative; width: 100%; max-width: 540px; margin-left: auto;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(142, 233, 255, .28) inset;
  animation: qpPanel .8s cubic-bezier(.2,.8,.25,1) both;
}
.qp-photo { display: block; width: 100%; height: auto; }
.qp-fx { position: absolute; inset: 0; width: 100%; height: 100%; }

/* transform-box: view-box lets the origin be written in viewBox units; the
   nodes sit inside translated <g> wrappers, so fill-box centres each on itself */
.qp-core, .qp-scan { transform-box: view-box; }
.qp-hex, .qp-ping { transform-box: fill-box; transform-origin: 50% 50%; }

.qp-frame { animation: qpFade .6s ease-out .35s both; }
.qp-beam { animation: qpFade .5s ease-out .5s both, qpFlow 1.5s linear .5s infinite; }
.qp-core { transform-origin: 398px 352px; animation: qpBreathe 3.4s ease-in-out .6s infinite both; }
.qp-scan { transform-origin: 50% 50%; animation: qpScan 7s linear 1s infinite both; }

/* the six capability nodes light one after another, then the cycle repeats */
.qp-hex  { stroke-opacity: .14; animation: qpLit 6s ease-in-out 1s infinite both; }
.qp-ping { stroke-opacity: 0;   animation: qpPing 6s ease-out 1s infinite both; }
.qp-n1 { animation-delay: 1.0s; }
.qp-n2 { animation-delay: 1.9s; }
.qp-n3 { animation-delay: 2.8s; }
.qp-n4 { animation-delay: 3.7s; }
.qp-n5 { animation-delay: 4.6s; }
.qp-n6 { animation-delay: 5.5s; }

@keyframes qpPanel  { from { transform: scale(.94); opacity: 0; } }
@keyframes qpFade   { from { opacity: 0; } }
@keyframes qpFlow   { to   { stroke-dashoffset: -16; } }   /* one 5+11 dash cycle */
@keyframes qpBreathe { 0%, 100% { transform: scale(1); opacity: .55; }
                       50%      { transform: scale(1.12); opacity: .18; } }
@keyframes qpScan   { from { transform: translateY(0); } to { transform: translateY(911px); } }
@keyframes qpLit    { 0%, 100% { stroke-opacity: .14; }
                      6%, 18%  { stroke-opacity: .95; }
                      32%      { stroke-opacity: .14; } }
@keyframes qpPing   { 0%   { transform: scale(.8); stroke-opacity: 0; }
                      6%   { stroke-opacity: .8; }
                      26%, 100% { transform: scale(1.55); stroke-opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .qp, .qp-frame, .qp-beam, .qp-core, .qp-scan, .qp-hex, .qp-ping { animation: none; }
  /* a frozen scan band or ping just reads as a stray shape; the hexagons stay
     lit so the overlay still registers against the photograph */
  .qp-scan, .qp-ping { opacity: 0; }
  .qp-hex { stroke-opacity: .55; }
  .qp-core { opacity: .35; }
}

/* Chrome's Thai line-breaker splits "วัดได้" mid-word once the title is
   narrower than one line; keep the closing phrase together instead. */
.hero__title .nb { white-space: nowrap; }

@media (min-width: 980px) {
  .hero__content--split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 2.5rem 3.5rem; align-items: center; text-align: left;
  }
  .hero__art { display: block; }
  .hero__content--split .hero__title,
  .hero__content--split .hero__tagline { margin-left: 0; margin-right: 0; }
  .hero__content--split .hero__ctas,
  .hero__content--split .hero__trust { justify-content: flex-start; }
}

/* ---- contact block ---- */
.co-contact {
  display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 2rem; text-align: left;
}
.co-contact div {
  display: flex; align-items: flex-start; gap: .9rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 1.2rem 1.3rem;
}
.co-contact b {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #9FC2E6; margin-bottom: .4rem;
}
.co-contact span, .co-contact a { font-size: .95rem; color: #fff; line-height: 1.6; }
.co-contact a { text-decoration: underline; text-underline-offset: 3px; }
/* icon plate + the text column beside it */
.co-contact__ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(159,194,230,.15); color: #9FC2E6;
}
.co-contact__ico svg { width: 20px; height: 20px; display: block; }
/* min-width:0 lets a long address wrap instead of stretching the grid track */
.co-contact__txt { min-width: 0; }
.co-contact__txt a { overflow-wrap: anywhere; }

/* ---- placeholder blocks: content only TESA can supply ---- */
.co-todo {
  border: 2px dashed var(--prog-gold); border-radius: 14px;
  background: #FBF6EC; padding: 1.4rem 1.5rem; margin-top: 1.6rem;
  font-size: .93rem; color: var(--prog-muted); line-height: 1.75;
}
.co-todo b { display: block; color: #8A5A12; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
.co-todo ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.co-todo li { margin-bottom: .25rem; }
.section--dark .co-todo { background: rgba(255,255,255,.06); border-color: #C9A227; color: rgba(255,255,255,.8); }
.section--dark .co-todo b { color: #E5C07B; }

/* ---- partner strip, more logos than the original two ---- */
.co-partners { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 1.6rem; }
.co-partners span {
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  padding: .45rem 1rem; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
}

/* ---- supporting-partner logo wall ----
   These marks are dark ink on white, so on the navy section they each sit on
   their own white plate rather than floating on the background. */
.co-logos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1rem .8rem; margin-top: 1.8rem; list-style: none; padding: 0;
}
.co-logo { display: flex; flex-direction: column; align-items: center; }
.co-logo__plate {
  display: grid; place-items: center; width: 100%; height: 76px;
  padding: .7rem 1rem; background: #fff; border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
}
.co-logo__plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.co-logo__name {
  margin-top: .5rem; font-size: .74rem; line-height: 1.35; font-weight: 600;
  color: #9FB0C9; text-align: center;
}
a.co-logo { text-decoration: none; }
a.co-logo:hover .co-logo__plate { box-shadow: 0 0 0 2px var(--prog-gold, #C9A227); }
a.co-logo:hover .co-logo__name { color: #fff; }
@media (max-width: 480px) {
  .co-logos { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
  .co-logo__plate { height: 62px; padding: .55rem .8rem; }
}