/* Responsive proposal: touch targets, readable cards and a compact timeline. */
@media (max-width: 900px) {
  html {scroll-padding-top:140px}
  header {height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 8px;padding:12px 5% 0}
  header .brand {width:clamp(92px,15vw,130px);min-width:0;order:0}
  header .brand img {width:100%;height:auto;max-height:65px;object-fit:contain}
  header .language-toggle {order:1;min-width:64px;min-height:44px;font-size:12px;padding:9px}
  header > .button.small {order:2;min-height:44px;font-size:11px;padding:10px;gap:8px;white-space:nowrap}
  header nav {display:flex;grid-column:1/-1;order:3;justify-content:space-between;gap:12px;font-size:12px;min-width:0}
  header nav a {display:flex;align-items:center;min-height:44px;padding:4px 0;white-space:nowrap}
  .hero,.scope-layout,.feature-grid,.summary-grid,.bank-section,.ceiling-review {grid-template-columns:1fr}
  .hero {display:flex;flex-direction:column;min-height:0}
  .hero-copy,html[lang=ar] .hero-copy {padding:32px 5%!important}
  .hero h1,html[lang=ar] .hero h1 {font-size:clamp(34px,8.5vw,52px);overflow-wrap:anywhere}
  .hero-image {min-height:0;height:clamp(250px,65vw,440px)}
  .hero-actions {flex-wrap:wrap;flex-direction:row;gap:16px;align-items:center}
  .hero-actions .button,.text-link {font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .hero-note,html[lang=ar] .hero-note {font-size:10px;align-items:flex-start;line-height:1.7}
  .hero-note .dot {flex-shrink:0;margin-top:6px}
  .hero-image figcaption span,.hero-image figcaption span+span,html[lang=ar] .hero-image figcaption span+span {font-size:10px}
  .wrap {width:90%;min-width:0}
  .section {padding:48px 0}
  .section-heading {display:block; margin-bottom:26px}
  .section-heading>p {margin-top:16px;max-width:none}
  .section-heading h2,.summary-grid h2,.bank-section h2,.ceiling-review h2,html[lang=ar] .section-heading h2 {font-size:clamp(27px,7vw,36px)}
  .scope-layout,.feature-grid,.summary-grid,.bank-section,.ceiling-review {gap:24px}
  .scope-layout>*,.summary-grid>*,.bank-section>*,.ceiling-review>* {min-width:0}
  .project-strip small {font-size:10px;letter-spacing:0}
  .project-strip strong {font-size:12px;overflow-wrap:anywhere}
  .zone-buttons button,.filters button {min-height:44px;font-size:12px}
  .pin {min-width:32px;min-height:32px;font-size:11px}
  .zone-content,.design-card>div {padding:22px}
  .caption,html[lang=ar] .caption,.feature-grid .caption {font-size:12px;line-height:1.85}
  .zone-content p,.design-card p:not(.eyebrow):not(.caption),.ceiling-review p {font-size:13px}
  .schedule-controls {display:block}
  .filters {flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:10px;overscroll-behavior-inline:contain}
  .filters button {flex-shrink:0}
  .search-label {display:block;margin:12px 0 0;max-width:none}
  .search-label input {font-size:16px;min-height:48px;min-width:0}
  .price-notice,.schedule-status {font-size:12px}
  .ceiling-line {align-items:flex-start;gap:12px;min-height:48px;font-size:12px}
  .ceiling-line span {min-width:0}
  .ceiling-line b {font-size:12px;flex-shrink:0}
  .ceiling-total {flex-wrap:wrap;font-size:12px}
  .cost-bars {margin-top:25px}
  .bar-label,html[lang=ar] .bar-label {font-size:12px;gap:12px;align-items:flex-start}
  .bar-label span {min-width:0}
  .bar-label b,html[lang=ar] .bar-label b {font-size:11px;white-space:nowrap}
  .grand-total strong {font-size:clamp(32px,10vw,46px)}
  .total-panel {padding:24px}
  .total-line,html[lang=ar] .total-line {font-size:12px;gap:12px}
  .total-line span {min-width:0}
  .programme-scroll {overflow:visible;padding:16px;min-width:0}
  #programme {min-width:0}
  .programme-axis,.programme-row {grid-template-columns:1fr;gap:8px}
  .programme-axis {margin-bottom:12px}
  .programme-axis>div {height:18px}
  .programme-row,html[lang=ar] .programme-row {font-size:12px;padding:14px 0;gap:10px}
  .programme-row>span {line-height:1.7}
  .programme-row i {min-width:0;font-size:9px}
  .programme-legend {flex-wrap:wrap;gap:8px 18px;font-size:12px}
  .phase-list,.terms-grid {grid-template-columns:1fr;gap:0}
  summary,.phase-list summary {font-size:13px;min-height:32px;line-height:1.8}
  details p,html[lang=ar] details p,.phase-list .gate {font-size:13px;line-height:1.9}
  .phase-list summary>b {font-size:11px}
  .payments>div {grid-template-columns:1fr;gap:20px}
  .payment {display:grid;grid-template-columns:65px minmax(0,1fr);gap:4px 12px;align-items:center}
  .payment strong {grid-row:1/3;font-size:28px}
  .payment p,.payment b {margin:0;min-height:0;font-size:13px}
  .hold-note {font-size:13px}
  .bank-panel {padding:20px;min-width:0}
  .bank-head {gap:12px}
  .bank-panel small,.bank-head span {font-size:10px;letter-spacing:0}
  .iban-row {flex-wrap:wrap;gap:12px}
  .iban-row>div {min-width:0;flex:1 1 210px}
  .iban-row strong,html[lang=ar] .iban-row strong {font-size:13px;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
  .iban-row button {min-height:44px;min-width:55px;font-size:12px}
  dialog {width:94vw;max-height:90dvh;padding:18px;overflow:auto;overscroll-behavior:contain}
  body:has(dialog[open]) {overflow:hidden}
  .dialog-grid {grid-template-columns:1fr;gap:20px;min-width:0}
  .dialog-grid>div {min-width:0}
  .dialog-top {gap:12px}
  .dialog-top .eyebrow {min-width:0;overflow-wrap:anywhere}
  .dialog-top button {min-width:44px;min-height:44px;flex-shrink:0}
  .dialog-grid h2 {font-size:25px;overflow-wrap:anywhere}
  .dialog-grid>div>p,.dialog-grid .caption {font-size:13px}
  .spec-list>div {font-size:12px;gap:12px;flex-wrap:wrap}
  .spec-list b {overflow-wrap:anywhere}
  footer {flex-wrap:wrap;gap:18px}
  footer a,footer small {font-size:12px;min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:700px) {
  .table-scroll {overflow:visible}
  table,tbody {display:block;min-width:0;width:100%}
  tbody tr {gap:0 10px;padding:18px;min-width:0}
  td {min-width:0}
  td strong {font-size:15px;line-height:1.8}
  td p,html[lang=ar] td p {font-size:13px;line-height:1.85}
  td[data-label] {font-size:12px;white-space:normal;overflow-wrap:anywhere}
  td[data-label]::before {font-size:11px;line-height:1.7;min-height:38px}
  td small {font-size:11px}
  .item-open {height:44px;font-size:13px}
  .item-open::before,html[lang=ar] .item-open::before {font-size:12px;line-height:44px}
  .schedule-status {line-height:1.9}
}
@media (min-width:701px) and (max-width:900px) {
  .table-scroll {overflow-x:auto;overscroll-behavior-inline:contain}
  table {min-width:700px}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto!important}}
@media (max-width:900px) {header .brand{max-width:100%}}
@media (max-width:360px) {
  header {gap:8px 6px}
  header .brand {width:80px}
  header .language-toggle {min-width:58px;font-size:11px;padding:8px 6px}
  header>.button.small {font-size:10px;padding:9px 7px;gap:5px}
  .ceiling-line {flex-wrap:wrap}
  .bar-label {flex-wrap:wrap;gap:4px}
}