/* Home (/ and /en/): the software house's front page. Class prefix: hm-.
   The services are glazed bricks laid in courses, one course per family; each family has its
   own glaze, and the same colour marks that family's work in the proof section. The families,
   the hero cube, the bricks and the case cards are shared with the other company pages and live
   in site.css. */

/* ---------- hero: one line, two buttons, the cube assembling ---------- */
.hm-hero .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-bottom: clamp(64px, 8vw, 112px); }
.hm-hero h1 { font-size: clamp(34px, 4vw, 58px); max-width: 15em; margin-bottom: 36px; }
[dir="ltr"] .hm-hero h1 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.12; }
.hm-hero h1, .hm-build .body-lg, .hm-proof .body-lg { text-wrap: pretty; }

/* ---------- what we build: courses of glazed bricks ---------- */
.hm-build .head { margin-bottom: clamp(34px, 4vw, 52px); }
.hm-courses { display: grid; gap: 12px; }
.hm-course { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 12px 28px; }
.hm-family {
  align-self: center; display: flex; align-items: center; gap: 12px;
  font-size: var(--t-lg); color: var(--lapis-900);
}
.hm-family::before {
  content: ""; width: 13px; height: 13px; flex: none; transform: rotate(45deg);
  background: var(--fam); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22);
}

/* ---------- proof: since 2009, and the work ---------- */
.hm-proof-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(36px, 5vw, 84px); align-items: start; }
.hm-proof-head h2 { font-size: var(--t-xl); margin-bottom: 18px; }
/* The numbers are pressed into a clay tablet, as the oldest records of Iraq were. One <li> per
   number: the tablet grows with them. */
.hm-tablet {
  list-style: none; margin-top: 34px; max-width: 380px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 28px;
  padding: 26px 30px 30px; border-radius: 24px 30px 18px 26px / 26px 20px 30px 22px;
  background: radial-gradient(120% 95% at 30% 18%, #ebc39b, #c98f5f 58%, #a26a3e);
  box-shadow: inset 0 2px 0 rgba(255,236,210,.45), inset 0 -8px 14px rgba(80,40,10,.32), 0 20px 30px -20px rgba(90,50,20,.75);
}
.hm-tablet li { display: flex; flex-direction: column; gap: 4px; }
.hm-tablet b {
  font-family: var(--f-ui); font-weight: 700; font-size: clamp(46px, 5vw, 66px); line-height: 1; color: #74431f;
  text-shadow: 1px 1px 0 rgba(255,226,190,.6), -1px -1px 0 rgba(58,24,4,.5);
}
.hm-tablet span { font-family: var(--f-ui); font-weight: 500; font-size: 15px; color: #4a270d; }

/* Client logos, once each client is cleared: <ul class="hm-clients"><li><img …></li></ul> */
.hm-clients { list-style: none; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 44px; padding-top: 30px; border-top: 1px solid var(--line); }
.hm-clients img { display: block; height: 36px; width: auto; filter: grayscale(1); opacity: .72; }

/* ---------- our own products: a shelf on the wall ---------- */
.hm-shelf { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px clamp(16px, 2.2vw, 30px); }
.hm-product {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding-top: 20px; border-top: 2px solid rgba(227,168,43,.5);
  text-decoration: none; color: #fff; transition: border-color .3s;
}
.hm-product b { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 21px; line-height: 1.3; transition: color .3s; }
.hm-product span { font-size: 15.5px; line-height: 1.7; color: #c9d3f2; }
.hm-product:hover { border-top-color: var(--gold); }
.hm-product:hover b { color: var(--gold-soft); }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .hm-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-proof-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-tablet { max-width: 460px; }
}
@media (max-width: 920px) {
  .hm-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hm-course { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hm-course + .hm-course { margin-top: 14px; }
  .hm-shelf { grid-template-columns: minmax(0, 1fr); }
}