/* ═══════════════════════════════════════════════════════════════
   robocon-styles.css  v3  —  upload to /files/robocon-styles.css
   Load in every page HEAD.html:
     <link rel="stylesheet" href="/files/robocon-styles.css">
   Leave every Web Page "Style" field EMPTY.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────*/
:root {
  /* Brand colours */
  --blue:        #0a3d6b;
  --blue-mid:    #0e5494;
  --blue-light:  #1565a8;
  --orange:      #e85d04;
  --orange-dk:   #c44d02;
  --yellow-se:   #FECC02;   /* Sweden accent — hero h1 span */
  --gold:        #f4a61d;   /* USA accent    — hero h1 span */

  /* Surfaces */
  --bg-light:    #f4f7fb;
  --bg-mid:      #e8eef6;
  --white:       #ffffff;

  /* Text */
  --tx-dark:     #12192b;
  --tx-mid:      #374151;
  --tx-lt:       #6b7280;

  /* UI */
  --border:      #dce5f0;
  --sh-sm:       0 1px 4px rgba(10,61,107,.07), 0 4px 12px rgba(10,61,107,.06);
  --sh-md:       0 4px 16px rgba(10,61,107,.10), 0 8px 28px rgba(10,61,107,.08);
  --sh-lg:       0 12px 40px rgba(10,61,107,.16), 0 4px 12px rgba(10,61,107,.08);
  --sh-hover:    0 8px 32px rgba(10,61,107,.16), 0 2px 8px rgba(10,61,107,.10);
  --r:           12px;
  --r-sm:        8px;

  /* Typography */
  --fd:  'Barlow Condensed', sans-serif;
  --fb:  'Source Serif 4', Georgia, serif;

  /* Transitions */
  --tx-fast:   .15s ease;
  --tx-mid-t:  .25s ease;
  --tx-slow:   .4s ease;
}

/* ── 2. RESET ─────────────────────────────────────────────────*/
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  { font-family: var(--fb); color: var(--tx-dark); background: var(--white);
        line-height: 1.7; -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: var(--blue); text-decoration: none;
        transition: color var(--tx-fast); }
a:hover { color: var(--orange); }

/* ── 3. ERPNEXT WRAPPER OVERRIDES ─────────────────────────────
   Removes the gap ERPNext injects above the hero, removes any
   border that ERPNext's website bundle adds to article/content
   wrappers, and resets Bootstrap container padding so full-width
   sections go true edge-to-edge.
───────────────────────────────────────────────────────────────*/
.page-header-wrapper              { margin: 0 !important; padding: 0 !important; }
.page-header                      { display: none !important; }
.page-footer                      { margin: 0 !important; padding: 0 !important; }
.page_content                     { margin-top: 0 !important; padding-top: 0 !important; }
.web-page-content,
.webpage-content                  { margin-top: 0 !important; padding-top: 0 !important;
                                    border: none !important; outline: none !important;
                                    box-shadow: none !important; }
article.web-page-content          { border: none !important; outline: none !important; }
main.container,
.page-content-wrapper > .container {
  padding-left:  0 !important;
  padding-right: 0 !important;
  max-width:     100% !important;
  width:         100% !important;
}

/* ── 4. TYPOGRAPHY ────────────────────────────────────────────*/
h1,h2,h3,h4 {
  font-family: var(--fd);
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--blue);
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3vw, 2.3rem);  font-weight: 700; margin-bottom: .4rem; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--tx-dark); }
h4 { font-size: 1.05rem; font-weight: 600; color: var(--blue); }

p  { font-size: 1rem; color: var(--tx-mid); margin-bottom: 1rem; line-height: 1.75; }
p:last-child { margin-bottom: 0; }

strong { color: var(--tx-dark); }

ul.bul { list-style: none; padding: 0; }
ul.bul li {
  position: relative; padding-left: 1.6rem;
  margin-bottom: .55rem; color: var(--tx-mid); font-size: .97rem; line-height: 1.6;
}
ul.bul li::before {
  content: "▸"; position: absolute; left: 0;
  color: var(--orange); font-size: .8rem; top: .22rem; font-weight: 700;
}

