/*
Theme Name:        NetONE Network Solution 2026
Theme URI:         https://www.net1.co.th/
Author:            NetONE Network Solution Co., Ltd.
Author URI:        https://www.net1.co.th/
Description:       Custom theme for the NetONE Network Solution corporate website (2026 redesign). Built as a classic-template theme with custom post types for News & Events, Job Positions, Partners, and Awards.
Version:           1.7.1
Tested up to:      6.5
Requires PHP:      7.4
License:           Proprietary
Text Domain:       netone
Tags:              corporate, business, custom-menu, threaded-comments, translation-ready
*/

/* ==========================================================================
   NetONE Network Solution — Homepage
   Rebuilt to match Figma "Desktop - 1" (1440 × 5311)
   ========================================================================== */

:root {
  /* Brand colors */
  --red:        #C8102E;          /* NetONE primary red */
  --red-deep:   #A20D26;
  --red-bright: #DC1F2D;
  --red-soft:   #FBE9EB;

  /* Backgrounds */
  --paper:    #FFFFFF;            /* white sections */
  --paper-2:  rgba(179, 32, 44, 0.03);            /* very light pink — hero, team */
  --paper-3:  #F8ECEC;            /* slightly deeper pink for accents */
  --gray:     #F6F6F7;            /* neutral gray — solutions, news, partners */

  /* Ink */
  --ink:    #1A1A1A;
  --ink-2:  #3A3A3A;
  --ink-3:  #6A6A6A;
  --ink-4:  #9A9A9A;

  /* Lines */
  --line:      #EDDDDF;           /* red-tinted line */
  --line-soft: #F4E4E6;
  --line-cool: #E5E7EB;

  /* Dark */
  --dark:    #16181C;
  --dark-2:  #1E2127;

  /* Typography */
  --font: 'Prompt', 'Aptos', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 12px;
  --radius-sm: 8px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.2; }

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.text-red { color: var(--red); }

/* "● DELIVER SUSTAINABLE" small label with red bar */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
}
.kicker__bar {
  width: 28px;
  height: 2px;
  background: var(--red);
}
.kicker--light { color: #fff; }
.kicker--light .kicker__bar { background: #fff; }

/* Section heading block */
.section-head { margin-bottom: 26px; max-width: 880px; }
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  margin: 14px 0 14px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.section-head .section-lead {
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.7;
  max-width: 720px;
  margin: 0;
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--center .section-lead { margin: 0 auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--red);
  color: #fff;
}
.btn--primary:hover {
  background: var(--red-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200,16,46,0.25);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--paper-2); }
.btn--ghost-dark {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.btn--ghost-dark:hover { background: rgba(255,255,255,0.12); }

/* ==========================================================================
   TOP BAR (red)
   ========================================================================== */
.topbar {
  background: var(--red);
  color: #fff;
  font-size: 12.5px;
  font-family: 'Poppins', var(--font);
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 22px; }
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.95);
}
.topbar__item svg { color: #fff; opacity: 0.95; }
.topbar__item--social { transition: opacity .2s; }
.topbar__item--social:hover { opacity: 0.8; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.header__logo img { height: 42px; width: auto; }
.header__nav { font-family: 'Poppins', var(--font);  }
.header__nav > ul { display: flex; gap: 36px; }
.header__nav > ul > li { position: relative; }
.header__nav > ul > li > a {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
  padding: 26px 2px;
  position: relative;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.header__nav > ul > li > a:hover { color: var(--red); }
.header__nav > ul > li > a.is-active { color: var(--red); }
.header__nav > ul > li > a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  height: 2px;
  background: var(--red);
}

/* Dropdown caret */
.dd-caret {
  margin-left: 2px;
  margin-top: 2px;
  color: currentColor;
  transition: transform .2s;
}
.has-dropdown:hover .dd-caret,
.has-dropdown.is-open .dd-caret { transform: rotate(180deg); }

/* Dropdown menu */
.dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(20, 23, 28, 0.10);
  padding: 8px;
  list-style: none;
  margin: 0;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 100;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li { width: 100%; }
.dropdown a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.dropdown a:hover {
  background: var(--paper-2);
  color: var(--red) !important;
}
.dropdown a::after { display: none !important; }
.dd-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.04em;
  min-width: 18px;
}

/* Mobile menu toggle */
.header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.header__toggle span {
  width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.header__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle.is-open span:nth-child(2) { opacity: 0; }
.header__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO  (pink background)
   ========================================================================== */
.hero {
  background: var(--paper-2);
  padding: 50px 0 0;
  position: relative;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 60px;
}
.hero__copy { max-width: 560px; }
.hero__copy .kicker { font-size: 16px; font-weight: 500; }
.hero__title {
  font-size: clamp(36px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
  color: var(--ink);
}
.hero__title .text-red { display: inline; }
.hero__lead {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 14px;
  max-width: 520px;
}
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  height: clamp(320px, 36vw, 480px);
  object-fit: cover;
  border-radius: 40px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.18);
}

/* Hero metric strip — lives inside hero copy so it aligns to the copy column */
.hero__metrics {
  margin-top: 20px;
  display: flex;
  gap: 40px;
}
.metric {
  display: flex; flex-direction: column;
  padding: 0;
}
.metric + .metric {
  padding-left: 32px;
}
.metric__value {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
}
.metric__plus {
  color: var(--red);
  margin-left: 1px;
  font-size: 0.6em;
  font-weight: 600;
}
.metric__label {
  color: var(--ink-3);
  font-size: 12px;
  margin-top: 4px;
}

/* ==========================================================================
   SOLUTIONS & SERVICES (white)
   ========================================================================== */
.solutions {
  padding: 50px 0;
  background: var(--gray);

}
.solutions .section-head h2 { max-width: 800px; }

.sol-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.sol-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--red);
  border-radius: 0;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}
