/* ==========================================================================
   Smart Solutions & Innovation — layout from the approved mockup PDF
   Palette sampled from the mockup itself.
   ========================================================================== */

.smart-page{
  --navy:      #011027;
  --navy-2:    #04162f;
  --paper:     #f9f9f9;
  --gold:      #bc873f;
  --gold-lt:   #ce9548;
  --bronze:    #684013;   /* the value strip                */
  --ink:       #10182c;
  background:var(--navy);
  color:#fff;
}

.sm-shell{
  width:100%;
  max-width:1448px;
  margin-inline:auto;
  padding-inline:46px;
}

/* dotted-map texture behind the navy bands */
.sm-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(188,135,63,.20) 1px, transparent 1px);
  background-size:7px 7px;
  pointer-events:none;
}

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

.smart-page .site-header{ background:var(--navy); }
.smart-page .header-inner{ height:62px; gap:26px; }
.smart-page .brand-mark{ width:36px; }
.smart-page .brand-name{ font-size:20px; color:#fff; }
.smart-page .brand-inc{ font-size:15px; }
.smart-page .brand-tag{ font-size:8.5px; }
.smart-page .nav{ gap:34px; }
.smart-page .nav-link{ color:#fff; font-size:12px; letter-spacing:.02em; text-transform:none; }
.smart-page .nav-link:hover{ color:var(--gold-lt); }
.smart-page .nav-link.is-active::after{ background:var(--gold); bottom:-7px; }
.smart-page .nav-menu{ background:var(--navy-2); border-color:rgba(188,135,63,.35); }
.smart-page .burger span{ background:#fff; }

.sm-ghost{
  display:inline-flex; align-items:center;
  border:1px solid var(--gold);
  color:var(--gold-lt);
  font-size:12px; letter-spacing:.02em;
  padding:8px 20px;
  transition:background-color .18s ease;
}
.sm-ghost:hover{ background:rgba(188,135,63,.14); }
.smart-page .header-cta{ flex:0 0 auto; }

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

.sm-hero{
  position:relative;
  background:var(--navy);
  overflow:hidden;
}
.sm-hero-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,30%) minmax(0,70%);
  align-items:center;
  gap:34px;
  width:100%; max-width:1448px;
  margin-inline:auto;
  padding-left:46px;
  min-height:300px;
}
.sm-hero-copy{ padding-block:12px; }
.sm-hero h1{
  margin:0 0 10px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px,2.75vw,38px);
  line-height:1.1;
  color:#fff;
}
.sm-hero h1 span{ display:block; }
.sm-hero h1 .gold{ color:var(--gold-lt); }
.sm-hero-body{
  margin:0 0 12px;
  font-size:11px;
  line-height:1.52;
  color:rgba(255,255,255,.88);
  max-width:34ch;
}
.sm-hero-note{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-size:13px;
  line-height:1.38;
  color:var(--gold-lt);
}
.sm-hero-art{ align-self:stretch; }
.sm-hero-art img{ width:100%; height:100%; object-fit:cover; object-position:left center; display:block; }

/* ---------- value strip --------------------------------------------------- */

.sm-strip{
  background:linear-gradient(90deg,#8a5a1c 0%, var(--bronze) 22%, var(--bronze) 78%, #8a5a1c 100%);
}
.sm-strip-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  align-items:center;
  min-height:52px;
}
.sm-strip p{
  position:relative;
  display:flex; align-items:center; gap:14px;
  margin:0;
  padding-inline:28px;
  font-size:11.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
}
.sm-strip p + p::before{
  content:""; position:absolute; left:0; top:-11px; bottom:-11px;
  width:1px; background:rgba(255,255,255,.24);
}
.sm-ico{ color:var(--gold-lt); flex:0 0 auto; }
.sm-ico svg{ width:26px; height:26px; display:block; }

/* ---------- smarter systems + cards -------------------------------------- */

.sm-systems{ background:var(--paper); color:var(--ink); padding-block:10px 12px; }

.sm-lead{
  display:grid;
  grid-template-columns:minmax(0,32%) minmax(0,68%);
  gap:40px;
  align-items:start;
  margin-bottom:10px;
}
.sm-lead h2{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(18px,1.7vw,23px);
  line-height:1.26;
  color:var(--ink);
}
.sm-lead-rule{
  display:block; width:74px; height:1px;
  background:var(--gold); margin-top:12px;
  position:relative;
}
.sm-lead-rule::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; background:var(--gold);
  transform:translate(-50%,-50%) rotate(45deg);
}
.sm-lead > p{
  margin:0;
  font-size:11.5px;
  line-height:1.72;
  color:var(--ink);
}

