@media(max-width:800px) {
  .shell {
    padding: 22px 20px 18px
  }

  .menu-toggle {
    display: block
  }

  .nav {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    background: var(--bg);
    padding: 20px;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px
  }

  .nav.open {
    display: flex;
    width: 100%;
    color: #d7d2c6;
  }

  .home-page {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .home-photo {
    height: 62vh;
    min-height: 430px
  }

  .home-copy {
    padding: 5px 4px 30px
  }

  .portfolio-covers {
    grid-template-columns: 1fr
  }

  .gallery {
    columns: 2;
    column-gap: 10px
  }

  .gallery-item {
    margin-bottom: 10px
  }

  .about-wrap,
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-top: 20px
  }

  .about-photo,
  .contact-photo {
    max-width: 520px
  }

  .measurements {
    grid-template-columns: repeat(2, 1fr)
  }

  .contact-copy .script-title {
    margin-bottom: 35px
  }

  .footer {
    padding-top: 25px
  }

  .script-title {
    font-size: 25px
  }
}

@media(max-width:480px) {
  .gallery {
    columns: 2
  }

  .signature {
    font-size: 22px
  }

  .home-copy h1 {
    font-size: 17px
  }

  .footer {
    font-size: 7px
  }
}

@media(max-width:800px) {
  .home-categories {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 10px
  }

  .home-category {
    min-height: 105px;
    border-bottom: 1px solid var(--line)
  }

  .home-category:nth-child(2n) {
    border-right: 0
  }

  .home-category:nth-last-child(-n+2) {
    border-bottom: 0
  }

  .portfolio-covers-four {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer-signature {
    position: static;
    transform: none;
    order: 2;
    font-size: 20px
  }

  .footer {
    gap: 12px;
    flex-wrap: wrap
  }

  .footer>span:first-child {
    order: 1
  }

  .socials {
    order: 3
  }
}

@media(max-width:480px) {
  .home-category {
    font-size: 25px;
    padding: 18px 14px
  }

  .portfolio-covers-four {
    gap: 10px
  }

  .footer-signature {
    width: 100%;
    text-align: center;
    order: 1
  }

  .footer>span:first-child {
    order: 2
  }

  .socials {
    order: 3
  }
}

@media(max-width:800px) {
  .site-header {
    height: 60px;
    margin: -22px -20px 0;
    padding: 10px 20px
  }

  .nav {
    top: 60px;
    right: 0;
    background: linear-gradient(180deg, rgba(46, 45, 40, .99), rgba(242, 240, 233, .69));
    box-shadow: 0 14px 24px rgba(41, 40, 36, .70)
  }

  .category-topline {
    gap: 14px
  }

  .home-back {
    width: 34px;
    height: 34px
  }

  .gallery-head {
    padding-top: 3vh
  }
}

/* V4 home responsive */
@media(max-width:800px) {
  .home-body .site-header {
    height: 70px;
    padding: 18px 22px
  }

  .home-body .signature {
    font-size: 31px
  }

  .home-body .menu-toggle {
    display: flex;
    width: 26px;
    height: 22px;
    padding: 3px 0;
    flex-direction: column;
    justify-content: space-around;
    color: inherit
  }

  .home-body .menu-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor
  }

  .home-body .nav {
    top: 70px;
    right: 0;
    width: 100%;
    padding: 28px 22px 32px;
    background: rgba(31, 29, 27, .94);
    color: #f3eee5;
    align-items: flex-end;
    gap: 24px;
    box-shadow: none;
    backdrop-filter: blur(12px)
  }

  .home-hero {
    min-height: 620px;
    background-position: 42% center
  }

  .home-body .home-copy {
    left: auto;
    right: 8vw;
    top: 51%;
    width: 190px
  }

  .home-body .home-copy h1 {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .14em;
    margin-bottom: 38px
  }

  .home-body .cta {
    font-size: 12px;
    font-weight: 700;
    gap: 14px
  }

  .home-footer {
    padding: 0 22px 20px;
    height: 58px
  }

  .home-socials {
    gap: 14px
  }
}

@media(max-width:480px) {
  .home-body .signature {
    font-size: 29px
  }

  .home-hero {
    background-position: 40% center
  }

  .home-body .home-copy {
    right: 7vw;
    top: 55%;
    width: 155px
  }

  .home-body .home-copy h1 {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 32px
  }

  .home-footer {
    font-size: 6px
  }

  .home-socials a,
  .home-socials svg {
    width: 14px;
    height: 14px
  }
}


/* V12 repaired responsive */
@media(max-width:800px) {

  .portfolio-page,
  .gallery-page {
    padding-bottom: 58px
  }

  .footer-logo {
    position: static;
    transform: none;
    width: 132px;
    order: 2;
    margin: 0 auto
  }

  .footer-icons {
    order: 3
  }

  .footer>span:first-child {
    order: 1
  }

  .home-back {
    font-size: 22px !important
  }
}

