/* ==========================================================================
   Strategic Sourcing & Procurement — layout from the approved mockup PDF
   ========================================================================== */

.sourcing-page{
  --navy:    #16294d;
  --navy-dk: #12233f;
  --ink:     #2b3448;
  --gold:    #c08a3e;
  --gold-lt: #d09a48;
  --paper:   #ffffff;
  --panel:   #fafafa;
  background:var(--paper);
  color:var(--ink);
}

.sc-shell{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:32px;
}

/* ---------- header -------------------------------------------------------- */

.sourcing-page .site-header{ background:var(--paper); border-bottom:1px solid #eee; }
.sourcing-page .header-inner{ height:64px; gap:26px; }
.sourcing-page .brand-mark{ width:40px; }
.sourcing-page .brand-name{ font-size:21px; color:var(--navy); }
.sourcing-page .brand-inc{ font-size:15px; }
.sourcing-page .nav-link{ color:var(--navy); font-size:12px; letter-spacing:.03em; text-transform:none; }
.sourcing-page .nav-link:hover{ color:var(--gold); }
.sourcing-page .nav-link.is-active::after{ background:var(--gold); bottom:-7px; }
.sourcing-page .nav-menu{ background:var(--navy); border-color:rgba(192,138,62,.35); }
.sourcing-page .burger span{ background:var(--navy); }

.sc-btn{
  display:inline-flex; align-items:center;
  background:var(--gold); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:9px 20px;
  transition:background-color .18s ease;
}
.sc-btn:hover{ background:var(--gold-lt); }
.sourcing-page .header-cta{ flex:0 0 auto; }

/* ---------- shared -------------------------------------------------------- */

.sc-rule{ display:block; width:58px; height:2px; background:var(--gold); }
.sc-rule.centered{ margin:7px auto 18px; }
.gold{ color:var(--gold); }

.sc-band-title{
  margin:0;
  text-align:center;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(17px,1.55vw,21px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--navy);
}

/* ---------- hero ---------------------------------------------------------- */

.sc-hero{ position:relative; background:var(--paper); overflow:hidden; }
.sc-hero-art{
  position:absolute; right:0; top:0;
  height:100%; width:62%;
  object-fit:cover; object-position:left center;
}
.sc-hero-inner{ position:relative; z-index:2; min-height:290px; display:flex; align-items:center; }
.sc-hero-copy{ max-width:46%; padding-block:24px; }
.sc-hero h1{
  margin:0 0 10px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.04;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--navy);
}
.sc-hero h1 span{ display:block; }
.sc-hero-tag{ margin:0 0 18px; font-size:14px; color:var(--navy); }
.sc-hero-body{ margin:0; font-size:11.5px; line-height:1.72; color:var(--ink); max-width:42ch; }

/* ---------- approach + process ------------------------------------------- */

.sc-approach{ background:var(--panel); }
.sc-approach-grid{
  display:grid;
  grid-template-columns:minmax(0,20%) minmax(0,16%) minmax(0,64%);
  gap:22px;
  align-items:start;
  padding-block:30px 36px;
}
.sc-approach-copy h2{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--navy);
}
.sc-approach-copy .sc-rule{ margin:6px 0 12px; }
.sc-approach-copy p{ margin:0 0 12px; font-size:10.4px; line-height:1.7; color:var(--ink); }
.sc-question{ color:var(--gold) !important; font-weight:700; }
.sc-approach-photo{ margin:0; align-self:stretch; }
.sc-approach-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.sc-process h2{
  margin:0 0 12px;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--navy);
}
.sc-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
}
.sc-steps li{ position:relative; text-align:center; }
.sc-steps li + li::before{
  content:""; position:absolute; left:-9px; top:19px;
  width:12px; height:1px; background:var(--gold);
}
.sc-disc{
  display:grid; place-items:center;
  width:38px; height:38px; margin:0 auto 7px;
  border-radius:50%;
  background:var(--navy); color:var(--gold-lt);
}
.sc-disc svg{ width:20px; height:20px; }
.sc-no{ display:block; font-family:var(--display); font-size:14px; font-weight:600; color:var(--navy); }
.sc-steps h3{
  margin:2px 0 5px;
  font-size:8.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy);
}
.sc-steps p{ margin:0; font-size:8.2px; line-height:1.68; color:var(--ink); }

/* ---------- solutions / why cards ---------------------------------------- */

.sc-solutions{ padding-block:24px 22px; }
.sc-why{ padding-block:14px 16px; }

.sc-sol-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.sc-why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }

.sc-thumb{ position:relative; display:block; margin-bottom:18px; }
.sc-thumb img{ width:100%; height:112px; object-fit:cover; display:block; }
.sc-why-grid .sc-thumb img{ height:88px; }
.sc-badge{
  position:absolute; left:8px; bottom:-13px;
  width:27px; height:27px; border-radius:50%;
  background:var(--navy); color:var(--gold-lt);
  display:grid; place-items:center;
}
.sc-badge svg{ width:15px; height:15px; }
.sc-sol h3{
  margin:0 0 5px;
  font-size:9px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  line-height:1.3;
  color:var(--navy);
}
.sc-sol p{ margin:0; font-size:9px; line-height:1.62; color:var(--ink); }

