/* Shared visual treatment for the public site. */
:root {
  --am-night: #14171b;
  --am-panel: #f3f2ee;
  --am-border: #dededa;
  --am-red: #c81724;
  --am-light-red: #ff9098;
  --am-space: clamp(48px, 7vw, 106px);
}

.site-header { background: var(--am-night); }
.site-header .audience-switch { border-color: #ffffff20; }
.site-header #main-nav > a:not(.nav-contact) { position: relative; }
.site-header #main-nav > a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px;
  height: 2px;
  background: var(--am-light-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.site-header #main-nav > a:is(:hover, :focus-visible, [aria-current="page"])::after {
  transform: scaleX(1);
}

main > .section { padding-block: var(--am-space); }

main > .page-heading {
  background: var(--am-night);
  border-bottom: 0;
  color: #fff;
}

main > .page-heading::after {
  inset: 0;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
  color: #ffffff13;
  clip-path: polygon(68% 0, 100% 0, 100% 100%, 53% 100%);
  mask-image: linear-gradient(104deg, transparent 52%, #000 100%);
}
.page-heading .page-circle { display: none; }
main > .page-heading h1 {
  color: #fff;
  font-size: clamp(37px, 6vw, 88px);
  line-height: 1.04;
  max-width: 19ch;
  text-wrap: balance;
}
main > .page-heading p { color: #e0e1e3; }
main > .page-heading .kicker { color: #ffc1c6; }
main > .page-heading :is(.plain-link, .breadcrumb, .breadcrumbs, .back-link) { color: #fff; }

.photo-opening .home-hero::after {
  background: linear-gradient(90deg, #111418ef 0%, #111418ad 34%, transparent 78%),
              linear-gradient(0deg, #101114bd 0%, transparent 60%);
}
.photo-opening .home-hero h1 {
  font-size: clamp(44px, 6.1vw, 91px);
  max-width: 15ch;
  font-weight: 650;
}
.photo-opening .segment-hero h1 { font-size: clamp(41px, 5.2vw, 80px); }
.photo-opening .home-route { border-left: 3px solid #df2733; }
.photo-opening .home-hero-image { overflow: hidden; }

.expertise .service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.expertise .service-card {
  display: grid;
  grid-template-areas: "card";
  align-items: end;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(182px, 24vw, 340px);
  background: var(--am-night);
  color: #fff;
}
.expertise .service-card > * { grid-area: card; }
.expertise .service-photo {
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: none;
}
.expertise .service-photo img { display: block; object-fit: cover; }
.expertise .service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, #0e1114f5, #0e111463 58%, #0e111411);
}
.expertise .service-info {
  padding: clamp(18px, 3vw, 38px);
  border: 0;
  margin: 0;
}
.expertise .service-info::before { content: none; }
.expertise .service-card .service-info h3 {
  color: #fff;
  font-size: clamp(21px, 2.7vw, 37px);
  max-width: 24ch;
}
.expertise .service-info p {
  color: #e7e8ea;
  font-size: 15px;
  max-width: 55ch;
  margin: 5px 0 0;
}
.expertise .service-maintenance {
  grid-column: 1 / -1;
  display: grid;
  grid-template-areas: "photo description";
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 0;
}
.expertise .service-maintenance::after { content: none; }
.expertise .service-maintenance .service-photo {
  grid-area: photo;
  position: relative;
  z-index: auto;
  min-height: 245px;
}
.expertise .service-maintenance .service-photo img {
  position: absolute;
  inset: 0;
  object-position: center 42%;
}
.expertise .service-maintenance .service-info {
  grid-area: description;
  align-self: center;
  border-left: 4px solid var(--am-red);
}
.service-maintenance-link {
  color: #ffafb5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 700;
}
.service-maintenance-link > span {
  width: 9px;
  height: 9px;
  position: relative;
  font-size: 0;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transition: transform .2s ease;
}
.service-maintenance-link > span::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}
.service-maintenance:is(:hover, :focus-visible) .service-maintenance-link > span { transform: translate(3px, -3px); }

.reference-section { padding-block: var(--am-space); }
.reference-grid .reference-card,
.named-projects .named-project {
  background: #fff;
  border: 1px solid var(--am-border);
  color: var(--am-night);
  display: block;
}
.reference-grid .reference-card h3 { margin: 0; padding: 16px 20px; max-width: none; }
.named-projects .named-project :is(h3, p, small) { margin-inline: 20px; }
.named-projects .named-project small { display: block; margin-bottom: 20px; }
.reference-grid .reference-card:is(:hover, :focus-visible) h3,
.named-projects .named-project:is(:hover, :focus-visible) h3 { color: #a51420; }

@media (min-width: 850px) {
  .reference-grid {
    align-items: stretch;
    grid-template-columns: 1.45fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 14px;
  }
  .reference-grid .reference-card {
    display: grid;
    grid-template-rows: 1fr auto;
  }
  .reference-grid .reference-card:first-child { grid-row: span 2; }
  .reference-grid .reference-photo img { height: clamp(150px, 15vw, 230px); }
  .reference-grid .reference-card:first-child img { height: 100%; position: absolute; inset: 0; }
}

main > .project-cta { background: #ad1420; color: #fff; padding-block: clamp(32px, 5vw, 65px); }
main > .project-cta::after { color: #ffffff20; }
main > .project-cta :is(h2, p, .kicker) { color: #fff; }
main > .project-cta .btn { color: var(--am-night); background: #fff; }
main > .project-cta .btn:hover { color: var(--am-night); background: #ffe8eb; }

@media (max-width: 650px) {
  .site-header #main-nav > a:not(.nav-contact)::after { display: none; }
  .photo-opening .home-hero h1 { font-size: clamp(32px, 8.5vw, 49px); }
  .expertise .service-card { min-height: 194px; }
  .expertise .service-grid,
  .expertise .service-maintenance { grid-template-columns: minmax(0, 1fr); }
  .expertise .service-maintenance { grid-template-areas: "photo" "description"; }
  .expertise .service-maintenance .service-photo { min-height: 190px; }
  .expertise .service-maintenance .service-info { border-left: 0; border-top: 3px solid var(--am-red); }
}

@media (prefers-reduced-motion: no-preference) {
  .photo-opening .home-hero-image img { animation: am-photo-in .85s cubic-bezier(.2,.75,.2,1) both; }
  .photo-opening .home-hero-copy { animation: am-title-in .46s ease-out both; }
  main > .page-heading .wrap,
  .maintenance-hero-inner > div { animation: am-title-in .5s ease-out both; }
  .am-entered { animation: am-section-in .54s ease-out both; }
  .maintenance-system[role="tabpanel"]:not([hidden]) .maintenance-intro,
  .maintenance-system[role="tabpanel"]:not([hidden]) .maintenance-grid { animation: am-section-in .27s ease-out both; }
  @keyframes am-photo-in { from { transform: scale(1.045); } to { transform: scale(1); } }
  @keyframes am-title-in { from { opacity: .76; translate: 0 9px; } to { opacity: 1; translate: 0; } }
  @keyframes am-section-in { from { translate: 0 10px; } to { translate: 0; } }
}