.sol-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(200,16,46,0.10);
  border-top-color: var(--red-bright);
}
.sol-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.sol-card__ic { color: var(--red); display: inline-flex; }
.sol-card__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.02em;
}
.sol-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
  line-height: 1.3;
}
.sol-card p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
  flex: 1;
  margin: 0 0 18px;
}
.sol-card__more {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sol-card__more span {
  transition: transform .2s;
}
.sol-card:hover .sol-card__more span { transform: translateX(3px); }

/* ==========================================================================
   WHY NETONE (red band)
   ========================================================================== */
.why {
  position: relative;
  background: var(--red);
  background-image:
    linear-gradient(135deg, #C8102E 0%, #A20D26 100%);
  color: #fff;
  padding: 55px 0 45px;
  overflow: hidden;
}
.why__pattern {
  position: absolute;
  inset: 0;
  background-image: url('assets/img/digital-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.why__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.why__copy h2 {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  margin: 14px 0 24px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.why__copy p {
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.75;
  max-width: 440px;
  margin: 0;
}
.why__list {
  display: flex;
  flex-direction: column;
}
.why__list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  transition: padding-left .2s;
}
.why__list li:first-child { border-top: 0; padding-top: 8px; }
.why__list li:hover { padding-left: 6px; }
.why__ic {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .2s;
}
.why__list li:hover .why__ic { background: rgba(255,255,255,0.18); }
.why__ic svg { width: 22px; height: 22px; color: #fff; }
.why__list h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 2px;
}
.why__list p {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   NEWS & EVENTS (white)
   ========================================================================== */
.news {
  padding: 50px 0;
  background: var(--gray);
}
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(200,16,46,0.10);
}
.news-card__img {
  aspect-ratio: 16 / 10;
  background: var(--paper-3);
  overflow: hidden;
}
.news-card__img img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body {
  padding: 15px 15px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.news-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-bottom: 12px;
  line-height: 1.4;
}
.news-card__date {
  color: var(--ink-4);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.news-card__tag {
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-size: 10px;
  background: var(--red);
  color: #fff;
}
.news-card__tag--event { background: var(--red-soft);color: var(--red); }
.news-card__tag--award { background: var(--red); }
.news-card__tag--insight { background: var(--red); }
.news-card h3 {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--ink);
}
.news-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__more {
  font-size: 13px;
  font-weight: 500;
  color: var(--red);
  align-self: flex-start;
}

/* ==========================================================================
   TEAM & CERTIFICATIONS (pink)
   ========================================================================== */
.team {
  background: var(--paper);
  padding: 60px 0;
}
.team__inner {
  display: grid;
  grid-template-columns: 0.60fr 1fr;
  gap: 50px;
  align-items: center;
}
.team__photo {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(20, 23, 28, 0.12);
}
.team__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.team__copy h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  margin: 14px 0 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.team__copy > p {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 540px;
}

/* Certification badges */
.team__certs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.team__certs--top { margin-bottom: 12px; }
.team__certs--bottom { grid-template-columns: repeat(3, 1fr); max-width: 380px; }

.cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 10px;
  border-radius: 8px;
  font-family: var(--font);
  line-height: 1.2;
  color: #fff;
}
.cert strong {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
}
.cert span {
  font-weight: 500;
  font-size: 10px;
  opacity: 0.92;
  display: block;
}
.cert--red { background: linear-gradient(135deg, #C8102E, #8A0F22); }
.cert--green { background: linear-gradient(135deg, #018E6F, #015B47); }
.cert--blue { background: linear-gradient(135deg, #1F3B5C, #0F1E33); }

/* Circular ISO style certs */
.cert--circle {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 92px; height: 92px;
  margin: 0 auto;
  color: var(--ink);
  padding: 0;
  position: relative;
}
.cert--circle .cert__seal {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.05;
}
.cert--circle .cert__sub {
  font-size: 8px;
  font-weight: 600;
  margin-top: 2px;
  color: var(--ink-3);
}
.cert--shield {
  background: #fff;
  color: var(--red);
  width: 92px; height: 92px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cert--shield svg { color: var(--red); }
.cert--shield .cert__sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-3);
  margin-top: 4px;
}

/* Composite badge images (homepage Team section) */
.team__badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  margin-top: 6px;
}
.team__badges-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
}
.team__badges-img--iso { max-width: 300px; }

/* ==========================================================================
   PARTNERS (pink)
   ========================================================================== */
.partners {
  padding: 96px 0;
  background: var(--gray);
}
.partners .section-head { margin-bottom: 48px; }
.partners__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.p-logo {
  background: #fff;
  border: 1px solid var(--line-cool);
  border-radius: 8px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  line-height: 1;
  overflow: hidden;
}
.p-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: var(--line);
}
.p-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(1) contrast(1);
  transition: filter .25s, transform .25s;
}
.p-logo:hover img {
  filter: saturate(1.1);
}
.p-logo span { display: inline-block; }
.p-logo--more {
  color: var(--ink-4);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  background: transparent;
  border-style: dashed;
}

/* ==========================================================================
   CONTACT CTA BAR
   ========================================================================== */
.cta {
  padding: 50px 0;
  background: var(--paper);
}
.cta__inner {
  background: var(--dark);
  border-radius: 16px;
  padding: 32px 40px;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.cta__copy h2 {
  color: #fff;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.cta__copy p {
  color: rgba(255,255,255,0.65);
  margin: 0;
  font-size: 14px;
}
.cta__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: #0F1115;
  color: rgba(255,255,255,0.65);
  padding: 56px 0 0;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 1.1fr;
  gap: 40px;
  padding-bottom: 36px;
}
.footer__logo {
  height: 38px;
  width: auto;
  /* background: #fff; */
  padding: 0;
  border-radius: 6px;
  margin-bottom: 16px;
}
.footer__brand p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin: 0 0 14px;
  max-width: 320px;
}
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 12.5px;
}
.footer__social:hover { color: #fff; }
.footer__social svg { color: var(--paper); }
.footer__col h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
  margin-bottom: 16px;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer__col a {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.footer__col a:hover { color: #fff; }
.footer__contact li {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
}
.footer__contact a { color: rgba(255,255,255,0.8); font-weight: 500; }

.footer__legal {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0;
}
.footer__legal-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.footer__legal a { color: rgba(255,255,255,0.65); }
.footer__legal a:hover { color: #fff; }
.footer__legal-links { display: inline-flex; align-items: center; gap: 8px; }
.footer__legal .dot { opacity: 0.5; }

/* PDPA cookie banner styles removed — consent is handled by the Consentry plugin. */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .header__nav ul { gap: 0 20px; }
  .hero__metrics {  gap: 20px; }
}

/* ---------- Tablet (≤ 900) ---------- */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero__media { order: -1; }
  .hero__media img { height: 280px; }
  .hero__metrics { margin-top: 22px; gap: 30px; }
  .sol-cards { grid-template-columns: repeat(3, 1fr); }
  .sol-card:nth-last-child(-n+2) { /* keep last 2 in their own row */ }
  .partners__grid { grid-template-columns: repeat(4, 1fr); }

  .why__inner { grid-template-columns: 1fr; gap: 36px; }

  .news__grid { grid-template-columns: repeat(2, 1fr); }
  .news-card:last-child { grid-column: span 2; max-width: 50%; margin: 0 auto; }

  .team__inner { grid-template-columns: 1fr; gap: 36px; }
  .team__photo img { aspect-ratio: 16 / 10; }
  .team__certs { grid-template-columns: repeat(2, 1fr); }
  .team__certs--bottom { grid-template-columns: repeat(3, 1fr); }

  .partners__grid { grid-template-columns: repeat(3, 1fr); }

  .cta__inner { grid-template-columns: 1fr; padding: 28px; text-align: center; }
  .cta__actions { justify-content: center; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}

/* ---------- Mobile (≤ 640) ---------- */
@media (max-width: 640px) {
  :root { --gutter: 18px; }

  /* Top bar */
  .topbar__inner { height: auto; padding: 8px; gap: 10px; flex-wrap: wrap; }
  .topbar__right { display: none; }

  /* Header hamburger */
  .header__toggle { display: flex; }
  .header__nav {
    position: absolute;
    top: 74px;
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    transform: translateY(-150%);
    transition: transform .3s ease;
    z-index: 40;
  }
  .header__nav.is-open { transform: translateY(0); }
  .header__nav > ul,
  .header__nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .header__nav > ul > li > a,
  .header__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--line-soft);
    width: 100%;
    background: #fff;
  }
  .header__nav > ul > li > a.is-active::after { display: none; }
  .header__nav > ul > li > a.is-active { background: var(--red-soft); }

  /* Mobile dropdown - inline accordion */
  .has-dropdown { position: static; }
  .dropdown {
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--paper-2) !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: hidden;
    transform: none !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, visibility 0s linear .3s;
  }
  .has-dropdown.is-open .dropdown {
    visibility: visible;
    max-height: 500px;
    transition: max-height .3s ease, visibility 0s;
  }
  .dropdown a {
    background: var(--paper-2) !important;
    padding: 12px 36px !important;
    font-size: 14px !important;
  }
  .dd-caret { transition: transform .25s; }

  /* Sections */
  .hero, .solutions, .why, .news, .team, .partners { padding: 34px 0; }
  .hero { padding-top: 40px; }
  .section-head { margin-bottom: 36px; }

  .sol-cards { grid-template-columns: 1fr; }

  .news__grid { grid-template-columns: 1fr; }
  .news__grid .news-card:last-child { grid-column: auto; max-width: none; margin: 0; }

  .team__certs, .team__certs--bottom { grid-template-columns: repeat(2, 1fr); }

  .partners__grid { grid-template-columns: repeat(2, 1fr); }

  .cta { padding: 48px 0; }
  .cta__inner { padding: 24px 20px; }
  .cta__actions .btn { flex: 1; justify-content: center; }

  .footer__inner { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .footer__brand { grid-column: auto; }
  .footer__legal-inner { flex-direction: column; gap: 8px; text-align: center; }
}

/* ---------- Small phones (≤ 420) ---------- */
@media (max-width: 420px) {
  .hero__metrics { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero__metrics .metric:nth-child(3) {
    grid-column: span 2;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-left: 0;
    padding-left: 0;
  }
}

/* ==========================================================================
   INTERIOR PAGES — shared
   ========================================================================== */

/* Page banner — small hero used on every interior page */
.pagebanner {
  background: var(--paper-2);
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.pagebanner::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,16,46,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.pagebanner .wrap { position: relative; }
.pagebanner h1 {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 14px 0 14px;
  color: var(--ink);
}
.pagebanner p {
  font-size: 15px;
  color: var(--ink-3);
  max-width: 640px;
  margin: 0;
  line-height: 1.7;
}
.pagebanner .solution-num {
  display: inline-block;
  font-size: 0.7em;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 8px;
  vertical-align: middle;
  background: rgba(200,16,46,0.08);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Media page banner — title-only over a background image with dark overlay */
.pagebanner--media {
  background-color: var(--ink);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  padding: 116px 0 96px;
  border-bottom: none;
  text-align: center;
}
.pagebanner--media::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: linear-gradient(180deg, rgba(16,18,24,0.74) 0%, rgba(16,18,24,0.58) 55%, rgba(16,18,24,0.7) 100%);
  pointer-events: none;
}
.pagebanner--media .wrap { position: relative; z-index: 1; }
.pagebanner--media h1 {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.pagebanner--media h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 20px auto 0;
  background: var(--red-bright);
  border-radius: 2px;
}
.pagebanner--media .pagebanner__meta {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.pagebanner--media .pagebanner__meta .news-card__date,
.pagebanner--media .pagebanner__meta > span:first-child {
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 14px;
}

/* Two-column intro: text + image, used to break up stacked centered heads */
.intro-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.intro-split__text .kicker { margin-bottom: 16px; }
.intro-split__text h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 18px;
  color: var(--ink);
}
.intro-split__text p {
  color: var(--ink-3);
  line-height: 1.85;
  font-size: 15px;
  margin: 0;
}
.intro-split__media {
  position: relative;
}
.intro-split__media img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16,18,24,0.16);
  display: block;
}
/* Native-block variant: core/columns .intro-split with .intro-split__text /
   .intro-split__media columns (Solutions listing page content). The element
   rules above apply via the column classNames; this just restores the gap
   and resets the image-block margin. */
.wp-block-columns.intro-split { gap: clamp(32px, 5vw, 72px); }
.intro-split__media .wp-block-image { margin: 0; }
@media (max-width: 860px) {
  .intro-split { grid-template-columns: 1fr; gap: 32px; }
  .intro-split__media { order: -1; }
  .intro-split__media img { max-height: 300px; }
}

/* Generic content section */
.content-section {
  padding: 50px 0;
  background: var(--paper);
}
.content-section.nopad {
  padding: 50px 0 0;
  background: var(--paper);
}
/* News article (single) — full-width breadcrumb bar + content + gallery */
.article-wrap { max-width: 860px; margin: 0 auto; }
.breadcrumb-bar {
  background: #F4F5F6;
  border-bottom: 1px solid #E3E5E8;
  padding: 15px 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-3);
}
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb__current {
  color: var(--ink-2);
  font-weight: 600;
  max-width: 100%;
}
.article__meta { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.job-meta span { display: inline-flex; align-items: center; gap: 7px; }
.job-meta svg { color: var(--red); }
.article__date { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); }
.article__title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 4px 0 22px;
  color: var(--ink);
}
.article__hero { margin: 0 0 36px; border-radius: 16px; overflow: hidden; }
.article__hero img { width: 100%; display: block; }
.article__gallery-head { margin: 44px 0 18px; }
.news-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.news-gallery__item {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.news-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.news-gallery__item:hover img { transform: scale(1.06); }
.article__back { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
@media (max-width: 640px) {
  .news-gallery { grid-template-columns: 1fr 1fr; }
}

/* NEWS ARTICLE — native-block gallery (the body is Gutenberg blocks; event
   photos are a core/gallery of Media Library images). Mirrors the .news-gallery
   design above. The "ภาพบรรยากาศภายในงาน" kicker is a paragraph.kicker.has-bar
   block right before the gallery. */
.entry-content .kicker.has-bar { margin: 44px 0 18px; }
.entry-content .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* :not(#individual-image) matches core block-library's specificity hack so the
   width:100% wins over core's calc(33% - gap) flex sizing. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  margin: 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.entry-content .wp-block-gallery.has-nested-images .wp-block-image a,
.entry-content .wp-block-gallery.has-nested-images .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.entry-content .wp-block-gallery.has-nested-images .wp-block-image:hover img { transform: scale(1.06); }
@media (max-width: 640px) {
  .entry-content .wp-block-gallery.has-nested-images { grid-template-columns: 1fr 1fr; }
}
/* Red striped section — red band with digital pattern, white heading text */
.content-section--red {
  position: relative;
  background: var(--red);
  background-image: linear-gradient(135deg, #C8102E 0%, #A20D26 100%);
  color: #fff;
  overflow: hidden;
}
.content-section--red::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/img/digital-bg.png') center / cover no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.content-section--red > .wrap { position: relative; z-index: 1; }
.content-section--red .kicker { color: #fff; }
.content-section--red .kicker__bar { background: #fff; }
.content-section--red .section-head h2 { color: #fff; }
.content-section--red .section-head .section-lead { color: rgba(255,255,255,0.88); }
.content-section--red .text-red { color: #fff; }
.content-section.bg-pink { background: var(--paper-2); }
.content-section.bg-gray { background: var(--gray); }
.content-section h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 14px 0 18px;
  line-height: 1.2;
}
.content-section p { color: var(--ink-3); line-height: 1.8; font-size: 14.5px; margin: 0 0 14px; }
.content-section p.muted { color: var(--ink-3); font-size: 13.5px; }
.content-section strong { color: var(--ink); font-weight: 600; }

/* Two-column layout used on About / Sustainability / Careers / Solutions */
.content-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.content-grid__col h2 { margin-top: 8px; }
.content-grid__col + .content-grid__col p:first-child { margin-top: 0; }

/* Single-solution intro: balanced overview (left) + capabilities card (right) */
.sol-intro__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}
.sol-intro__lead .kicker { margin-bottom: 16px; }
.sol-intro__lead h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 18px;
  color: var(--ink);
}
.sol-intro__sub {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.sol-intro__prose { color: var(--ink-3); }
.sol-intro__prose p { line-height: 1.8; font-size: 14.5px; margin: 0 0 14px; }
.sol-intro__prose p:last-child { margin-bottom: 0; }

.sol-intro__caps {
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 14px 32px 16px;
  box-shadow: 0 18px 48px rgba(20,23,28,0.07);
}
.sol-intro__caps .caps-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red);
  margin: 14px 0 2px;
}
.sol-intro__caps .capabilities li:last-child { border-bottom: 0; }

/* Solo mode (no capabilities list, e.g. future content) */
.sol-intro--solo .sol-intro__grid { grid-template-columns: 1fr; max-width: 860px; }

@media (max-width: 860px) {
  .sol-intro__grid { grid-template-columns: 1fr; gap: 30px; }
  .sol-intro__caps { padding: 8px 22px 12px; }
}

/* ==========================================================================
   SOLUTIONS — full native-block intro (Gutenberg)
   The single-solution body is authored as native blocks: the 2-col intro is
   a core/columns .sol-intro__grid (lead column + capabilities card column),
   and the "What we deliver" list is a plain core/list .capabilities. These
   rules re-assert the design over core block-library + .content-section
   defaults (two-class / child selectors win on specificity).
   ========================================================================== */
.wp-block-columns.sol-intro__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}
.wp-block-columns.sol-intro__grid > .wp-block-column { margin: 0; }
.sol-intro__lead p:not(.kicker) {
  color: var(--ink-3);
  line-height: 1.8;
  font-size: 14.5px;
  margin: 0 0 14px;
}
.sol-intro__lead p:not(.kicker):last-child { margin-bottom: 0; }
.sol-intro__caps .wp-block-list.capabilities { list-style: none; margin: 0; padding: 0; }
.sol-intro__caps .capabilities li {
  display: block;
  position: relative;
  padding: 18px 0 18px 42px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.sol-intro__caps .capabilities li:last-child { border-bottom: 0; }
.sol-intro__caps .capabilities li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 18px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.sol-intro__caps .capabilities li strong {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 2px;
}
@media (max-width: 860px) {
  .wp-block-columns.sol-intro__grid { grid-template-columns: 1fr; gap: 30px; }
}

.narrow-content-block {
  max-width: 800px;
  margin: 0 auto;
}

/* Quote block (Deliver Sustainable) */
.quote-block {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.quote-block h2 {
  font-size: clamp(34px, 4vw, 52px);
  margin: 12px 0 24px;
}
.quote-block p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
  font-style: italic;
}

/* Vision / Mission grid */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: start;
}
.vm-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 32px;
  border-left: 4px solid var(--red);
}
.vm-card--mission { background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%); }
.vm-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 12px 0 14px;
  line-height: 1.35;
}
.vm-card p { color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.mission-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}
.mission-list li {
  padding-left: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}