/* ── 5. LAYOUT ────────────────────────────────────────────────*/
.wrap    { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sec     { padding: 80px 0; }
.sec--alt { background: var(--bg-light); }
.sec--dk  { background: linear-gradient(160deg, #0a3d6b 0%, #0d4a80 100%); }
.sec--dk h2, .sec--dk h3 { color: var(--white); }
.sec--dk p { color: rgba(255,255,255,.80); }

.grid-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.grid-2--rev     { direction: rtl; }
.grid-2--rev > * { direction: ltr; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }

.sec-hd   { text-align: center; margin-bottom: 52px; }
.sec-hd p { max-width: 680px; margin: 14px auto 0; font-size: 1.05rem; color: var(--tx-mid); }

.bar    { width: 48px; height: 3px; background: var(--orange);
          margin: 12px auto 0; border-radius: 2px; }
.bar--l { margin-left: 0; }

/* ── 6. HERO ──────────────────────────────────────────────────*/
.hero {
  background: linear-gradient(135deg, #07305a 0%, #0c4680 50%, #0d5499 100%);
  padding: 88px 24px 80px;
  position: relative;
  overflow: hidden;
}
/* Subtle dot texture */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Glowing orb behind slider */
.hero::after {
  content: ''; position: absolute;
  top: -120px; right: -80px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  pointer-events: none;
}

.hero-in {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
  position: relative; z-index: 1;
}

/* H1 */
.hero-in h1 {
  color: var(--white);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.hero-in h1 span { color: var(--yellow-se); }  /* Sweden — yellow */

/* Hero body text */
.hero-txt p {
  color: rgba(255,255,255,.82) !important;
  font-size: 1.05rem;
  margin-bottom: 0;
  line-height: 1.7;
}

/* Badge pills */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.badge  {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
  padding: 5px 13px; border-radius: 30px;
  font-size: .83rem; font-family: var(--fd);
  font-weight: 600; letter-spacing: .04em;
  backdrop-filter: blur(4px);
}

/* Slider column */
.hero-img {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.18);
}
.hero-img img { width: 100%; object-fit: cover; }

/* ── 7. STAT BAR ──────────────────────────────────────────────*/
.statbar {
  background: linear-gradient(90deg, #e05300 0%, var(--orange) 50%, #e86510 100%);
  padding: 24px 24px;
}
.statbar-in {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; text-align: center;
}
.stat { border-right: 1px solid rgba(255,255,255,.25); padding: 0 12px; }
.stat:last-child { border-right: none; }
.stat-n {
  font-family: var(--fd); font-size: 2.2rem;
  font-weight: 800; color: var(--white); line-height: 1;
  letter-spacing: -.01em;
}
.stat-l {
  font-size: .75rem; color: rgba(255,255,255,.85);
  margin-top: 5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}

/* ── 8. TRUST BAR ─────────────────────────────────────────────*/
.trustbar {
  background: var(--bg-mid);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  text-align: center;
}
.trust-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 32px; }
.trust-item  {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--fd); font-weight: 600;
  font-size: .88rem; color: var(--blue); letter-spacing: .03em;
}
.trust-item i { color: var(--orange); font-size: 1rem; }

/* ── 9. BUTTONS ───────────────────────────────────────────────*/
.btn-se {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 34px;
  background: var(--orange);
  color: var(--white) !important;
  font-family: var(--fd); font-weight: 700; font-size: 1rem;
  letter-spacing: .07em; text-transform: uppercase;
  border-radius: 6px; border: 2px solid var(--orange);
  cursor: pointer;
  transition: background var(--tx-fast), transform var(--tx-fast), box-shadow var(--tx-fast);
  text-decoration: none; white-space: nowrap;
}
.btn-se:hover {
  background: var(--orange-dk); border-color: var(--orange-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(232,93,4,.38);
  color: var(--white) !important;
}
.btn-se:active { transform: translateY(0); }

.btn-se.btn-ol {
  background: transparent !important; color: var(--blue) !important;
  border-color: var(--blue) !important;
}
.btn-se.btn-ol:hover {
  background: var(--blue) !important; color: var(--white) !important;
  box-shadow: 0 6px 20px rgba(10,61,107,.25);
}
.btn-se.btn-wh {
  background: var(--white) !important; color: var(--orange) !important;
  border-color: var(--white) !important;
}
.btn-se.btn-wh:hover {
  background: rgba(255,255,255,.92) !important;
  color: var(--orange-dk) !important;
  box-shadow: 0 6px 20px rgba(255,255,255,.25);
}

/* ── 10. CARDS ────────────────────────────────────────────────*/
.card-se {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 30px 26px;
  box-shadow: var(--sh-sm);
  transition: transform var(--tx-mid-t), box-shadow var(--tx-mid-t);
}
.card-se:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-hover);
}

/* Dark card (used in .sec--dk section) */
.card-dk {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(8px);
}
.card-dk:hover {
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-4px);
}
.card-dk h3  { color: var(--white) !important; margin-bottom: 10px; }
.card-dk p   { color: rgba(255,255,255,.75) !important; }

/* Card icon */
.c-icon {
  width: 50px; height: 50px;
  background: var(--bg-light);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; font-size: 1.45rem;
}
.card-se h3 { margin-bottom: 10px; font-size: 1.15rem; }
.card-se p  { font-size: .93rem; color: var(--tx-mid); }

/* Industry cards */
.ind-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px 22px;
  box-shadow: var(--sh-sm);
  transition: all var(--tx-mid-t);
  border-top: 3px solid var(--border);
  position: relative;
  overflow: hidden;
}
.ind-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  transition: opacity var(--tx-mid-t);
}
.ind-card:hover {
  border-top-color: transparent;
  transform: translateY(-4px);
  box-shadow: var(--sh-hover);
}
.ind-card:hover::before {
  background: linear-gradient(90deg, var(--orange), var(--orange-dk));
}
.ind-card h3 { font-size: 1.08rem; margin-bottom: 10px; color: var(--blue); }
.ind-card p  { font-size: .9rem; color: var(--tx-mid); }

