
:root{
  --bg:#ffffff;
  --text:#111317;
  --muted:#666c73;
  --line:#e6e6e6;
  --yellow:#f1b41c;
  --yellow-deep:#e0a200;
  --green:#50b033;
  --blue:#1476e1;
  --orange:#f0aa13;
  --black:#070809;
  --container: 1240px;
  --navw: 1360px;
}
*{box-sizing:border-box}
body.cs-body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:Inter, "Segoe UI", Arial, sans-serif;
}
a{text-decoration:none;color:inherit}
.cs-wrap{width:min(var(--container), calc(100% - 58px));margin:0 auto}

/* header */
.cs-header{
  height:64px;background:#050607;color:#fff;border-bottom:1px solid #212326;
}
.cs-nav{
  max-width:var(--navw);height:100%;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:28px;
}
.cs-logo{width:150px;min-width:150px}
.cs-logo img{display:block;width:100%}
.cs-menu{display:flex;align-items:center;justify-content:center;gap:29px;flex:1;height:100%}
.cs-menu>a,.cs-menu .dd-trigger{
  display:flex;align-items:center;height:100%;font-size:10px;font-weight:850;letter-spacing:.25px;
  border-bottom:3px solid transparent;white-space:nowrap;color:#fff;
}
.cs-menu>a:hover,.cs-menu>a.active,.cs-menu .dd:hover .dd-trigger,.cs-menu .dd-trigger.active{
  color:var(--yellow);border-bottom-color:var(--yellow);
}
.dd{position:relative;height:100%;display:flex;align-items:center}
.dd-menu{
  display:none;position:absolute;top:64px;left:50%;transform:translateX(-50%);
  min-width:230px;background:#0b0c0e;border:1px solid #26292d;box-shadow:0 14px 28px rgba(0,0,0,.28);
  padding:8px;z-index:50;
}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu a{display:block;padding:10px 12px;font-size:10px;font-weight:800;color:#fff}
.dd-menu a:hover{background:#16191d;color:var(--yellow)}
.cs-talk{
  background:var(--yellow);color:#111!important;border-radius:4px;padding:12px 16px;height:auto!important;border-bottom:0!important;
  font-size:10px;font-weight:900;
}

/* hero */
.cs-hero{
  position:relative;height:515px;overflow:hidden;background:#fff;border-bottom:1px solid var(--line);
}
.cs-hero img{
  position:absolute;right:0;top:0;width:66%;height:100%;object-fit:cover;object-position:center;
}
.cs-hero::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:64%;z-index:1;
  background:linear-gradient(90deg,#fff 0%,#fff 38%,rgba(255,255,255,.94) 47%,rgba(255,255,255,.50) 59%,rgba(255,255,255,0) 74%);
}
.cs-hero-copy{
  position:relative;z-index:2;padding-top:73px;max-width:540px;
}
.cs-kicker{
  font-size:13px;font-weight:900;color:var(--yellow-deep);letter-spacing:.35px;
}
.cs-hero h1{
  margin:17px 0 10px;font-family:"Arial Narrow","Aptos Narrow","Impact",sans-serif;font-size:66px;line-height:.96;letter-spacing:-1.8px;
}
.cs-hero .sub{
  font-size:26px;color:#4b4f54;line-height:1.2;margin:0 0 28px;
}
.cs-hero p{
  font-size:13px;line-height:1.95;color:#4f555a;margin:0 0 8px;max-width:420px;
}

/* general headings */
.cs-section{padding:24px 0}
.cs-head{text-align:center;margin-bottom:18px}
.cs-head h2{
  margin:0;font-family:"Arial Narrow","Aptos Narrow","Impact",sans-serif;font-size:27px;letter-spacing:-.2px;
}
.cs-head p{margin:6px 0 0;font-size:11px;color:#666c73}

/* levels */
.cs-levels{padding-top:18px}
.cs-level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cs-card{
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px 22px 18px;min-height:260px;
}
.cs-card-head{display:flex;align-items:center;gap:15px;margin-bottom:10px}
.cs-icon{
  width:42px;height:42px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;
  font-size:22px;font-weight:700;
}
.cs-card h3{margin:0;font-size:14px;font-weight:900;letter-spacing:.15px}
.cs-card p{font-size:11.5px;line-height:1.72;color:#474d53;margin:0 0 10px}
.cs-meta-label{font-size:10px;font-weight:800;margin-top:13px;margin-bottom:2px;color:#333}
.cs-meta-value{font-size:16px;font-weight:900}
.cs-green{color:var(--green)}
.cs-blue{color:var(--blue)}
.cs-orange{color:var(--orange)}
.cs-note{margin-top:11px;text-align:center;font-size:9px;color:#777;font-style:italic}

/* process */
.cs-process{
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
}
.cs-process-grid{
  display:grid;grid-template-columns:repeat(10,1fr);gap:7px;align-items:start;
}
.cs-step{text-align:center;position:relative;padding:0 4px}
.cs-step:not(:last-child)::after{
  content:"→";position:absolute;right:-6px;top:21px;color:#bdbdbd;font-size:17px;line-height:1;
}
.cs-step-icon{
  width:47px;height:47px;border:1.5px solid #e8bf58;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;
  font-size:21px;color:#444;background:#fff;
}
.cs-step b{display:block;font-size:8.6px;line-height:1.25;min-height:31px}
.cs-step p{margin:7px 0 0;font-size:8.5px;line-height:1.52;color:#5a6066}
.cs-banner{
  margin:22px auto 0;border:1.5px solid #e4b34d;border-radius:6px;
  width:max-content;max-width:100%;padding:11px 20px;display:flex;align-items:center;gap:12px;
  color:#d69b15;font-weight:900;font-size:11px;
}
.cs-banner small{display:block;color:#596067;font-size:9px;font-weight:600}
.cs-banner .star{font-size:20px}

/* can build */
.cs-build{margin-top:21px;padding-top:18px;border-top:1px solid var(--line)}
.cs-build-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-align:center;margin-top:18px}
.cs-build-item .i{height:40px;font-size:32px;color:#26292d}
.cs-build-item b{display:block;font-size:11px;margin-bottom:5px}
.cs-build-item span{font-size:10px;color:#636970}

/* lead section */
.cs-leads{margin-top:16px}
.cs-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cs-lead-card{
  border:1px solid var(--line);border-radius:6px;background:#fff;padding:18px 18px 16px;
}
.cs-lead-card h3{
  margin:0 0 8px;font-family:"Arial Narrow","Aptos Narrow","Impact",sans-serif;font-size:28px;letter-spacing:-.2px;
}
.cs-lead-card > p{margin:0 0 14px;font-size:11px;color:#5c636a}
.cs-form{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;
}
.cs-form .full{grid-column:1 / -1}
.cs-field label{display:block;font-size:10px;font-weight:700;margin:0 0 5px;color:#2b2f34}
.cs-field input,.cs-field select,.cs-field textarea{
  width:100%;height:34px;border:1px solid #d8dadd;border-radius:4px;padding:8px 10px;font-size:11px;color:#333;background:#fff;
  font-family:inherit;
}
.cs-field textarea{height:66px;resize:vertical}
.cs-form-actions{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:3px;
}
.cs-submit{
  display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);color:#111;font-size:11px;font-weight:900;border:none;
  border-radius:4px;padding:12px 16px;min-width:150px;cursor:pointer;
}
.cs-small-note{font-size:10px;color:#5e646b}
.cs-table{
  width:100%;border-collapse:collapse;font-size:10px;
}
.cs-table th{
  text-align:left;font-size:8.5px;font-weight:900;color:#30343a;padding:7px 6px;border-bottom:1px solid var(--line);
}
.cs-table td{
  padding:7px 6px;border-bottom:1px solid #efefef;vertical-align:top;color:#25282d;
}
.cs-alert{
  margin-top:14px;border:1.5px solid #ebb64b;border-radius:5px;padding:10px 12px;font-size:9.5px;color:#525960;display:flex;gap:10px;align-items:flex-start;
}
.cs-alert .info{color:#d69a11;font-weight:900}

/* bottom question strip */
.cs-question{
  margin-top:16px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:14px 18px;
  display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:12px;
}
.cs-question .qi{font-size:34px;line-height:1;color:#202328}
.cs-question b{display:block;font-size:12px}
.cs-question span{display:block;font-size:10px;color:#60666d}
.cs-qbtn{
  display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);color:#111;border-radius:4px;
  padding:12px 18px;font-size:11px;font-weight:900;min-width:184px;
}

/* footer */
.cs-footer{
  margin-top:26px;background:#050607;color:#fff;padding:24px 0 18px;
}
.cs-footer-grid{
  display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:28px;align-items:start;
}
.cs-footer-logo{width:172px;display:block;margin-bottom:14px}
.cs-footer p,.cs-footer a{
  margin:0 0 4px;font-size:9.5px;line-height:1.7;color:#d6d9dc;
}
.cs-footer h4{
  margin:0 0 8px;font-size:10px;font-weight:900;letter-spacing:.15px;color:#fff;
}
.cs-soc{display:flex;gap:12px;margin-top:8px}
.cs-soc span{
  width:36px;height:36px;border:1px solid #9ca1a7;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#fff;
}
.cs-copy{font-size:9px;color:#a6abb0}

/* responsiveness */
@media (max-width:1150px){
  .cs-process-grid{grid-template-columns:repeat(5,1fr);row-gap:26px}
  .cs-step:nth-child(5)::after{display:none}
}
@media (max-width:900px){
  .cs-hero{height:640px}
  .cs-hero img{width:100%;height:55%}
  .cs-hero::before{width:100%;background:linear-gradient(0deg,#fff 0%,#fff 42%,rgba(255,255,255,.6) 64%,rgba(255,255,255,0) 100%)}
  .cs-hero-copy{padding-top:382px}
  .cs-level-grid,.cs-lead-grid{grid-template-columns:1fr}
  .cs-build-grid{grid-template-columns:repeat(2,1fr)}
  .cs-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .cs-menu{gap:14px}
  .cs-menu>a,.cs-menu .dd-trigger{font-size:9px}
  .cs-wrap{width:calc(100% - 28px)}
  .cs-hero h1{font-size:48px}
  .cs-form{grid-template-columns:1fr}
  .cs-question{grid-template-columns:50px 1fr}
  .cs-question .cs-qbtn{grid-column:1 / -1}
}
@media (max-width:560px){
  .cs-process-grid{grid-template-columns:repeat(2,1fr)}
  .cs-step::after{display:none!important}
  .cs-build-grid,.cs-footer-grid{grid-template-columns:1fr}
}


/* V5.10 — structural fix: no hero overlay corruption */
.cs-hero.cs-hero-clean{
  position:relative;
  display:grid;
  grid-template-columns:44% 56%;
  width:100%;
  height:515px;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.cs-hero.cs-hero-clean::before{display:none!important}
.cs-hero-left{
  position:relative;
  z-index:3;
  background:#fff;
  min-width:0;
  box-shadow:12px 0 28px rgba(255,255,255,.38);
}
.cs-hero-copy-clean{
  height:100%;
  padding-top:73px;
  padding-left:max(29px,calc((100vw - 1240px)/2));
  padding-right:36px;
}
.cs-hero-copy-clean h1{
  margin:17px 0 10px;
  font-family:"Arial Narrow","Aptos Narrow",Impact,sans-serif;
  font-size:66px;
  line-height:.96;
  letter-spacing:-1.8px;
  max-width:410px;
}
.cs-hero-copy-clean .sub{
  font-size:26px;
  color:#4b4f54;
  line-height:1.2;
  margin:0 0 28px;
}
.cs-hero-copy-clean p{
  font-size:13px;
  line-height:1.9;
  color:#4f555a;
  margin:0 0 8px;
  max-width:410px;
}
.cs-hero-media{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#111;
}
.cs-hero-media::before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  bottom:0;
  width:240px;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 16%,
      rgba(255,255,255,.96) 28%,
      rgba(255,255,255,.82) 42%,
      rgba(255,255,255,.56) 62%,
      rgba(255,255,255,.26) 80%,
      rgba(255,255,255,.08) 92%,
      rgba(255,255,255,0) 100%);
}
.cs-hero.cs-hero-clean .cs-hero-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:1;
}

/* richer, crisp SVG icon system */
.cs-icon svg,
.cs-step-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cs-card .cs-icon{
  border:0!important;
  width:44px;
  height:44px;
  background:transparent;
}
.cs-card .cs-icon svg{width:40px;height:40px}
.cs-step-icon{
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.04);
}

@media(max-width:900px){
  .cs-hero.cs-hero-clean{
    display:block;
    height:640px;
  }
  .cs-hero-left{
    position:absolute;
    left:0;right:0;bottom:0;
    height:48%;
  }
  .cs-hero-media{
    position:absolute;
    left:0;right:0;top:0;
    height:56%;
  }
  .cs-hero-media::before{
    left:0;right:0;top:auto;bottom:0;
    width:auto;height:130px;
    background:linear-gradient(0deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.96) 22%,
      rgba(255,255,255,.74) 48%,
      rgba(255,255,255,.34) 74%,
      rgba(255,255,255,0) 100%);
  }
  .cs-hero-copy-clean{
    padding:22px 28px 0;
  }
  .cs-hero-copy-clean h1{font-size:48px}
}


/* V5.11 — revised Custom Simulators content flow */
.cs-project-enquiry{
  padding-top:22px;
  padding-bottom:24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cs-project-enquiry .cs-leads{margin-top:0}
.cs-project-enquiry .cs-question{margin-bottom:0}
.cs-process{margin-top:0;padding-top:24px}
.cs-build{margin-top:0;padding-top:22px}
