/* ==========================================================================
   FEEDBACK (Reviews) — Desktop (1280px – 1920px)
   Design reference: 1920x2720 total (922 hero + 1458 main + 340 footer).
   Same scaling scheme as portfolio: feedback-hero follows the real
   viewport (100vh, white), feedback-main below is a fixed rem height,
   footer is the shared component.
   ========================================================================== */

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

/* Mobile-only hero elements (see feedback.mobile.css) — hidden here so
   they don't leak through unstyled. */
.feedback-hero-mobile__bg,
.feedback-hero-mobile__wordmark,
.feedback-hero-mobile__logo,
.feedback-carousel-mobile,
.feedback-main-mobile__section-label,
.feedback-main-mobile__heading,
.feedback-main-mobile__sweet,
.feedback-main-mobile__faq-email,
.feedback-main-mobile__faq-question-input,
.feedback-main-mobile__faq-counter,
.feedback-main-mobile__faq-send,
.feedback-main-mobile__notice,
.feedback-main-mobile__bottom-logo {
    display: none;
}


/* Full-bleed hero photo, dark on top fading to light at the bottom —
   sits at the very bottom of the stacking order, everything else
   paints on top of it. */
.feedback-hero__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


/* Top-left nav row, white to read against the dark top of the photo —
   flex + gap holds a 40px gap automatically in every language. */
.feedback-hero__nav {
    position: absolute;
    left: 5rem;
    top: 5rem;
    display: flex;
    align-items: baseline;
    gap: 4rem;
    z-index: 1;
}

