/* Full-screen photographic entrance. All movement follows the visitor's scroll. */
.home-intro {
  position: relative;
  min-height: 100vh;
  background: #27343a;
}
.intro-screen {
  position: relative;
  height: 100vh;
  height: 100svh;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
}
.intro-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  z-index: -2;
}
.intro-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,20,27,.28), rgba(8,20,27,.10) 24%, rgba(8,20,27,.40) 57%, rgba(8,20,27,.20));
  opacity: var(--intro-shade, 1);
  z-index: -1;
}
.intro-copy {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 80px;
  text-align: center;
  opacity: var(--intro-copy, 1);
  transform: translateY(var(--intro-rise, 0px));
  text-shadow: 0 2px 20px rgba(8,20,27,.40);
}
.intro-eyebrow {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .22em;
  color: #fff;
}
.intro-copy h1 {
  max-width: none;
  color: #fff;
  font-size: clamp(60px, 8.7vw, 148px);
  line-height: 1.04;
  font-weight: 450;
  letter-spacing: -.055em;
  margin: 0;
}
.intro-subtitle {
  margin: 27px 0 0;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #fff;
}
.intro-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .035em;
  opacity: var(--intro-copy, 1);
  text-shadow: 0 1px 9px rgba(8,20,27,.8);
}
.intro-bottom > span:last-child { text-align: right; }
.intro-screen.is-revealed .intro-bottom { visibility: hidden; }
.intro-scroll, .intro-scroll:hover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .12em;
}
.intro-scroll span { font-size: 22px; font-weight: 400; line-height: 1; }
.js .home-intro { height: 175vh; height: 175svh; }
.js .intro-screen { position: sticky; top: 0; }
.ty-home .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
.ty-home:not(.is-past-intro):not(.is-menu-open) .site-header {
  background: linear-gradient(180deg, rgba(12,25,31,.42), rgba(12,25,31,.06));
  border-color: rgba(255,255,255,.22);
}
.ty-home:not(.is-past-intro):not(.is-menu-open) .site-header .brand-name,
.ty-home:not(.is-past-intro):not(.is-menu-open) .site-header .brand-tag,
.ty-home:not(.is-past-intro):not(.is-menu-open) .site-header .hdr-tel {
  color: #fff;
}
.ty-home:not(.is-past-intro):not(.is-menu-open) .site-header .brand .logo g:nth-of-type(2) { fill: #fff; }
.ty-home:not(.is-past-intro):not(.is-menu-open) .nav-toggle {
  background: transparent;
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.ty-home:not(.is-past-intro):not(.is-menu-open) .site-header .nav-cta > .btn {
  background: #fff;
  color: #172b39;
}
@media (min-width:1121px) {
  .ty-home:not(.is-past-intro) .site-header .dd > summary,
  .ty-home:not(.is-past-intro) .site-header .nav-a { color: #fff; }
  .ty-home:not(.is-past-intro) .site-header .dd > summary:hover,
  .ty-home:not(.is-past-intro) .site-header .dd[open] > summary,
  .ty-home:not(.is-past-intro) .site-header .nav-a:hover { background: rgba(255,255,255,.14); }
}
@media (max-width:1120px) {
  .nav { top: 76px; }
  .ty-home .nav-cta > .btn { background: #172b39 !important; color: #fff !important; }
  .intro-copy { padding-top: 76px; }
}
@media (max-width:700px) {
  .intro-photo { object-position: 48% center; }
  .intro-copy { padding-bottom: 90px; }
  .intro-copy h1 { font-size: clamp(48px, 12.8vw, 88px); }
  .intro-eyebrow { font-size: 9px; letter-spacing: .16em; margin-bottom: 16px; }
  .intro-subtitle { font-size: 14px; margin-top: 19px; max-width: 29ch; }
  .intro-bottom { grid-template-columns: 1fr auto; font-size: 10px; bottom: 26px; gap: 12px; }
  .intro-bottom > span:last-child { display: none; }
  .intro-scroll { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .js .home-intro { height: 100vh; height: 100svh; }
  .js .intro-screen { position: relative; }
  .intro-copy, .intro-bottom { opacity: 1; transform: none; }
  .intro-shade { opacity: 1; }
}
/* Solid dark callouts: readable copy and buttons, without a decorative texture. */
.cta-band { background: #172b39; color: #e6edf0; }
.cta-band::before { display: none; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #dce5e9; }
.cta-band strong { color: #fff; }
.cta-band a:not(.btn) { color: #fff; }
.cta-band .btn-primary { color: #172b39; background: #d3b88b; border-color: #d3b88b; }
.cta-band .btn-primary:hover { color: #172b39; background: #e4cca5; border-color: #e4cca5; }
.cta-band .btn-line { color: #fff; border-color: #aebdc6; }
.cta-band .btn-line:hover { color: #172b39; background: #fff; border-color: #fff; }
/* The light footer needs dark text in every state, including the opening hours. */
.site-footer a:hover { color: #172b39; }
.site-footer .logo g:nth-of-type(2) { fill: #172b39; }
.site-footer .hours-f, .site-footer .hours-f th, .site-footer .hours-f td { color: #53636c; }
.site-footer .hours-f caption { color: #172b39; }
.site-footer .hours-f tr.is-today th, .site-footer .hours-f tr.is-today td { color: #172b39; font-weight: 700; }
/* Photographs supplied for the moquette and method sections. */
.editorial-photo-equipment img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 60% center;
}
.professional-photo-band { margin: 64px auto 0; }
.professional-photo-band img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.96;
  object-fit: cover;
  object-position: center;
}
.professional-photo-band figcaption {
  margin-top: 14px;
  font-size: 11px;
  color: #66757b;
}
@media(max-width:700px) {
  .professional-photo-band { margin-top: 36px; }
  .professional-photo-band img { aspect-ratio: 3 / 2; object-position: 72% center; }
  .editorial-photo-equipment img { height: auto; }
}