/* Contact: three studio columns that widen on hover, Let's Connect CTA with a compact footer; FAQ page */
.contact-page, .faq-page { background: var(--porcelain); }
.contact { display: grid; grid-template-columns: 33.33% 33.33% 33.34%; height: 100vh; transition: grid-template-columns .3s var(--ease); width: 100%; color: var(--slate); }
.title-mob { display: none; }
.work-place { overflow: hidden; position: relative; }
.work-place.n2 { border-left: 1px solid var(--slate-10); border-right: 1px solid var(--slate-10); }
.static-content { align-items: center; display: flex; flex-direction: column; gap: 2.5rem; height: 100%; padding: 11.75rem 1.5rem 2rem; }
.static-content .title { transition: font-size .3s var(--ease), letter-spacing .3s var(--ease); white-space: nowrap; }
.static-content .address { text-align: center; width: 16.5rem; transition: all .3s var(--ease); }
.phone { display: block; margin-top: -.5rem; }
.mob-map-link, .mob-img-details { display: none; }
.small-img { height: 13rem; margin-top: auto; position: relative; transition: all .3s var(--ease); width: 13rem; overflow: hidden; }
.hover-content { height: 100%; left: 0; opacity: 0; padding: 7rem 0 2rem; position: absolute; top: 0; transition: opacity .3s var(--ease); width: 50vw; pointer-events: none; }
.hover-content .bg { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; }
.hover-content .bg::before, .hover-content .bg::after { content: ""; left: 0; position: absolute; width: 100%; z-index: 1; }
.hover-content .bg::before { background: linear-gradient(180deg, #111816, rgba(17, 24, 22, 0)); height: 71.5vh; opacity: .55; top: 0; }
.hover-content .bg::after { background: linear-gradient(0deg, #111816, rgba(17, 24, 22, 0)); bottom: 0; height: 28.5vh; opacity: .7; }
.main-img { transform: scale(1.2); transition: transform .6s var(--ease); }
.hover-content .content { align-items: center; display: flex; flex-direction: column; gap: 1.5rem; height: 100%; position: relative; z-index: 1; }
.title-wrap { align-items: center; display: flex; flex-direction: column; height: 9rem; overflow: hidden; width: 100%; }
.marquee { color: #fff; transform: translateY(100%); transition: transform .3s var(--ease) .3s; white-space: nowrap; }
.hover-content .address, .hover-phone, .days, .time, .phone-bottom { color: #fff; opacity: 0; transform: translateY(100%); transition: all .3s var(--ease) .3s; }
.hover-phone { margin-top: 1.5rem; }
.hover-content .bottom { align-items: flex-end; display: flex; justify-content: space-between; margin-top: auto; padding: 0 2rem; width: 100%; }
.wrap-work-hours { display: flex; gap: 1.5rem; }
.work-hours { display: flex; flex-direction: column; gap: .5rem; }
.work-hours:not(:last-child) { border-right: 1px solid var(--porcelain-15); padding-right: 1.5rem; }
@media (min-width: 1024px) and (hover: hover) {
  .contact:has(.n1:hover) { grid-template-columns: 50% 25% 25%; }
  .contact:has(.n2:hover) { grid-template-columns: 25% 50% 25%; }
  .contact:has(.n3:hover) { grid-template-columns: 25% 25% 50%; }
  .contact:has(.work-place:hover) .work-place:not(:hover) .address { margin-top: 1.75rem; }
  .contact:has(.work-place:hover) .work-place:not(:hover) .title { font-size: 2.6rem; }
  .contact:has(.work-place:hover) .work-place:not(:hover) .small-img { height: 11rem; width: 11rem; }
  .work-place:hover .hover-content { opacity: 1; pointer-events: auto; }
  .work-place:hover .main-img { transform: scale(1); }
  .work-place:hover .marquee { transform: none; }
  .work-place:hover .days { opacity: .5; transform: none; }
  .work-place:hover .content .address, .work-place:hover .hover-phone, .work-place:hover .time, .work-place:hover .phone-bottom { opacity: 1; transform: none; }
}
.c-cta { background: var(--ink); color: var(--porcelain); overflow: hidden; position: relative; padding: 0 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; }
.cta-big { color: var(--porcelain); display: flex; justify-content: space-between; width: 100%; position: relative; z-index: 1; padding-top: 2rem; mix-blend-mode: normal; white-space: nowrap; }
.c-cta .bg { height: 58rem; left: 0; position: absolute; top: 4rem; width: 100%; }
.c-cta .bg img { object-position: 50% 15%; }
.c-cta .bg::after { background: linear-gradient(180deg, rgba(17, 24, 22, .1) 10%, rgba(17, 24, 22, .6) 50%, #111816 85%); content: ""; inset: 0; position: absolute; }
.c-cta .content { display: flex; flex-direction: column; align-items: center; margin-top: 32rem; position: relative; width: 50rem; z-index: 1; }
.c-cta .cta-title { margin-bottom: 3rem; text-align: center; }
.c-cta .radios { justify-content: center; }
.c-cta .locations-radio { text-align: center; }
.c-cta .form { grid-template-columns: 1fr 1fr 5rem; width: 100%; }
.c-foot { align-items: flex-end; display: flex; justify-content: space-between; margin-top: 12rem; position: relative; width: 100%; z-index: 1; }
.c-phones { display: grid; gap: .25rem 0; grid-template-columns: 1fr; }
.c-phones .c3 { color: var(--porcelain-60); margin-top: .5rem; }
.c-navs { display: flex; gap: 3rem; margin-left: auto; margin-right: 6rem; }
.c-navs > div { display: flex; flex-direction: column; gap: .5rem; }
.c-navs .c3 { color: var(--porcelain-60); margin-bottom: 1rem; }
.c-cta .circle-link { --size: 3rem; }
.c-cta .circle-link svg { width: 1rem; height: 1rem; }
.c-legal { border-top: 1px solid var(--porcelain-15); color: var(--porcelain-60); display: flex; justify-content: space-between; margin-top: 3rem; padding-top: 1rem; width: 100%; position: relative; z-index: 1; }

.faq { padding: 12rem 2rem 10rem; color: var(--slate); }
.faq h1 { margin-bottom: 4rem; }
.faq-list { border-top: 1px solid var(--slate-10); margin-left: auto; width: 43rem; }
.faq details { border-bottom: 1px solid var(--slate-10); padding: 1.5rem 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--sans); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 1rem; width: 32rem; color: var(--slate-60); }

@media (max-width: 1023px) {
  .contact { grid-template-columns: 1fr; height: auto; }
  .title-mob { display: block; padding: 12rem 0 8.25rem; text-align: center; color: var(--slate); }
  .work-place { display: flex; flex-direction: column; padding-bottom: 6rem; }
  .work-place.n1 { border-top: 1px solid var(--slate-10); }
  .work-place.n2 { border: 0; border-bottom: 1px solid var(--slate-10); border-top: 1px solid var(--slate-10); }
  .static-content { display: grid; gap: 1rem; justify-items: center; padding: 2.5rem 1rem 0; }
  .static-content .address { opacity: .85; width: 14.375rem; }
  .phone { display: none; }
  .mob-map-link { color: var(--slate); display: block; text-decoration: underline; }
  .small-img { height: 26.75rem; width: 100%; }
  .small-img::after { background: var(--fade-ink); bottom: 0; content: ""; height: 19.375rem; left: 0; position: absolute; width: 100%; }
  .mob-img-details { align-items: center; bottom: 1.75rem; color: #fff; display: flex; flex-direction: column; gap: 2rem; left: 1.5rem; position: absolute; width: calc(100% - 3rem); z-index: 1; }
  .mob-hours { display: flex; width: 100%; }
  .wrap-hour { align-items: center; display: flex; flex: 1; flex-direction: column; gap: .5rem; }
  .wrap-hour .c3 { opacity: .5; }
  .hover-content { display: none; }
  .c-cta { padding: 0 1rem 1.5rem; }
  .cta-big { flex-direction: column; align-items: center; font-size: 5rem; }
  .c-cta .bg { height: 24rem; top: 10rem; }
  .c-cta .content { margin-top: 20rem; width: 100%; }
  .c-cta .form { grid-template-columns: 1fr; }
  .c-foot { flex-direction: column; align-items: center; gap: 4rem; margin-top: 9rem; text-align: center; }
  .c-navs { margin: 0; }
  .c-legal { flex-direction: column; gap: .5rem; text-align: center; }
  .faq { padding: 8rem 1rem 5rem; }
  .faq-list { width: 100%; }
  .faq details p { width: 100%; }
}

/* 404 */
.error-page { background: var(--porcelain); }
.error-content { align-items: flex-end; display: flex; height: 100vh; overflow: hidden; padding: 2rem; position: relative; color: var(--slate); }
.error-content .code { bottom: -9.5rem; color: var(--porcelain); font: 400 38rem/.9 var(--serif); letter-spacing: -.06em; position: absolute; right: 2.5rem; z-index: 1; mix-blend-mode: normal; text-shadow: 0 0 6rem rgba(17, 24, 22, .15); }
.error-content .main-info { display: flex; gap: 5.375rem; position: relative; z-index: 2; align-items: flex-end; }
.error-content .message { color: var(--slate-60); width: 9rem; }
.error-content .decor span { filter: blur(4.875rem); height: 50rem; position: absolute; width: 70rem; border-radius: 50%; background: radial-gradient(closest-side, #1d2723, transparent); mix-blend-mode: multiply; opacity: .8; }
.error-content .decor span:nth-child(1) { left: 15rem; top: -23rem; animation: blob1 10s ease-in-out infinite alternate; }
.error-content .decor span:nth-child(2) { left: 37rem; top: -10rem; animation: blob2 10s ease-in-out infinite alternate; }
.error-content .decor span:nth-child(3) { left: 42rem; top: -14rem; background: radial-gradient(closest-side, #9db4a7, transparent); animation: blob3 10s ease-in-out infinite alternate; }
@media (max-width: 1023px) { .error-content { padding: 2rem 1rem; } .error-content .code { font-size: 15rem; right: 50%; top: 7.5rem; bottom: auto; transform: translate(50%); } .error-content .main-info { flex-direction: column; gap: 3rem; align-items: flex-start; } }

.c-cta .locations-radio > .c2, .cta .locations-radio > .c2 { color: var(--porcelain); }