/* ==========================================================================
   Components - hero, browse tiles, product cards, rails, banners, features,
   consultation cards, office, appointment band, status page
   ========================================================================== */

@media (min-width: 1200px) { .site-nav { position: relative; } }

.round-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--white);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.round-btn svg { width: 18px; height: 18px; }
.round-btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.round-btn[disabled] { opacity: .3; pointer-events: none; }
[dir="rtl"] .round-btn svg { transform: scaleX(-1); }

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

.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--void); }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { visibility: hidden; opacity: 0; transition: opacity 1.2s var(--ease), visibility 0s 1.2s; }
.hero__slide.is-active { visibility: visible; opacity: 1; transition: opacity 1.2s var(--ease), visibility 0s; z-index: 1; }

.hero__media { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 0); }
.hero__media img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Slow push-in while a slide is showing. */
.hero__slide .hero__media img, .hero__slide .hero__video { transform: scale(1.14); transition: transform 9s cubic-bezier(.2,.6,.2,1); }
.hero__slide.is-active .hero__media img, .hero__slide.is-active .hero__video { transform: scale(1); }
.hero__video { opacity: 0; transition: opacity 1.2s var(--ease), transform 9s cubic-bezier(.2,.6,.2,1); }
.hero__video.is-playing { opacity: 1; }

/* Whatever photograph is uploaded, the hero stays dark: dimmed, with shade
   behind the copy, under the header and into the page below. */
.hero__media img { filter: brightness(.68) contrast(1.08); }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(0deg, rgba(5,5,5,1) 0%, rgba(5,5,5,0) 30%);
}
[dir="rtl"] .hero__shade { background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 26%), linear-gradient(-90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,0) 75%), linear-gradient(0deg, rgba(5,5,5,1) 0%, rgba(5,5,5,0) 30%); }

.hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-block: 150px 120px; }
.hero__content > * { max-width: 760px; }
.hero__content--center { align-items: center; text-align: center; }
.hero__title { font-size: var(--fs-hero); font-weight: 300; line-height: .98; letter-spacing: -.02em; margin-block-end: var(--s-5); }
.hero__text { font-size: var(--fs-md); color: var(--text-soft); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-5); }

/* Copy plays in on every slide change. */
.hero__eyebrow, .hero__text, .hero__actions { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.hero__slide.is-active .hero__eyebrow { opacity: 1; transform: none; transition-delay: .3s; }
.hero__slide.is-active .hero__text { opacity: 1; transform: none; transition-delay: .75s; }
.hero__slide.is-active .hero__actions { opacity: 1; transform: none; transition-delay: .95s; }
.hero__slide .split-line > span { transition-delay: calc(var(--i, 0) * 120ms + 400ms); }
.hero__slide.is-active .split-line > span { transform: none; }

.hero__controls { position: absolute; z-index: 3; inset-inline: 0; bottom: var(--s-6); display: flex; align-items: center; gap: var(--s-6); }
.hero__count { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); letter-spacing: .2em; color: var(--text-mute); }
.hero__count span:first-child { color: var(--white); font-size: var(--fs-md); }
.hero__count i { width: 40px; height: 1px; background: var(--line-strong); }
.hero__dots { display: flex; gap: var(--s-3); flex: 1; }
.hero__dot { position: relative; width: 64px; height: 18px; }
.hero__dot::before, .hero__dot span { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--line-strong); }
.hero__dot span { background: var(--white); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .hero__dot span { transform-origin: right; }
.hero__dot.is-active span { animation: progress var(--hero-delay, 7s) linear forwards; }
.hero.is-paused .hero__dot.is-active span { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }
.hero__arrows { display: flex; gap: var(--s-3); }

.hero__scroll { position: absolute; z-index: 3; bottom: var(--s-6); inset-inline-end: 50%; transform: translateX(50%); width: 26px; height: 42px; border: 1px solid var(--line-strong); border-radius: 14px; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; background: var(--white); border-radius: 2px; animation: scroll-dot 2s var(--ease) infinite; }
@keyframes scroll-dot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.hero__controls ~ .hero__scroll { display: none; }

@media (max-width: 767px) {
  .hero { min-height: 560px; }
  .hero__shade { background: linear-gradient(0deg, rgba(5,5,5,1) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.35) 100%); }
  .hero__content { justify-content: flex-end; padding-block-end: 120px; }
  .hero__count, .hero__arrows { display: none; }
  .hero__dot { width: 40px; }
}

/* Browse tiles: categories, styles, shapes ---------------------------------- */

