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

@font-face {
  font-family: 'DIN Condensed';
  src: url('../font/din-condensed-regular/din-condensed-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --font-body:'Poppins','Segoe UI',Arial,sans-serif;
  --font-accent: 'DIN Condensed', 'Arial Narrow', 'Franklin Gothic Condensed', 'Arial', sans-serif;
  --orange:#E8541D;
  --orange-dark:#C7440F;
  --navy:#0150ba;
  --text-dark:#222;
  --text-gray:#666;
  --border:#e5e5e5;
  --bg-light:#f7f7f8;
  --ink:#22262B;
  --muted:#6B7280;
  --line:#E7E5E0;
  --bg-soft:#F7F6F3;
  --cream:#FDFBF8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{max-width:100%; overflow-x:hidden;}
body{font-family:var(--font-body); color:var(--text-dark); background:#fff; font-size:14px;}
h1,h2,h3,h4{font-family:var(--font-body);}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0;}
.cols-section .wrap,
.featured .wrap{padding:0 10px; max-width:1260px;}
.eyebrow{color:var(--orange); font-weight:700; letter-spacing:.04em; font-size:15px; text-transform:uppercase; margin-bottom:6px;}

/* Hero */
.hero{position:relative; overflow:hidden; min-height:480px; display:flex; align-items:stretch;}
.hero-inner{position:relative; z-index:2; width:100%; display:flex; gap:0px; align-items:flex-start; justify-content:space-between; padding:20px 30px 20px 45px; max-width:1440px; margin:0 auto;}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 55% 120% at 15% 76%,
      #fff 0%,
      #fff 18%,
      #fff 20%,
      rgba(255,255,255,.85) 40%,
      rgba(255,255,255,.5) 49%,
      rgba(255,255,255,.15) 72%,
      rgba(186, 15, 15, 0) 85%
    ),
    url('../img/home_hero.png') center/cover no-repeat;
  background-size: auto 123%;
  background-position: 20% bottom;
}
/* removed dark left overlay per user request */
.hero-left{flex:1.1; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; padding-right:0; padding-top:4px;}
.hero-left h1{font-family:var(--font-accent); font-size:60px; line-height:1.08; font-weight:800; text-transform:uppercase; margin:57px 0 10px; letter-spacing:.01em;}
.hero-left h1 .h1-dark{color:var(--ink);}
.hero-left h1 .h1-orange{color:var(--orange);}
.hero-tagline{font-family:var(--font-body); color:var(--ink); font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;}
.hero-tagline .sep{color:var(--orange); margin:0 10px;}
.hero-cta{display:flex; gap:12px; margin-bottom:32px;}
.hero-cta .btn{padding:13px 22px; border-radius:4px; font-weight:600; font-size:14px;}
.hero-cta .btn.solid{background:var(--orange); color:#fff;}
.hero-cta .btn.outline{background:rgba(255,255,255,.06); border:1.5px solid var(--orange); color:#000000;}

.hero-subtext {
  font-size: 15px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0px 0 20px;
  max-width: 520px;
}

.stats{display:flex; gap:0; max-width:520px; margin-bottom:24px; background:#fff; border:1px solid var(--line); border-radius:4px; box-shadow:0 14px 40px rgba(0,0,0,.08); overflow:hidden;}
.stats > a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 16px; color:inherit; text-align:center; transition:background .2s ease, border-color .2s ease;}
.stats > a:not(:first-child){border-left:1px solid var(--line);}
.stats > a:hover{background:rgba(232,84,29,.05);}
.stats .icon{font-size:20px; color:var(--navy); margin-bottom:8px;}
.stats .num{font-family:var(--font-body); font-weight:700; color:var(--orange); font-size:20px;}
.stats .lbl{font-size:12px; color:var(--muted); margin-top:2px;}

/* Latest story card */
.story-card{flex:0 0 360px; min-width:0; background:#fff; border-radius:4px; box-shadow:0 20px 40px rgba(0,0,0,.2); overflow:hidden; align-self:flex-start; margin-top:0px; margin-bottom:20px; margin-left:0; max-width:360px; width:360px; height:500px; min-height:500px; max-height:500px; padding:0 15px; display:flex; flex-direction:column;}
.story-card .head{display:flex; justify-content:space-between; align-items:center; padding:14px 0px 8px;}
.story-card .head .arrows{
  display:flex;
  gap:8px;
}
.story-card .head .arrow-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  color:var(--muted);
  font-size:12px;
  border:2px solid var(--line);
  background:#fff;
  border-radius:6px;
  cursor:pointer;
  transition:all .2s ease;
}
.story-card .head .arrow-btn:hover{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}
.story-card img{width:100%; height:220px; object-fit:cover; border-radius:4px; flex-shrink:0;}
.story-card .body{padding:16px 0px; display:flex; flex-direction:column; flex:1; justify-content:flex-start; gap:10px; min-height:0; overflow:hidden;}
.story-card h3{font-size:15px; font-weight:700; margin:0; line-height:1.3; display:-webkit-box; box-orient:vertical; line-clamp:2; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; word-break:break-word; min-height:0; max-height:calc(1.3em * 2);}
.story-card p{font-size:13px; color:var(--muted); margin:0; line-height:1.5; display:-webkit-box; box-orient:vertical; line-clamp:5; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; padding-bottom:0.35em; overflow-wrap:anywhere; word-break:break-word; white-space:normal; max-height:calc(1.5em * 5);}
.story-card.title-one-line p{line-clamp:6; -webkit-line-clamp:6; max-height:calc(1.5em * 6);}
.story-card .meta{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:15px; margin-top:auto; gap:8px; flex-shrink:0; min-height:36px; width:100%; height:36px;}
.story-card .meta span{flex:1 1 auto; min-width:0; line-height:1; display:flex; align-items:center; justify-content:flex-start; height:100%;}
.story-card .meta a{display:inline-flex; align-items:center; justify-content:center; gap:8px; color:var(--ink); font-weight:600; flex-shrink:0; white-space:nowrap; margin-left:auto; align-self:center; line-height:1; height:100%;}
.story-card .meta a.readmore{color:var(--orange);}

/* News columns section */
.cols-section{padding:20px 5px 10px 5px;}
.cols-grid{display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap:10px;}
.col-card{
  background:#fff;
  border-radius:5px;
  box-shadow:0 22px 50px rgba(0,0,0,.12);
  overflow:hidden;
  padding:15px;
  display:flex;
  flex-direction:column;
}
.col-card h2.eyebrow{margin-bottom:14px; font-size:13px;}
.col-card img{width:100%; height:190px; object-fit:cover;  margin-bottom:16px; border-radius:3px;}
.col-card h3{font-size:15px; font-weight:700; margin-bottom:10px; line-height:1.3;}
.cols-grid > .col-card:nth-child(-n+2) h3{display:-webkit-box; box-orient:vertical; line-clamp:2; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; word-break:break-word; line-height:1.3; max-height:calc(1.3em * 2);}
.col-card p{font-size:13px; color:var(--muted); margin-bottom:14px;}
.cols-grid > .col-card:nth-child(-n+2) p{display:-webkit-box; box-orient:vertical; line-clamp:5; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; line-height:1.5; min-height:calc(1.5em * 5); max-height:calc(1.5em * 5);}
.cols-grid > .col-card:nth-child(-n+2).title-one-line p{line-clamp:6; -webkit-line-clamp:6; min-height:calc(1.5em * 6); max-height:calc(1.5em * 6);}
.col-card .bullets li{font-size:13px; color:var(--ink); padding:5px 0; border-top:1px dashed var(--line); position:relative; padding-left:15px;}
.col-card .bullets li:before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; background:var(--orange); border-radius:50%; display:inline-block;}
.col-card.placeholder-card{padding-bottom:12px;}
.col-card.placeholder-card .placeholder-visual{width:100%; height:190px; border-radius:3px; margin-bottom:16px; background:linear-gradient(135deg, #f3f1ef, #e7e0d9);}
.col-card.placeholder-card .placeholder-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.col-card.placeholder-card .placeholder-line{display:block; height:14px; border-radius:4px; background:linear-gradient(90deg, #f1f1f1, #e6e6e6, #f1f1f1); margin-left:0; margin-right:auto;}
.col-card.placeholder-card .placeholder-line-lg{width:92%; margin-bottom:10px;}
.col-card.placeholder-card .placeholder-line-md{width:75%; margin-bottom:2px;}
.col-card.placeholder-card .placeholder-line-sm{width:100%;}

/* Sourcing diagram: single large centered image */
.sourcing-diagram{display:flex;justify-content:center;margin:14px 0 18px}
.sourcing-diagram .sourcing-icon{width:320px;max-width:100%;height:auto;object-fit:contain;border-radius:6px}
.col-card .card-buttons{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; margin-bottom:10px;}
.col-card .card-buttons button{background:rgba(232,84,29,0.08); border:1px solid rgba(232,84,29,0.2); color:var(--orange); border-radius:999px; padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer; transition:background .18s ease, transform .18s ease;}
.col-card .card-buttons button:hover{background:var(--orange); color:#fff; transform:translateY(-1px);}
.col-card .viewall{display:inline-flex; align-items:center; gap:8px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-top:8px; text-align:center; color:var(--orange); font-weight:700; font-size:13px;}

/* Directory list */
.directory-list{border:1px solid var(--line); border-radius:5px; overflow:hidden; margin-bottom:16px;}
.directory-list li{display:flex; align-items:center; gap:12px; padding:9px 10px; border-bottom:1px solid var(--line);}
.directory-list li:last-child{border-bottom:none;}
.directory-list .dicon{width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--orange); border-radius:5px; color:#fff; font-size:16px; overflow:hidden;}
.directory-list .dicon img{display:block; width:30px; height:30px; object-fit:contain; margin:auto;}
.directory-list h4{font-size:13px; font-weight:700; margin-bottom:2px;}
.directory-list p{font-size:12px; color:var(--muted); margin:0;}
.directory-list .chev{margin-left:auto; color:var(--muted); font-size:13px;}
.btn-block{display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; background:var(--orange); color:#fff; font-weight:700; font-size:12.5px; padding:10px; border-radius:4px;}
.col-card.sourcing .btn-block{margin-top:auto;}

.col-card.sourcing .sourcing-diagram div{background:transparent; border-radius:0; height:auto; display:block}
.col-card.sourcing h3{font-size:15px;}
.col-card.sourcing p{margin-bottom:20px;}

/* Featured News */
.featured{padding:0px 0px 0px 0px; background:var(--cream);}
.featured-card{background:#fff; border-radius:5px; box-shadow:0 28px 70px rgba(78, 57, 57, 0.12); padding:10px; margin:0;}
.featured-card .featured-head{display:flex; justify-content:space-between; align-items:baseline; margin:5px 8px 10px;}
.events-card .featured-head{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px;}
.featured-head a{color:var(--orange); font-weight:700; font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.events-empty{margin:0; width:100%; flex:1; display:flex; align-items:flex-end; justify-content:center; text-align:center; color:var(--muted); font-size:13px; line-height:1.5; padding-bottom:6px;}
.featured-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0px; }
.fcard{background:#fff; overflow:hidden; padding:3px 5px 0; border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0;}
.fcard:first-child{border-left:none;}
.fcard img{width:100%; height:170px; object-fit:cover; border-radius:3px; margin:0 0 8px 0;}
.featured-grid > .fcard:first-child img{border-top-left-radius:5px;}
.featured-grid > .fcard:last-child img{border-top-right-radius:5px;}
.featured-grid > .fcard:nth-child(3) img{filter:none !important;}
.placeholder-card{padding:3px 5px 0; border-left:1px solid var(--line); min-height:0; background:linear-gradient(180deg, rgba(245,245,245,0.35), rgba(255,255,255,0.9)); box-sizing:border-box; display:flex; flex-direction:column;}
.placeholder-card:first-child{border-left:none;}
.placeholder-image{width:100%; height:170px; border-radius:3px; background:linear-gradient(135deg, #f5f5f5, #eaeaea, #f5f5f5); margin:0 0 8px 0; display:block;}
.placeholder-line{height:14px; width:92%; border-radius:4px; background:linear-gradient(90deg, #f5f5f5, #e7e7e7, #f5f5f5); margin:4px auto 0; display:block;}
.placeholder-line.short{width:65%; margin-top:8px;}
.fcard .tag{display:flex; gap:10px; align-items:center; font-size:11px; margin-bottom:0px;}
.fcard .tag .cat{color:var(--orange); font-weight:700;}
.fcard .tag .date{color:var(--muted);}
.fcard h4{font-size:15px; font-weight:700; line-height:1.3; margin:0; padding:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; word-break:break-word; min-height:calc(1.3em * 2); max-height:calc(1.3em * 2);}

/* Two col: featured / events already separate section actually events beside featured news header row -> new layout */
.lower-grid{display:grid; grid-template-columns: 2.7fr 0.8fr; gap:10px; align-items:stretch;}
.featured-card,
.events-card{display:flex; flex-direction:column;}
.events-card{background:#fff; border:1px solid var(--line); border-radius:5px; overflow:hidden; padding:12px; box-shadow:0 18px 30px rgba(0,0,0,.08); max-width:100%;}
.events-card .featured-head{margin-bottom:0px;}
.events-card .featured-head h2{margin:0;}
.events-list{border-top:1px solid var(--line); margin-top:4px; display:flex; flex-direction:column; min-height:120px;}
.events-list .ev{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.events-list .ev:last-child{border-bottom:none;}
.ev .date-badge{flex:none; min-width:50px; width:50px; text-align:center; background:#fff; border-radius:5px; padding:0; border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden;}
.ev .date-badge .mon{font-size:10px; font-weight:700; color:#fff; text-transform:uppercase; display:block; padding:5px 0; background:var(--orange); line-height:1.2;}
.ev .date-badge .day{font-size:17px; font-weight:800; font-family:'Poppins'; color:var(--ink); background:#fff; padding:5px 0; flex:1; display:flex; align-items:center; justify-content:center;}
.ev h4{font-size:12px; font-weight:700; margin-bottom:3px; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; word-break:break-word;}
.ev p{font-size:11px; color:var(--muted); margin:0;}
@media (max-width: 1920px) {
  .hero-left h1{font-size:56px; line-height:1.05; margin:57px 0 12px;}
}
@media (max-width: 1600px) {
  .hero-left h1{font-size:62px; line-height:1.05; margin:57px 0 12px;}
}
@media (max-width: 1366px) {
  .hero-left h1{font-size:60px; line-height:1.05; margin:57px 0 12px;}
}

@media (min-width: 1600px) {
  .wrap{max-width:1320px;}
  .cols-section .wrap,
  .featured .wrap{max-width:1380px;}
  .hero-inner{max-width:1520px; padding:28px 52px 0 60px;}
  .hero-left h1{font-size:72px; line-height:1.02; margin-top:64px;}
  .story-card{flex-basis:420px; width:420px; max-width:420px; height:540px; min-height:540px; max-height:540px;}
  .cols-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);}
  .lower-grid{grid-template-columns:2.9fr 1fr;}
}

@media (min-width: 2000px) {
  .wrap{max-width:1460px;}
  .cols-section .wrap,
  .featured .wrap{max-width:1480px;}
  .hero-inner{max-width:1600px; padding:32px 60px 0 72px;}
  .hero-left h1{font-size:78px; line-height:1.0; margin-top:72px;}
  .story-card{flex-basis:450px; width:450px; max-width:450px; height:570px; min-height:570px; max-height:570px;}
}

@media (max-width: 1024px) {
  .hero-left h1{font-size:52px; line-height:1.05; margin:57px 0 12px;}
  .featured-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0px;}
  .lower-grid{grid-template-columns:2.7fr 0.8fr; gap:10px; align-items:stretch;}
  .fcard{padding:3px 5px 0;}
  .fcard h4{min-height:calc(1.3em * 2); max-height:calc(1.3em * 2);}
  .events-card{padding:10px;}
  .events-list .ev{padding:8px 0; gap:8px;}
  .ev .date-badge{min-width:44px; width:44px;}
  .ev .date-badge .mon{font-size:9px;}
  .ev .date-badge .day{font-size:15px;}
  .ev h4{font-size:11px; margin-bottom:2px;}
  .ev p{font-size:10px;}
}
@media (max-width: 980px) {
  .hero{flex-direction:column; align-items:flex-start; min-height:auto; overflow:visible;}
  .hero-inner{flex-direction:column; width:100%; max-width:100%; padding:20px 20px 0 20px; gap:28px;}
  .hero-left{width:100%;}
  .hero-left h1{font-size:50px; line-height:1.05; margin:20px 0 12px;}
  .hero-tagline{font-size:18px;}
  .hero-subtext{font-size:15px; max-width:100%; margin-bottom:20px;}
  .hero-cta{flex-wrap:wrap; gap:10px;}
  .hero-cta .btn{width:100%; min-width:auto;}
  .story-card{flex:1 1 auto; width:100%; max-width:none; margin-bottom:32px; height:536px; min-height:536px; max-height:536px;}
  .story-card img{width:100%; height:320px; object-fit:cover; border-radius:4px;}
  .story-card .body{padding:16px 0 10px;}
  .story-card .meta{flex-direction:row; align-items:center; gap:8px;}
  .cols-grid{grid-template-columns:1fr 1fr;}
  .featured-grid{grid-template-columns:1fr 1fr;}
  .lower-grid{grid-template-columns:1fr;}
}

@media (max-width: 680px) {
  .hero-inner{padding:16px 16px 0 16px; gap:22px;}
  .hero-left h1{font-size:50px;}
  .hero-tagline{font-size:15px;}
  .hero-subtext{font-size:13px;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
  .story-card{padding:0 12px; height:470px; min-height:470px; max-height:470px;}
  .story-card img{height:220px;}
  .story-card h3{font-size:14px; line-height:1.35; max-height:calc(1.35em * 2);}
  .story-card p{max-height:calc(1.5em * 5);}
  .story-card .head{padding:12px 0 6px;}
  .story-card .meta{flex-direction:row; align-items:center; gap:8px; min-height:34px; height:36px;}
  .story-card .meta span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center;}
  .cols-section{padding:16px 8px 10px 8px;}
  .cols-grid{grid-template-columns:1fr; gap:14px;}
  .featured-grid{grid-template-columns:1fr; gap:14px;}
  .lower-grid{grid-template-columns:1fr; gap:14px;}
  .events-card{padding:14px;}
  .events-list .ev{padding:10px 0;}
  .directory-list li{flex-wrap:wrap; gap:10px;}
  .btn-block{width:100%;}
}

@media (max-width: 480px) {
  .hero-inner{padding:14px 14px 0 14px; gap:20px;}
  .hero-left h1{font-size:38px;}
  .hero-tagline{font-size:16px;}
  .hero-subtext{font-size:14px;}
  .hero-cta .btn{padding:12px 14px;font-size:13px;}
  .story-card{padding:0 10px; height:470px; min-height:470px; max-height:470px;}
  .story-card .body{padding:12px 0 8px;}
  .story-card h3{font-size:13.5px; line-height:1.35; max-height:calc(1.35em * 2);}
  .story-card p{max-height:calc(1.5em * 5);}
  .story-card .head{padding:10px 0 6px;}
  .story-card .meta{height: 40px; padding-top: 10px;}
  .directory-list li{gap:8px; padding:8px 7px;}
  .directory-list .dicon{width:34px; height:34px;}
  .directory-list .dicon img{width:25px; height:25px;}
  .directory-list h4{font-size:11px; line-height:1.25;}
  .directory-list .chev{font-size:11px;}
}

@media (max-width: 360px) {
  .hero-inner{padding:12px 12px 0 12px; gap:18px;}
  .hero-left h1{font-size:34px;}
  .hero-tagline{font-size:15px;}
  .hero-subtext{font-size:13px;}
  .hero-cta .btn{padding:10px 12px;font-size:13px;}
  .story-card{padding:0 8px; height:470px; min-height:470px; max-height:470px;}
  .story-card .head{padding:10px 0 6px;}
  .story-card .meta{height: 40px; padding-top: 10px;}
}

/* Keep hero-inner centered and relative on desktop so layout stays aligned */
@media (min-width: 981px) {
  .hero { position: relative; }
  .hero-inner {
    position: relative;
    top: 0;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 1440px;
    padding: 20px 30px 0px 45px;
    margin: 0 auto;
    z-index: 2;
  }
}