@media(max-width:480px) {

  .portfolio-page,
  .gallery-page {
    padding-bottom: 48px
  }

  .footer-logo {
    width: 125px !important;
    text-align: center;
    order: 1
  }

  .footer>span:first-child {
    order: 2
  }

  .footer-icons {
    order: 3
  }
}

@media(max-width:800px) {
  .about-top {
    grid-template-columns: 1fr;
    gap: 35px
  }

  .about-inline-signature {
    width: 165px;
    max-width: 60%;
    margin-top: 24px
  }

  .about-wrap>.measurements {
    margin-top: 38px
  }
}

/* V18 — keep editorial two-column compositions on mobile */
@media(max-width:800px) {
  .portfolio-covers.portfolio-covers-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin-top: 13%;
  }

  .about-top {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: start
  }

  .about-photo {
    max-width: none;
    width: 100%
  }

  .about-wrap>.measurements-section {
    grid-column: 1/-1;
    width: 100%;
    margin-top: 38px
  }

  .contact-wrap {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 22px;
    align-items: start
  }

  .contact-photo {
    max-width: none;
    width: 124%
  }

  .contact-copy {
    min-width: 0
  }
}

@media(max-width:480px) {
  .about-top {
    gap: 14px
  }

  .contact-wrap {
    gap: 14px
  }

  .about-copy p,
  .contact-copy p {
    font-size: 9px;
    line-height: 1.65
  }

  .about-inline-signature {
    width: 120px;
    max-width: 80%;
    margin-top: 18px
  }

  .contact-copy .script-title {
    margin-bottom: 22px
  }

  .contact-copy h1 {
    font-size: 26px;
    margin-bottom: 16px
  }

  .contact-details {
    margin-top: 22px;
    gap: 5px
  }
}

/* V19 — mobile-only refinements */
@media(max-width:800px) {

  /* Contact: the image fills the full height of the text column beside it. */
  .contact-wrap {
    align-items: stretch
  }

  .contact-photo {
    height: 100%;
    aspect-ratio: auto;
    align-self: stretch
  }

  .contact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  /* About: keep measurements below the two-column intro, but more compact. */
  .about-wrap>.measurements-section {
    margin-top: 26px;
    padding-top: 18px
  }

  .measurements-title {
    margin-bottom: 16px;
    font-size: 9px
  }

  .about-wrap>.measurements-section .measurements {
    gap: 14px 18px
  }

  .measurement b {
    margin-bottom: 5px
  }
}

@media(max-width:480px) {
  .about-wrap>.measurements-section {
    margin-top: 22px;
    padding-top: 16px
  }

  .measurements-title {
    margin-bottom: 13px
  }

  .about-wrap>.measurements-section .measurements {
    gap: 11px 14px
  }
}

/* V20 — mobile only: reduce empty space before footer on About and Contact */
@media(max-width:800px) {

  .about-wrap,
  .contact-wrap {
    margin-bottom: 28px;
  }
}

@media(max-width:480px) {

  .about-wrap,
  .contact-wrap {
    margin-bottom: 18px;
  }
}

/* V21 — mobile only: Home menu uses the same compact panel geometry as internal pages */
@media(max-width:800px) {
  .home-body .nav {
    width: auto;
    min-width: 0;
    right: 0;
    padding: 20px;
    gap: 18px;
    align-items: flex-end;
  }
}


/* V22 — mobile only: CONTACT title full-width above the two-column content */
@media(max-width:800px) {
  .contact-mobile-layout {
    margin-top: 20px;
    margin-bottom: 28px;
  }

  .contact-mobile-title {
    display: block;
    margin: 0 0 26px;
  }

  .contact-desktop-title {
    display: none;
  }

  .contact-mobile-layout>.contact-wrap {
    margin-top: 0;
    margin-bottom: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 22px;
    align-items: stretch;
  }

  .contact-mobile-layout .contact-photo {
    height: auto;
    min-height: 100%;
    align-self: stretch;
  }

  .contact-mobile-layout .contact-photo img {
    width: 108%;
    height: 100%;
    object-fit: cover;
  }
}

@media(max-width:480px) {
  .contact-mobile-layout {
    margin-bottom: 90px;
  }

  .contact-mobile-title {
    margin-bottom: 20px;
  }

  .contact-mobile-layout>.contact-wrap {
    gap: 14px;
  }
}


