@import url('/website/style.css');

.head>a:first-child{display:flex}
.head nav a{text-decoration:none;color:#00618d}
.hero{background-image:url('/website/assets-architectural/Hero-Image-to-use.jpg');background-position:center 48%}
.hero img{object-position:center}
.gallery:not(.expanded) button:nth-child(n+18){display:none!important}
.gallery.expanded button{display:block!important}
.req-image{background-image:url('/website/assets-architectural/Railway-Lane-Model-6.jpg')}
.cards{max-width:1240px;grid-template-columns:repeat(4,1fr);gap:24px}
.cards article{padding:24px 18px}
.cards i{font-family:helv,Arial,sans-serif;font-style:normal;font-weight:300}
.contact-model{display:block;width:100%;height:auto;margin:4px 0 24px}
.drop.dragging{border-color:#0875a6;background:#eef8fc}
.call h2{cursor:pointer}
.call h2:focus{outline:2px solid #0875a6;outline-offset:5px}
footer>a{align-self:start}
footer a{text-decoration:none;color:#01618d}

@media(max-width:800px){.cards{grid-template-columns:1fr}.hero img{width:100%}.head nav>a{display:block}.head>a:first-child{display:flex}}

/* Match the graphical introductions immediately beneath the other heroes. */
.words.models-intro{
  position:relative;isolation:isolate;width:100%;max-width:none;margin:0;
  padding:clamp(110px,10vw,158px) max(24px,calc((100% - 1064px)/2));
  display:grid;grid-template-columns:.78fr 2.1fr 1.05fr;
  gap:clamp(38px,5.5vw,86px);align-items:start;overflow:hidden;
  background:#171b1a;color:#f4f5f2;text-align:left;scroll-margin-top:70px;
  font-family:SCRDSans,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.words.models-intro::before{
  content:"";position:absolute;z-index:0;left:50%;top:0;width:100%;height:100%;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;transform:translateX(-50%);
}
.words.models-intro>.models-eyebrow,
.words.models-intro>h2,
.words.models-intro>.models-summary{position:relative;z-index:2}
.words.models-intro .models-eyebrow{margin:0;color:#aeb7b3;font:600 10.5px/1.5 RockHero,Arial,sans-serif;letter-spacing:.17em}
.words.models-intro .models-eyebrow::before{content:"";display:block;width:30px;height:1px;margin-bottom:20px;background:#d5dfa9}
.words.models-intro h2{margin:0;color:#f4f5f2;font:300 clamp(48px,5.1vw,76px)/.99 SCRDSans,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.044em;text-transform:none;text-wrap:balance}
.words.models-intro h2::after{display:none}
.words.models-intro .models-summary{min-width:0;margin-top:12px}
.words.models-intro .models-summary p{margin:0 0 24px;color:#c0c8c4;font-size:17px;line-height:1.72;letter-spacing:0;text-transform:none}
.words.models-intro .models-summary p:last-child{margin-bottom:0}
.models-intro .overview-blueprint{position:absolute;z-index:1;inset:0;pointer-events:none}
.models-intro .overview-blueprint svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(205,215,210,.13);stroke-width:1;vector-effect:non-scaling-stroke}
.models-intro .overview-blueprint svg circle{fill:#dbe5b5;stroke:#171b1a;stroke-width:4}
.models-intro .overview-node{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(205,215,210,.2);background:#171d1b;color:#bcc7c1;font:600 9px/1 RockHero,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;transition:opacity .45s,transform .55s}
.models-intro .overview-node b{color:#dbe5b5}
.models-intro .overview-node small{font:inherit;white-space:nowrap}
.models-intro .overview-node--form{left:7%;top:36px}
.models-intro .overview-node--scale{right:7%;top:36px}
.models-intro .overview-node--context{right:20%;bottom:36px}
@media(max-width:900px){
  .words.models-intro{display:block;padding:88px 24px}
  .words.models-intro h2{max-width:620px;margin:24px 0 30px;font-size:clamp(43px,11vw,62px);line-height:1.01}
  .words.models-intro .models-summary{max-width:620px;margin:0}
  .words.models-intro .models-summary p{font-size:16.5px}
  .models-intro .overview-node--form{left:24px;top:24px}
  .models-intro .overview-node--scale{right:24px;top:24px}
  .models-intro .overview-node--context{right:24px;bottom:24px}
}