/* ==========================================================================
   CONTACT — Desktop (1280px – 1920px)
   Design reference: 1920x5944 total (922 hero + 468.2rem-equivalent
   main + 340 footer). Ported from the old site's contact_old.html —
   same positions, converted from px to rem (÷10). The 17-step brief
   engine and the pricing calculator are deliberately left out for
   now (built separately later); .ct-interactive-plate is just an
   empty placeholder box until then.
   ========================================================================== */

.contact-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

.ct-top-fone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Top-left nav row — flex + gap holds a 40px gap automatically in
   every language, no manual html[data-lang] overrides needed. */
.ct-nav {
    position: absolute;
    left: 5rem;
    top: 5rem;
    display: flex;
    align-items: baseline;
    gap: 4rem;
    z-index: 1;
}

.ct-nav-link {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    transition: opacity 0.3s ease;
}

.ct-nav-link:hover {
    opacity: 0.5;
}

.ct-nav-link--homepage {
    text-transform: uppercase;
}

/* Book a Call / Message — big hero buttons with a slide-in entrance.
   Anchored with "bottom" (not "top") so they stay glued to the
   hero's bottom edge regardless of viewport height — same treatment
   as .settings-btn/.message-btn/.shop-wrap everywhere else. */
.ct-btn {
    position: absolute;
    bottom: 13rem;
    width: 40rem;
    height: 9.5rem;
    z-index: 1;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    display: block;
}

.ct-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

.ct-btn:hover {
    transform: translateY(-1rem);
}

.ct-btn:active {
    transform: translateY(-0.6rem) scale(0.97);
    transition: transform 0.15s ease;
}

