:root {
    --ivory: #f6f0e9;
    --ivory-2: #efe6dc;
    --sand: #dccbb9;
    --gold: #b89567;
    --gold-soft: rgba(184, 149, 103, .35);
    --ink: #111111;
    --ink-soft: #1b1b1b;
    --text: #2b2926;
    --muted: rgba(17,17,17,.58);
    --line: rgba(17,17,17,.10);
    --line-strong: rgba(17,17,17,.16);
    --white: #ffffff;
    --beige-light: #f5ece0;
    --radius: 1.5rem;
    --radius-lg: 2.25rem;
    --shadow-soft: 0 12px 40px rgba(17,17,17,.06);
    --shadow-deep: 0 28px 70px rgba(10,10,10,.14);
    --container: 1240px;
    --transition: 340ms cubic-bezier(.22,.61,.36,1);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background:
      radial-gradient(circle at top left, rgba(255,255,255,.65), transparent 32%),
      linear-gradient(180deg, #f8f2eb 0%, #f4eee7 30%, #f3ece5 100%);
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .18;
    z-index: -1;
  }

  img { max-width: 100%; display: block; }
  a { text-decoration: none; color: inherit; }
  .font-display { font-family: 'Cormorant Garamond', serif; }

  .container-lux {
    width: min(100% - 2rem, var(--container));
    margin: 0 auto;
  }

  .section-padding { padding: clamp(4rem, 7vw, 7rem) 0; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .eyebrow::before,
  .eyebrow::after {
    content: "";
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  .headline-xl {
    font-size: clamp(3.3rem, 8vw, 6.6rem);
    line-height: .92;
    letter-spacing: -.03em;
  }

  .headline-lg {
    font-size: clamp(2.35rem, 6vw, 4.6rem);
    line-height: .96;
    letter-spacing: -.03em;
  }

  .headline-md {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
  }

  .body-lg {
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.8;
  }

  .body-md {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(43,41,38,.82);
  }

  .section-shell {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.42);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }

  .section-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 40%);
    pointer-events: none;
  }

  .lux-panel {
    background: rgba(255,255,255,.52);
    border: 1px solid var(--line);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-soft);
  }

  .hairline {
    width: 84px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 54px;
    padding: 0 1.6rem;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
    will-change: transform;
    text-align: center;
  }

  .btn::after {
    content: "→";
    font-size: 12px;
    transition: transform var(--transition), opacity var(--transition);
  }

  .btn:hover { transform: translateY(-2px); }
  .btn:hover::after { transform: translateX(2px); }

  .btn-primary {
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    box-shadow: 0 10px 28px rgba(17,17,17,.16);
  }

  .btn-primary:hover {
    background: #1a1a1a;
    box-shadow: 0 16px 34px rgba(17,17,17,.22);
  }

  .btn-secondary {
    background: rgba(255,255,255,.5);
    color: var(--ink);
    border: 1px solid var(--line-strong);
  }

  .btn-secondary:hover {
    background: rgba(255,255,255,.82);
    border-color: rgba(17,17,17,.24);
  }

  .btn-ghost-dark {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.24);
  }

  .btn-ghost-dark:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.45);
  }

  .location-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.52);
    font-size: 12px;
    letter-spacing: .10em;
    color: rgba(17,17,17,.62);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
  }

  .location-badge:hover {
    background: rgba(255,255,255,.82);
    border-color: rgba(17,17,17,.22);
  }

  .location-badge svg {
    color: var(--gold);
    flex-shrink: 0;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    backdrop-filter: blur(16px);
    background: rgba(246,240,233,.72);
    border-bottom: 1px solid rgba(17,17,17,.06);
    transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
  }

  .site-header.scrolled {
    background: rgba(246,240,233,.88);
    box-shadow: 0 10px 28px rgba(17,17,17,.06);
  }

  .nav-link {
    position: relative;
    font-size: 12px;
    letter-spacing: .20em;
    text-transform: uppercase;
    color: rgba(17,17,17,.72);
    transition: color var(--transition), opacity var(--transition);
  }

  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
  }

  .nav-link:hover,
  .nav-link.active { color: var(--ink); }

  .nav-link:hover::after,
  .nav-link.active::after { transform: scaleX(1); }

  .brand-mark {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  .brand-logo {
    display: block;
    width: clamp(168px, 18vw, 240px);
    height: auto;
    object-fit: contain;
  }

  .mobile-menu-btn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(17,17,17,.1);
    background: rgba(255,255,255,.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition), border-color var(--transition);
    border-top: 1px solid transparent;
  }

  #mobileMenu.open {
    max-height: 520px;
    border-top-color: rgba(17,17,17,.08);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 4vw, 4.2rem);
    align-items: center;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    padding: clamp(1rem, 2vw, 1.75rem) 0;
  }

  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
  }

  .meta-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 .95rem;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .08em;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.48);
    color: rgba(17,17,17,.74);
  }

  .hero-visual-wrap {
    position: relative;
    min-height: clamp(460px, 70vw, 760px);
    display: grid;
    align-items: center;
  }

  .hero-main-photo {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    min-height: clamp(460px, 70vw, 760px);
    box-shadow: var(--shadow-deep);
    isolation: isolate;
    transform: translateY(0);
    transition: transform 900ms cubic-bezier(.22,.61,.36,1);
  }

  .hero-main-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17,17,17,.04), rgba(17,17,17,.24));
    z-index: 1;
  }

  .hero-main-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;;
    transform: scale(1.04);
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
  }

  .hero-visual-wrap:hover .hero-main-photo img { transform: scale(1.08); }
  .hero-visual-wrap:hover .hero-main-photo { transform: translateY(-4px); }

  .hero-floating-card {
    position: absolute;
    left: -2.25rem;
    bottom: 2.5rem;
    max-width: 270px;
    padding: 1.4rem 1.4rem 1.2rem;
    border-radius: 1.5rem;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(17,17,17,.09);
    box-shadow: 0 20px 50px rgba(17,17,17,.14);
    backdrop-filter: blur(12px);
    z-index: 2;
  }

  .hero-floating-card small {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(17,17,17,.46);
    margin-bottom: .9rem;
  }

  .hero-floating-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(17,17,17,.78);
  }

  .hero-side-note {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: rgba(17,17,17,.20);
    backdrop-filter: blur(10px);
    padding: .75rem 1rem;
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
  }

  /* SERVICES - NEW SECTION */
  .services-section {
    position: relative;
  }

  .services-editorial-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.85fr 0.85fr;
    gap: 1.25rem;
    align-items: stretch;
  }

  .service-card-main,
  .service-card-side {
    position: relative;
    border-radius: 2rem;
    border: 1px solid rgba(17,17,17,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(244,238,231,.76));
    box-shadow: 0 14px 38px rgba(17,17,17,.06);
    overflow: hidden;
    transition:
      transform var(--transition),
      box-shadow var(--transition),
      border-color var(--transition),
      background var(--transition);
  }

  .service-card-main:hover,
  .service-card-side:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(17,17,17,.10);
    border-color: rgba(17,17,17,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,241,234,.82));
  }

  .service-card-inner {
    padding: 1.6rem;
    position: relative;
    z-index: 1;
  }

  .service-card-main::before,
  .service-card-side::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 90px;
    background: linear-gradient(180deg, rgba(255,255,255,.26), transparent);
    pointer-events: none;
  }

  .service-index {
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(17,17,17,.42);
    margin-bottom: 1rem;
    display: inline-block;
  }

  .service-title-main {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: .98;
    margin: .55rem 0 0;
    color: #111;
  }

  .service-title-side {
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    line-height: 1.02;
    margin: .55rem 0 0;
    color: #111;
  }

  .service-text-main {
    margin-top: 1rem;
    max-width: 42rem;
    font-size: 1.04rem;
    line-height: 1.8;
    color: rgba(43,41,38,.84);
  }

  .service-text-side {
    margin-top: 1rem;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(43,41,38,.78);
  }

  .service-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.5rem;
  }

  .benefit-pill {
    min-height: 62px;
    display: flex;
    align-items: center;
    padding: 1rem 1.1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(17,17,17,.08);
    background: rgba(255,255,255,.52);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(17,17,17,.72);
  }

  .service-photo-pair-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
    margin-top: 1.5rem;
  }

  .service-image-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1.35rem;
    background: #efe6dc;
    min-height: 360px;
    border: 1px solid rgba(17,17,17,.06);
  }

  .service-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 1s cubic-bezier(.22,.61,.36,1);
  }

  .service-card-main:hover .service-image-frame img,
  .service-card-side:hover .service-image-vertical img {
    transform: scale(1.035);
  }

  .image-tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(17,17,17,.08);
    backdrop-filter: blur(10px);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(17,17,17,.60);
  }

  .service-image-vertical {
    margin-top: 1.3rem;
    position: relative;
    overflow: hidden;
    border-radius: 1.35rem;
    background: #e9ddd0;
    border: 1px solid rgba(17,17,17,.06);
    height: 420px;
  }

  .service-image-vertical img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.22,.61,.36,1);
  }

  .sale-photo img {
    object-position: center center;
  }

  .shipping-photo img {
    object-position: center center;
  }

  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-top: 3.5rem;
  }

  .portfolio-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.9rem;
    background: var(--beige-light);
    border: 1px solid rgba(184,149,103,.18);
    box-shadow: var(--shadow-soft);
    padding: 1rem;
  }

  .portfolio-card.large { grid-column: span 7; }
  .portfolio-card.small { grid-column: span 5; }

  .portfolio-card .topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
    flex-wrap: wrap;
  }

  .mini-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 .8rem;
    border-radius: 999px;
    border: 1px solid rgba(184,149,103,.22);
    background: rgba(255,248,240,.85);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(17,17,17,.58);
  }

  .before-after-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
  }

  .before-after-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1.2rem;
    background: #ecddd0;
  }

  .before-after-frame img {
    width: 100%;
    height: clamp(320px, 38vw, 460px);
    object-fit: cover;
    object-position: top center;
    transition: transform .9s cubic-bezier(.22,.61,.36,1);
  }

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

  .frame-badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.76);
    backdrop-filter: blur(12px);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(17,17,17,.64);
  }

  .editorial-split {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(1.4rem, 3vw, 2.5rem);
    align-items: center;
  }

  .editorial-photo {
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: var(--shadow-deep);
    min-height: clamp(420px, 60vw, 660px);
  }

  .editorial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
  }

  .editorial-photo:hover img { transform: scale(1.05); }

  .feature-points {
    display: grid;
    gap: 1.1rem;
    margin-top: 2rem;
  }

  .feature-points .item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
    align-items: start;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(17,17,17,.08);
  }

  .feature-points .item:last-child { border-bottom: 0; padding-bottom: 0; }

  .feature-points .num {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(17,17,17,.10);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(17,17,17,.48);
    background: rgba(255,255,255,.56);
  }

  .dark-section {
    position: relative;
    color: #f4efe8;
    background:
      radial-gradient(circle at top right, rgba(184,149,103,.16), transparent 28%),
      linear-gradient(180deg, #0f0f0f 0%, #121212 100%);
    overflow: hidden;
  }

  .dark-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%);
    pointer-events: none;
  }



  .works-showcase {
    margin-top: 2.25rem;
    padding: 1rem;
    border-radius: 2rem;
    border: 1px solid rgba(17,17,17,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(244,238,231,.74));
    box-shadow: var(--shadow-soft);
  }

  .works-showcase-top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .works-showcase-copy {
    max-width: 42rem;
  }

  .works-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(17,17,17,.08);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(17,17,17,.56);
  }

  .works-showcase-title {
    margin: .9rem 0 0;
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
    line-height: 1.04;
    color: #111;
  }

  .works-showcase-text {
    margin-top: .9rem;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(43,41,38,.76);
  }

  .worksSwiper {
    overflow: hidden;
  }

  .work-slide {
    height: auto;
  }

  .work-card {
    height: 100%;
    padding: .8rem;
    border-radius: 1.45rem;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(17,17,17,.08);
    box-shadow: 0 14px 34px rgba(17,17,17,.06);
  }

  .work-card-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
  }

  .work-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: #ecddd0;
    min-height: 320px;
  }

  .work-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .work-card.model .work-frame {
    min-height: 420px;
  }

  .work-badge {
    position: absolute;
    left: .8rem;
    bottom: .8rem;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(17,17,17,.08);
    backdrop-filter: blur(10px);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(17,17,17,.62);
  }

  .work-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .85rem;
    flex-wrap: wrap;
  }

  .work-title {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(17,17,17,.52);
  }

  .works-nav {
    display: flex;
    align-items: center;
    gap: .55rem;
  }

  .works-arrow {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(17,17,17,.1);
    background: rgba(255,255,255,.78);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
  }

  .works-arrow:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.96);
    border-color: rgba(17,17,17,.18);
  }

  .capsule-stage {
    margin-top: 3rem;
    padding: 1rem;
    border-radius: 2rem;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
  }

  .capsule-img {
    height: clamp(320px, 54vw, 540px);
    object-fit: cover;
    object-position: top center;
    border-radius: 1.3rem;
  }

  .swiper-pagination-bullet { background: rgba(255,255,255,.38) !important; opacity: 1 !important; }
  .swiper-pagination-bullet-active { background: rgba(255,255,255,.96) !important; }

  .selection-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 1rem;
    margin-top: 3.5rem;
  }

  .selection-main {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    min-height: clamp(440px, 56vw, 640px);
    box-shadow: var(--shadow-deep);
  }

  .selection-main img,
  .selection-side img,
  .pro-card img,
  .salon-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
  }

  .selection-main:hover img,
  .selection-side:hover img,
  .pro-card:hover img,
  .salon-card:hover img { transform: scale(1.05); }

  .selection-side-stack {
    display: grid;
    gap: 1rem;
    grid-template-rows: 1fr 1fr;
  }

  .selection-side {
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
    min-height: 210px;
    box-shadow: var(--shadow-soft);
  }

  .image-caption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    color: #fff;
    background: rgba(17,17,17,.22);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 .85rem;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  .salon-card {
    position: relative;
    min-height: clamp(470px, 68vw, 720px);
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: var(--shadow-deep);
    isolation: isolate;
  }

  .salon-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(17,17,17,.78) 14%, rgba(17,17,17,.26) 62%, rgba(17,17,17,.10) 100%);
    z-index: 1;
  }

  .salon-content {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: flex;
    align-items: flex-end;
    padding: clamp(2rem, 4vw, 4.5rem);
  }

  .salon-content .inner {
    max-width: 610px;
    color: #fff;
  }

  .pro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 3rem;
  }

  .pro-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
    min-height: clamp(280px, 34vw, 440px);
    box-shadow: 0 20px 46px rgba(0,0,0,.20);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
  }

  .pro-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.42));
  }

  .pro-card .image-caption { z-index: 2; }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
  }

  .contact-card {
    padding: clamp(1.6rem, 3vw, 2.5rem);
    border-radius: 2rem;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.62);
    box-shadow: var(--shadow-soft);
    min-height: 100%;
  }

  .contact-list {
    display: grid;
    gap: .85rem;
    margin-top: 2rem;
  }

  .contact-list p {
    margin: 0;
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(17,17,17,.08);
    color: rgba(17,17,17,.78);
  }

  .contact-list p:last-child { border-bottom: 0; padding-bottom: 0; }

  .final-cta {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid var(--line);
    background:
      radial-gradient(circle at top right, rgba(184,149,103,.12), transparent 22%),
      linear-gradient(180deg, rgba(255,255,255,.76), rgba(247,240,232,.86));
    box-shadow: var(--shadow-soft);
    text-align: center;
    padding: clamp(2rem, 4vw, 4rem);
  }

  .footer {
    background: linear-gradient(180deg, #101010, #0d0d0d);
    color: rgba(255,255,255,.74);
    padding: 2.75rem 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .floating-contact {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }

  .floating-contact a {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(17,17,17,.88);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
    transition: transform var(--transition), background var(--transition), opacity var(--transition);
  }

  .floating-contact a:hover {
    transform: translateY(-3px);
    background: #181818;
  }

  .fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  }

  .fade-up.show {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 1180px) {
    .hero-grid,
    .editorial-split,
    .selection-grid,
    .contact-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .services-editorial-grid {
      grid-template-columns: 1fr;
    }

    .portfolio-card.large,
    .portfolio-card.small {
      grid-column: span 12;
    }

    .hero-floating-card {
      left: 1.25rem;
      bottom: 1.25rem;
    }

    .pro-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .service-image-vertical {
      height: 360px;
    }
  }

  @media (max-width: 900px) {
    .container-lux {
      width: min(100% - 1.2rem, var(--container));
    }

    .section-padding { padding: 3.6rem 0; }

    .headline-xl { font-size: clamp(2.6rem, 7vw, 4rem); line-height: .96; }
    .headline-lg { font-size: clamp(2rem, 5.6vw, 3rem); line-height: 1; }
    .headline-md { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
    .body-lg { font-size: 15px; line-height: 1.7; }
    .body-md { font-size: 14px; line-height: 1.7; }

    .hero-main-photo,
    .hero-visual-wrap { min-height: auto; }

    .hero-main-photo {
      aspect-ratio: 4 / 5;
      border-radius: 1.5rem;
    }

    .hero-floating-card {
      position: static;
      margin-top: 1rem;
      max-width: 100%;
      padding: 1rem 1rem .95rem;
      border-radius: 1.2rem;
    }

    .hero-side-note {
      top: .9rem;
      right: .9rem;
      font-size: 10px;
      letter-spacing: .16em;
      padding: .6rem .8rem;
    }

    .portfolio-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-top: 2.2rem;
    }

    .portfolio-card.large,
    .portfolio-card.small { grid-column: span 1; }

    .before-after-grid {
      grid-template-columns: 1fr 1fr;
      gap: .75rem;
    }

    .before-after-frame img { height: clamp(260px, 42vw, 360px); }

    .editorial-photo {
      min-height: auto;
      aspect-ratio: 4 / 5;
      border-radius: 1.5rem;
    }

    .capsule-img { height: 280px; }

    .selection-main {
      min-height: auto;
      aspect-ratio: 4 / 5;
      border-radius: 1.5rem;
    }

    .selection-side {
      min-height: auto;
      aspect-ratio: 4 / 5;
      border-radius: 1.3rem;
    }

    .salon-card {
      min-height: auto;
      aspect-ratio: 4 / 5;
      border-radius: 1.5rem;
    }

    .salon-content { padding: 1.4rem; }

    .pro-grid {
      grid-template-columns: 1fr;
      gap: .9rem;
      margin-top: 2rem;
    }

    .pro-card {
      min-height: auto;
      aspect-ratio: 4 / 5;
      border-radius: 1.3rem;
    }

    .contact-grid { grid-template-columns: 1fr; gap: 1rem; }

    .service-card-main,
    .service-card-side,
    .contact-card,
    .final-cta,
    .lux-panel,
    .portfolio-card { border-radius: 1.25rem; }
  }

  @media (max-width: 767px) {
    .brand-logo { width: min(180px, 56vw); }

    .site-header .container-lux {
      padding-top: .85rem;
      padding-bottom: .85rem;
    }

    .mobile-menu-btn { width: 44px; height: 44px; }

    .container-lux { width: min(100% - 1rem, var(--container)); }

    .section-padding { padding: 3.1rem 0; }

    .headline-xl { font-size: 2.2rem; line-height: .96; }
    .headline-lg { font-size: 1.9rem; line-height: 1; }
    .headline-md { font-size: 1.45rem; }

    .eyebrow {
      font-size: 10px;
      letter-spacing: .24em;
      gap: .55rem;
    }

    .eyebrow::before,
    .eyebrow::after { width: 22px; }

    .hero-grid,
    .editorial-split,
    .selection-grid,
    .contact-grid {
      grid-template-columns: 1fr;
      gap: 1.15rem;
    }

    #inicio { padding-top: 1rem !important; }

    .hero-copy {
      order: 1;
      padding-top: 0;
    }

    .hero-copy .eyebrow { margin-bottom: .5rem; }
    .hero-copy h1 { margin-top: 0.75rem !important; }
    .hero-copy p { margin-top: 1rem !important; }

    .hero-visual-wrap {
      order: 2;
      min-height: auto;
      margin-top: .4rem;
    }

    .hero-main-photo {
      aspect-ratio: 4 / 5;
      border-radius: 1.4rem;
    }

    .hero-main-photo img { object-position: center; }

    .hero-side-note {
      top: .8rem;
      right: .8rem;
      padding: .55rem .8rem;
      font-size: 9px;
      letter-spacing: .16em;
    }

    .hero-floating-card { display: none; }

    .button-group { display: grid; gap: .75rem; }
    .btn, .button-group .btn { width: 100%; }

    .hero-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .55rem;
      margin-top: 1rem;
    }

    .hero-meta .meta-chip:last-child { grid-column: 1 / -1; }

    .meta-chip {
      width: 100%;
      justify-content: center;
      text-align: center;
      min-height: 38px;
      font-size: 11px;
    }

    .location-badge { width: 100%; justify-content: center; }

    .service-card-main,
    .service-card-side {
      border-radius: 1.3rem;
    }

    .service-card-inner {
      padding: 1.15rem;
    }

    .service-title-main {
      font-size: 2rem;
    }

    .service-title-side {
      font-size: 1.8rem;
    }

    .service-benefits {
      grid-template-columns: 1fr;
      gap: .75rem;
    }

    .benefit-pill {
      min-height: 54px;
      padding: .9rem 1rem;
      border-radius: 1rem;
      font-size: 13px;
    }

    .service-photo-pair-new {
      grid-template-columns: 1fr 1fr;
      gap: .75rem;
    }

    .service-image-frame {
      min-height: 220px;
      border-radius: 1rem;
    }

    .service-image-vertical {
      height: 280px;
      border-radius: 1rem;
    }

    .image-tag {
      left: .7rem;
      bottom: .7rem;
      min-height: 28px;
      padding: 0 .6rem;
      font-size: 9px;
      letter-spacing: .16em;
    }

    .portfolio-card { padding: .75rem; }

    .portfolio-card .topline {
      margin-bottom: .75rem;
      gap: .5rem;
    }

    .mini-label {
      min-height: 30px;
      padding: 0 .65rem;
      font-size: 9px;
      letter-spacing: .18em;
    }

    .before-after-grid {
      grid-template-columns: 1fr;
      gap: .7rem;
    }

    .before-after-frame {
      background: #ecddd0;
      border-radius: 1rem;
      padding: .4rem;
    }

    .before-after-frame img {
      width: 100%;
      height: auto;
      max-height: none;
      object-fit: contain;
      object-position: top center;
      border-radius: .8rem;
    }

    .frame-badge {
      left: .7rem;
      bottom: .7rem;
      min-height: 28px;
      padding: 0 .6rem;
      font-size: 9px;
      letter-spacing: .16em;
    }

    .editorial-photo,
    .selection-main,
    .selection-side,
    .salon-card,
    .pro-card { aspect-ratio: 4 / 5; }

    .capsule-stage {
      padding: .7rem;
      border-radius: 1.25rem;
    }

    .capsulesSwiper .swiper-slide {
      height: auto;
      display: flex;
      align-items: center;
    }

    .capsule-img {
      height: auto;
      max-height: 72vh;
      object-fit: contain;
      object-position: center;
      border-radius: 1rem;
      background: rgba(255,255,255,.04);
    }

    .works-showcase {
      margin-top: 1.5rem;
      padding: .75rem;
      border-radius: 1.25rem;
    }

    .work-card {
      padding: .6rem;
      border-radius: 1.1rem;
    }

    .work-card-pair {
      grid-template-columns: 1fr;
      gap: .6rem;
    }

    .work-frame,
    .work-card.model .work-frame {
      min-height: auto;
    }

    .work-frame img {
      height: auto;
      aspect-ratio: 4 / 5;
      object-fit: cover;
    }

    .works-nav {
      width: 100%;
      justify-content: flex-end;
    }

    .selection-side-stack { gap: .75rem; grid-template-rows: auto; }

    .image-caption {
      left: .8rem;
      bottom: .8rem;
      min-height: 30px;
      padding: 0 .7rem;
      font-size: 9px;
      letter-spacing: .16em;
    }

    .salon-content { padding: 1.2rem; }

    .floating-contact {
      right: .75rem;
      bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
      gap: .55rem;
    }

    .floating-contact a { width: 48px; height: 48px; }

    .footer { padding: 2rem 0; }

    .nav-link::after { display: none; }
  }

  @media (max-width: 520px) {
    .service-photo-pair-new {
      grid-template-columns: 1fr;
    }

    .service-image-frame {
      min-height: 260px;
    }
  }

  @media (max-width: 480px) {
    .headline-xl { font-size: 2.05rem; }
    .headline-lg { font-size: 1.7rem; }
    .headline-md { font-size: 1.3rem; }
    .body-lg { font-size: 14px; line-height: 1.65; }
    .body-md { font-size: 13px; line-height: 1.65; }

    .hero-main-photo,
    .editorial-photo,
    .selection-main,
    .selection-side,
    .salon-card,
    .pro-card { aspect-ratio: 3 / 4; }

    .hero-copy { padding-top: 0; }

    .hero-meta { grid-template-columns: 1fr; margin-top: .85rem; }
    .hero-meta .meta-chip:last-child { grid-column: auto; }

    .capsule-img { height: 220px; }

    .service-card-main,
    .service-card-side,
    .contact-card,
    .final-cta,
    .lux-panel,
    .portfolio-card,
    .selection-side,
    .pro-card { border-radius: 1.1rem; }

    .portfolio-card { padding: .65rem; }
    .before-after-frame { padding: .3rem; }
    .hero-side-note { font-size: 9px; padding: .55rem .7rem; }
  }