.mission-list li:first-child { border-top: 0; padding-top: 0; }
.mission-list__label {
  display: inline-block;
  font-weight: 700;
  color: var(--red);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.mission-list__text {
  display: block;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.75;
}

/* Awards & Recognition (About) */
.awards-hero {
  margin: 36px auto 8px;
  max-width: 980px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,0.10);
  background: #fff;
}
.awards-hero img { display: block; width: 100%; height: auto; }
.awards-intro {
  max-width: 760px;
  margin: 32px auto 8px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}
.awards-intro p { margin: 0 0 16px; }
.awards-points {
  list-style: none;
  padding: 0;
  margin: 0 auto 16px;
  display: inline-grid;
  gap: 8px;
  text-align: left;
}
.awards-points li {
  position: relative;
  padding-left: 26px;
  font-weight: 600;
  color: var(--ink);
}
.awards-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--red);
}
.awards-sub {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin: 44px 0 24px;
  color: var(--ink);
}
.cert-badges {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}
.cert-badges img { width: 100%; height: auto; display: block; }
.cert-badges--iso { max-width: 420px; margin-top: 30px; }

/* Awards intro points — horizontal row under the hero photo */
.awards-points--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  max-width: 920px;
  margin: 28px auto 0;
}

/* Partner Awards — per-partner rows (logo + award chips) */
.award-rows {
  display: grid;
  gap: 16px;
  max-width: 1000px;
  margin: 8px auto 0;
}
.award-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 14px;
  padding: 22px 30px;
  transition: transform .2s, box-shadow .2s;
}
.award-row:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.06); }
.award-row__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 28px;
  border-right: 1px solid var(--line);
}
.award-row__brand img { max-height: 42px; max-width: 150px; width: auto; object-fit: contain; }
.award-row__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.award-row__list li {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
}
@media (max-width: 640px) {
  .award-row { grid-template-columns: 1fr; gap: 14px; }
  .award-row__brand { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 16px; }
  .award-row__list { justify-content: center; }
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cert-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  border-top: 4px solid var(--red);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .2s, box-shadow .2s;
}
.cert-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,0.08); }
.cert-card__logo { height: 46px; display: flex; align-items: center; margin-bottom: 14px; }
.cert-card__logo img { max-height: 46px; max-width: 150px; width: auto; object-fit: contain; }
.cert-card__name { font-weight: 700; color: var(--ink); font-size: 16px; margin-bottom: 12px; line-height: 1.3; }
.cert-card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; width: 100%; }
.cert-card__list li {
  font-size: 14px;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cert-grid { grid-template-columns: 1fr; } }

