*{box-sizing:border-box}body{margin:0;background:#050708;color:#f2f2f2;font-family:Arial,Helvetica,sans-serif;font-weight:300}header{height:68px;border-bottom:1px solid #182016;display:flex;align-items:center;padding:0 27px;gap:38px}.brand img{width:188px;height:48px;object-fit:contain}.brand{margin-right:auto}nav{display:flex;gap:32px;align-items:center}nav a{font-size:11px;color:#eee;text-decoration:none;white-space:nowrap}.active{border-bottom:2px solid #a9d600;padding-bottom:10px}.cta{border:1px solid #a9d600;color:#a9d600;padding:14px 19px;font-size:11px;white-space:nowrap}.hero{height:485px;display:grid;grid-template-columns:42% 58%;border-bottom:1px solid #34342c}.hero-copy{padding:28px 0 0 32px;z-index:2}.eyebrow{color:#a9d600;font-size:13px;letter-spacing:1px;margin-bottom:11px}.hero h1{font-size:42px;line-height:1.08;letter-spacing:1.5px;margin:0;font-weight:400}.hero h1 span{color:#a9d600}.rule{width:49px;border-top:1px solid #aaa;margin:18px 0}.hero p{font-size:12px;line-height:1.55;color:#ddd}.hero-img{background:url(assets/hero.jpg) center/cover no-repeat}.principles{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;width:410px}.principles div{padding:0 11px;border-right:1px solid #534c3c}.principles div:first-child{padding-left:4px}.principles b{display:block;color:#a9d600;font-size:30px;font-weight:400;height:37px}.principles strong{display:block;font-size:9px;margin:5px 0 7px}.principles small{font-size:9px;line-height:1.45;color:#ddd}.categories,.briefs{padding:8px 26px 0}.categories h2{font-size:17px;font-weight:300;letter-spacing:1.5px;text-align:center;margin:0 0 8px;color:#eee}.grid.five{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.card{height:296px;border:1px solid #5c5546;border-radius:7px;position:relative;overflow:hidden;padding:139px 14px 12px;background:#070909}.card img{position:absolute;inset:0 0 auto;width:100%;height:150px;object-fit:cover;opacity:.78}.card:after{content:"";position:absolute;left:0;right:0;top:100px;height:90px;background:linear-gradient(transparent,#070909)}.card h3,.card p,.card a{position:relative;z-index:1}.card h3{font-size:16px;font-weight:400;margin:0 0 8px;line-height:1.15}.card p{font-size:11px;line-height:1.5;color:#ddd;margin:0}.card a{position:absolute;bottom:14px;color:#a9d600;font-size:11px}.section-head{height:42px;display:flex;align-items:center;border-bottom:1px solid #514b3d;margin-bottom:10px}.section-head h2{font-size:18px;font-weight:300;letter-spacing:1.5px}.section-head a{margin-left:auto;color:#a9d600;font-size:10px}.brief{height:214px;border:1px solid #5c5546;border-radius:6px;background-size:cover;background-position:center;position:relative;padding:14px;overflow:hidden}.brief:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,5,5,.95),rgba(3,5,5,.45))}.brief>*{position:relative;z-index:1}.brief em{font-style:normal;color:#a9d600;font-size:10px}.brief h3{font-size:15px;line-height:1.5;font-weight:300;margin:12px 0}.brief small{position:absolute;bottom:13px;font-size:9px}.benefits{height:92px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}.benefits div{display:flex;gap:15px;align-items:center;justify-content:center;border-right:1px solid #4d473a;color:#a9d600;font-size:29px}.benefits div:last-child{border:0}.benefits span{color:#ddd;font-size:12px;line-height:1.45}.bottom{height:205px;border-top:1px solid #6c5a3a;border-bottom:1px solid #282822;display:grid;grid-template-columns:29% 18% 25% 28%;align-items:center}.flow{padding-left:41px}.flow h2{font-size:22px;font-weight:300;margin:0 0 12px}.flow h3{font-size:20px;color:#a9d600;font-weight:300;margin:8px 0}.why{border-left:1px solid #5a503f;padding-left:22px}.why p{font-size:11px;line-height:1.5}.bottom-img{height:100%;background:url(assets/cta.jpg) center/cover no-repeat}.ready{padding:0 25px}.ready h2{color:#a9d600;font-size:23px;line-height:1.15;font-weight:300;margin:0 0 9px}.ready p{font-size:11px;line-height:1.45;margin-bottom:22px}.ready .cta{display:block;text-align:center;padding:12px 7px}footer{height:96px;display:grid;grid-template-columns:230px 1fr 120px;grid-template-rows:62px 25px;align-items:center;padding:5px 28px 0}footer img{width:185px;height:55px;object-fit:contain}footer nav{justify-content:center;gap:32px}.social{text-align:right;color:#bbb}footer small{font-size:9px;color:#777}.legal{grid-column:2/4;text-align:right;font-size:9px;color:#666;letter-spacing:.5px}@media(max-width:850px){header nav{display:none}.hero{grid-template-columns:1fr;height:auto}.hero-img{height:420px}.grid.five{grid-template-columns:1fr 1fr}.card,.brief{min-height:280px}.bottom{grid-template-columns:1fr;height:auto}.bottom>div{min-height:180px;padding:30px}.benefits{grid-template-columns:1fr 1fr;height:auto;gap:20px;padding:25px 0}footer nav{display:none}}

/* Insights V2: top-right hero image only — reduce scale and reveal full image */
.hero{grid-template-columns:48% 52%;}
.hero-img{background-size:contain;background-repeat:no-repeat;background-position:center right;}

/* Insights V3: remove unused blank hero-image area; preserve V2 image scale */
.hero{grid-template-columns:minmax(0,1fr) 520px;}
.hero-img{width:520px;justify-self:end;}

/* Insights V5: restore approved original hero layout using one image only */
.hero{grid-template-columns:42% 58%;}
.hero-img{width:auto;justify-self:stretch;background-image:url(assets/hero.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;}

/* Insights V6: match attached approved hero scale/crop exactly; V5 base */
.hero{grid-template-columns:40.625% 59.375%;}
.hero-img{width:auto;justify-self:stretch;background-image:url(assets/hero.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;}

/* Insights V7: exact approved hero panel from attached original reference; V6 base */
.hero{grid-template-columns:40.625% 59.375%;}
.hero-img{
  width:auto;
  justify-self:stretch;
  background-image:url(assets/hero.jpg);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

/* Insights V8: restore four original principle icons from approved design; V7 baseline */
.principles b img{width:38px;height:39px;object-fit:contain;display:block;}

/* Insights V9: match attached original hero proportions; V8 baseline */
.hero{grid-template-columns:45.5% 54.5%;}
.hero-img{
  width:auto;
  justify-self:stretch;
  background-image:url(assets/hero.jpg);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}
.principles{
  width:calc(100% - 24px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.principles div{padding-left:10px;padding-right:10px;}

/* Insights V10: V9 baseline — extend hero principle row slightly farther right only */
.principles{width:calc(100% - 8px);}

/* Insights V12: show more of the approved category artwork without changing card layout */
.card img{object-fit:contain;object-position:center top;background:#070909}

/* HTML conversion target: a_dark_themed_website_homepage_screenshot_landin.png */
body{max-width:1024px;margin:0 auto;background:#030506;}
header{height:69px;padding:0 28px;gap:34px;background:#030506;}
.brand img{width:188px;height:50px;}
header nav{gap:31px;}
header .cta{padding:14px 17px;}
.hero{height:535px;grid-template-columns:42% 58%;}
.hero-copy{padding:35px 0 0 30px;}
.hero h1{font-size:43px;line-height:1.05;}
.hero p{font-size:12px;line-height:1.6;}
.hero-img{background-size:cover;background-position:center right;}
.principles{width:100%;margin-top:35px;grid-template-columns:repeat(4,1fr);}
.principles div{padding:0 14px 0 12px;}
.principles div:first-child{padding-left:5px;}
.principles b{height:44px;}
.principles b img{width:42px;height:42px;}
.principles strong{font-size:10px;margin:5px 0 8px;}
.principles small{font-size:9.5px;line-height:1.45;}
.categories{padding:10px 27px 0;}
.categories h2{font-size:17px;margin-bottom:10px;}
.grid.five{gap:14px;}
.card{height:332px;padding:164px 14px 14px;border-radius:7px;}
.card img{height:175px;object-fit:cover;object-position:center;background:#070909;opacity:.92;}
.card:after{top:116px;height:95px;}
.card h3{font-size:16px;line-height:1.12;margin-bottom:8px;}
.card p{font-size:11px;line-height:1.48;}
.card a{bottom:15px;font-size:11px;}
.briefs{padding:0 27px;}
.section-head{height:47px;margin-bottom:11px;}
.section-head h2{font-size:18px;}
.brief{height:255px;padding:14px;}
.brief h3{font-size:16px;line-height:1.45;}
.benefits{height:130px;}
.benefits div{font-size:31px;gap:18px;}
.benefits span{font-size:12px;line-height:1.55;}
footer{height:105px;padding:5px 28px 0;grid-template-columns:230px 1fr 120px;grid-template-rows:68px 28px;}
footer img{width:188px;height:58px;}
footer nav{gap:29px;}
@media(max-width:850px){body{max-width:none}.hero{height:auto}.hero-copy{padding-right:28px}.principles{width:100%}.card{height:330px}.brief{height:255px}}


/* Insights HTML V2: restore original Latest Matrix Brief card artwork only; V1 baseline */
.brief.brief-image{
  padding:0;
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
}
.brief.brief-image:after{display:none;}

/* Insights HTML V3: restore four original benefits-strip icons only; V2 baseline */
.benefits .benefit-icon{width:52px;height:52px;object-fit:contain;display:block;flex:0 0 52px;}

/* HTML Converted V4: enlarge lower-left Matrix footer logo only */
footer > img{width:235px;height:72px;object-fit:contain;object-position:left center;}

/* HTML Converted V5: enlarge lower-left Matrix footer logo only */
footer > img{width:275px;height:82px;object-fit:contain;object-position:left center;}

/* HTML Converted V6: remove thin underline beneath hero principle labels only; V5 baseline */
.principles strong,
.principles small{
  border-bottom:0 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
.principles strong::after,
.principles small::after{
  content:none !important;
  display:none !important;
  border:0 !important;
}

/* HTML Converted V7: remove horizontal hero divider encroaching beneath principle text only */
.hero{border-bottom:none !important;}
/* Responsive Conversion V1 — mobile/tablet only; locked desktop unchanged */
.menu{display:none;background:none;border:1px solid #333;color:#fff;font-size:22px;line-height:1;padding:8px 10px;cursor:pointer}
@media(max-width:850px){header{position:relative;gap:14px;padding-left:18px;padding-right:18px}.menu{display:block;margin-left:auto}header>.cta{display:none}header.open nav{display:flex;position:absolute;z-index:100;top:100%;left:0;right:0;flex-direction:column;align-items:center;gap:0;background:#030506;border-bottom:1px solid #303638;padding:8px 18px 14px}header.open nav a{width:100%;padding:13px 4px;text-align:center;border-bottom:1px solid #1d2225}.principles{grid-template-columns:1fr 1fr;gap:18px}.grid.five{grid-template-columns:1fr 1fr}.bottom{height:auto!important}footer{height:auto!important;grid-template-columns:1fr;text-align:center;grid-template-rows:auto}footer img{margin:auto}.legal{grid-column:auto;text-align:center}}
@media(max-width:640px){header{height:64px}.brand img{max-width:190px;height:auto}.hero-copy{padding:24px 18px}.hero h1{font-size:clamp(30px,9vw,42px)}.hero-img{height:300px}.principles{grid-template-columns:1fr 1fr;width:100%;gap:12px}.categories,.briefs{padding-left:14px;padding-right:14px}.grid.five{grid-template-columns:1fr}.card,.brief{height:auto;min-height:280px}.benefits{grid-template-columns:1fr!important;padding:12px 0}.benefits div{border-right:0;border-bottom:1px solid #4d473a;padding:14px}.bottom>div{min-height:0!important;padding:22px 18px}footer{padding:14px 18px}}

/* V6: lock upper banner to viewport to match Home/Approach */
header{position:sticky;top:0;z-index:50;}

/* Mobile Optimization V6 — Insights phone only; prior locked pages unchanged */
@media(max-width:640px){
  body{width:100%;max-width:none;overflow-x:hidden}
  header{padding:0 14px}
  .brand img{width:170px;max-width:58vw}
  .hero{display:flex;flex-direction:column;height:auto;min-width:0}
  .hero-copy{order:1;width:100%;padding:24px 18px 18px;min-width:0}
  .hero-img{order:2;width:100%;height:auto;aspect-ratio:1.55/1;background-size:cover;background-position:center}
  .hero h1{font-size:clamp(30px,9vw,40px);overflow-wrap:anywhere}
  .hero p{font-size:12px}
  .principles{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:0;margin-top:24px}
  .principles div{min-width:0;padding:12px 10px;border-right:0;border-top:1px solid #534c3c}
  .principles div:nth-child(odd){border-right:1px solid #534c3c}
  .principles b{height:auto}
  .principles b img{width:38px;height:38px}
  .categories,.briefs{padding-left:14px;padding-right:14px}
  .grid.five{grid-template-columns:1fr;gap:14px}
  .card{width:100%;height:auto;min-height:330px;padding-top:164px}
  .card img{height:175px;width:100%}
  .section-head{height:auto;min-height:47px;gap:12px;flex-wrap:wrap;padding:8px 0}
  .section-head h2{margin:0}
  .brief{width:100%;height:auto;min-height:255px;background-size:cover}
  .brief.brief-image{min-height:255px;background-size:100% 100%}
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto;padding:10px 14px;gap:0}
  .benefits div{min-width:0;border-right:0;border-bottom:1px solid #4d473a;padding:16px 8px;justify-content:flex-start;gap:10px}
  .benefits div:nth-child(odd){border-right:1px solid #4d473a}
  .benefits .benefit-icon{width:42px;height:42px;flex-basis:42px}
  .benefits span{font-size:10px}
  .bottom{display:flex;flex-direction:column;height:auto;width:100%}
  .flow,.why,.ready{width:100%;padding:24px 18px!important}
  .why{border-left:0;border-top:1px solid #5a503f}
  .bottom-img{width:100%;height:auto;aspect-ratio:16/9;min-height:0!important;background-size:cover}
  footer{width:100%;height:auto;padding:18px;display:flex;flex-direction:column;gap:12px;text-align:center}
  footer>img{width:230px;max-width:80vw;height:auto;margin:0 auto}
  footer small,.legal,.social{width:100%;text-align:center}
}

/* Mobile Optimization V6 — Insights category image sizing only */
@media(max-width:640px){
  .categories .card{padding-top:155px;}
  .categories .card img{
    width:88%;
    height:140px;
    left:6%;
    right:auto;
    top:8px;
    object-fit:contain;
    object-position:center;
  }
}

/* Mobile Optimization V6 Category Images Adjusted — hide embedded bottom artwork text only */
@media(max-width:640px){
  .categories .card img{
    clip-path:inset(0 0 16% 0);
  }
}

/* Service-mark designation — surgical brand notice */
.sm-logo-mark{position:relative}
.sm-logo-mark::after,.service-mark{font-size:8px;line-height:1;font-weight:600;letter-spacing:0;color:#fff;font-style:normal}
.sm-logo-mark::after{content:"SM";position:absolute;top:18%;right:-11px}
.service-mark{display:inline-block;vertical-align:super;margin-left:4px}