/* ── 11. GLIDE SLIDER ─────────────────────────────────────────*/
.glide, .glide-se {
  width: 100%; border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.14);
}
.glide__slide img  {
  width: 100%; height: 380px;
  object-fit: cover; display: block;
}
.glide__bullets    { bottom: 14px; }
.glide__bullet     {
  background: rgba(255,255,255,.45);
  width: 9px; height: 9px;
  border-radius: 50%; border: none;
  transition: background var(--tx-fast), transform var(--tx-fast);
}
.glide__bullet:hover       { background: rgba(255,255,255,.75); }
.glide__bullet--active     {
  background: var(--orange);
  transform: scale(1.3);
}

/* ── 12. SECTOR GRID ──────────────────────────────────────────*/
.sector-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 24px; list-style: none; padding: 0; margin: 0;
}
.sec-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--tx-mid-t), box-shadow var(--tx-mid-t);
}
.sec-card:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); }
.sec-card img   { width: 100%; height: 195px; object-fit: cover; display: block; }
.sec-card figcaption        { padding: 18px 20px 22px; }
.sec-card figcaption strong {
  display: block; font-family: var(--fd);
  font-size: 1.05rem; font-weight: 700;
  color: var(--blue); margin-bottom: 8px;
}
.sec-card figcaption p { font-size: .88rem; margin: 0; color: var(--tx-mid); }