/* Awards grid (legacy, unused) */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.award-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  border-top: 4px solid var(--red);
  transition: transform .2s, box-shadow .2s;
}
.award-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.06); }
.award-card__year {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.award-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 6px;
}
.award-card__sub {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ==========================================================================
   TIMELINE (History page)
   ========================================================================== */
.timeline {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding-left: 32px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--red) 0%, var(--paper-3) 100%);
}
.tl-item {
  position: relative;
  padding-bottom: 48px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item__marker {
  position: absolute;
  left: -32px;
  top: 8px;
  width: 16px; height: 16px;
  background: #fff;
  border: 3px solid var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(200,16,46,0.10);
}
.tl-item__year {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.tl-item__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.tl-item p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }

/* ==========================================================================
   SUSTAINABILITY (scope cards)
   ========================================================================== */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.scope-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid #018E6F;
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.scope-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.06); }
.scope-card:nth-child(2) { border-top-color: #047C5B; }
.scope-card:nth-child(3) { border-top-color: #015B47; }
.scope-card__num {
  font-size: 56px;
  font-weight: 800;
  color: #018E6F;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.scope-card__num span {
  font-size: 0.5em;
  color: var(--red);
  margin-left: 2px;
}
.scope-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.scope-card__sub {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* Doc embed slot at end of Sustainability */
.doc-embed-slot {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  margin-top: 18px;
}
.doc-embed-slot svg { color: var(--red); flex-shrink: 0; }
.doc-embed-slot strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}
.doc-embed-slot span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ==========================================================================
   PRIVACY POLICY
   ========================================================================== */
.policy-wrap { max-width: 920px; margin: 0 auto; }
.policy-intro {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.85;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.policy-intro strong { color: var(--ink); }
.policy-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}
.policy-section:last-child { border-bottom: 0; }
.policy-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
}
.policy-section h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 16px 0 8px;
}
.policy-section p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0 0 10px;
}
.policy-section strong { color: var(--ink); font-weight: 600; }
.policy-list, .policy-ol {
  padding-left: 18px;
  margin: 0 0 12px;
}
.policy-list { list-style: disc; }
.policy-ol { list-style: decimal; }
.policy-list li, .policy-ol li {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.75;
  margin-bottom: 6px;
}
.dpo-card {
  background: var(--paper-2);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 16px;
}
.dpo-card h4 { color: var(--red); font-size: 14px; margin: 0 0 12px; }
.dpo-card p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.dpo-card a { color: var(--red); }