/* ---------- what we source ------------------------------------------------ */

.sc-source{ padding-block:14px 14px; border-top:1px solid #ececec; border-bottom:1px solid #ececec; }
.sc-source-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.sc-source-grid p{
  position:relative;
  margin:0;
  padding-inline:12px;
  display:flex; align-items:center; gap:10px;
  font-size:8.4px; line-height:1.5; color:var(--ink);
}
.sc-source-grid p + p::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px;
  width:1px; background:#e6e6e6;
}
.sc-lico{ color:var(--gold); flex:0 0 auto; }
.sc-lico svg{ width:26px; height:26px; display:block; }

/* ---------- promise + closing -------------------------------------------- */

.sc-foot{
  display:grid;
  grid-template-columns:minmax(0,22%) minmax(0,49%) minmax(0,29%);
  align-items:stretch;
  min-height:148px;
}
.sc-foot-photo{ margin:0; }
.sc-foot-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.sc-promise{ padding:8px 24px 10px; }
.sc-promise .sc-band-title{ font-size:15px; }
.sc-promise-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; text-align:center; }
.sc-pico{ color:var(--navy); display:block; margin:0 auto 6px; }
.sc-pico svg{ width:26px; height:26px; display:block; margin-inline:auto; }
.sc-promise-grid h3{
  margin:0 0 4px;
  font-size:8.4px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy);
}
.sc-promise-grid p{ margin:0; font-size:7.6px; line-height:1.5; color:var(--ink); }

.sc-closing{
  position:relative;
  background:var(--navy);
  color:#fff;
  padding:12px 20px 14px 44px;
}
.sc-closing h2{
  margin:0 0 8px;
  font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:#fff;
}
.sc-quote{
  position:absolute; left:16px; top:44px;
  font-family:var(--display);
  font-size:34px; line-height:.6;
  color:rgba(255,255,255,.5);
}
.sc-closing p{ margin:0; font-size:8.6px; line-height:1.62; color:#fff; }
.sc-closing-gold{ margin-top:8px !important; color:var(--gold-lt) !important; font-weight:700; }

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

@media (min-width:1181px){
  .sc-steps p{ font-size:8.4px; }
  .sc-sol p{ font-size:9.2px; }
  .sc-source-grid p{ font-size:9.2px; }
  .sc-promise-grid p{ font-size:8.4px; }
  .sc-closing p{ font-size:9.4px; }
  .sc-approach-copy p{ font-size:10.8px; }
}

@media (max-width:1180px){
  .sourcing-page .nav{ gap:20px; }
}

/* the mockup is a 1024-wide design: hold its column counts down to 1000px */
@media (max-width:1000px){
  .sc-sol-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .sc-why-grid{ grid-template-columns:repeat(3,1fr); }
  .sc-sol p{ font-size:10px; }
  .sc-sol h3{ font-size:10.5px; }
  .sc-steps{ grid-template-columns:repeat(4,1fr); gap:14px; }
  .sc-steps li + li::before{ display:none; }
  .sc-steps p{ font-size:9.4px; }
  .sc-source-grid p{ font-size:9.6px; }
}

@media (max-width:900px){
  .sc-shell{ padding-inline:24px; }
  .sourcing-page .nav, .sourcing-page .header-cta{ display:none; }
  .sourcing-page .burger{ display:block; margin-left:auto; }
  body.nav-open .nav{ top:64px; }

  .sc-hero-art{ position:relative; width:auto; height:200px; }
  .sc-hero-inner{ min-height:0; }
  .sc-hero-copy{ max-width:none; }

  .sc-approach-grid{ grid-template-columns:1fr; gap:18px; }
  .sc-approach-photo img{ height:220px; }
  .sc-approach-copy p{ font-size:12px; }
  .sc-steps{ grid-template-columns:repeat(2,1fr); }
  .sc-source-grid{ grid-template-columns:repeat(3,1fr); row-gap:16px; }
  .sc-source-grid p + p::before{ display:none; }
  .sc-foot{ grid-template-columns:1fr; }
  .sc-foot-photo img{ height:200px; }
  .sc-closing{ padding-left:46px; }
  .sc-promise-grid p, .sc-steps p, .sc-closing p{ font-size:11px; }
  .sc-promise-grid h3, .sc-steps h3{ font-size:10.5px; }
}

@media (max-width:620px){
  .sc-hero h1{ font-size:32px; }
  .sc-sol-grid, .sc-why-grid{ grid-template-columns:1fr; }
  .sc-steps{ grid-template-columns:1fr; gap:18px; }
  .sc-source-grid{ grid-template-columns:1fr; }
  .sc-promise-grid{ grid-template-columns:repeat(2,1fr); }
  .sc-hero-body br, .sc-approach-copy p br, .sc-closing p br,
  .sc-source-grid p br{ display:none; }
}