.ct-btn-book-call {
    left: 58rem;
    opacity: 0;
    translate: -3rem 0;
    animation: ctBtnSlideLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.ct-btn-message {
    right: 58rem;
    opacity: 0;
    translate: 3rem 0;
    animation: ctBtnSlideRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes ctBtnSlideLeft {
    0%   { opacity: 0; translate: -3rem 0; }
    100% { opacity: 1; translate: 0 0; }
}

@keyframes ctBtnSlideRight {
    0%   { opacity: 0; translate: 3rem 0; }
    100% { opacity: 1; translate: 0 0; }
}

/* Sits right under the Book a Call / Message buttons, same
   bottom-anchoring logic so it stays put regardless of viewport
   height. */
.ct-expert-slogan {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 100rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #000000;
    text-align: center;
    white-space: pre-line;
    z-index: 1;
}

.contact-main {
    position: relative;
    width: 100%;
    height: 468.2rem;
    background-color: #ffffff;
    overflow: hidden;
}

.ct-ready-heading {
    position: absolute;
    left: 20rem;
    top: 26.4rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 11rem;
    line-height: 8.5rem;
    letter-spacing: -0.08em;
    white-space: pre-line;
    z-index: 1;
}

.ct-ready-subtitle {
    position: absolute;
    left: 20rem;
    top: 46.9rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    color: #000000;
    opacity: 0.5;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    white-space: pre-line;
    z-index: 1;
}

.ct-direction-label {
    position: absolute;
    left: 20rem;
    top: 70.8rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    z-index: 1;
}

/* Direction buttons (25.2x6rem). The source SVGs have a 26.6x7.3rem
   canvas with a ~0.621rem shadow margin, so the image renders at its
   native size and is nudged back so the visible pill lands exactly
   inside the 25.2x6rem box. */
.ct-direction-btn {
    position: absolute;
    width: 25.2rem;
    height: 6rem;
    overflow: visible;
    display: block;
    text-decoration: none;
    z-index: 1;
}

.ct-direction-btn img {
    position: absolute;
    left: -0.621rem;
    top: -0.621rem;
    width: 26.6rem;
    height: 7.3rem;
    display: block;
}

.ct-dir-branding { left: 20rem; top: 77.8rem; }
.ct-dir-web      { left: 49.2rem; top: 77.8rem; }
.ct-dir-product  { left: 20rem; top: 85.8rem; }
.ct-dir-digital  { left: 49.2rem; top: 85.8rem; }

.ct-direction-btn.is-active {
    opacity: 1;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.ct-direction-btn.is-active:hover {
    transform: translateY(-0.5rem);
}

.ct-direction-btn.is-disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

/* Translucent plate behind the direction picker + (eventually) the
   brief widget. Empty for now. */
.ct-interactive-plate {
    position: absolute;
    top: 16.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 172rem;
    height: 80.4rem;
    background-color: rgba(217, 217, 217, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5rem;
    box-sizing: border-box;
    z-index: 0;
}

/* Two contact cards (84x39.5rem). */
.ct-contact-card {
    position: absolute;
    top: 100.8rem;
    width: 84rem;
    height: 39.5rem;
    display: block;
    z-index: 1;
}

.ct-card-projects { left: 10rem; }
.ct-card-mail      { right: 10rem; }

.ct-contact-card-bg {
    width: 100%;
    height: 100%;
    display: block;
}

.ct-contact-card-title {
    position: absolute;
    left: 7rem;
    top: 7rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    z-index: 1;
}

.ct-contact-card-email {
    position: absolute;
    left: 7rem;
    top: 21rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: 7rem;
    line-height: 7rem;
    letter-spacing: -0.08em;
    z-index: 1;
}

.ct-contact-card-phone {
    position: absolute;
    left: 7rem;
    top: 31rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.08em;
    z-index: 1;
}

/* Instagram section. */
.ct-ig-watermark {
    position: absolute;
    top: 192.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 182rem;
    height: 43rem;
    display: block;
    z-index: 0;
    pointer-events: none;
}

.ct-ig-group {
    position: absolute;
    display: block;
}

.ct-ig-group img {
    position: absolute;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-ig-group-create {
    left: 43rem;
    top: 166.7rem;
    width: 55.9rem;
    height: 70.5rem;
    z-index: 1;
}

.ct-ig-group-create .ct-ig-phone {
    left: 18.4rem;
    top: 0;
    width: 37.5rem;
    height: 70.5rem;
}

.ct-ig-group-create .ct-ig-avatar {
    left: 0;
    top: 41.6rem;
    width: 20rem;
    height: 22.1rem;
}

.ct-ig-group-create:hover .ct-ig-phone {
    transform: translateY(-2rem);
}

.ct-ig-group-create:hover .ct-ig-avatar {
    transform: translateY(-0.5rem) scale(1.05);
}

.ct-ig-group-studio {
    left: 87.9rem;
    top: 170.8rem;
    width: 58.4rem;
    height: 70.9rem;
    z-index: 2;
}

.ct-ig-group-studio .ct-ig-phone {
    left: 0;
    top: 0;
    width: 42.6rem;
    height: 70.9rem;
}

.ct-ig-group-studio .ct-ig-avatar {
    left: 38.4rem;
    top: 38.4rem;
    width: 20rem;
    height: 22.1rem;
}

.ct-ig-group-studio:hover .ct-ig-phone {
    transform: translateY(-2rem);
}

.ct-ig-group-studio:hover .ct-ig-avatar {
    transform: translateY(-0.5rem) scale(1.05);
}

.ct-ig-heading {
    position: absolute;
    top: 245.8rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 8rem;
    line-height: 8rem;
    letter-spacing: -0.08em;
    text-align: center;
    white-space: nowrap;
    z-index: 1;
}

.ct-ig-subtitle {
    position: absolute;
    top: 256.3rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.05em;
    text-align: center;
    white-space: pre-line;
    z-index: 1;
}

.ct-ig-subtitle-strong {
    font-weight: 600;
}

.ct-cta-heading {
    position: absolute;
    left: 20rem;
    top: 315.2rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 10rem;
    line-height: 8rem;
    letter-spacing: -0.08em;
    white-space: pre-line;
    z-index: 1;
}

/* 35px below the heading's own bottom edge (2 lines x 8rem line-height
   = 16rem tall). Both shifted up 100px total from the original spot. */
.ct-cta-subtitle {
    position: absolute;
    left: 20rem;
    top: 334.7rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.05em;
    white-space: pre-line;
    z-index: 1;
}

.ct-bottom-logo {
    position: absolute;
    left: 5rem;
    top: 284rem;
    width: 21.5rem;
    height: 3rem;
    z-index: 1;
}

/* Same style as the hero nav (flex + gap = automatic 40px gap in any
   language), just black here and anchored from the right instead of
   the left — row-reverse so FAQ (closest to the edge) stays rightmost
   regardless of how long each translated label is. */
.ct-bottom-nav {
    position: absolute;
    right: 5rem;
    top: 284rem;
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 4rem;
    z-index: 1;
}

.ct-bottom-nav-link {
    text-decoration: none;
    color: #000000;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    transition: opacity 0.3s ease;
}

.ct-bottom-nav-link:hover {
    opacity: 0.5;
}

.ct-bottom-nav-link--faq {
    text-transform: uppercase;
}

/* Background photo fading toward black, flush against the black zone
   below it (no seam, no gap — same "pinned" logic used everywhere
   else on the site). */
.ct-bottom-fone {
    position: absolute;
    top: 348.7rem;
    left: 0;
    width: 100%;
    height: 92.2rem;
    object-fit: cover;
    z-index: 0;
}

/* Solid black zone leading straight into the real footer — replaces
   the old site's own footer-internal nav/social content, since our
   shared <footer> provides all of that already. */
.ct-bottom-black {
    position: absolute;
    top: 440.9rem;
    left: 0;
    width: 100%;
    height: 27.3rem;
    background-color: #000000;
    z-index: 1;
}

.ct-fit-heading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2.8rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    text-align: center;
    white-space: nowrap;
}

.ct-fit-subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 9.8rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.05em;
    text-align: center;
    white-space: pre-line;
}

/* Seam patch — solid black strip right at the bottom edge, covering
   any hairline gap between contact-main and the footer after it. */
.contact-main__seam-patch {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5rem;
    background-color: #000000;
    z-index: 10;
}