/* --- Native Gutenberg-block rendering of the editable policy content ---
   The policy is now editable blocks (heading/paragraph/list) inside .policy-body.
   These rules style the flattened, direct-child blocks; the intro and DPO card
   stay as group blocks (.policy-intro / .dpo-card, styled above). Child (>)
   combinators keep these rules from leaking into those groups. */
.policy-body > h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
/* first section heading sits right under the intro — no extra divider */
.policy-intro + h3 {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.policy-body > h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 16px 0 8px;
}
.policy-body > p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0 0 10px;
}
.policy-body > p strong,
.policy-body > h3 strong { color: var(--ink); font-weight: 600; }
/* keep list markers regardless of wp-block-list defaults */
.policy-body ul.policy-list { list-style: disc; padding-left: 18px; margin: 0 0 12px; }
.policy-body ol.policy-ol { list-style: decimal; padding-left: 18px; margin: 0 0 12px; }

/* ==========================================================================
   SOLUTION PAGES — capabilities list
   ========================================================================== */
.capabilities {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.capabilities li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
.capabilities li:last-child { border-bottom: 0; }
.cap-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.01em;
}
.cap-text {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.65;
}
.cap-text strong {
  display: inline;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

/* ==========================================================================
   PROFESSIONAL SERVICES — service options table + team grid
   ========================================================================== */
.service-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 32px;
}
.service-row {
  display: grid;
  grid-template-columns: 60px 1.3fr 2fr;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft);
  gap: 16px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.service-row:last-child { border-bottom: 0; }
.service-row > div:first-child {
  font-weight: 700;
  color: var(--red);
  font-size: 18px;
}
.service-row > div:nth-child(2) strong {
  color: var(--ink);
  font-size: 15px;
}
.service-row--head {
  background: var(--paper-2);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.service-row--head > div:first-child { color: var(--ink); }

.pro-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.pro-team-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 24px;
  margin: 0 0 20px;
}
.pro-team-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.pro-team-card .muted {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}
.pro-team-card ul { display: flex; flex-direction: column; gap: 8px; }
.pro-team-card li {
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  gap: 8px;
  align-items: center;
}
.pro-team-card a { color: var(--ink); font-weight: 600; }
.pro-team-card a:hover { color: var(--red); }

/* PROFESSIONAL SERVICES — native-block rendering (the SERVICE OPTIONS +
   OUR PROFESSIONAL TEAM sections live in the solution post content as
   native Gutenberg blocks; these rules give the blocks the designed look). */
.wp-block-table.service-options {
  margin: 32px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.wp-block-table.service-options table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.wp-block-table.service-options th,
.wp-block-table.service-options td {
  border: 0;
  padding: 16px 24px;
  text-align: left;
  vertical-align: middle;
}
.wp-block-table.service-options thead th {
  background: var(--paper-2);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.wp-block-table.service-options tbody td { border-top: 1px solid var(--line-soft); }
.wp-block-table.service-options tbody tr:first-child td { border-top: 0; }
.wp-block-table.service-options td:first-child,
.wp-block-table.service-options th:first-child { width: 60px; }
.wp-block-table.service-options tbody td:first-child {
  font-weight: 700;
  color: var(--red);
  font-size: 18px;
}
.wp-block-table.service-options tbody td:nth-child(2) {
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  width: 30%;
}
.wp-block-columns.pro-team-grid { gap: 16px; margin-top: 40px; }
.wp-block-columns.pro-team-grid .pro-team-card { height: 100%; }
.pro-team-card .wp-block-list { list-style: none; padding: 0; margin: 0; }

/* Professional team — photos + ISO/Bureau Veritas badge (client brief p.31) */
.pro-team-media { position: relative; max-width: 1000px; margin: 8px auto 34px; }
.pro-team-media .wp-block-columns.pro-team-photos { gap: 18px; align-items: stretch; margin: 0; }
.pro-team-media .pro-team-photo { margin: 0; height: 100%; }
.pro-team-media .pro-team-photo img {
  width: 100%; height: 100%; min-height: 260px;
  object-fit: cover; border-radius: 14px; display: block;
}
.pro-team-media .pro-team-iso {
  position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  margin: 0; z-index: 2; width: 240px; max-width: 44%;
}
.pro-team-media .pro-team-iso img {
  width: 100%; height: auto; display: block; border-radius: 4px;
  box-shadow: 0 10px 28px rgba(20,23,28,0.20);
}
@media (max-width: 781px) {
  .pro-team-media { margin-bottom: 16px; }
  .pro-team-media .pro-team-photo img { min-height: 200px; }
  .pro-team-media .pro-team-iso {
    position: static; transform: none; width: 220px; max-width: 70%;
    margin: 16px auto 0;
  }
}

/* SUSTAINABILITY — GHG roadmap, client-reference style (2026-06-10).
   Pale-green band + white baseline "gauge" card (big tCO2e figure, leaf icon
   drawn via CSS ::before mask) + wide illustration image. All content is
   native blocks in Pages → Sustainability — numbers/text/image editable. */
.content-section.bg-green { background: #F1F7F2; }
/* The GHG section carries a flat eco-scene SVG (assets/img/ghg-bg.svg) as a
   decorative bottom background; extra bottom padding keeps content clear. */
.content-section.ghg-section {
  background-image: url("assets/img/ghg-bg.svg");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 230px;
  padding-bottom: 150px;
}
.content-section.ghg-section .kicker { color: #1E7B4F; }
.content-section.ghg-section .kicker::before{ background: #1E7B4F; }
@media (max-width: 760px) {
  .content-section.ghg-section { background-size: auto 150px; padding-bottom: 170px; }
}
/* Scope figures — open stats (no card boxes), shown over the scene */
.wp-block-columns.ghg-scopes { gap: 28px; margin-top: 38px; }
.ghg-scope { text-align: center; }
.ghg-scope .ghg-scope__num {
  font-size: clamp(38px, 4.6vw, 56px);
  font-weight: 800;
  color: #1E7B4F;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
}
.ghg-scope .ghg-scope__num span { font-size: 0.55em; color: var(--red); font-weight: 800; }
.ghg-scope .ghg-scope__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 10px 0 2px;
}
.ghg-scope .ghg-scope__sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0;
}
.ghg-baseline {
  background: #fff;
  border: 1px solid #DCEBDF;
  border-radius: 16px;
  padding: 34px 28px 28px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(30, 123, 79, 0.07);
}
.ghg-baseline::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  background-color: #1E7B4F;
  -webkit-mask: var(--ico-leaf) center / contain no-repeat;
  mask: var(--ico-leaf) center / contain no-repeat;
  --ico-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}
.ghg-baseline .ghg-baseline__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0;
}
.ghg-baseline .ghg-baseline__num {
  font-size: clamp(46px, 6vw, 68px);
  font-weight: 800;
  color: #1E7B4F;
  line-height: 1.05;
  margin: 2px 0 0;
  letter-spacing: -0.02em;
}
.ghg-baseline .ghg-baseline__unit {
  font-size: 16px;
  color: var(--ink-3);
  margin: 2px 0 0;
}
.ghg-baseline .ghg-baseline__desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-3);
  margin: 14px auto 0;
  max-width: 520px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.wp-block-image.ghg-illustration { margin: 30px auto 0; max-width: 980px; }