.browse__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.tile { position: relative; display: block; isolation: isolate; }
.tile__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-2); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); filter: brightness(.82) contrast(1.05); transition: transform 1.4s var(--ease-out), filter .8s var(--ease); }
.tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 55%); transition: opacity .6s; }
.tile:hover .tile__media img { transform: scale(1.12); filter: brightness(1) contrast(1.05); }
.tile__label { position: absolute; z-index: 1; inset-inline: var(--s-4); bottom: var(--s-4); display: flex; align-items: baseline; gap: var(--s-3); }
.tile__index { font-size: .65rem; letter-spacing: .2em; color: var(--silver); }
.tile__name { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--white); line-height: 1.1; flex: 1; }
.tile__arrow { opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s var(--ease-out); }
[dir="rtl"] .tile__arrow { transform: translateX(10px) scaleX(-1); }
.tile:hover .tile__arrow { opacity: 1; transform: none; }
[dir="rtl"] .tile:hover .tile__arrow { transform: scaleX(-1); }
/* A silver frame draws itself around the tile on hover. */
.tile::before { content: ""; position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(255,255,255,.4); opacity: 0; transform: scale(1.04); transition: opacity .6s, transform .8s var(--ease-out); pointer-events: none; }
.tile:hover::before { opacity: 1; transform: none; }

.browse--cutout .tile__media, .browse--icon .tile__media { aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #f4f4f4 0%, #d9d9d9 100%); }
.browse--cutout .tile__media img, .browse--icon .tile__media img { object-fit: contain; padding: 12%; filter: none; transform: scale(.94); }
.browse--cutout .tile:hover .tile__media img, .browse--icon .tile:hover .tile__media img { transform: scale(1.04) rotate(-3deg); }
.browse--cutout .tile__media::after, .browse--icon .tile__media::after { display: none; }
.browse--cutout .tile__label, .browse--icon .tile__label { position: static; padding-block-start: var(--s-3); justify-content: center; }
.browse--icon .browse__grid, .browse--cutout .browse__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.browse--icon .tile__media { background: radial-gradient(circle at 50% 40%, #1c1c1f 0%, #0c0c0d 100%); border: 1px solid var(--line); }
.browse--icon .tile__media img { filter: invert(1) brightness(1.1); mix-blend-mode: screen; }
.browse--icon .tile__index { display: none; }
.browse--icon .tile__name { font-size: var(--fs-md); text-align: center; flex: none; }
.browse--icon .tile::before, .browse--cutout .tile::before { inset: 0; }

@media (max-width: 1199px) { .browse--photo .browse__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .browse--photo .browse__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .browse--photo .browse__grid li { flex: 0 0 68%; scroll-snap-align: start; }
}

/* Product card ------------------------------------------------------------- */

.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__media {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: var(--plate);
}
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s var(--ease), transform 1.6s var(--ease-out); }
.card__img--hover { opacity: 0; transform: scale(1.06); }
.card:hover .card__img:not(.card__img--hover) { opacity: 0; transform: scale(1.04); }
.card:hover .card__img--hover { opacity: 1; transform: none; }
.card__media:not(:has(.card__img--hover)) .card__img { opacity: 1 !important; }
.card:hover .card__media:not(:has(.card__img--hover)) .card__img { transform: scale(1.06); }

.card__tag { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; padding: 4px 10px; background: var(--ink); color: var(--white); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; }
.card__tag--sale { background: var(--white); color: var(--ink); }
.card__view {
  position: absolute; z-index: 1; inset-inline: 12px; bottom: 12px; padding: 12px; text-align: center;
  background: rgba(5,5,5,.88); color: var(--white); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  transform: translateY(calc(100% + 14px)); transition: transform .6s var(--ease-out);
}
.card:hover .card__view { transform: none; }

.card__body { padding-block: var(--s-4) 0; display: grid; gap: 6px; }
.card__name { font-family: var(--font-display); font-size: 1.28rem; font-weight: 400; line-height: 1.2; margin: 0; }
.card__name a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size .6s var(--ease-out); }
.card:hover .card__name a { background-size: 100% 1px; background-position: 0 100%; }
.card__spec { margin: 0; font-size: .74rem; letter-spacing: .02em; color: var(--text-mute); line-height: 1.5; }
.card__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--white); letter-spacing: .04em; }
.card__from { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.card__was { color: var(--text-mute); }
.card__compare { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); cursor: pointer; }
.card__compare input { accent-color: var(--white); }

/* Product rail ------------------------------------------------------------- */

.rail-section__lede { color: var(--text-mute); max-width: 52ch; margin: 0; }
.rail-nav { display: flex; gap: var(--s-3); }
.rail { position: relative; }
.rail .rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 23vw, 340px); gap: var(--s-5);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  scrollbar-width: none; cursor: grab;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail__track.is-dragging a { pointer-events: none; }
.rail__item { scroll-snap-align: start; }
.rail__progress { width: min(var(--container), 100% - 2 * var(--gutter)); margin: var(--s-6) auto 0; height: 1px; background: var(--line); }
.rail__progress span { display: block; height: 100%; width: 20%; background: var(--white); transform-origin: left; transition: transform .2s linear; }
[dir="rtl"] .rail__progress span { margin-inline-start: auto; }
.rail-section__more { margin-block-start: var(--s-6); }