/* ── 13. MATERIALS ────────────────────────────────────────────*/
.mat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.mat-pill {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 16px 18px;
  font-family: var(--fd); font-weight: 600;
  font-size: .95rem; color: var(--blue);
  text-align: center; box-shadow: var(--sh-sm);
  transition: transform var(--tx-fast), box-shadow var(--tx-fast), border-color var(--tx-fast);
}
.mat-pill:hover {
  border-color: var(--blue-light);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.mat-pill span {
  display: block; font-family: var(--fb);
  font-weight: 400; font-size: .78rem;
  color: var(--tx-lt); margin-top: 3px;
}

/* ── 14. COMPARISON TABLE ─────────────────────────────────────*/
.tbl-se {
  width: 100%; border-collapse: collapse;
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-md);
}
.tbl-se thead           { background: linear-gradient(90deg, #0a3d6b, #0e5494); }
.tbl-se th              {
  padding: 15px 18px; text-align: left;
  font-family: var(--fd); font-size: 1rem;
  font-weight: 700; letter-spacing: .05em; color: var(--white);
}
.tbl-se td              {
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  font-size: .93rem; color: var(--tx-mid);
}
.tbl-se tr:nth-child(even) td { background: var(--bg-light); }
.tbl-se tr:last-child td      { border-bottom: none; }
.tbl-se tr:hover td           { background: #eef3fb; }
.hi { color: var(--orange); font-weight: 700; }

/* ── 15. CASE CARDS ───────────────────────────────────────────*/
.case-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 28px 24px;
  box-shadow: var(--sh-sm);
  border-left: 4px solid var(--orange);
  transition: transform var(--tx-mid-t), box-shadow var(--tx-mid-t);
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.case-card h3   { margin-bottom: 12px; font-size: 1.08rem; color: var(--blue); }
.case-meta      {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 16px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.cm             { font-size: .85rem; color: var(--tx-mid); }
.cm strong      {
  display: block; font-family: var(--fd);
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--blue);
  margin-bottom: 2px; font-weight: 700;
}

/* ── 16. FAQ ──────────────────────────────────────────────────*/
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 20px 0; font-family: var(--fd); font-size: 1.08rem;
  font-weight: 600; color: var(--blue); cursor: pointer;
  display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
  transition: color var(--tx-fast);
}
.faq-q:hover { color: var(--orange); }
.faq-ic {
  font-size: 1.25rem; flex-shrink: 0;
  transition: transform var(--tx-mid-t), color var(--tx-fast);
  color: var(--orange); font-weight: 300; line-height: 1;
}
.faq-a      { max-height: 0; overflow: hidden; transition: max-height var(--tx-slow); }
.faq-a p    { padding-bottom: 20px; font-size: .96rem; color: var(--tx-mid); }
.faq-item.open .faq-ic { transform: rotate(45deg); }
.faq-item.open .faq-a  { max-height: 600px; }

/* ── 17. CTA BANNER ───────────────────────────────────────────*/
.cta-ban {
  background: linear-gradient(135deg, #d45200 0%, var(--orange) 45%, #e87010 100%);
  padding: 70px 24px;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-ban::before {
  content: ''; position: absolute;
  top: -60%; left: -30%; width: 160%; height: 220%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.07) 0%, transparent 65%);
  pointer-events: none;
}
.cta-ban h2 {
  color: var(--white); position: relative;
  font-size: clamp(1.9rem,3.5vw,2.6rem); margin-bottom: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.cta-ban p  {
  color: rgba(255,255,255,.88); font-size: 1.08rem;
  margin-bottom: 30px; position: relative;
}

/* ── 18. PILLS ────────────────────────────────────────────────*/
.pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.pill  {
  display: inline-block; padding: 8px 20px;
  border: 1.5px solid var(--blue);
  border-radius: 30px; font-family: var(--fd);
  font-weight: 600; font-size: .88rem;
  color: var(--blue); letter-spacing: .04em;
  transition: all var(--tx-fast);
  text-decoration: none;
}
.pill:hover { background: var(--blue); color: var(--white); transform: translateY(-1px); }

/* ── 19. BREADCRUMB ───────────────────────────────────────────*/
.bc       { padding: 12px 0; font-size: .84rem; color: var(--tx-lt); }
.bc a     { color: var(--tx-lt); transition: color var(--tx-fast); }
.bc a:hover { color: var(--orange); }
.bc span  { margin: 0 6px; opacity: .6; }

/* ── 20. STEP CIRCLES ─────────────────────────────────────────*/
.step-num {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-family: var(--fd);
  font-size: 1.6rem; font-weight: 800; color: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

/* ── 21. SCROLL FADE-IN ───────────────────────────────────────*/
.fade-in         { opacity: 0; transform: translateY(20px);
                   transition: opacity .55s ease, transform .55s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── 22. IMAGES (section images) ──────────────────────────────*/
.img-rounded { border-radius: var(--r); box-shadow: var(--sh-md); }

/* ── 23. HOME PAGE EXTRAS ─────────────────────────────────────*/
.hero-section {
  background: linear-gradient(135deg, #07305a 0%, #0c4680 50%, #0d5499 100%);
  padding: 70px 24px 56px; text-align: center; color: var(--white);
}
.hero-section h1 { color: var(--white); font-size: clamp(1.9rem,4vw,2.9rem); margin-bottom: 16px; }
.hero-section p  { color: rgba(255,255,255,.82); font-size: 1.08rem; }
.card-container  {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; align-items: start;
  max-width: 1180px; margin: 0 auto; padding: 48px 24px;
}
.box       { padding: 20px; }
.box.img img { border-radius: var(--r); box-shadow: var(--sh-md); }
.image-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 26px;
  box-shadow: var(--sh-sm);
  transition: transform var(--tx-mid-t), box-shadow var(--tx-mid-t);
}
.image-card:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.image-card h3    { margin-bottom: 10px; }
.image-card p     { font-size: .93rem; }
.image-card img   { width: 100%; border-radius: var(--r-sm); margin-bottom: 14px; }
.image-card figcaption strong {
  display: block; font-family: var(--fd); font-size: 1rem;
  font-weight: 700; color: var(--blue); margin-bottom: 6px;
}
.emerging-section,
.sectors-section { max-width: 1180px; margin: 0 auto; padding: 56px 24px; }
.emerging-section h2, .sectors-section h2 { margin-bottom: 32px; text-align: center; }
.sectors-list {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 24px; list-style: none; padding: 0; margin: 0;
}
.material-container {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 18px; max-width: 1180px; margin: 0 auto; padding: 0 24px 48px;
}
.material-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px; box-shadow: var(--sh-sm);
  font-size: .93rem; color: var(--tx-mid);
}
.single-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.cnc-info { max-width: 1180px; margin: 0 auto; padding: 48px 24px; }
.info-card {
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: var(--r); padding: 26px; margin-bottom: 20px;
}
.info-card h3 { margin-bottom: 12px; }
.contact-section { background: var(--bg-light); padding: 48px 0; }
.cta { text-align: center; margin: 32px 0; }

/* ── 24. RESPONSIVE ───────────────────────────────────────────*/
@media (max-width: 1024px) {
  .grid-4, .sector-grid,
  .sectors-list,
  .material-container { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .sec     { padding: 56px 0; }
  .grid-2, .hero-in { grid-template-columns: 1fr; gap: 36px; }
  .grid-2--rev { direction: ltr; }
  .grid-3  { grid-template-columns: 1fr; }
  .grid-4  { grid-template-columns: 1fr 1fr; }
  .sector-grid, .sectors-list { grid-template-columns: 1fr; }
  .mat-grid { grid-template-columns: repeat(2,1fr); }
  .material-container { grid-template-columns: 1fr; }
  .statbar-in { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2) { border-right: none; }
  .glide__slide img { height: 260px; }
  .hero, .hero-section { padding: 52px 20px 48px; }
  .case-meta { grid-template-columns: 1fr; }
  .card-container { grid-template-columns: 1fr; }
  .sec-hd { margin-bottom: 36px; }
}

@media (max-width: 480px) {
  .grid-4  { grid-template-columns: 1fr; }
  .mat-grid { grid-template-columns: 1fr 1fr; }
  .badges  { gap: 6px; }
  .badge   { font-size: .78rem; padding: 4px 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — additional classes integrated from home CSS
   All home-specific additions below; global tokens/layout above.
   ═══════════════════════════════════════════════════════════════ */

/* .btn alias — home page uses class="btn-se" after cleanup
   Keep .btn as safety alias in case of any missed instances    */
.btn { display:inline-flex;align-items:center;justify-content:center;padding:14px 34px;background:var(--orange);color:var(--white)!important;font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:.07em;text-transform:uppercase;border-radius:6px;border:2px solid var(--orange);cursor:pointer;transition:background var(--tx-fast),transform var(--tx-fast),box-shadow var(--tx-fast);text-decoration:none;white-space:nowrap; }
.btn:hover { background:var(--orange-dk);border-color:var(--orange-dk);transform:translateY(-2px);box-shadow:0 8px 28px rgba(232,93,4,.38);color:var(--white)!important; }
.btn-hero { font-size:1.1rem!important; padding:16px 36px!important; box-shadow:0 6px 24px rgba(232,93,4,.30); }

/* No-highlight links */
.no-highlight-link { color: inherit; text-decoration: none; }
.no-highlight-link:hover { color: var(--orange); }

/* ── HERO SECTION (home page) ─────────────────────────────────*/
.hero-section {
  background: linear-gradient(135deg, #07305a 0%, #0c4680 50%, #0d5499 100%);
  padding: 72px 24px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-section h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 16px;
  position: relative;
}
.hero-lead {
  color: rgba(255,255,255,.85) !important;
  font-size: 1.12rem !important;
  max-width: 680px;
  margin: 0 auto 4px !important;
  line-height: 1.7;
  position: relative;
}
.hero-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin: 20px 0 28px;
  position: relative;
}
.hero-checks span {
  font-family: var(--fd);
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  letter-spacing: .03em;
}

/* ── CARD CONTAINER (home two-col layout) ─────────────────────*/
.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px;
}
.box { padding: 16px; }
.box.img img { border-radius: var(--r); box-shadow: var(--sh-md); width: 100%; }

/* ── WHY CLIENTS SECTION ──────────────────────────────────────*/
.sec-why-home {
  padding: 48px 24px;
  background: var(--white);
  text-align: center;
}
.sec-why-home .sec-hd { margin-bottom: 28px; }


/* ── SERVICES SECTION ─────────────────────────────────────────*/
.sec-services-home {
  padding: 60px 24px;
}
.sec-services-home .sec-hd { margin-bottom: 36px; }
.sec-services-home .grid-3 { max-width: 1180px; margin: 0 auto; }
.sec-services-home .image-card {
  display: flex;
  flex-direction: column;
}
.sec-services-home .image-card .btn-se {
  margin-top: auto;
  align-self: flex-start;
}

/* ── IMAGE CARDS (emerging sectors / services / industries) ───*/
.image-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--sh-sm);
  transition: transform var(--tx-mid-t), box-shadow var(--tx-mid-t);
}
.image-card:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.image-card h3 { margin-bottom: 10px; font-size: 1.1rem; }
.image-card p  { font-size: .93rem; color: var(--tx-mid); }
.image-card img { width: 100%; border-radius: var(--r-sm); margin-bottom: 16px; object-fit: cover; }
.image-card figure img { margin-bottom: 0; }
.image-card figcaption { padding-top: 14px; }
.image-card figcaption strong {
  display: block; font-family: var(--fd); font-size: 1.02rem;
  font-weight: 700; color: var(--blue); margin-bottom: 8px;
}
.image-card figcaption p { font-size: .88rem; margin: 0; }

/* ── EMERGING SECTION ─────────────────────────────────────────*/
.emerging-section {
  background: var(--bg-light);
  padding: 64px 24px;
}
.emerging-section .sec-hd { margin-bottom: 36px; }

/* ── SECTORS LIST & SECTION ───────────────────────────────────*/
.sectors-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  padding: 0; margin: 0;
}
.sectors-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px;
}
.sectors-section .sec-hd { margin-bottom: 36px; }

/* ── MATERIAL CONTAINER ───────────────────────────────────────*/
.material-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 56px;
}
.material-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--sh-sm);
  font-size: .93rem;
  color: var(--tx-mid);
  transition: transform var(--tx-mid-t), box-shadow var(--tx-mid-t);
}
.material-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.material-card p { margin: 0; }
.material-card strong { color: var(--blue); }

