:root{--ai-ink:#142b36;--ai-copy:#40555f;--ai-muted:#71828a;--ai-line:rgba(20,43,54,.18);--ai-pale:#f2f5f5;--ai-blue:#dceaf0}.ai-detail{color:var(--ai-ink)}.ai-shell{width:min(1280px,calc(100% - 2*clamp(24px,5vw,72px)));margin-inline:auto}.ai-kicker{margin:0 0 22px;}.ai-detail h1,.ai-detail h2{margin:0;text-wrap:balance}.ai-detail h1{}.ai-detail h2{}.ai-copy{color:var(--ai-copy);}.ai-copy p:first-child{margin-top:0}.ai-copy p:last-child{margin-bottom:0}.ai-link{display:inline-block;margin-top:34px;padding-bottom:6px;border-bottom:1px solid currentColor;color:var(--ai-ink)}.ai-heading{display:grid;grid-template-columns:1.08fr .82fr;gap:8vw;align-items:start}.ai-hero{padding:clamp(150px,15vw,218px) 0 clamp(90px,9vw,132px);background:#fff}.ai-hero-sequence{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(24px,3vw,48px);align-items:end;margin-top:clamp(68px,7vw,100px)}.ai-hero figure,.ai-final-visual,.ai-alignment-visual,.ai-test-visual{margin:0;overflow:hidden}.ai-hero img,.ai-final-visual img,.ai-alignment-visual img,.ai-test-visual img{display:block;width:100%}.ai-hero-structure img{height:clamp(430px,39vw,560px);object-fit:cover;object-position:center}.ai-hero-space img{height:clamp(520px,48vw,690px);object-fit:cover;object-position:center}.ai-section{padding:clamp(92px,10vw,150px) 0}.ai-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:8vw;align-items:center}.ai-building{background:var(--ai-pale)}.ai-building-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.ai-building-pair img{display:block;width:100%;height:auto}.ai-split-technical{grid-template-columns:1.08fr .72fr}.ai-alignment-visual{max-width:510px;justify-self:center}.ai-alignment-visual img{height:auto}.ai-test{background:var(--ai-pale)}.ai-test-visual{max-width:520px;justify-self:center}.ai-test-visual img{height:auto}.ai-final .ai-heading{margin-bottom:clamp(64px,7vw,96px)}.ai-final-visual img{height:clamp(620px,58vw,820px);object-fit:cover;object-position:center}.ai-design{background:var(--ai-pale)}.ai-units{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:clamp(64px,7vw,96px) 0 0;padding:0;border-top:1px solid var(--ai-line)}.ai-units li{min-height:190px;padding:26px 30px 22px 0;border-right:1px solid var(--ai-line);border-bottom:1px solid var(--ai-line)}.ai-units li:nth-child(3n+2),.ai-units li:nth-child(3n+3){padding-left:30px}.ai-units li:nth-child(3n){border-right:0}.ai-units span{display:block;margin-bottom:42px;color:var(--ai-muted)}.ai-units strong{display:block;}.ai-units p{margin:10px 0 0;color:var(--ai-copy)}.ai-next{padding:clamp(90px,10vw,144px) 0;background:var(--ai-blue)}.ai-next h2{}.ai-next p:not(.ai-kicker){margin:28px 0 0;color:var(--ai-copy)}.ai-next-link{display:inline-block;margin-top:38px;padding:14px 22px;background:var(--ai-ink);color:#fff;}
@media(max-width:900px){.ai-heading,.ai-split{grid-template-columns:1fr}.ai-heading,.ai-split{gap:42px}.ai-hero-sequence{grid-template-columns:.72fr 1.28fr}.ai-split-technical{align-items:start}.ai-alignment-visual{max-width:470px}.ai-test-visual{max-width:500px}.ai-units{grid-template-columns:repeat(2,1fr)}.ai-units li:nth-child(n){padding:24px 26px;border-right:1px solid var(--ai-line)}.ai-units li:nth-child(odd){padding-left:0}.ai-units li:nth-child(even){border-right:0}}
@media(max-width:560px){.ai-hero{padding-top:118px}.ai-detail h1{}.ai-detail h2{}.ai-copy{}.ai-hero-sequence{grid-template-columns:1fr;gap:18px;margin-top:52px}.ai-hero-structure img{height:auto;max-height:none;object-fit:contain}.ai-hero-space img{height:auto;aspect-ratio:4/3;object-fit:cover}.ai-section{padding:78px 0}.ai-building-pair{grid-template-columns:1fr;gap:18px}.ai-building-pair img{width:92%;margin-inline:auto}.ai-alignment-visual,.ai-test-visual{width:94%;max-width:none}.ai-final-visual img{height:auto;aspect-ratio:4/3;object-fit:cover}.ai-units{grid-template-columns:1fr;margin-top:48px}.ai-units li:nth-child(n){min-height:0;padding:22px 0;border-right:0}.ai-units span{margin-bottom:18px;}.ai-next p:not(.ai-kicker){}}


/* User-approved alignment diagram scale refinement. */
.ai-alignment-visual {
  width:min(76%,360px);
  max-width:360px;
}
@media(max-width:900px) {
  .ai-alignment-visual { width:min(70%,340px);max-width:340px; }
}
@media(max-width:560px) {
  .ai-alignment-visual { width:min(72%,300px);max-width:300px; }
}

/* Keep only row separators in the project-information grid and tighten spacing. */
.ai-units {
  margin-top:clamp(40px,4.5vw,64px);
  border-top:0;
}
.ai-units li,
.ai-units li:nth-child(n) {
  min-height:154px;
  padding:22px 24px;
  border-right:0;
  border-bottom:0;
}
.ai-units li:nth-child(3n+1) {
  padding-left:0;
}
.ai-units li:nth-child(-n+3) {
  border-bottom:1px solid var(--ai-line);
}
.ai-units span {
  margin-bottom:24px;
}
@media(max-width:900px) {
  .ai-units li:nth-child(n) { border-bottom:0; }
  .ai-units li:nth-child(odd) { padding-left:0; }
  .ai-units li:nth-child(-n+4) { border-bottom:1px solid var(--ai-line); }
}
@media(max-width:560px) {
  .ai-units { margin-top:36px; }
  .ai-units li:nth-child(n) {
    min-height:0;
    padding:18px 0;
    border-bottom:0;
  }
  .ai-units li:not(:last-child) {
    border-bottom:1px solid var(--ai-line);
  }
  .ai-units span { margin-bottom:12px; }
}

/* Match the compact closing-guide height used by the approved DML page. */
.ai-next {
  padding:64px 0;
}
.ai-next .ai-shell {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  column-gap:90px;
}
.ai-next .ai-kicker {
  grid-column:1;
  grid-row:1;
  margin:0 0 24px;
}
.ai-next h2 {
  grid-column:1;
  grid-row:2;
}
.ai-next p:not(.ai-kicker) {
  grid-column:2;
  grid-row:1;
  margin:0 0 18px;
}
.ai-next-link {
  grid-column:2;
  grid-row:2;
  justify-self:start;
  margin:0;
  padding:8px 22px;
}
@media(max-width:1100px) {
  .ai-next .ai-shell { column-gap:48px; }
}
@media(max-width:800px) {
  .ai-next .ai-shell { display:block; }
  .ai-next p:not(.ai-kicker) { margin:32px 0 18px; }
}
@media(max-width:560px) {
  .ai-next { padding:54px 0; }
}

/* Replace the tall technical diagram with the approved Avalon image and rebalance the split. */
@media(min-width:901px) {
  .ai-alignment .ai-split-technical {
    grid-template-columns:.9fr 1.1fr;
    gap:7vw;
  }
}
.ai-alignment-visual {
  width:100%;
  max-width:none;
  justify-self:stretch;
  aspect-ratio:3/2;
}
.ai-alignment-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
@media(max-width:900px) {
  .ai-alignment-visual {
    width:min(100%,680px);
    max-width:680px;
    justify-self:center;
  }
}
@media(max-width:560px) {
  .ai-alignment-visual { width:100%;max-width:none; }
}
@media(min-width:801px) and (max-width:1279px) {
  .ai-next { padding-bottom:65px; }
}
@media(min-width:561px) and (max-width:800px) {
  .ai-next { padding-bottom:69px; }
}
@media(min-width:341px) and (max-width:560px) {
  .ai-next { padding-bottom:59px; }
}
@media(max-width:340px) {
  .ai-next { padding-bottom:59px; }
}


/* Keep comma-led title phrases on line two at desktop widths. */
.ai-desktop-break {
  display: block;
}

/* Match the approved materials-and-finishes hero: copy left, one image right. */
.ai-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
.ai-hero-layout > div {
  min-width: 0;
}
.ai-hero-layout .ai-copy {
  max-width: 620px;
  margin-top: 42px;
}
.ai-hero-layout figure {
  margin: 0;
  overflow: hidden;
}
.ai-hero-layout img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* Put BUILDING CONDITIONS diagrams left and copy right on desktop. */
@media (min-width: 901px) {
  .ai-building .ai-split {
    grid-template-columns: 1.14fr .86fr;
    grid-template-areas: "visual copy";
  }
  .ai-building .ai-split > :first-child {
    grid-area: copy;
  }
  .ai-building .ai-split > :last-child {
    grid-area: visual;
  }
}

/* Rebalance the test illustration against its text column on desktop. */
@media (min-width: 901px) {
  .ai-test-visual {
    width: min(100%, 420px);
    max-width: 420px;
    justify-self: center;
  }
}

/* Tighten the completed-surface transition and remove the tail below its image. */
.ai-final {
  padding-top: clamp(78px, 7vw, 108px);
  padding-bottom: clamp(78px, 7vw, 108px);
}
.ai-final .ai-heading {
  margin-bottom: clamp(44px, 4vw, 58px);
}
.ai-final-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  grid-template-areas: "visual copy";
  gap: clamp(48px, 6vw, 90px);
  align-items: center;
}
.ai-final-copy {
  grid-area: copy;
  min-width: 0;
}
.ai-final-copy h2 + .ai-copy {
  margin-top: 42px;
}
.ai-final-layout .ai-final-visual {
  grid-area: visual;
  width: 100%;
}
.ai-final-layout .ai-final-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* Keep the project-information chapter compact without changing its grid. */
.ai-design {
  padding: clamp(70px, 6vw, 96px) 0;
}
.ai-design .ai-units {
  margin-top: clamp(32px, 3vw, 44px);
}
@media (min-width: 561px) {
  .ai-design .ai-units li,
  .ai-design .ai-units li:nth-child(n) {
    min-height: 132px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

/* Match narrow-layout title-to-copy spacing to the FINAL SURFACE section. */
.ai-building h2 + .ai-copy,
.ai-alignment h2 + .ai-copy,
.ai-test h2 + .ai-copy {
  margin-top: 42px;
}

@media (max-width: 900px) {
  .ai-hero-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .ai-hero-layout img {
    width: min(560px, 100%);
    margin-inline: auto;
  }
  .ai-final-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual";
    gap: 44px;
  }

  .ai-desktop-break {
    display: none;
  }

}

@media (max-width: 560px) {
  .ai-hero-layout .ai-copy {
    margin-top: 34px;
  }
  .ai-hero-layout {
    gap: 50px;
  }
  .ai-hero-layout img {
    width: 100%;
  }
}

/* Match the reference title's visual scale on desktop. */
.ai-detail .ai-hero h1 {
  font-size: 42px;
  line-height: 1.18;
}
@media (max-width: 1100px) {
  .ai-detail .ai-hero h1 { font-size: 42px; }
}
@media (max-width: 767px) {
  .ai-detail .ai-hero h1 { font-size: 34px; }
}