.wp-block-image.ghg-illustration img {
  width: 100%;
  display: block;
  border-radius: 16px;
}

/* Generic bulleted list for block content (the theme resets ul globally).
   Add className "bullet-list" to a core/list block to get styled bullets. */
.wp-block-list.bullet-list {
  list-style: disc;
  padding-left: 24px;
  margin: 14px 0 18px;
  display: block;
}
.wp-block-list.bullet-list li {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.8;
  margin: 4px 0;
}
.wp-block-list.bullet-list li::marker { color: var(--red); }

/* Inline icons usable inside block-editor content (kses-safe empty <span> —
   the icon is drawn by CSS mask, tinted via background-color). Used by the
   Privacy Policy DPO card phone/email lines and the pro-team cards. */
.ico-inline {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 7px -2px 0;
  background-color: var(--red);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.ico-inline--phone { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6.6 10.8c1.4 2.7 3.7 5 6.4 6.4l2.1-2.1c.3-.3.7-.4 1.1-.3 1.2.4 2.4.6 3.7.6.6 0 1.1.5 1.1 1.1v3.3c0 .6-.5 1.1-1.1 1.1C9.6 21 3 14.4 3 6.1 3 5.5 3.5 5 4.1 5h3.4c.6 0 1.1.5 1.1 1.1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.3 1.1l-2.3 2z'/%3E%3C/svg%3E"); }
.ico-inline--mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E"); }
.ico-inline--chat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   NEWS PAGE LAYOUT (main + sidebar)
   ========================================================================== */
.news-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.news__grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
.news__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--ink-3);
}
.news__pag-btn {
  color: var(--red);
  font-weight: 600;
}
.news-layout__side {
  background: var(--paper-2);
  border-radius: 12px;
  padding: 24px 22px;
  position: sticky;
  top: 110px;
}
.news-side__head {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
}
.news-side__list { display: flex; flex-direction: column; gap: 14px; }
.news-side__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.news-side__item:last-child { border-bottom: 0; }
.news-side__item:hover h4 { color: var(--red); }
.news-side__thumb {
  width: 72px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-3);
}
.news-side__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-side__date {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.news-side__item h4 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
  transition: color .2s;
}

/* ==========================================================================
   CAREERS — benefits + positions
   ========================================================================== */
.careers-photo {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.careers-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.benefit-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(200,16,46,0.10);
  border-color: var(--red);
}
.benefit-card__icon {
  width: 60px; height: 60px;
  margin: 0 auto 18px;
  background: var(--red-soft);
  color: var(--red);
  display: grid;
  place-items: center;
  border-radius: 14px;
}
.benefit-card__icon svg { width: 28px; height: 28px; }
.benefit-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.benefit-card p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0;
}

.positions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}
.position-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 26px;
  gap: 16px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.position-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(200,16,46,0.08);
}
.position-card__info h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.position-card__meta {
  display: flex;
  gap: 16px;
  font-size: 12.5px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.position-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.position-card__cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  white-space: nowrap;
}
.positions-view-all {
  text-align: center;
  margin-top: 28px;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.contact-info h2 { margin-bottom: 32px; }
.contact-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-item:last-child { border-bottom: 0; }
.contact-item__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--red-soft);
  color: var(--red);
  display: grid;
  place-items: center;
}
.contact-item__icon svg { width: 22px; height: 22px; }
.contact-item h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.contact-item p {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.7;
  margin: 0;
}
.contact-item a { color: var(--ink-2); }
.contact-item a:hover { color: var(--red); }

.contact-form-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}
.contact-form-wrap h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);

}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  font-weight: 400;
  background: #fff;
  transition: border-color .2s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.10);
}
.contact-form textarea { resize: vertical;  }
.contact-form .btn { align-self: flex-start; }
.form-success {
  margin-top: 8px;
  padding: 12px 16px;
  background: #E8F5E9;
  color: #2E7D32;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
}

.contact-map-title {
  text-align: center;
  margin-bottom: 28px;
  font-size: clamp(26px, 3vw, 36px);
}
.contact-map {
  width: 100%;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.10);
}
.contact-map iframe {
  width: 100%; height: 100%;
  border: 0;
}

/* ==========================================================================
   RESPONSIVE for interior pages
   ========================================================================== */
@media (max-width: 1024px) {
  .vm-grid { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-grid { grid-template-columns: 1fr; max-width: 460px; margin: 40px auto 0; }
  .pro-team-grid { grid-template-columns: 1fr; }
  .news-layout { grid-template-columns: 1fr; }
  .news-layout__side { position: static; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; gap: 28px; }
  .news__grid--2col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pagebanner { padding: 48px 0 40px; }
  .pagebanner--media { padding: 72px 0 60px; }
  .content-section { padding: 36px 0; }
  .awards-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 40px 1fr; }
  .service-row > div:nth-child(3) { grid-column: 1 / -1; padding-left: 56px; font-size: 14px; }
  .service-row--head > div:nth-child(3) { display: none; }
  .position-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .timeline { padding-left: 28px; }
  .tl-item__marker { left: -28px; width: 14px; height: 14px; }
}

/* ===== Solution product-category matrix (A1) ===== */
.prod-matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:18px;margin-top:44px}
.prod-cat{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:16px 16px;box-shadow:0 10px 28px rgba(20,23,28,0.05)}
.prod-cat__title{font-size:15px;font-weight:700;color:var(--red);padding-bottom: 10px; margin:0 0 3px;text-align: center;border-bottom:1px solid var(--line-soft);}
.prod-cat__hint{font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.prod-cat__brands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 18px}
.prod-cat__brands li{font-size:14px;font-weight:500;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:5px 12px;white-space:nowrap}
@media (max-width:640px){.prod-matrix{grid-template-columns:1fr 1fr;gap:12px}.prod-cat{padding:16px 14px}}
.prod-cat__brands li.has-logo{background:none;border:none;padding:4px 8px;display:inline-flex;align-items:center;justify-content:center}
.prod-cat__brands li.has-logo img{height:56px;width:auto;max-width:100px;object-fit:contain;display:block}