/* V23 — mobile only: ABOUT page title above the two-column intro */
@media(max-width:800px) {
  .about-mobile-title {
    display: block;
    margin: 0 0 26px;
  }

  .about-desktop-title {
    display: none;
  }

  .about-mobile-copy-title {
    display: block;
    margin: 0 0 14px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .about-wrap {
    margin-top: 20px;
  }

  .about-top {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: start;
  }
}

@media(max-width:480px) {
  .about-mobile-title {
    margin-bottom: 20px;
  }

  .about-mobile-copy-title {
    font-size: 10px;
    margin-bottom: 11px;
  }

  .about-top {
    gap: 14px;
  }
}

@media(min-width:801px) {

  .about-mobile-title,
  .about-mobile-copy-title {
    display: none;
  }
}


/* V24 — mobile only: reduce the large flexible blank area before footer on About/Contact */
@media(max-width:800px) {

  .about-shell,
  .contact-shell {
    min-height: 72vh;
  }

  .about-shell .page,
  .contact-shell .page {
    flex: 0 0 auto;
  }
}

@media(max-width:480px) {}


/* V25 — keep the same hierarchy on mobile */
@media(max-width:800px) {

  .about-page-title,
  .contact-page-title {
    display: block;
    margin: 0 0 26px;
  }

  .about-copy-title {
    font-size: 11px;
    margin-bottom: 14px;
  }
}

@media(max-width:480px) {

  .about-page-title,
  .contact-page-title {
    margin-bottom: 20px;
  }

  .about-copy-title {
    font-size: 10px;
    margin-bottom: 11px;
  }
}

/* V27 — mobile only: About photo follows the height of the copy column */
@media(max-width:800px) {
  .about-top {
    align-items: stretch;
  }

  .about-photo {
    height: 100%;
    aspect-ratio: auto;
    align-self: stretch;
    overflow: hidden;
  }

  .about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media(max-width:800px) {
  .contact-form {
    margin-top: 20px;
    gap: 14px
  }

  .contact-form label {
    gap: 5px
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 8px;
    padding: 5px 0 7px
  }

  .contact-form textarea {
    min-height: 58px
  }

  .contact-form button {
    padding: 11px 8px;
    font-size: 7px;
    letter-spacing: .13em;
    gap: 10px
  }

  .contact-mobile-layout .contact-details {
    margin-top: 18px
  }
}

@media(max-width:480px) {
  .contact-form {
    gap: 11px
  }

  .contact-form label>span {
    font-size: 7px
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 7.5px
  }

  .contact-form textarea {
    min-height: 52px
  }
}

/* V30 — mobile only: compact contact handles */
@media(max-width:800px) {
  .contact-details a {
    font-size: 7px;
    margin-right: 3px;
  }
}

/* V31 — Representation map responsive */
@media(max-width:800px) {
  .representation {
    margin-top: 70px;
    padding: 0 0 24px
  }

  .representation-head {
    display: block;
    margin-bottom: 22px
  }

  .representation-head h2 {
    font-size: 36px
  }

  .representation-copy {
    margin-top: 18px;
    max-width: 290px;
    font-size: 8px
  }

  .representation-map {
    height: 480px;
    min-height: 0;
    overflow: visible
  }

  .europe-map {
    inset: 3% -15% auto -15%;
    width: 130%;
    height: 72%
  }

  .agency-marker em {
    font-size: 6.5px
  }

  .marker-london {
    left: 31%;
    top: 34%
  }

  .marker-milan {
    left: 54%;
    top: 48%
  }

  .marker-barcelona {
    left: 35%;
    top: 51.5%
  }

  .marker-madrid {
    left: 24%;
    top: 56%
  }

  .marker-stockholm {
    left: 64%;
    top: 20%
  }

  .agency-card {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    min-height: 150px;
    padding: 20px 22px;
    background: rgba(242, 240, 233, .97)
  }

  .agency-card::before {
    display: none
  }

  .agency-card h3 {
    font-size: 12px;
    margin-bottom: 20px
  }

  .agency-card-city {
    font-size: 7px
  }

  .representation-note {
    text-align: left;
    font-size: 6px;
    margin-top: 13px
  }
}

@media(max-width:480px) {
  .representation {
    margin-top: 56px;
    padding-top: 0px
  }

  .representation-head h2 {
    font-size: 32px
  }

  .representation-map {
    height: 430px
  }

  .agency-marker {
    gap: 5px
  }

  .agency-marker button {
    width: 15px;
    height: 15px
  }

  .agency-marker button::after {
    inset: 6px
  }

  .agency-marker button span {
    inset: 4px
  }

  .agency-marker em {
    font-size: 5.8px;
    letter-spacing: .08em
  }
}

/* V32 — card stays attached to the selected city on touch screens too */
@media(max-width:800px) {
  .representation-map {
    height: 500px;
    overflow: hidden
  }

  .europe-map {
    inset: 2% -8% auto -8%;
    width: 116%;
    height: 78%;
    object-fit: contain
  }

  .agency-card {
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    width: min(230px, 68vw);
    min-height: 132px;
    padding: 17px 18px
  }

  .agency-card h3 {
    margin-bottom: 15px
  }

  .marker-london {
    left: 27%;
    top: 41%
  }

  .marker-milan {
    left: 50%;
    top: 53%
  }

  .marker-barcelona {
    left: 33%;
    top: 58.5%
  }

  .marker-madrid {
    left: 19%;
    top: 63%
  }

  .marker-stockholm {
    left: 66%;
    top: 25%
  }
}

@media(max-width:480px) {
  .representation-map {
    height: 260px
  }

  .agency-card {
    width: min(215px, 70vw);
    padding: 15px 16px
  }
}

/* V42 — Milan marker slightly farther east on mobile */
@media(max-width:800px) {
  .marker-milan {
    left: 52%;
  }
}

/* V43 — responsive map stage: markers remain locked to SVG coordinates */
@media(max-width:800px) {
  .map-coordinate-stage {
    width: 116%;
    top: 60%;
  }

  .map-coordinate-stage .europe-map {
    inset: 0;
    width: 100%;
    height: 100%;
    padding-right: 15px;
  }

  .map-coordinate-stage .marker-london {
    left: 27.0%;
    top: 55.3%;
  }

  .map-coordinate-stage .marker-milan {
    left: 50.3%;
    top: 71.3%;
  }

  .map-coordinate-stage .marker-barcelona {
    left: 32.1%;
    top: 79.4%;
  }

  .map-coordinate-stage .marker-madrid {
    left: 18.5%;
    top: 84.7%;
  }

  .map-coordinate-stage .marker-stockholm {
    left: 65.0%;
    top: 34.6%;
  }
}

/* V61 — mobile representation: compact floating card, no connector line. */
@media(max-width:800px) {
  .agency-connector {
    display: none !important
  }

  .agency-card {
    width: min(190px, 58vw) !important;
    min-height: 0 !important;
    padding: 13px 14px 12px !important;
    background: rgba(242, 240, 233, .96) !important;
    box-shadow: 0 12px 34px rgba(41, 40, 36, .055) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px)
  }

  .agency-card-city {
    font-size: 6px !important;
    margin-bottom: 7px !important
  }

  .agency-card h3 {
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin-bottom: 11px !important
  }

  .agency-card-link {
    font-size: 6.5px !important;
    gap: 8px !important;
    padding-bottom: 3px !important
  }
}

@media(max-width:480px) {
  .agency-card {
    width: min(176px, 56vw) !important;
    padding: 12px 13px 11px !important
  }
}


/* V70 — portrait markers/card on touch layouts */
@media(max-width:800px) {
  .agency-marker {
    transform: translate(-16px, -16px);
    gap: 6px
  }

  .agency-marker button {
    width: 32px;
    height: 32px
  }

  .agency-marker button img {
    inset: 3px;
    width: 26px;
    height: 26px
  }

  .agency-card-profile {
    gap: 10px
  }

  .agency-card-photo {
    width: 46px;
    height: 58px;
    flex: 0 0 auto
  }

  .agency-card h3 {
    margin-bottom: 10px !important
  }
}

@media(max-width:480px) {
  .agency-marker {
    transform: translate(-15px, -15px)
  }

  .agency-marker button {
    width: 30px;
    height: 30px
  }

  .agency-marker button img {
    width: 24px;
    height: 24px
  }

  .agency-card-photo {
    width: 42px;
    height: 53px
  }
}

/* V75 — Home representation responsive */
@media(max-width:800px) {
  .home-body .home-copy {
    width: 230px
  }

  .home-body .home-copy h1 {
    margin-bottom: 48px
  }

  .home-role-categories {
    margin: -25px 0 28px;
    font-size: 7px;
    letter-spacing: .09em;
    white-space: normal;
    max-width: 220px
  }

  .home-representation-wrap {
    padding: 1px 22px 18px
  }

  .home-representation-wrap .representation {
    margin-top: 54px
  }
}

@media(max-width:480px) {
  .home-body .home-copy {
    width: 190px
  }

  .home-role-categories {
    max-width: 190px;
    font-size: 6.5px;
    line-height: 1.8
  }
}


/* V76 — Home typography/footer responsive */
@media(max-width:800px) {
  .home-body .home-role-categories {
    font-size: 8.5px
  }

  .home-body .cta {
    font-size: 13px
  }

  .home-body .home-footer {
    font-size: 8px
  }

  .home-standard-footer {
    margin: 0 22px;
    padding-top: 20px;
    min-height: 66px
  }
}

@media(max-width:480px) {
  .home-body .home-role-categories {
    font-size: 8px
  }

  .home-body .home-footer {
    font-size: 7.5px
  }
}

/* V80 — keep mobile Hero copy clear of the Europe map */
@media(max-width:480px) {
  .home-body .home-copy {
    right: 7vw;
    top: 25%;
    width: 155px;
    left: 37%;
  }
}

/* Mobile Home hero — dedicated responsive image */
@media (max-width: 800px) {
  .home-body .home-hero {
    background-image: url('../assets/images/home/hero-home-mobile.jpg') !important;
  }
}


/* V6 — requested Home mobile-only composition */
@media (max-width: 800px) {
  .home-body .logo-signature {
    margin-top: 110%;
    margin-left: 0%;
    margin-right: -6%;
  }

  .home-body .logo-signature.home-entry-ink img {
    animation-duration: 6s;
    filter: blur(.65px) !important;
  }

  .home-body .cta {
    font-size: 14px;
    opacity: 0.6;
  }
}

@media (max-width: 480px) {
  .home-body .home-copy {
    right: 7vw;
    top: 71%;
    left: 14%;
    width: auto;
  }

  .home-body .home-hero {
    background-position: 68% center;
  }
}

/* Production footer — mobile composition */
@media (max-width:800px) {
  .footer.footer-production {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 26px;
    min-height: 126px
  }

  .footer-production .footer-row {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px
  }

  .footer-production .footer-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    width: 100%;
    gap: 18px 12px
  }

  .footer-production .footer-logo {
    grid-column: 1/-1;
    grid-row: 1;
    justify-self: center;
    width: 132px !important;
    margin: 0 auto !important
  }

  .footer-production .footer-copyright {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: center;
    min-width: 0
  }

  .footer-production .footer-socials {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center
  }

  .footer-production .footer-row-meta {
    grid-template-columns: 1fr 1fr;
    margin-top: 0
  }

  .footer-production .footer-legal {
    justify-self: start
  }

  .footer-production .footer-powered {
    justify-self: end;
    text-align: right
  }
}