/* ── SINGLE CONTAINER ─────────────────────────────────────────*/
.single-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── CNC INFO SECTION ─────────────────────────────────────────*/
.cnc-info {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px;
}
.cnc-info .card-container {
  padding: 0 0 28px;
}

/* ── INFO CARDS ───────────────────────────────────────────────*/
.info-card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 28px;
  margin-bottom: 22px;
}
.info-card h3 { margin-bottom: 14px; color: var(--blue); }
.info-card ul { margin: 10px 0; }
.info-card li { font-size: .93rem; }

/* ── CONTACT SECTION ──────────────────────────────────────────*/
.contact-section {
  background: var(--bg-light);
  padding: 64px 0;
}
.contact-section .card-container { padding: 0 24px; }

/* ── CTA ──────────────────────────────────────────────────────*/
.cta { text-align: center; padding: 48px 24px; }

/* ── INLINE CONTENT SECTION ───────────────────────────────────*/
.sec-inline-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 0;
}

/* ── HOME FAQ — plain headings style (h3 as question) ─────────*/
.web-page-content h3 + p,
.webpage-content  h3 + p { margin-bottom: 20px; }

/* ── RESPONSIVE HOME ──────────────────────────────────────────*/
@media (max-width: 1024px) {
  .sectors-list, .material-container { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .card-container    { grid-template-columns: 1fr; gap: 24px; padding: 36px 20px; }
  .sectors-list      { grid-template-columns: 1fr; }
  .material-container { grid-template-columns: 1fr; }
  .hero-section      { padding: 52px 20px 44px; }
  .sec-why-home,
  .sec-services-home,
  .emerging-section,
  .sectors-section,
  .contact-section   { padding: 48px 20px; }
  .cnc-info          { padding: 40px 20px; }
}
@media (max-width: 480px) {
  .sectors-list      { grid-template-columns: 1fr; }
  .hero-checks       { gap: 8px 12px; }
}


/* ===== PREMIUM SEO & UI ENHANCEMENTS ===== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --fb:'Inter',sans-serif;
}

body{
  font-family:var(--fb);
  font-size:16.5px;
  letter-spacing:.01em;
}

.hero-section{
  position:relative;
  overflow:hidden;
  background:
  radial-gradient(circle at top right,
  rgba(255,255,255,0.08),
  transparent 35%),
  linear-gradient(135deg,#041c34 0%,#0a3d6b 45%,#0d5499 100%);
}

.hero-overlay{
  position:absolute;
  inset:0;
  backdrop-filter: blur(2px);
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:1000px;
  margin:auto;
}

.hero-section h1 span{
  display:block;
  color:#FECC02;
  margin-top:10px;
}

.premium-badge{
  display:inline-block;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  padding:10px 18px;
  border-radius:40px;
  color:#fff;
  font-size:.85rem;
  margin-bottom:22px;
  backdrop-filter:blur(10px);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:30px;
}

.trust-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
padding:30px;
background:#fff;
box-shadow:0 10px 40px rgba(0,0,0,.06);
border-radius:20px;
max-width:1100px;
margin:-40px auto 60px;
position:relative;
z-index:5;
}

.trust-item{
text-align:center;
font-family:var(--fd);
font-weight:600;
color:var(--blue);
}

.trust-number{
display:block;
font-size:2rem;
font-weight:800;
color:var(--orange);
margin-bottom:8px;
}

.image-card{
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}

.image-card:hover{
transform:translateY(-8px);
border-color:#0d5499;
box-shadow:
0 20px 40px rgba(10,61,107,.12);
}

.sec-hd h2{
letter-spacing:-0.02em;
}

.cta .btn-se{
font-size:1.05rem;
padding:18px 40px;
}

@media(max-width:768px){

.trust-strip{
grid-template-columns:repeat(2,1fr);
margin:20px;
padding:22px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-buttons .btn-se{
width:100%;
max-width:340px;
}
}

@media(max-width:480px){

.trust-strip{
grid-template-columns:1fr;
}
}


/* ===== WHY CHIPS PREMIUM GRID FIX ===== */

.why-chips{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  max-width:1100px;
  margin:0 auto;
  padding:20px 0;
}

.why-chips > div{
  background:#ffffff;
  border:1px solid rgba(10,61,107,.08);
  border-radius:14px;
  padding:18px 22px;
  font-family:var(--fd);
  font-size:1rem;
  font-weight:600;
  color:var(--blue);
  box-shadow:
  0 4px 14px rgba(10,61,107,.05);
  transition:
  transform .3s ease,
  box-shadow .3s ease,
  border-color .3s ease;
}

.why-chips > div:hover{
  transform:translateY(-4px);
  border-color:#0d5499;
  box-shadow:
  0 14px 30px rgba(10,61,107,.10);
}

@media(max-width:768px){

.why-chips{
  grid-template-columns:1fr;
}

}



/* ===== GLOBAL LAYOUT FIXES ===== */

section,
.single-container,
.card-container,
.sectors-section,
.emerging-section,
.cnc-info,
.material-container,
.sec-inline-content,
.sec-why-home{
width:100%;
margin-left:auto;
margin-right:auto;
}

.single-container,
.sec-inline-content{
max-width:1180px;
padding-left:24px;
padding-right:24px;
margin:auto;
}

.sec-inline-content h3,
.sec-inline-content p{
max-width:980px;
margin-left:auto;
margin-right:auto;
}

.sec-inline-content h3{
margin-bottom:22px;
}

.sec-inline-content p{
margin-bottom:22px;
}

h2,h3{
word-break:normal;
overflow-wrap:break-word;
}

p{
max-width:100%;
}

.cta,
.premium-cta-container,
.sec-hd,
.single-container{
text-align:center;
}

.material-card,
.image-card,
.info-card{
height:100%;
}

.card-container{
align-items:stretch;
}

.box{
width:100%;
}

.box p,
.box h2,
.box h3{
max-width:100%;
}

.sectors-list,
.grid-3{
align-items:stretch;
}

img{
display:block;
max-width:100%;
height:auto;
}

body{
overflow-x:hidden;
}

@media(max-width:768px){

.card-container{
grid-template-columns:1fr!important;
}

.single-container,
.sec-inline-content{
padding-left:20px;
padding-right:20px;
}

}



/* ===== PREMIUM CTA SECTION ===== */

.premium-cta-section{
padding:90px 24px;
background:
linear-gradient(135deg,#041c34 0%,#0a3d6b 45%,#0d5499 100%);
position:relative;
overflow:hidden;
margin-top:70px;
}

.premium-cta-section::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at top right,
rgba(255,255,255,.08),
transparent 35%);
pointer-events:none;
}