/* ===== Curated "Our Partner" shortlist row below the matrix (brief p.25–29) ===== */
/* Lives in its own white .content-section (.prod-featured-section) below the pink matrix. */
.prod-featured{text-align:center}
.prod-featured .section-head{margin-bottom:30px}
.prod-featured .section-head h2{font-size:clamp(24px,2.6vw,34px)}
.prod-featured__logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 46px}
.prod-featured__logos li{display:inline-flex;align-items:center;justify-content:center}
.prod-featured__logos li.has-logo img{height:60px;width:auto;max-width:130px;object-fit:contain;display:block}
.prod-featured__logos li:not(.has-logo){font-size:15px;font-weight:600;color:var(--ink-2)}
@media (max-width:640px){.prod-featured__logos{gap:18px 30px}.prod-featured__logos li.has-logo img{height:36px}}

/* ===== Solution key-partner row (A2) — curated, centered ===== */
.partners__grid--key{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.partners__grid--key .p-logo{flex:0 1 180px;max-width:200px;height:104px}
@media (max-width:640px){.partners__grid--key .p-logo{flex:0 1 130px;height:88px}}

/* ===== Solution capabilities: check marker instead of numbers ===== */
.capabilities li { grid-template-columns: 30px 1fr; gap: 16px; }
.cap-check { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--red-soft); color: var(--red); margin-top: 1px; }
.cap-check svg { width: 15px; height: 15px; }
.cap-check::before { content: "\2713"; font-size: 14px; font-weight: 800; line-height: 1; }

/* ==========================================================================
   ABOUT — native-block (Gutenberg) rendering
   The About page body is built from core blocks (columns/group/heading/list/
   image). These rules make that output match the original design and override
   the core block-library defaults + .content-section descendant rules. They are
   targeted (.kicker.has-bar, .wp-block-columns.<class>, .vm-card .mission-*) so
   they don't affect other pages, and apply in the block editor too.
   ========================================================================== */

/* Kicker as a paragraph block: red bar via ::before (no child span needed).
   Re-assert colour/size so .content-section p doesn't override it. */
.content-section p.kicker,
.kicker.has-bar { color: var(--red); font-size: 12px; line-height: 1.4; margin: 0 0 6px; }
.kicker.has-bar::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: var(--red);
}

/* Overview 2-column grid (was .content-grid) */
.wp-block-columns.content-grid { gap: 64px; align-items: start; margin: 0; }
.wp-block-columns.content-grid h2 { margin-top: 0; }

/* Vision / Mission 2-column grid */
.wp-block-columns.vm-grid { gap: 32px; align-items: stretch; margin: 0; }
.wp-block-columns.vm-grid > .wp-block-column { display: flex; }
.wp-block-columns.vm-grid .vm-card { width: 100%; }
/* Mission points (label + text), replacing the old .mission-list <li> */
.vm-card .mission-point { border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 16px; }
.vm-card .mission-list__label { display: block; font-weight: 700; color: var(--red); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 4px; }
.vm-card .mission-list__text { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.75; margin: 0; }

/* Awards hero + cert images as core/image figures */
.wp-block-image.awards-hero { margin: 16px auto 8px; }
.wp-block-image.cert-badges { margin: 0 auto; }
.wp-block-image.cert-badges--iso { margin-top: 30px; }
.wp-block-image.awards-hero img,
.wp-block-image.cert-badges img { width: 100%; height: auto; display: block; }

/* Award rows as core/columns (logo column 180px + chip list) */
.wp-block-columns.award-row {
  align-items: center;
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 28px;
}
.wp-block-columns.award-row .award-row__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  flex-grow: 0;
}
.wp-block-columns.award-row .award-row__brand .wp-block-image { margin: 0; }
.wp-block-columns.award-row .award-row__brand img { max-height: 42px; max-width: 150px; width: auto; object-fit: contain; }
.wp-block-columns.award-row .award-row__list { margin: 0; }

/* ==========================================================================
   HISTORY — native-block timeline
   The timeline is core/group .timeline > core/group .tl-item blocks. The marker
   dot (was a .tl-item__marker div) is drawn as .tl-item::before. .tl-item__year
   is a paragraph block, so re-assert its style over .content-section p.
   ========================================================================== */
.tl-item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 8px;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 3px solid var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(200,16,46,0.10);
}
.content-section .tl-item__year { color: var(--red); font-size: 14px; line-height: 1.4; letter-spacing: 0.08em; margin: 0 0 4px; }
.content-section .tl-item__title { margin: 0 0 8px; }
/* Group blocks add default vertical spacing between siblings; the timeline
   controls its own rhythm via .tl-item padding-bottom. */
.timeline.wp-block-group > * { margin-block: 0; }

/* ==========================================================================
   SUSTAINABILITY — native-block stat cards
   .scope-grid is core/columns of core/group .scope-card; the number/title/sub
   are paragraph blocks, so re-assert their style over .content-section p, and
   restore the per-card green shades (the old :nth-child targeted .scope-card
   directly; now the columns wrap them).
   ========================================================================== */
