:root {
    --bg: #F0EAE0;
    --fg: #1A1A1A;
    --muted: #6B6B6B;
    --line: #D5CFC4;
    --accent-bg: #EAE3D7;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Aliases for the client-approved sections (svc-/tst-/ctc-), whose CSS
       was authored against these brand names. Mapped to the site tokens so
       the approved blocks can be used verbatim. --linea is intentionally the
       reference's hairline (rgba 26,26,26,.14), not the site's --line. */
    --crema: #F0EAE0;
    --carbon: #1A1A1A;
    --linea: rgba(26, 26, 26, 0.14);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

::selection {
    background: var(--fg);
    color: var(--bg);
}

.font-display {
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
}

.font-body {
    font-family: "Inter", sans-serif;
}

/* ---------- Hero ---------- */

.hero__overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.45) 100%);
}

.hero__title {
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 14ch;
}

.hero__cta {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 6px;
    transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__cta:hover {
    border-bottom-color: rgba(255, 255, 255, 1);
    padding-bottom: 8px;
}

/* ---------- Selected Work ---------- */

.work__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.work__tile-img {
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work__tile:hover .work__tile-img {
    transform: scale(1.04);
}

.work__cta {
    border-bottom: 1px solid var(--fg);
    padding-bottom: 6px;
    transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work__cta:hover {
    padding-bottom: 8px;
}

/* ---------- Behind BYMO ---------- */

.behind-bymo__placeholder {
    background: linear-gradient(135deg, #D5CFC4 0%, #C5BFB4 100%);
}

.behind-bymo__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 14ch;
}

/* ---------- Instagram ---------- */

.ig__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ig__img {
    transition: transform 600ms ease-out;
}

.ig__tile:hover .ig__img {
    transform: scale(1.03);
}

/* ---------- Contact ---------- */

.contact__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Form fields */
.contact__field {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 16px 0;
    margin-bottom: 24px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--fg);
    outline: none;
    transition: border-color 200ms ease;
}

.contact__field::placeholder {
    color: var(--muted);
    opacity: 1;
}

.contact__field:focus {
    border-bottom: 2px solid var(--fg);
    padding-bottom: 15px;
}

.contact__field--select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
}

.contact__field--select:invalid {
    color: var(--muted);
}

.contact__field--textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Submit button */
.contact__submit {
    background: var(--fg);
    color: var(--bg);
    padding: 16px 32px;
    border: 0;
    border-radius: 0;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    transition: opacity 300ms ease-out;
}

.contact__submit:hover {
    opacity: 0.85;
}

/* Info column */
.contact__info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact__info-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    text-decoration: none;
    transition: opacity 300ms ease;
}

.contact__info-list li:last-child .contact__info-item {
    border-bottom: 0;
}

a.contact__info-item:hover {
    opacity: 0.6;
}

.contact__info-item--static {
    cursor: default;
}

.contact__info-icon {
    margin-right: 16px;
    flex-shrink: 0;
}

.contact__info-text {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

/* ---------- Footer ---------- */

.footer__link {
    color: var(--bg);
    text-decoration: none;
    transition: opacity 300ms ease;
}

.footer__link:hover {
    opacity: 0.7;
}

/* ---------- Nav bar (fixed, becomes opaque on scroll) ---------- */

.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    color: #FFFFFF;
    transition: background 300ms var(--ease-out),
                color 300ms var(--ease-out),
                backdrop-filter 300ms var(--ease-out);
}

.nav-bar__inner {
    padding-top: 24px;
    padding-bottom: 24px;
    transition: padding 300ms var(--ease-out);
}

.nav-bar.scrolled {
    background: rgba(240, 234, 224, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--fg);
}

.nav-bar.scrolled .nav-bar__inner {
    padding-top: 16px;
    padding-bottom: 16px;
}

.nav-bar__logo,
.nav-bar__link {
    color: inherit;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.nav-bar__link:hover {
    opacity: 0.7;
}

.nav-bar__hamburger span {
    background: currentColor;
}

/* ---------- Fade-in on scroll ---------- */

section:not(#hero) {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 900ms var(--ease-out),
                transform 900ms var(--ease-out);
}

section.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 900ms var(--ease-out),
                transform 900ms var(--ease-out);
}

.fade-in-on-scroll.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ---------- Mobile menu overlay ---------- */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out),
                transform 200ms var(--ease-out);
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-menu__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--fg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-menu__link {
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--fg);
    text-decoration: none;
    padding: 16px 0;
    transition: opacity 200ms ease;
}

.mobile-menu__link:hover {
    opacity: 0.6;
}

/* ---------- WhatsApp floating button ---------- */

.whatsapp-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms var(--ease-out),
                transform 300ms var(--ease-out),
                box-shadow 300ms var(--ease-out);
}

@media (min-width: 768px) {
    .whatsapp-btn {
        bottom: 24px;
        right: 24px;
    }
}

.whatsapp-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.whatsapp-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* ---------- Mobile fine-tuning ---------- */