/* Home mobile — desktop-style navigation, always visible in the top-right */
@media (max-width:800px) {
  .home-body .menu-toggle {
    display: none !important
  }

  .home-body .site-header {
    align-items: flex-start
  }

  .home-body .nav {
    display: flex !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 13px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #e1ded4 !important;
    font-size: 7px !important;
    font-weight: 400 !important;
    letter-spacing: .10em !important;
    white-space: nowrap;
  }

  .home-body .nav a {
    color: #e1ded4 !important;
    padding: 3px 0 !important;
    border: 0 !important
  }
}

@media (max-width:480px) {
  .home-body .nav {
    right: 14px !important;
    top: 18px !important;
    gap: 9px !important;
    font-size: 10px !important;
    letter-spacing: .07em !important
  }
}

/* Fashion gallery — mobile stays at 2 columns */
@media (max-width: 800px) {

  .gallery[data-gallery="fashion"],
  .gallery[data-gallery="commercial"],
  .gallery[data-gallery="beauty"],
  .gallery[data-gallery="digitals"] {
    columns: 2;
  }
}

/* Digitals mobile — force real 2-column grid on Safari/iOS */
@media (max-width: 800px) {
  .gallery[data-gallery="digitals"] {
    columns: initial !important;
    column-count: initial !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start;
  }

  .gallery[data-gallery="digitals"] .gallery-item {
    width: 100% !important;
    margin: 0 !important;
    break-inside: auto !important;
    display: block;
  }

  .gallery[data-gallery="digitals"] .gallery-item img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }
}