.premium-cta-container{
position:relative;
z-index:2;
max-width:980px;
margin:auto;
text-align:center;
}

.premium-cta-badge{
display:inline-block;
padding:10px 18px;
border-radius:40px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#fff;
font-size:.82rem;
font-weight:600;
letter-spacing:.08em;
margin-bottom:26px;
backdrop-filter:blur(10px);
}

.premium-cta-container h2{
color:#fff;
font-size:clamp(2rem,4vw,3rem);
line-height:1.1;
margin-bottom:24px;
}

.premium-cta-text{
max-width:760px;
margin:auto;
font-size:1.08rem;
line-height:1.8;
color:rgba(255,255,255,.84)!important;
margin-bottom:30px;
}

.premium-cta-features{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
margin-bottom:38px;
}

.premium-cta-features span{
padding:10px 18px;
border-radius:40px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
color:#fff;
font-size:.9rem;
font-weight:600;
}

.premium-cta-buttons{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

.premium-cta-buttons .btn-se{
min-width:260px;
}

.premium-cta-buttons .btn-ol{
background:transparent!important;
border:2px solid rgba(255,255,255,.24)!important;
color:#fff!important;
}

.premium-cta-buttons .btn-ol:hover{
background:#fff!important;
color:#0a3d6b!important;
}

@media(max-width:768px){

.premium-cta-section{
padding:70px 20px;
}

.premium-cta-buttons{
flex-direction:column;
align-items:center;
}

.premium-cta-buttons .btn-se{
width:100%;
max-width:340px;
}

}


/* ===== LOOSE CONTENT CONTAINER FIX ===== */
/* Constrains h3/p/ul that sit directly in the article
   without a wrapping section class (e.g. the CNC Services
   detail text block) */
.content-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
.content-wrap h3 {
  margin-top: 40px;
  margin-bottom: 14px;
  color: var(--blue);
}
.content-wrap h3:first-child {
  margin-top: 0;
}
.content-wrap p {
  max-width: 100%;
  color: var(--tx-mid);
}
@media (max-width: 768px) {
  .content-wrap {
    padding: 0 20px 36px;
  }
}