@media (max-width: 768px) {
    .whatsapp-btn {
        bottom: 16px;
        right: 16px;
    }

    #contact {
        padding-bottom: 100px;
    }

    .hero__cta {
        margin-top: 32px;
    }
}

/* ============================================================
   CLIENT-APPROVED SECTIONS — Services / Testimonials / Contact
   Lifted from bymo-variantes-elegidas.html (design signed off by the
   client). Kept verbatim so the rendered result matches the reference;
   the brand-var aliases in :root resolve the --crema/--carbon/--linea
   names. Prefixed (svc-/tst-/ctc-) to avoid clashing with site classes.
   ============================================================ */

/* ----- Services (svc-) · about.html -----
   Number-free treatment: the giant 01/02/03 is reserved for the
   "How we work" block so the two sections don't read as duplicates.
   Each service is just name + impact + description + CTA, separated
   by a hairline rule. */
.svc-section{padding:96px 0}
.svc-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,26,26,.5);margin-bottom:18px}
.svc-heading{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.06;letter-spacing:-.02em;margin-bottom:56px;max-width:18ch}
.svc-row{
    display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
    padding:44px 0;border-top:1px solid var(--linea);
}
.svc-row:last-child{border-bottom:1px solid var(--linea)}
.svc-body{max-width:60ch}
.svc-name{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.01em;margin-bottom:10px}
.svc-impact{font-size:16px;color:rgba(26,26,26,.78);margin-bottom:10px}
.svc-desc{font-size:14px;line-height:1.65;color:rgba(26,26,26,.55);max-width:52ch}
.svc-cta{
    font-family:'Inter',sans-serif;font-weight:500;font-size:14px;white-space:nowrap;
    color:var(--carbon);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
    cursor:pointer;
}
.svc-cta span{transition:transform .3s ease;display:inline-block}
.svc-row:hover .svc-cta span,.svc-cta:hover span{transform:translateX(6px)}
.svc-row:hover .svc-name{text-decoration:underline;text-underline-offset:5px}
@media(max-width:860px){
    .svc-row{grid-template-columns:1fr;gap:14px}
    .svc-cta{justify-content:flex-start;margin-top:8px}
}

/* ----- Testimonials (tst-) · index.html ----- */
.tst-section{padding:96px 0;text-align:center}
.tst-stage{max-width:60ch;margin:0 auto}
.tst-quote{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.18;letter-spacing:-.02em;margin-bottom:32px;transition:opacity .25s ease}
.tst-attr{font-size:14px;color:rgba(26,26,26,.55);letter-spacing:.02em;transition:opacity .25s ease}
.tst-dots{display:flex;gap:10px;justify-content:center;margin-top:40px}
.tst-dot{width:7px;height:7px;border-radius:50%;background:rgba(26,26,26,.2);cursor:pointer;transition:background .3s;border:none;padding:0}
.tst-dot.on{background:var(--carbon)}

/* ----- Contact (ctc-) · index.html ----- */
.ctc-section{padding:96px 0}
.ctc-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,26,26,.5);margin-bottom:18px}
.ctc-heading{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.06;letter-spacing:-.02em;margin-bottom:14px;max-width:16ch}
.ctc-lead{font-size:16px;line-height:1.6;color:rgba(26,26,26,.65);max-width:46ch;margin-bottom:40px}
.ctc-form{max-width:620px}
.ctc-field{margin-bottom:34px}
.ctc-input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(26,26,26,.3);padding:8px 0;font-family:'Inter',sans-serif;font-size:17px;color:var(--carbon);outline:none;transition:border-color .3s}
.ctc-input::placeholder{color:rgba(26,26,26,.35)}
.ctc-input:focus{border-color:var(--carbon)}
textarea.ctc-input{resize:none;min-height:80px}
/* Select kept (per client choice) styled to match the line fields */
.ctc-input--select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.ctc-input--select:invalid{color:rgba(26,26,26,.35)}
.ctc-btn{font-family:'Inter',sans-serif;font-weight:500;font-size:14px;cursor:pointer;border:none;background:var(--carbon);color:var(--crema);padding:16px 38px;margin-top:8px;transition:background .3s}
.ctc-btn:hover{background:#000}

/* ---------- Reduced motion respect ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    section,
    .fade-in-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- About · "THE STUDIO" stacked photos reframe ----------
   about-studio-1.webp is a tall 2:3 portrait (1200×1799). It's the hero of
   the pair, so give it a tall 5:4 box with the focal point at 25% — this keeps
   the "BYMO STUDIO" wall text up top while dropping the empty floor below.
   about-studio-2.webp (Mora) is a 3:2 horizontal (1200×800); crop it to a
   shorter, more compact 16:9 so it sits lower in the hierarchy, with a 38%
   focal bias so her face and hands stay in frame.
   Scoped by src + #about-studio, overriding the inline `h-auto` utility.
   Width stays 100% (w-full) so it's fully responsive on mobile. */
#about-studio img[src$="about-studio-1.webp"] {
    aspect-ratio: 5 / 4;
    height: auto;
    object-fit: cover;
    object-position: center 25%;
}

#about-studio img[src$="about-studio-2.webp"] {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: center 38%;
}