/* Banners ------------------------------------------------------------------- */

.banner { position: relative; display: grid; min-height: 78vh; overflow: hidden; background: var(--void); }
.banner__media { position: absolute; inset: -10% 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner__content { position: relative; z-index: 1; display: flex; align-items: center; padding: var(--s-8) var(--gutter); }
.banner--overlay .banner__content { background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 70%); }
[dir="rtl"] .banner--overlay .banner__content { background: linear-gradient(-90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 70%); }
.banner--overlay.banner--flip .banner__content { justify-content: flex-end; background: linear-gradient(-90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 70%); }
.banner__inner { max-width: 560px; }
.banner__inner h2 { font-size: var(--fs-3xl); font-weight: 300; }
.banner--split { grid-template-columns: 1fr 1fr; min-height: 0; }
.banner--split .banner__media { position: relative; inset: auto; min-height: 560px; }
.banner--split.banner--flip .banner__media { order: 2; }
.banner--split .banner__content { background: var(--bg-1); padding: var(--s-8) clamp(var(--s-5), 6vw, var(--s-9)); }
@media (max-width: 767px) {
  .banner--split { grid-template-columns: 1fr; }
  .banner--split .banner__media { min-height: 360px; }
  .banner--overlay .banner__content { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 100%); align-items: flex-end; }
}

/* Features ------------------------------------------------------------------ */

.features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
.feature { padding: var(--s-7) var(--s-6); border-block-end: 1px solid var(--line); border-inline-end: 1px solid var(--line); transition: background .6s var(--ease); }
.feature:hover { background: var(--bg-2); }
.feature__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-block-end: var(--s-5); border-radius: 50%; border: 1px solid var(--line-strong); }
.feature__icon img { width: 30px; height: 30px; object-fit: contain; filter: invert(1) grayscale(1) brightness(1.4); }
.feature h3 { font-size: var(--fs-lg); }
.feature p { color: var(--text-mute); margin: 0; }
@media (max-width: 900px) { .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features__grid { grid-template-columns: 1fr; } }

/* Consultation cards -------------------------------------------------------- */

.consult__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.consult-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.consult-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out), filter .8s; filter: brightness(.7); }
.consult-card:hover img { transform: scale(1.08); filter: brightness(.9); }
.consult-card__body { position: absolute; inset-inline: 0; bottom: 0; padding: var(--s-6) var(--s-5); background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,0)); display: grid; gap: 4px; }
.consult-card__title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--white); }
.consult-card__text { color: var(--text-soft); font-size: var(--fs-sm); }
@media (max-width: 767px) { .consult__grid { grid-template-columns: 1fr; } .consult-card { aspect-ratio: 4 / 3; } }

/* Office introduction ----------------------------------------------------- */

.office__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
.pillars { display: grid; gap: var(--s-5); }
.pillars li { position: relative; padding: var(--s-6); border: 1px solid var(--line); background: var(--bg-1); }
.pillars__n { position: absolute; top: var(--s-5); inset-inline-end: var(--s-5); font-family: var(--font-display); font-size: var(--fs-2xl); color: transparent; -webkit-text-stroke: 1px var(--grey-1); }
.pillars .prose p { color: var(--text-soft); }
@media (max-width: 900px) { .office__grid { grid-template-columns: 1fr; } }

/* Appointment band -------------------------------------------------------- */

.appt-band { display: grid; grid-template-columns: 1fr 1fr; min-height: 92vh; border-block-start: 1px solid var(--line); }
.appt-band__media { position: relative; overflow: hidden; }
.appt-band__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: brightness(.72) contrast(1.06); }
.appt-band__panel { position: relative; display: flex; align-items: center; background: var(--bg-1); overflow: hidden; }
.appt-band__field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.appt-band__inner { position: relative; padding: var(--s-8) clamp(var(--s-5), 6vw, var(--s-9)); max-width: 680px; }
.appt-band__inner h2 { font-size: var(--fs-3xl); font-weight: 300; }
.appt-steps { display: grid; gap: var(--s-4); margin-block: var(--s-6); }
.appt-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding-block-end: var(--s-4); border-block-end: 1px solid var(--line); }
.appt-steps li > span:last-child { display: grid; gap: 2px; }
.appt-steps__n { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--silver); }
.appt-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
@media (max-width: 900px) { .appt-band { grid-template-columns: 1fr; } .appt-band__media { min-height: 360px; } }

/* Status page ------------------------------------------------------------ */

.status-page { position: relative; min-height: 80vh; display: grid; place-items: center; padding-block: var(--s-9); overflow: hidden; }
.status-page__field { position: absolute; inset: 0; width: 100%; height: 100%; }
.status-page .container { position: relative; }
.status-page__code { font-family: var(--font-display); font-size: clamp(6rem, 3rem + 14vw, 14rem); line-height: 1; margin: 0; font-weight: 300; }