.sm-cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.sm-card{
  border:1px solid #e4e4e8;
  background:#fff;
  display:flex; flex-direction:column;
  padding:8px 10px 9px;
}
.sm-card header{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.sm-num{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:22px;
  background:var(--ink); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.04em;
}
.sm-card h3{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  line-height:1.2;
  color:var(--ink);
}
.sm-card img{ width:100%; height:97px; object-fit:cover; display:block; margin-bottom:8px; }
.sm-card p{ margin:0; font-size:9.6px; line-height:1.48; color:#2a3243; }

/* ---------- our approach -------------------------------------------------- */

.sm-approach{
  position:relative;
  background:var(--navy);
  padding-block:10px 12px;
  overflow:hidden;
  border-bottom:1px solid rgba(188,135,63,.28);
}
.sm-approach::before,
.sm-approach::after{
  content:""; position:absolute; top:0; bottom:0; width:20%;
  background-image:radial-gradient(circle, rgba(188,135,63,.18) 1px, transparent 1px);
  background-size:7px 7px; pointer-events:none;
}
.sm-approach::before{ left:0;  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent); mask-image:linear-gradient(90deg,#000 45%,transparent); }
.sm-approach::after { right:0; -webkit-mask-image:linear-gradient(270deg,#000 45%,transparent); mask-image:linear-gradient(270deg,#000 45%,transparent); }
.sm-approach .sm-shell{ position:relative; z-index:2; }

.sm-approach-title{
  margin:0;
  text-align:center;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(18px,1.65vw,22px);
  color:#fff;
}
.sm-ornament{ display:flex; align-items:center; justify-content:center; gap:8px; width:140px; margin:6px auto 10px; }
.sm-ornament i{ flex:1; height:1px; background:var(--gold); opacity:.8; }
.sm-ornament b{ width:5px; height:5px; background:var(--gold); transform:rotate(45deg); }

.sm-approach-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.sm-step{ position:relative; text-align:center; padding-inline:24px; }
.sm-step + .sm-step::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px;
  width:1px; background:rgba(188,135,63,.4);
}
.sm-step-ico{ color:var(--gold-lt); display:block; margin:0 auto 6px; }
.sm-step-ico svg{ width:27px; height:27px; display:block; margin-inline:auto; }
.sm-step h3{
  margin:0 0 4px;
  font-family:var(--display);
  font-weight:500;
  font-size:12px;
  color:#fff;
}
.sm-step p{ margin:0; font-size:9.6px; line-height:1.5; color:rgba(255,255,255,.8); }

/* ---------- closing ------------------------------------------------------- */

.sm-closing{ background:var(--navy); padding-block:14px 16px; }
.sm-closing-grid{
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  gap:44px;
  align-items:center;
}
.sm-closing-copy{ position:relative; padding-right:44px; }
.sm-closing-copy::after{
  content:""; position:absolute; right:0; top:0; bottom:0;
  width:1px; background:rgba(188,135,63,.4);
}
.sm-kicker{ margin:0 0 4px; font-family:var(--display); font-size:15px; color:#fff; }
.sm-closing h2{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(22px,2.2vw,29px);
  line-height:1.18;
  color:var(--gold-lt);
}
.sm-closing .sm-lead-rule{ margin:10px 0 10px; }
.sm-closing-note{ margin:0; font-size:11.5px; line-height:1.6; color:#fff; }

.sm-closing-cta{ display:grid; grid-template-columns:auto 1fr; gap:14px 16px; align-items:center; }
.sm-chat{ color:var(--gold-lt); }
.sm-chat svg{ width:38px; height:38px; display:block; }
.sm-closing-cta p{ margin:0; font-size:11.5px; line-height:1.6; color:#fff; }
.sm-btn{
  grid-column:2;
  justify-self:start;
  display:inline-flex; align-items:center;
  background:var(--gold);
  color:var(--navy);
  font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:11px 26px;
  transition:background-color .18s ease;
}
.sm-btn:hover{ background:var(--gold-lt); }
.sm-btn .arrow{ width:18px; margin-left:12px; }

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

@media (max-width:1180px){
  .smart-page .nav{ gap:22px; }
  .sm-cards{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .sm-card p{ font-size:10.5px; }
}

@media (max-width:980px){
  .sm-shell{ padding-inline:28px; }
  .smart-page .nav, .smart-page .header-cta{ display:none; }
  .smart-page .burger{ display:block; margin-left:auto; }
  body.nav-open .nav{ top:62px; }

  .sm-hero-inner{ grid-template-columns:1fr; padding-left:28px; padding-right:28px; gap:20px; }
  .sm-hero-art{ margin-inline:-28px; }
  .sm-hero-art img{ height:220px; }
  .sm-hero-body{ max-width:none; }

  .sm-strip-grid{ grid-template-columns:repeat(2,1fr); row-gap:10px; padding-block:12px; }
  .sm-strip p:nth-child(3)::before{ display:none; }

  .sm-lead{ grid-template-columns:1fr; gap:16px; }
  .sm-cards{ grid-template-columns:repeat(2,1fr); }
  .sm-card p{ font-size:11px; }
  .sm-approach-grid{ grid-template-columns:repeat(2,1fr); row-gap:22px; }
  .sm-step:nth-child(3)::before{ display:none; }
  .sm-step p{ font-size:10.5px; }

  .sm-closing-grid{ grid-template-columns:1fr; gap:24px; }
  .sm-closing-copy{ padding-right:0; }
  .sm-closing-copy::after{ display:none; }
}

@media (max-width:620px){
  .sm-strip-grid{ grid-template-columns:1fr; }
  .sm-strip p + p::before{ display:none; }
  .sm-cards{ grid-template-columns:1fr; }
  .sm-approach-grid{ grid-template-columns:1fr; }
  .sm-step + .sm-step::before{ display:none; }
  .sm-hero h1{ font-size:30px; }
  .sm-step p br, .sm-closing-note br, .sm-closing-cta p br, .sm-hero-note br{ display:none; }
}