/* The pergola sequence's aperture, space and type continue into the directory. */
#systems.systems-gateway, html.has-journey #systems.systems-gateway {
  position:relative; height:auto; margin:clamp(100px,11vw,170px) 0 clamp(110px,12vw,180px);
  padding:0 8px; scroll-margin-top:45px;
}
#systems .systems-gateway-heading {
  display:flex; align-items:baseline; justify-content:space-between; gap:32px;
  padding:0 calc(var(--shell) - 8px); margin-bottom:clamp(42px,5vw,76px);
}
#systems .systems-gateway-heading h2 {
  margin:0; font-size:clamp(40px,5.1vw,88px); line-height:.98; font-weight:400; letter-spacing:-.06em;
}
#systems .systems-gateway-all {
  display:inline-flex; align-items:center; flex:0 0 auto; gap:30px; min-height:44px;
  font-size:13px; line-height:1.3;
}
#systems .systems-gateway-directory { display:block; }
#systems .systems-gateway-main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#systems .systems-gateway-card {
  position:relative; display:block; min-width:0; color:var(--cream);
  -webkit-tap-highlight-color:rgba(244,239,231,.12); touch-action:manipulation;
}
#systems .systems-gateway-category {
  --gateway-inset-x:0%; --gateway-inset-y:0%; --gateway-radius:44px; --gateway-zoom:1;
}
#systems .systems-gateway-image {
  position:relative; display:block; height:clamp(610px,86svh,1040px); overflow:hidden; isolation:isolate;
  background:var(--ink); border-radius:44px;
  clip-path:inset(var(--gateway-inset-y) var(--gateway-inset-x) round var(--gateway-radius));
}
#systems .systems-gateway-image img {
  display:block; width:100%; height:100%; max-width:none; object-fit:cover;
  object-position:var(--gateway-position,50% 50%);
  transform:scale(var(--gateway-zoom)); transition:scale 1.2s var(--ease);
}
#systems .systems-gateway-image::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(20,19,17,.1) 72%,rgba(20,19,17,.57));
}
#systems .systems-gateway-pergolas { --gateway-position:50% 59%; }
#systems .systems-gateway-facades { --gateway-position:50% 33%; }
#systems .systems-gateway-category .systems-gateway-copy {
  position:absolute; z-index:1; inset:auto clamp(26px,3.4vw,58px) clamp(32px,4.3vw,66px);
}
#systems .systems-gateway-name {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:clamp(66px,7.1vw,120px); line-height:.96; letter-spacing:-.065em;
}
#systems .systems-gateway-arrow {
  display:inline-grid; place-items:center; flex:0 0 auto; width:44px; height:44px;
  font-size:34px; line-height:1; letter-spacing:0;
  transition:transform .5s var(--ease);
}
#systems .systems-gateway-more {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,5vw,100px);
  padding:44px calc(var(--shell) - 8px) 0;
}
#systems .systems-gateway-family { display:flex; align-items:center; min-height:66px; }
#systems .systems-gateway-family .systems-gateway-copy { display:block; width:100%; }
#systems .systems-gateway-family .systems-gateway-name { font-size:clamp(20px,2vw,30px); line-height:1.15; letter-spacing:-.04em; gap:12px; }
#systems .systems-gateway-family .systems-gateway-arrow, #systems .systems-gateway-all .systems-gateway-arrow { width:28px; height:44px; font-size:22px; }
#systems .systems-gateway-card:focus-visible { outline:2px solid var(--cream); outline-offset:6px; border-radius:44px; }
#systems .systems-gateway-family:focus-visible, #systems .systems-gateway-all:focus-visible { border-radius:0; outline:2px solid var(--cream); outline-offset:6px; }
#systems .systems-gateway-category:focus-visible .systems-gateway-image { clip-path:inset(0 round 44px); }
#systems .systems-gateway-category:focus-visible .systems-gateway-image img { transform:none; }
/* Older markup stays quiet until the new section is integrated. */
#systems .systems-gateway-intro p, #systems .systems-gateway-kind, #systems .systems-gateway-description,
#systems .systems-gateway-family .systems-gateway-image { display:none; }
@media (hover:hover) and (pointer:fine) {
  html.is-motion #systems .systems-gateway-category:hover .systems-gateway-image img { scale:1.025; }
  html.is-motion #systems a:hover .systems-gateway-arrow { transform:translate(3px,-3px); }
  #systems .systems-gateway-family:hover .systems-gateway-name { color:var(--taupe); }
}
@media (max-width:1000px) {
  #systems .systems-gateway-heading { gap:24px; }
  #systems .systems-gateway-heading h2 { font-size:clamp(42px,5.1vw,62px); }
  #systems .systems-gateway-image { height:clamp(550px,77svh,840px); }
  #systems .systems-gateway-category .systems-gateway-copy { inset-inline:25px; bottom:36px; }
  #systems .systems-gateway-name { font-size:clamp(52px,7.2vw,74px); gap:8px; }
  #systems .systems-gateway-category .systems-gateway-arrow { width:36px; font-size:28px; }
  #systems .systems-gateway-more { gap:28px; }
}
@media (max-width:600px) {
  #systems.systems-gateway, html.has-journey #systems.systems-gateway { margin:92px 0 110px; }
  #systems .systems-gateway-heading { align-items:flex-end; padding:0 16px; gap:18px; margin-bottom:34px; }
  #systems .systems-gateway-heading h2 { max-width:210px; font-size:clamp(41px,11vw,60px); line-height:1; }
  #systems .systems-gateway-all { gap:8px; font-size:11px; white-space:nowrap; margin-bottom:2px; }
  #systems .systems-gateway-all .systems-gateway-arrow { font-size:18px; width:20px; }
  #systems .systems-gateway-main { grid-template-columns:minmax(0,1fr); gap:22px; }
  #systems .systems-gateway-image { height:clamp(490px,76svh,690px); border-radius:28px; }
  #systems .systems-gateway-category { --gateway-radius:28px; }
  #systems .systems-gateway-category .systems-gateway-copy { inset-inline:27px; bottom:36px; }
  #systems .systems-gateway-name { font-size:clamp(62px,16vw,92px); gap:12px; }
  #systems .systems-gateway-category .systems-gateway-arrow { width:44px; font-size:30px; }
  #systems .systems-gateway-more { grid-template-columns:minmax(0,1fr); gap:0; padding:32px 18px 0; }
  #systems .systems-gateway-family { min-height:76px; }
  #systems .systems-gateway-family + .systems-gateway-family { border-top:1px solid rgba(244,239,231,.16); }
  #systems .systems-gateway-family .systems-gateway-name { font-size:25px; }
  #systems .systems-gateway-category:focus-visible .systems-gateway-image { clip-path:inset(0 round 28px); }
}
@media (max-height:540px) and (orientation:landscape) {
  #systems .systems-gateway-image { height:clamp(440px,62vw,650px); }
}
html:not(.is-motion) #systems .systems-gateway-image { clip-path:inset(0 round var(--gateway-radius,44px)); }
html:not(.is-motion) #systems .systems-gateway-image img, html:not(.is-motion) #systems .systems-gateway-arrow { transform:none !important; scale:none !important; transition:none; }
@media (prefers-reduced-motion:reduce) {
  #systems .systems-gateway-image { clip-path:inset(0 round var(--gateway-radius,44px)); }
  #systems .systems-gateway-image img, #systems .systems-gateway-arrow { transform:none !important; scale:none !important; transition:none; }
}