/* Al Madar Engineering – sections */

/* hero: photo with drawing marks, title block overlapping */
.hero { position: relative; background: var(--concrete); padding-bottom: 4rem;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; }
.hero__fig { margin: 0; position: relative; height: min(72vh, 640px); min-height: 380px; overflow: hidden; }
.hero__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.hero__marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__tag { position: absolute; top: 1rem; inset-inline-end: 1rem; background: rgba(34,39,43,.85); color: #fff; font-size: .78rem; padding: .35rem .8rem; }
.hero__block {
  position: relative; margin: -9rem 0 0; margin-inline-start: max(1.25rem, calc((100% - 1180px) / 2));
  width: min(640px, calc(100% - 2.5rem)); background: #fff; border: 2px solid var(--graphite); padding: 2rem 2rem 0;
}
.hero h1 { font-size: clamp(1.45rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.5; }
.hero__block > p { color: var(--muted); }
.titleblock { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1.5rem -2rem 0; border-top: 2px solid var(--graphite); }
.titleblock div { padding: .8rem 1rem; border-inline-start: 1px solid var(--graphite); display: flex; flex-direction: column-reverse; }
.titleblock div:first-child { border-inline-start: 0; }
.titleblock dt { font-size: .72rem; color: var(--muted); }
.titleblock dd { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.3; }

/* disciplines matrix */
.disc { padding: 5rem 0; }
.disc__head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.disc__head p { color: var(--muted); margin: 0; }
.matrix-scroll { overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; min-width: 720px; }
.matrix th, .matrix td { border: 1px solid var(--grid); padding: .9rem 1rem; }
.matrix thead th { background: var(--graphite); color: #fff; font-weight: 500; font-size: .84rem; text-align: center; border-color: var(--steel); }
.matrix thead th:first-child { text-align: right; }
.matrix tbody th { text-align: right; font-weight: 700; width: 30%; }
.matrix tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.matrix td { text-align: center; font-size: 0; }
.matrix td::before { content: ""; display: inline-block; vertical-align: middle; }
.matrix td.y::before { width: 16px; height: 16px; background: var(--yellow); border: 2px solid var(--graphite); }
.matrix td.n::before { width: 14px; height: 2px; background: #B9C0C6; }
.matrix tbody tr:hover { background: #F7F8F9; }

/* projects */
.proj { background: var(--concrete); padding: 5rem 0; }
.feature { display: grid; grid-template-columns: 5fr 7fr; background: #fff; border: 1px solid var(--grid); margin: 1.5rem 0 3rem; }
.feature img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.feature__body { padding: 2rem 2.2rem; }
.feature__body h3 { font-size: 1.3rem; }
.feature__body > p { color: var(--muted); }
.spec { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec th, .spec td { text-align: right; padding: .55rem 0; border-bottom: 1px solid var(--grid); }
.spec th { font-weight: 500; color: var(--muted); width: 40%; }
.bar { display: inline-block; width: 120px; height: 8px; background: var(--grid); vertical-align: middle; margin-inline-end: .5rem; }
.bar span { display: block; height: 100%; width: var(--p); background: var(--yellow); }

.proj__filter { display: flex; flex-wrap: wrap; border: 1px solid var(--graphite); width: fit-content; max-width: 100%; margin-bottom: 1rem; }
.proj__filter button { font: inherit; font-size: .86rem; background: #fff; border: 0; border-inline-start: 1px solid var(--graphite); padding: .55rem 1.1rem; cursor: pointer; color: var(--ink); }
.proj__filter button:first-child { border-inline-start: 0; }
.proj__filter button[aria-pressed="true"] { background: var(--graphite); color: #fff; }
.plist-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--grid); }
.plist { width: 100%; border-collapse: collapse; min-width: 760px; font-size: .9rem; }
.plist th { text-align: right; font-weight: 500; font-size: .8rem; color: var(--muted); padding: .8rem 1rem; border-bottom: 2px solid var(--graphite); }
.plist td { padding: .85rem 1rem; border-bottom: 1px solid var(--grid); }
.plist td:first-child { font-weight: 700; }
.plist tr[hidden] { display: none; }
.st { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.st::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: .4rem; vertical-align: middle; }
.st--done::before { background: #2E7D4F; }
.st--live::before { background: var(--yellow); }
.st--plan::before { background: var(--blue); }

/* process */
.process { padding: 5rem 0; }
.stages { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); counter-reset: s; border-top: 2px solid var(--graphite); }
.stages li { counter-increment: s; padding: 1.2rem 1rem 0; border-inline-start: 1px dashed var(--grid); position: relative; }
.stages li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stages li::before { content: counter(s); position: absolute; top: -15px; inset-inline-start: 1rem; width: 28px; height: 28px; background: var(--yellow); border: 2px solid var(--graphite); font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.stages li:first-child::before { inset-inline-start: 0; }
.stages__time { display: block; font-size: .76rem; color: var(--blue); font-weight: 600; margin: .6rem 0 .3rem; }
.stages p { font-size: .86rem; color: var(--muted); margin: 0; }

/* safety */
.safety { background: var(--graphite); color: #D5DADE; padding: 5rem 0; }
.safety h2 { color: #fff; }
.safety__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; }
.safety__fig { margin: 0; }
.safety__fig img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(.35); }
.facts { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.facts li { padding: .9rem 0; border-top: 1px solid #4A535B; }
.facts strong { display: block; font-size: 1.6rem; color: var(--yellow); font-weight: 800; line-height: 1.3; }
.safety__drawings { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }

/* contact */
.contact { padding: 5rem 0; }
.contact__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 3.5rem; }
.contact__grid > div > p { color: var(--muted); max-width: 40em; }
.rfq { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.rfq label { display: flex; flex-direction: column; gap: .3rem; font-size: .86rem; font-weight: 600; }
.rfq__wide { grid-column: 1 / -1; }
.rfq input, .rfq select, .rfq textarea { font: inherit; font-weight: 400; padding: .65rem .8rem; border: 1px solid #9AA4AC; background: #fff; min-height: 46px; }
.rfq [aria-invalid="true"] { border: 2px solid #B42318; }
.rfq button { grid-column: 1 / -1; justify-self: start; font: inherit; font-weight: 700; background: var(--graphite); color: #fff; border: 0; padding: .85rem 2rem; cursor: pointer; }
.rfq button:hover { background: var(--steel); }
.rfq__msg { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.rfq__msg.is-error { color: #B42318; }
.rfq__msg.is-ok { color: #2E7D4F; }

.office { border: 2px solid var(--graphite); align-self: start; }
.map { position: relative; height: 260px; background-color: #F3F4F5; overflow: hidden;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; }
.map__road { position: absolute; background: #fff; border: 1px solid #B9C0C6; }
.map__road--main { top: 55%; inset-inline: -10%; height: 34px; transform: rotate(-8deg); display: flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--muted); }
.map__road--cross { top: -10%; bottom: -10%; inset-inline-start: 22%; width: 22px; transform: rotate(12deg); }
.map__pin { position: absolute; top: 28%; inset-inline-start: 46%; background: var(--yellow); border: 2px solid var(--graphite); font-weight: 800; font-size: .8rem; padding: .2rem .6rem; }
.map__pin::after { content: ""; position: absolute; top: 100%; inset-inline-start: 50%; width: 2px; height: 30px; background: var(--graphite); }
.office address { font-style: normal; padding: 1.4rem; border-top: 2px solid var(--graphite); line-height: 2; }
.office address strong { display: block; }

@media (max-width: 1024px) {
  .stages { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .stages li:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  .stages li:nth-child(4)::before { inset-inline-start: 0; }
}
@media (max-width: 860px) {
  .disc__head, .feature, .safety__grid, .contact__grid { grid-template-columns: 1fr; }
  .feature img { aspect-ratio: 16 / 9; min-height: 0; }
  .safety__fig img { aspect-ratio: 16 / 9; }
  .hero__block { margin-top: -5rem; }
}
@media (max-width: 600px) {
  .hero { padding-bottom: 2.5rem; }
  .hero__fig { height: 52vh; min-height: 300px; }
  .hero__tag { font-size: .7rem; inset-inline: .75rem; top: .75rem; }
  .hero__block { padding: 1.4rem 1.2rem 0; margin-top: -3rem; }
  .titleblock { grid-template-columns: 1fr 1fr; margin: 1.2rem -1.2rem 0; }
  .titleblock div:nth-child(3) { border-inline-start: 0; }
  .titleblock div:nth-child(n+3) { border-top: 1px solid var(--graphite); }
  .disc, .proj, .process, .safety, .contact { padding: 3.5rem 0; }
  .feature__body { padding: 1.4rem; }
  .proj__filter { width: 100%; }
  .proj__filter button { flex: 1 1 auto; border-bottom: 1px solid var(--graphite); }
  .stages { grid-template-columns: 1fr; border-top: 0; border-inline-start: 2px solid var(--graphite); row-gap: 0; }
  .stages li, .stages li:first-child, .stages li:nth-child(4) { border-inline-start: 0; padding: 0 0 1.4rem; padding-inline-start: 1.6rem; }
  .stages li::before, .stages li:first-child::before, .stages li:nth-child(4)::before { top: 0; inset-inline-start: -15px; }
  .stages__time { margin-top: 0; }
  .rfq { grid-template-columns: 1fr; }
  .rfq button { justify-self: stretch; }
}