.wp-block-columns.scope-grid { gap: 16px; margin-top: 40px; align-items: stretch; }
.wp-block-columns.scope-grid > .wp-block-column { display: flex; }
.wp-block-columns.scope-grid .scope-card { width: 100%; }
.wp-block-columns.scope-grid > .wp-block-column:nth-child(2) .scope-card { border-top-color: #047C5B; }
.wp-block-columns.scope-grid > .wp-block-column:nth-child(3) .scope-card { border-top-color: #015B47; }
.content-section .scope-card__num { font-size: 56px; font-weight: 800; color: #018E6F; letter-spacing: -0.03em; line-height: 1; margin: 0 0 14px; }
.content-section .scope-card__num span { font-size: 0.5em; color: var(--red); margin-left: 2px; }
.content-section .scope-card__title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.content-section .scope-card__sub { font-size: 14px; color: var(--ink-3); line-height: 1.6; margin: 0; }

/* ==========================================================================
   CAREERS — native-block benefits + culture photo
   The 6 benefit cards are two core/columns .benefits-row (3 each) instead of
   the old .benefits-grid (a group can't host a direct-child CSS grid). The
   culture photo is a core/image .careers-photo.
   ========================================================================== */
.wp-block-columns.benefits-row { gap: 16px; align-items: stretch; margin: 0 0 16px; }
.wp-block-columns.benefits-row:last-of-type { margin-bottom: 0; }
.wp-block-columns.benefits-row > .wp-block-column { display: flex; }
.wp-block-columns.benefits-row .benefit-card { width: 100%; }
.wp-block-image.careers-photo { margin: 0; }

/* ==========================================================================
   HOMEPAGE — native-block rendering
   The homepage body is editable Page content (blocks + shortcodes). The custom
   2-col bands (hero / why / team) are core/columns carrying the original class
   names; these rules restore the grid gaps/widths and the Why band's pattern
   overlay (was a .why__pattern div → now .why::before).
   ========================================================================== */
.wp-block-columns.hero__inner { gap: 64px; align-items: center; margin: 0; }
.hero__copy .kicker.has-bar { font-size: 16px; font-weight: 500; }
.hero__media .wp-block-image { margin: 0; }
.hero__media .wp-block-image img { width: 100%; height: clamp(320px, 36vw, 480px); object-fit: cover; border-radius: 40px; }

.why { overflow: hidden; }
.why::before { content: ""; position: absolute; inset: 0; background: url('assets/img/digital-bg.png') center / cover no-repeat; opacity: 0.4; pointer-events: none; }
.wp-block-columns.why__inner { gap: 80px; align-items: center; position: relative; z-index: 1; margin: 0; }
.kicker--light.has-bar { color: #fff; }
.kicker--light.has-bar::before { background: #fff; }

/* Team photo fills its column height (covers, no gap) on desktop; keeps the
   4/5 ratio when the columns stack on mobile. */
.wp-block-columns.team__inner { gap: 50px; align-items: stretch; margin: 0; }
.team__photo .wp-block-image { width: 100%; height: 100%; margin: 0; }
.team__photo .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 781px) {
  .team__photo .wp-block-image, .team__photo .wp-block-image img { height: auto; }
  .team__photo .wp-block-image img { aspect-ratio: 4 / 5; }
  .wp-block-columns.hero__inner { gap: 34px; padding-bottom: 10px; }
  .wp-block-columns.why__inner { gap: 34px; padding-bottom: 10px; }
  .wp-block-columns.team__inner { gap: 34px; padding-bottom: 10px; }
  .wp-block-columns.content-grid { gap: 14px;  }
  .content-section.nopad { padding: 30px 0 0;}
}

/* CTA: copy (left) + buttons (right) as columns, not a stacked group */
.wp-block-columns.cta__inner { gap: 24px; margin: 0; }
.wp-block-columns.cta__inner > .wp-block-column { margin: 0; }

/* =====================================================================
 * ABOUT — Overview balance + impactful Vision / Mission (2026-06-09)
 * Scoped to the About template so other pages' .content-grid are untouched.
 * ===================================================================== */

/* Overview: text rows vertically centred (no empty gap under the heading),
   and the photo turned into a tall feature panel that fills its column. */
.page-template-template-about-php .content-grid:not(:has(img)) { align-items: center !important; }
.page-template-template-about-php .content-grid:has(img) { align-items: stretch !important; }
.page-template-template-about-php .content-grid:has(img) > .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-template-template-about-php .content-grid .wp-block-image,
.page-template-template-about-php .content-grid figure { margin: 0; height: 100%; }
.page-template-template-about-php .content-grid img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(20,23,28,0.12);
  display: block;
}

/* Vision / Mission cards equal height, rounder, with header icons */
.wp-block-columns.vm-grid { align-items: stretch; }
.vm-card {
  border-radius: 18px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.vm-card--vision, .vm-card--mission { display: flex; flex-direction: column; }

/* Header icon chip (sits above the kicker) */
.vm-card--vision::before, .vm-card--mission::before {
  content: "";
  display: block;
  width: 54px; height: 54px;
  border-radius: 15px;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 27px;
}

/* VISION — bold red statement card, white text */
.vm-card--vision {
  background: linear-gradient(150deg, #C8102E 0%, #8E0B20 100%);
  border: none;
  color: #fff;
  isolation: isolate;
}
/* keep the text + icon above the pattern overlay */
.vm-card--vision > *,
.vm-card--vision::before { position: relative; z-index: 1; }
.vm-card--vision::before {
  background-color: rgba(255,255,255,0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}
.vm-card--vision .kicker { color: #fff; }
.vm-card--vision .kicker.has-bar::before,
.vm-card--vision .kicker__bar { background: #fff; }
.vm-card--vision h3 { color: #fff; font-size: 25px; line-height: 1.4; }
.vm-card--vision p { color: rgba(255,255,255,0.92); font-size: 15px; }
/* digital circuit pattern overlay — same texture as the home "Why NetONE" band */
.vm-card--vision::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/img/digital-bg.png') bottom right / cover no-repeat;
  opacity: 0.4;
}

/* MISSION — clean card, red accents, icon per pillar */
.vm-card--mission {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
}
.vm-card--mission::before {
  background-color: var(--red-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h12l-2.2 4L17 12H5'/%3E%3C/svg%3E");
}
.vm-card--mission .mission-point {
  position: relative;
  padding-left: 38px;
}
.vm-card--mission .mission-point::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 25px; height: 25px;
  border-radius: 7px;
  background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2.6'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") no-repeat center / 13px;
}

/* Vision kicker text must stay white over the red card (beat .content-section p) */
.page-template-template-about-php .vm-card--vision .kicker,
.page-template-template-about-php .vm-card--vision .kicker * { color: #fff !important; }

/* About overview — single two-column: title+lead+photo (left) | company text (right) */
.wp-block-columns.about-overview { gap: clamp(36px, 4vw, 64px); align-items: start; margin: 0; }
.about-overview h2 { margin-top: 14px; }
.about-overview .wp-block-image { margin: 28px 0 0; }
.about-overview .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(20,23,28,0.12);
  display: block;
}
@media (max-width: 860px) {
  .wp-block-columns.about-overview { gap: 28px; }
}

/* About — certification badge images on one row (desktop) */
@media (min-width: 861px) {
  .awards-certs .wp-block-group__inner-container,
  .awards-certs .wrap { text-align: center; }
  .awards-certs .wp-block-image.cert-badges {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 18px 20px 0;
  }
  .awards-certs .wp-block-image.cert-badges--iso { margin-top: 18px; }
  .awards-certs .wp-block-image.cert-badges img { width: auto; max-width: 100%; }
}

/* =====================================================================
 * CONTACT — compact: info + form side by side, maps side by side (2026-06-10)
 * ===================================================================== */
.contact-top { margin-top: 0;padding-top: 0; padding-bottom: 64px; }
.contact-form-section { padding-top: 60px; padding-bottom: 72px; }

.contact-address {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto 36px;
  text-align: left;
}
.contact-company { font-size: 19px; font-weight: 700; margin: 2px 0 6px; color: var(--ink); }
.contact-address p { color: var(--ink-3); line-height: 1.65; font-size: 14px; margin: 0; }

/* Left column: heading + two stacked detail boxes */
.contact-info h2 { margin-bottom: 10px; }
.contact-info .section-lead { margin: 0 0 22px; }
.contact-info .contact-col + .contact-col { margin-top: 16px; }
.contact-col {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 22px 4px;
  box-shadow: 0 10px 28px rgba(20,23,28,0.04);
}
.contact-col__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.contact-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-col .contact-line:last-child { border-bottom: 0; }
.contact-line__ic {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--red-soft);
  color: var(--red);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.contact-line__ic svg { width: 14px; height: 14px; }
.contact-line > div { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.contact-line strong { color: var(--ink); font-weight: 700; }
.contact-line a { color: var(--ink-2); }
.contact-line a:hover { color: var(--red); }
.contact-line .contact-muted { color: var(--ink-3); font-size: 12.5px; }

/* Maps: directions graphic + live map, side by side; image keeps its
   natural aspect (no white letterbox), live map matches its height. */
.contact-map-section { padding-top: 60px; padding-bottom: 60px; }
.contact-map-head { margin-bottom: 26px; }
.contact-maps {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
  align-items: start;
}
.contact-directions-wrap {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20,23,28,0.06);
  line-height: 0;
}
.contact-directions {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;        /* natural height — no white band */
}
.contact-maps .contact-map {
  height: 0;
  min-height: 0;
  padding-bottom: 64%;   /* ≈ image height within its narrower column so heights align */
  position: relative;
}
.contact-maps .contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 860px) {
  .contact-maps { grid-template-columns: 1fr; }
  .contact-maps .contact-map { padding-bottom: 0; height: 320px; }
}