/* Internal pages: compact two-column mobile footer */
@media (max-width: 800px) {
  .footer.footer-production {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 8px;
    align-items: center;
    padding-top: 26px;
    min-height: 100px;
  }

  .footer-production .footer-row,
  .footer-production .footer-row-main,
  .footer-production .footer-row-meta {
    display: contents;
  }

  .footer-production .footer-copyright {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    white-space: nowrap;
  }

  .footer-production .footer-powered {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    text-align: left;
    white-space: nowrap;
  }

  .footer-production .footer-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    width: 132px !important;
    margin: 0 !important;
  }

  .footer-production .footer-socials {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
  }

  .footer-production .footer-legal {
    display: none;
  }
}

/* V73 — About mobile: photo + copy above, representation map full width below */
@media (max-width: 800px) {
  .about-top {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: start;
  }

  /* Let the copy stay in column 2 while Representation becomes a direct grid item. */
  .about-right {
    display: contents;
  }

  .about-photo {
    grid-column: 1;
    width: 100%;
    max-width: none;
    height: 100%;
    overflow: hidden;
  }

  .about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-copy {
    grid-column: 2;
    min-width: 0;
  }

  .about-top .representation {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 125px;
    padding-left: 0;
    padding-right: 0;
  }

  .about-top .representation-map {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .about-top {
    gap: 40px;
    margin-top: 40px;
  }
}

/* V74 — Mobile gallery category navigation (safe: gallery DOM untouched) */
@media (max-width: 800px) {
  .gallery-page .gallery-head {
    position: sticky;
    top: 60px;
    z-index: 90;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0 -20px;
    padding: 18px 20px 14px;
    background: var(--bg);
    transition: padding .28s ease, box-shadow .28s ease;
  }

  .gallery-page .category-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .gallery-page .category-topline .script-title {
    font-size: 15px !important;
    margin: 0;
    white-space: nowrap;
  }

  .gallery-page .category-topline .home-back {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  .mobile-gallery-tabs {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 5px;
  }

  .mobile-gallery-tabs a {
    min-width: 0;
    text-align: center;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-gallery-tabs a.active {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .gallery-page .gallery-head.is-stuck {
    grid-template-columns: 30px minmax(0, 1fr);
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0 8px 18px rgba(41, 40, 36, .08);
  }

  .gallery-page .gallery-head.is-stuck .category-topline {
    width: 30px;
    gap: 0;
  }

  .gallery-page .gallery-head.is-stuck .category-topline .script-title {
    display: none;
  }

  .gallery-page .gallery-head.is-stuck .mobile-gallery-tabs {
    gap: 2px;
  }

  .gallery-page .gallery-head.is-stuck .mobile-gallery-tabs a {
    font-size: 8px;
  }
}

/* V76 — exact mobile gallery sticky states */
@media (max-width: 800px) {
  .mobile-gallery-sticky-sentinel {
    display: block;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  /* Initial state: arrow + page title | four category buttons */
  .gallery-page .gallery-head:not(.is-stuck) .category-topline .script-title {
    display: block !important;
    font-size: 15px !important;
  }

  /* Sticky state: arrow | four category buttons. Only the page title disappears. */
  .gallery-page .gallery-head.is-stuck {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .gallery-page .gallery-head.is-stuck .category-topline {
    width: 30px;
    min-width: 30px;
  }

  .gallery-page .gallery-head.is-stuck .category-topline .script-title {
    display: none !important;
  }

  .gallery-page .gallery-head.is-stuck .mobile-gallery-tabs {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* V77 — Mobile gallery nav: current page is always first via category-topline; only the other 3 categories follow. */
@media (max-width: 800px) {

  .gallery-page .gallery-head,
  .gallery-page .gallery-head.is-stuck {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .gallery-page .category-topline,
  .gallery-page .gallery-head.is-stuck .category-topline {
    display: flex;
    width: auto;
    min-width: 0;
    gap: 10px;
    align-items: center;
  }

  .gallery-page .category-topline .script-title,
  .gallery-page .gallery-head.is-stuck .category-topline .script-title {
    display: block !important;
    font-size: 15px !important;
    white-space: nowrap;
  }

  .gallery-page .mobile-gallery-tabs,
  .gallery-page .gallery-head.is-stuck .mobile-gallery-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 5px;
  }

  .gallery-page .mobile-gallery-tabs a,
  .gallery-page .gallery-head.is-stuck .mobile-gallery-tabs a {
    font-size: 8px;
  }
}


/* V78 — Definitive mobile gallery nav: same complete row before and during sticky scroll. */
@media (max-width: 800px) {
  .gallery-page .gallery-head {
    position: sticky;
    top: 60px;
    z-index: 90;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center;
    gap: 10px;
    margin: 0 -20px;
    padding: 18px 20px 14px;
    background: #f2f0e9fc;
  }

  .gallery-page .category-topline {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .gallery-page .category-topline .home-back {
    display: flex !important;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  .gallery-page .category-topline .title-reveal-mask,
  .gallery-page .category-topline .title-reveal-inner {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
  }

  .gallery-page .category-topline .script-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 15px !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  .gallery-page .mobile-gallery-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 5px !important;
  }

  .gallery-page .mobile-gallery-tabs a {
    font-size: 10px !important;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
  }
}


/* V74 — universal mobile footer: powered left; socials + copyright right */
@media (max-width: 800px) {

  /* Internal pages */
  .footer.footer-production {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 20px !important;
    row-gap: 7px !important;
    align-items: center !important;
    min-height: 78px !important;
    padding-top: 20px !important;
  }

  .footer-production .footer-row,
  .footer-production .footer-row-main,
  .footer-production .footer-row-meta {
    display: contents !important;
  }

  .footer-production .footer-logo,
  .footer-production .footer-legal {
    display: none !important;
  }

  .footer-production .footer-powered {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    justify-self: start !important;
    align-self: center !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .footer-production .footer-socials {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    gap: 14px !important;
  }

  .footer-production .footer-copyright {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: start !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* Home: same information hierarchy, preserving overlay treatment */
  .home-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 20px !important;
    row-gap: 7px !important;
    align-items: end !important;
  }

  .home-footer .home-powered {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    justify-self: start !important;
    align-self: center !important;
    white-space: nowrap !important;
  }

  .home-footer .home-socials {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    display: flex !important;
  }

  .home-footer .home-copyright {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: start !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 800px) {
  .home-footer .home-legal {
    display: none !important;
  }
}

/* FINAL V75 — mobile footer: copyright + powered left, socials right */
@media (max-width: 800px) {
  .footer.footer-production {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 20px !important;
    row-gap: 5px !important;
    align-items: center !important;
    min-height: 78px !important;
    padding-top: 20px !important;
    border-top: 1px solid #c4c0b5;
  }

  .footer-production .footer-row,
  .footer-production .footer-row-main,
  .footer-production .footer-row-meta {
    display: contents !important;
  }

  .footer-production .footer-logo,
  .footer-production .footer-legal {
    display: none !important;
  }

  .footer-production .footer-copyright {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .footer-production .footer-powered {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .footer-production .footer-socials {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    justify-self: end !important;
    align-self: center !important;
    gap: 5px !important;
  }

  /* Home: preserve its existing overlay; only rearrange its contents. */
  .home-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 20px !important;
    row-gap: 5px !important;
    align-items: center !important;
  }

  .home-footer .home-copyright {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .home-footer .home-powered {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .home-footer .home-socials {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    justify-self: end !important;
    align-self: center !important;
    gap: 5px !important;
  }

  .home-footer .home-legal {
    display: none !important;
  }
}

/* FIX — rounded gallery cards also during category transition */
.gallery-item {
  border-radius: 10px;
  overflow: hidden;
}

.gallery-item img {
  border-radius: inherit;
}

html.category-prepared-arrival .gallery-item,
html.category-cover-arrival .gallery-item {
  border-radius: 10px !important;
  overflow: hidden !important;
}

html.category-prepared-arrival .gallery-item img,
html.category-cover-arrival .gallery-item img {
  border-radius: inherit !important;
}

@media (max-width: 800px) {

  .nav.open>a {
    position: relative;
    width: 120px;
    text-align: right;
  }

  .nav.open>a::after {
    content: "";
    position: absolute;
    width: 133px;
    height: 1px;
    background: currentColor;
    right: 0;
    bottom: 3px;
    top: 20px !important;
  }
}

/* V104 — Contact mobile: preserve transparent portrait without crop */
@media(max-width:800px) {
  .contact-mobile-layout .contact-photo {
    height: auto;
    min-height: 0;
    align-self: end;
    overflow: visible;
  }

  .contact-mobile-layout .contact-photo img {
    display: block;
    width: 124%;
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }
}

/* V107 — CONTACT portrait anchored structurally to footer border-top (mobile) */
@media (max-width: 800px) {
  body.contact-body {
    --contact-anchor-mobile-right: -84px;
    --contact-anchor-mobile-width: 96vw;
    --contact-anchor-mobile-z: 20;
  }

  body.contact-body .contact-page {
    position: relative !important;
    overflow: visible !important;
  }

  body.contact-body .contact-mobile-layout,
  body.contact-body .contact-wrap {
    position: static !important;
    overflow: visible !important;
  }

  body.contact-body .contact-photo {
    position: absolute !important;
    right: var(--contact-anchor-mobile-right) !important;
    bottom: 0 !important;
    top: auto !important;
    left: 105px !important;
    width: 320px !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    align-self: auto !important;
    z-index: var(--contact-anchor-mobile-z) !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  body.contact-body .contact-photo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: right bottom !important;
  }
}

@media (max-width: 800px) {
  .contact-detail-icon {
    width: 15px !important;
    height: 10px !important;
  }

  .contact-detail-row {
    gap: 2px !important;
  }
}
/* V67 — hamburger -> X animation (final mobile override; responsive.css loads last) */
@media (max-width: 800px) {
  .menu-toggle {
    position: relative !important;
    display: block !important;
    width: 26px !important;
    height: 22px !important;
    padding: 0 !important;
  }

  .menu-toggle span {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    display: block !important;
    width: 26px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    background: currentColor !important;
    transform-origin: 50% 50% !important;
    transition: transform .35s cubic-bezier(.4,0,.2,1) !important;
  }

  .menu-toggle span:first-child {
    transform: translateY(-4px) rotate(0deg) !important;
  }

  .menu-toggle span:last-child {
    transform: translateY(4px) rotate(0deg) !important;
  }

  .menu-toggle.is-open span:first-child {
    transform: translateY(0) rotate(45deg) !important;
  }

  .menu-toggle.is-open span:last-child {
    transform: translateY(0) rotate(-45deg) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-toggle span {
      transition-duration: .01ms !important;
    }
  }
}


/* V109 — ABOUT MOBILE: profilo del testo lungo il braccio.
   Modifica SOLO questi valori. 0px = testo nella posizione originale.
   Ogni variabile controlla quanto spazio viene riservato a sinistra
   della relativa riga, senza spostare o ridimensionare la modella. */
@media (max-width: 800px) {
  
  body.about-body {
    --about-model-mobile-left: 2px;
    --about-model-mobile-width: 66vw;
  }
  body.about-body .about-copy {
    --about-line-01: 10px;
    --about-line-02: 10px;
    --about-line-03: 10px;
    --about-line-04: 10px;
    --about-line-05: 10px;
    --about-line-06: 10px;
    --about-line-07: 10px;
    --about-line-08: 10px;
    --about-line-09: 10px;
    --about-line-10: 10px;
    --about-line-11: 10px;
    --about-line-12: 10px;
    --about-line-13: 10px;
    --about-line-14: 10px;
    --about-line-15: 10px;
    --about-line-16: 10px;
    --about-line-17: 10px;
    --about-line-18: 10px;
    --about-line-19: 10px;
    --about-line-20: 10px;
  }

  body.about-body .about-copy p[data-i18n="about.body"]::before {
    content: "";
    float: left;
    width: 180px;
    height: 20lh;
    shape-margin: 0;
    shape-outside: polygon(
      0 0,
      var(--about-line-01) 0%, var(--about-line-01) 5%,
      var(--about-line-02) 5%, var(--about-line-02) 10%,
      var(--about-line-03) 10%, var(--about-line-03) 15%,
      var(--about-line-04) 15%, var(--about-line-04) 20%,
      var(--about-line-05) 20%, var(--about-line-05) 25%,
      var(--about-line-06) 25%, var(--about-line-06) 30%,
      var(--about-line-07) 30%, var(--about-line-07) 35%,
      var(--about-line-08) 35%, var(--about-line-08) 40%,
      var(--about-line-09) 40%, var(--about-line-09) 45%,
      var(--about-line-10) 45%, var(--about-line-10) 50%,
      var(--about-line-11) 50%, var(--about-line-11) 55%,
      var(--about-line-12) 55%, var(--about-line-12) 60%,
      var(--about-line-13) 60%, var(--about-line-13) 65%,
      var(--about-line-14) 65%, var(--about-line-14) 70%,
      var(--about-line-15) 70%, var(--about-line-15) 75%,
      var(--about-line-16) 75%, var(--about-line-16) 80%,
      var(--about-line-17) 80%, var(--about-line-17) 85%,
      var(--about-line-18) 85%, var(--about-line-18) 90%,
      var(--about-line-19) 90%, var(--about-line-19) 95%,
      var(--about-line-20) 95%, var(--about-line-20) 100%,
      0 100%
    );
  }
}

/* V110 — ABOUT MOBILE: abbassa SOLO il blocco About Me, senza muovere la modella. */
@media (max-width: 800px) {
  body.about-body .about-copy {
    --about-copy-mobile-offset: 160px; /* MODIFICA SOLO QUESTO VALORE per alzare/abbassare About Me */
    transform: translateY(var(--about-copy-mobile-offset));
  }
}

/* V111 — ABOUT MOBILE: nasconde solo il titolo "ABOUT ME". */
@media (max-width: 800px) {
  body.about-body .about-copy > .about-copy-title {
    display: none !important;
  }
}

/* V112 — ABOUT MOBILE: spaziature firma e blocco REPRESENTED BY.
   Modifica SOLO le due variabili qui sotto per fare prove. */
@media (max-width: 800px) {
  body.about-body {
    --about-signature-gap: 10px;          /* distanza tra body About e firma */
    --represented-map-top-gap: 30px;      /* distanza tra REPRESENTED BY e border-top della mappa */
  }

  body.about-body .about-inline-signature {
    margin-top: var(--about-signature-gap) !important;
  }

  body.about-body .representation > .about-copy-title {
    margin-bottom: var(--represented-map-top-gap) !important;
  }
}


/* V113 — ABOUT MOBILE: REPRESENTED BY appartiene alla MAPPA, non alla silhouette/firma.
   Modifica SOLO --represented-title-from-map-top per cambiare la distanza dal border-top della mappa. */
.represented-title-mobile {
  display: none;
}

@media (max-width: 800px) {
  body.about-body {
    --represented-title-from-map-top: 30px;
  }

  body.about-body .representation > .represented-title-desktop {
    display: none !important;
  }

  body.about-body .representation-map > .represented-title-mobile {
    display: block !important;
    position: absolute !important;
    top: var(--represented-title-from-map-top) !important;
    left: 50px !important;
    z-index: 12 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* V114 — ABOUT MOBILE: distanza reale tra fine body e firma.
   Modifica SOLO --about-body-signature-gap. */
@media (max-width: 800px) {
  body.about-body {
    --about-body-signature-gap: 10px;
  }

  body.about-body .about-copy p[data-i18n="about.body"] {
    margin-bottom: var(--about-body-signature-gap) !important;
  }

  body.about-body .about-inline-signature {
    display: block !important;
    margin-top: 0 !important;
  }
}

/* V115 — CONTACT MOBILE: allinea a sinistra le tre righe del blocco contatti footer.
   Il punto di partenza è identico per: direct label, mail e Instagram. */
@media (max-width: 800px) {
  body.contact-body .contact-footer-direct .contact-direct-label,
  body.contact-body .contact-footer-direct .contact-detail-row:nth-child(1),
  body.contact-body .contact-footer-direct .contact-detail-row:nth-child(2) {
    justify-self: start !important;
    text-align: left !important;
  }
}