.feedback-hero__nav-link {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.feedback-hero__nav-link:hover {
    opacity: 0.5;
}

.feedback-hero__nav-link--homepage {
    text-transform: uppercase;
}

/* Bottom-left wordmark. */
.feedback-hero__wordmark {
    position: absolute;
    left: 5rem;
    bottom: 5rem;
    width: 65.2rem;
    height: 14.6rem;
    z-index: 1;
}

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

/* Black backdrop — pinned flush to the bottom edge so it always blends
   straight into the footer with no seam, regardless of any future
   height changes to this section (same pattern as
   .portfolio-main__bg, just a flat color instead of a gradient image).
   Reference: a 1920x1093 black rectangle sitting at the very bottom of
   the whole page (spanning into the footer too) — the portion inside
   feedback-main alone is 75.3rem tall. */
.feedback-main__bg-black {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75.3rem;
    background-color: #000000;
    z-index: 0;
}

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

/* Carousel — a horizontally draggable strip of review cards, full
   screen width so card 4 crops right at the screen edge at rest (not
   inset). A tiny spacer after the last card pads out the scrollable
   content by exactly 5rem, so the browser's native scroll clamp stops
   dragging with a 50px gap between card 4's right edge and the screen
   edge, instead of flush against it. Cards inside stay
   position:absolute (unchanged from the original design), which
   still counts toward native scrollable overflow. Text selection is
   off — otherwise dragging with the mouse fights with the browser's
   native text/drag selection. */
.feedback-carousel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70rem;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    /* Hide the scrollbar cross-browser — this is a drag carousel, not
       a normal scroll area. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.feedback-carousel::-webkit-scrollbar {
    display: none;
}

.feedback-carousel img {
    -webkit-user-drag: none;
}

.feedback-carousel.is-dragging {
    cursor: grabbing;
}

/* Review card — one self-contained block: avatar/name/role sit just
   above the black card (not inside it, hence the black text — they're
   still on the white section background), everything positioned
   relative to this wrapper so the whole thing moves as a unit. Origin
   is the avatar's own top-left corner (the topmost element).
   Positions here match their original page-absolute values (the
   carousel now starts at 0, same origin as feedback-main). All four
   bottom-align at 69.9rem regardless of card height — tall cards
   start higher, short cards start lower. */
.feedback-review--1 { left: 5rem;     top: 14.3rem; }
.feedback-review--2 { left: 56.5rem;  top: 19.8rem; }
.feedback-review--3 { left: 108rem;   top: 14.3rem; }
.feedback-review--4 { left: 159.5rem; top: 19.8rem; }

/* Invisible — exists only to extend the scrollable content by 5rem
   past card 4's right edge (209.5rem), so the native scroll clamp
   leaves that exact gap at max scroll instead of ending flush. */
.feedback-carousel__spacer {
    position: absolute;
    left: 209.5rem;
    top: 0;
    width: 5rem;
    height: 1px;
}

.feedback-review {
    position: absolute;
    z-index: 1;
}

.feedback-review__avatar {
    position: absolute;
    left: 0;
    top: 0;
    width: 8.6rem;
    height: 8.6rem;
    /* The wrapper has no in-flow content (everything inside it is
       absolutely positioned), so it collapses to zero width — and the
       global "img { max-width: 100% }" reset then clamps this image
       down to that same zero width. Already sized explicitly above,
       so the reset isn't needed here. */
    max-width: none;
    object-fit: cover;
}

.feedback-review__name {
    position: absolute;
    left: 9.8rem;
    top: 1.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    line-height: 3.5rem;
    letter-spacing: -0.08em;
    color: #000000;
    opacity: 1;
    white-space: nowrap;
}

.feedback-review__role {
    position: absolute;
    left: 9.8rem;
    top: 5.7rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #000000;
    opacity: 1;
    white-space: nowrap;
}

/* The card itself — 10-radius top-left corner, 40 everywhere else.
   Height alternates tall/short (see the wrapper's "top" above, which
   shifts to keep every card's bottom edge lined up at 69.9rem). */
.feedback-review__card {
    position: absolute;
    left: 0;
    top: 9.1rem;
    width: 50rem;
    background-color: #000000;
    border-radius: 1rem 4rem 4rem 4rem;
    overflow: hidden;
}

.feedback-review--tall .feedback-review__card { height: 46.5rem; }
.feedback-review--short .feedback-review__card { height: 41rem; }

.feedback-review__quote {
    position: absolute;
    left: 3rem;
    top: 3rem;
    width: 44rem;
    height: 34.8rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 2.2rem;
    line-height: 2.5rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 0.5;
    text-align: justify;
}

.feedback-review__thanks {
    position: absolute;
    right: 3rem;
    bottom: 2rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 1;
    text-align: right;
}

/* "Scroll now" / "Feedback" — labels, not copy, so they stay in
   English across all languages (same treatment as the service card
   titles elsewhere). */
.feedback-main__scroll-now,
.feedback-main__feedback-label {
    position: absolute;
    top: 72.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    line-height: 3.5rem;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 1;
    z-index: 1;
}

.feedback-main__scroll-now { left: 5rem; }
.feedback-main__feedback-label { right: 5rem; }

.feedback-main__sweet {
    position: absolute;
    left: 28rem;
    top: 100.3rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 1;
    z-index: 1;
}

.feedback-main__notice {
    position: absolute;
    left: 28rem;
    top: 127.3rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 0.5;
    white-space: pre-line;
    z-index: 1;
}

.feedback-main__your-feedback {
    position: absolute;
    left: 90.7rem;
    top: 103.5rem;
    width: 60.2rem;
    height: 22.8rem;
    z-index: 1;
}

/* FAQ-style feedback form — exact copy of the main screen's question
   form (same two rounded boxes, same counter/send button), just
   repositioned as one block. Children are bottom-anchored within this
   wrapper (height matches the original email+question span exactly),
   so all the original relative spacing carries over unchanged. */
.feedback-main__faq-form {
    position: absolute;
    left: 26.3rem;
    top: 105.5rem;
    width: 59rem;
    height: 20.8rem;
    z-index: 1;
}

.feedback-main__faq-email {
    position: absolute;
    left: 0;
    bottom: 16.3rem;
    width: 59rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    border: none;
    outline: none;
    border-radius: 2rem 2rem 2rem 0.5rem;
    background-color: #ffffff;
    box-shadow: inset 0 0.5rem 0.5rem rgba(0, 0, 0, 0.4);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #000000;
}

.feedback-main__faq-email::placeholder {
    color: #000000;
    opacity: 0.3;
}

.feedback-main__faq-question {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 59rem;
    height: 15.4rem;
    padding: 2rem;
    resize: none;
    border: none;
    outline: none;
    border-radius: 0.5rem 2rem 2rem 2rem;
    background-color: #ffffff;
    box-shadow: inset 0 0.5rem 0.5rem rgba(0, 0, 0, 0.4);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #000000;
}

.feedback-main__faq-question::placeholder {
    color: #000000;
    opacity: 0.3;
}

.feedback-main__faq-counter {
    position: absolute;
    left: 54.3rem;
    bottom: 12.4rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: -0.05em;
    color: #000000;
    text-align: right;
    z-index: 2;
}

.feedback-main__faq-send {
    position: absolute;
    left: 53rem;
    bottom: 2rem;
    width: 4rem;
    height: 4rem;
    padding: 0;
    background: none;
    border: none;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.feedback-main__faq-send.is-active {
    opacity: 1;
}

.feedback-main__faq-send img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Settings/message/shop buttons sit a little higher here than the
   actions.desktop.css default (bottom: 7rem) — same treatment as the
   portfolio hero. */
.settings-btn,
.message-btn,
.shop-wrap {
    bottom: 5rem;
}

/* Keeps the settings panel exactly 14px above the button's top edge,
   matching the button's raised position on this page. */
.settings-panel {
    bottom: 11rem;
}