/* One optical size and stroke rhythm across navigation, controls and capabilities. */
.hd-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  pointer-events: none;
}
.hd-icon .hd-accent { stroke: var(--brand, #cc3732); }
.hd-icon .hd-accent-fill { fill: var(--brand, #cc3732); stroke: none; }
.arrow:has(> .hd-icon),
.project-open,
.case-open,
.solution-trigger .plus,
.back-top,
.modal-close,
.gallery-controls button,
.showcase-controls button,
.play-button i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.arrow > .hd-icon,
.project-open > .hd-icon,
.case-open > .hd-icon,
.solution-trigger .plus > .hd-icon,
.gallery-controls button > .hd-icon,
.showcase-controls button > .hd-icon,
.play-button i > .hd-icon,
.visual-caption > a > .hd-icon {
  display: block;
  width: 17px;
  height: 17px;
}
.pill .circle > .hd-icon { width: 15px; height: 15px; }
/* An open viewfinder and directional arrow invite a closer look at the site. */
#open-gallery { min-height: 44px; }
#open-gallery > i {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid #71879155;
  border-radius: 50%;
  color: #39535f;
  background: linear-gradient(145deg, #ffffffc9, #edf2f48c);
  box-shadow: inset 0 1px 0 #ffffffeb, 0 3px 12px #223c490b;
  transition: border-color .25s ease, box-shadow .25s ease;
}
#open-gallery > i > .hd-icon { width: 24px; height: 24px; stroke-width: 1.4; }
#open-gallery .site-visit-arrow { stroke-width: 1.7; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
#open-gallery:focus-visible > i { border-color: var(--brand); box-shadow: 0 0 0 4px #cc373214; }
@media (hover: hover) and (pointer: fine) {
  #open-gallery:hover > i { border-color: #a2595366; box-shadow: inset 0 1px 0 #fff, 0 5px 16px #34495415; }
  #open-gallery:hover .site-visit-arrow { transform: translate(1px,-1px); }
}
@media (max-width: 640px) {
  #open-gallery > i { width: 40px; height: 40px; }
  #open-gallery > i > .hd-icon { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #open-gallery > i, #open-gallery .site-visit-arrow { transition: none; }
  #open-gallery:hover .site-visit-arrow { transform: none; }
}
.project-open > .hd-icon { width: 15px; height: 15px; }
.back-top > .hd-icon { width: 18px; height: 18px; }
.modal-close > .hd-icon { width: 20px; height: 20px; }
.copy-address:has(.hd-icon),
.form-actions button:has(> .hd-icon) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.copy-address .hd-icon { width: 13px; height: 13px; }
.contact-row > span:has(.hd-icon) {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}
.contact-row > span .hd-icon { width: 14px; height: 14px; margin-top: 3px; }
.menu-button > .hd-icon { width: 25px; height: 25px; }
@media (max-width: 960px) {
  .menu-button:has(> .hd-icon) { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
}
.hd-icon-menu .menu-line-top {
  transform-origin: 12px 8px;
  transition: transform .3s var(--ease);
}
.hd-icon-menu .menu-line-bottom {
  transform-origin: 12px 16px;
  transition: transform .3s var(--ease);
}
.menu-button[aria-expanded="true"] .menu-line-top { transform: translateY(4px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-line-bottom { transform: translateY(-4px) rotate(-45deg); }
.capability-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border: 1px solid #d9e2e8;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #edf3f6);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px #20374606;
  color: #3b5362;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.capability-icon > .hd-icon {
  width: 27px;
  height: 27px;
  margin: 0;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .capability-grid > div:hover .capability-icon {
    border-color: #c8d5de;
    background: linear-gradient(145deg, #fff, #f4eae8);
    box-shadow: inset 0 1px 0 #fff, 0 7px 18px #2037460b;
    transform: translateY(-3px);
  }
  .capability-grid > div:hover .capability-icon > .hd-icon { transform: translateY(-1px); }
}
@media (max-width: 640px) {
  .capability-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
  .capability-icon > .hd-icon { width: 25px; height: 25px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .capability-icon,
  .capability-icon > .hd-icon,
  .hd-icon-menu .menu-line-top,
  .hd-icon-menu .menu-line-bottom { transition: none; }
  .capability-grid > div:hover .capability-icon,
  .capability-grid > div:hover .capability-icon > .hd-icon { transform: none; }
}