/* Al Ahad Precast — tablet & mobile layer (container queries on the page root) */
.m-burger{display:none}

@container (max-width: 900px){
  .x2{flex-wrap:nowrap}
  .m-burger{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; width:44px; height:44px; margin:0 -10px 0 auto; padding:0; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent}
  .m-burger span{display:block; width:22px; height:2px; background:#101317; transition:transform .2s ease}
  .is-menu-open .m-burger span:first-child{transform:translateY(4px) rotate(45deg)}
  .is-menu-open .m-burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .x7{display:none; position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; padding:4px clamp(18px,4cqw,72px) 22px; background:#fff; border-bottom:1px solid #E5E8EC; box-shadow:0 16px 24px rgba(16,19,23,.08); font-size:12px}
  .is-menu-open .x7{display:flex}
  .x7 a{padding:17px 0; border-bottom:1px solid #E5E8EC}
  .x7 .x8{margin-top:20px; padding:17px 18px; border-bottom:0; text-align:center}
}

@container (min-width: 721px) and (max-width: 1100px){
  /* 08 plant — specs in two columns, photo full width below (side-by-side crops the cube here) */
  .x59{grid-template-columns:minmax(0,1fr)}
  .x59 .x5a{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,3.4cqw,56px)}
  .x5e{aspect-ratio:560/355; min-height:0; max-height:540px}
}

@container (max-width: 720px){
  .xn,.xx,.x16,.x1b,.x1v,.x28,.x3h,.x42,.x4j,.x4n,.x4s,.x52,.x56,.x59,.x5i,.x5u,.x60,.x63,.x6o,.x72{grid-template-columns:minmax(0,1fr)}
  .x17,.x1a{grid-column:auto; padding-right:0}

  /* 01 hero — pole stands beside the buttons */
  .x9{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:16px; align-items:end; padding:clamp(30px,7cqw,116px) clamp(18px,4cqw,72px) 0}
  .xa{display:contents}
  .xc {     margin: clamp(10px, 2.8cqw, 40px) 0 0; }
  .xb,.xc,.xd,.xg{grid-column:1/-1}
  .xh{grid-column:1; flex-direction:column; margin-bottom:44px}
  .xi,.xj{text-align:center; padding-left:16px; padding-right:16px}
  .xk{grid-column:2; align-self:stretch; min-height:60vw}
  .xl{max-width:100%}

  /* 02 approvals */
  .xv{white-space:normal}

  /* 03 range — product image beside its text */
  .x1c{grid-row:auto}
  .x1c,.x1j,.x1q{flex-direction:row; align-items:flex-end; gap:clamp(14px,4cqw,24px)}
  .x1d{flex:0 0 clamp(112px,32cqw,170px); height:clamp(170px,46cqw,230px); padding-bottom:0}
  .x1k,.x1r{flex:0 0 clamp(112px,32cqw,170px); height:clamp(130px,36cqw,180px); padding-bottom:0}
  .x1e,.x1l,.x1p,.x1s,.x1t,.x1u,.x1x,.x1z{max-width:100%; max-height:100%}
  .x1f,.x1m,.x1y{flex:1; min-width:0}
  .x1v{grid-template-columns:clamp(112px,32cqw,170px) minmax(0,1fr); column-gap:clamp(14px,4cqw,24px); align-items:end}
  .x1w{height:clamp(130px,36cqw,180px); padding-bottom:0}
  .x1y{padding-bottom:0}
  .x21{grid-column:1/-1}

  /* 04 supply record */
  .x2c{grid-template-columns:52px minmax(0,1fr); column-gap:12px}
  .x2d{display:flex; flex-wrap:wrap; gap:4px 14px}
  .x2f{grid-template-columns:52px minmax(0,1fr); column-gap:12px}
  .x2g{font-size:15px}
  .x2i{grid-template-columns:minmax(0,1fr) auto; gap:8px 14px}
  .x2j{grid-column:1/-1; align-items:flex-start; font-size:16px}
  .x2k,.x2r{margin-top:6px}
  .x2l{padding-left:19px}
  .x2m{width:auto; font-size:18px; text-align:left}
  .x2n{min-width:24px}
  .x2p{justify-content:flex-end; text-align:right}
  .x2q{white-space:normal}

  /* 05 colour code */
  .x3g{min-height:0}
  .x3k{height:176px; column-gap:8px}
  .x3l,.x3o{padding:8px 4px 0}
  .x3k img{height:104px !important}
  .x3k .is-on img{height:134px !important}
  .x3m,.x3p{width:24px; height:24px; font-size:10px}
  .x3r{column-gap:8px}
  .x3s,.x3t{height:10px}
  .x3u{display:none}

  /* 08 plant — photo keeps its own proportion, cube uncropped */
  .x5e{aspect-ratio:560/355; min-height:0}

  /* 09 projects — swipe row */
  .x5l{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin-left:calc(-1 * clamp(18px,4cqw,72px)); margin-right:calc(-1 * clamp(18px,4cqw,72px)); padding:0 clamp(18px,4cqw,72px) 4px; scroll-padding:0 clamp(18px,4cqw,72px); scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .x5l::-webkit-scrollbar{display:none}
  .x5m{flex:0 0 84%; scroll-snap-align:start}
  .x5n{height:220px}

  /* 12 yard gallery */
  .x6a{grid-template-columns:1fr 1fr; grid-template-rows:240px 150px 150px; height:auto}
  .x6b{grid-column:1/3; grid-row:1/2}
  .x6e{grid-column:1/2; grid-row:2/3}
  .x6g{grid-column:2/3; grid-row:2/3}
  .x6i{grid-column:1/2; grid-row:3/4}
  .x6k{grid-column:2/3; grid-row:3/4}
  .x6m{font-size:9px; padding:7px 10px}

  /* 13 questions — no pole here, so the block goes yellow (as block 07) */
  .x6p{display:none}
  .x6v{font-size:17.5px}
  #questions + .x5t{background:#F5A800; color:#101317; border-top:0; padding-bottom:clamp(44px,6cqw,90px)}
  #questions + .x5t .x18{color:#101317}
  #questions + .x5t .x6s{border-bottom-color:rgba(16,19,23,.2)}
  #questions + .x5t .x6u,#questions + .x5t .x6w{color:#101317}
  #questions + .x5t .x6y{color:#4A3A0C}
  .x70{border-top:0; margin-top:0}

  /* 14 form */
  .x7f{padding-top:36px; padding-left:20px; padding-right:20px}
  .x7t{margin-left:-20px; margin-right:-20px}
}