/*
 * Site components and sections. On a client build this file is where the
 * approved design is implemented; every value should come from a token.
 */

/* ---------- Header ---------- */
.sx-announce { background: var(--c-dark); color: var(--c-on-dark); font-size: var(--fs-small); text-align: center; }
.sx-announce p { margin: 0; padding: 0.5rem 0; }
.sx-header { position: sticky; inset-block-start: 0; z-index: 50; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.sx-header__inner { display: flex; align-items: center; gap: var(--space-3); min-height: var(--header-h); }
.sx-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--c-ink); flex: 0 1 auto; min-width: 0; }
.sx-logo__img { height: auto; max-height: 2.5rem; width: auto; max-width: min(12rem, 100%); object-fit: contain; object-position: left center; }
[dir="rtl"] .sx-logo__img { object-position: right center; }
.sx-header__actions { flex: 0 0 auto; }
@media (min-width: 640px) { .sx-header__inner { gap: var(--space-5); } }
.sx-logo__text { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; line-height: 1.1; }
.sx-header__actions { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
.sx-header__phone { display: none; align-items: center; gap: 0.4rem; font-weight: var(--fw-strong); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.sx-header__phone:hover { color: var(--c-brand); }
.sx-header__cta { display: none; white-space: nowrap; }
.sx-burger { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.85rem; background: transparent; color: var(--c-ink); border: 1.5px solid var(--c-ink-soft); border-radius: var(--radius-pill); font-weight: var(--fw-strong); }
.sx-burger:hover { background: var(--c-surface); }

/* Navigation (shared list markup; layout differs per context) */
.sx-nav--desktop { display: none; }
.sx-nav__list { display: flex; gap: var(--space-2); }
.sx-nav__item { position: relative; display: flex; align-items: center; }
.sx-nav__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.7rem; color: var(--c-ink); font-weight: var(--fw-strong); font-size: 1rem; text-decoration: none; border-radius: var(--radius-s); }
.sx-nav__link:hover { color: var(--c-brand); background: var(--c-surface); }
.sx-nav__link[aria-current="page"] { color: var(--c-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.sx-nav__toggle { display: inline-grid; place-items: center; width: 2rem; height: 2.75rem; margin-inline-start: -0.4rem; background: transparent; border: 0; border-radius: var(--radius-s); color: var(--c-ink); }
.sx-nav__toggle:hover { background: var(--c-surface); }
.sx-nav__toggle .sx-icon { width: 1.1rem; height: 1.1rem; transition: transform 0.2s ease; }
.sx-nav__toggle[aria-expanded="true"] .sx-icon { transform: rotate(180deg); }
.sx-nav--desktop .sx-nav__sub { position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline-start: 0; min-width: 15rem; padding: var(--space-2); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); z-index: 60; }
.sx-nav__sublink { display: block; padding: 0.6rem 0.8rem; color: var(--c-ink); text-decoration: none; border-radius: var(--radius-s); }
.sx-nav__sublink:hover { background: var(--c-surface); color: var(--c-brand); }
.sx-nav__sublink[aria-current="page"] { color: var(--c-brand); font-weight: var(--fw-strong); }

/* Language switcher */
.sx-lang-switch ul { display: flex; flex-wrap: wrap; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.sx-lang-switch a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-strong); color: var(--c-ink); text-decoration: none; }
.sx-lang-switch a:hover { background: var(--c-surface); }
.sx-lang-switch a[aria-current="true"] { background: var(--c-ink); color: var(--c-bg); }
.sx-lang-switch--header { display: none; position: relative; }
.sx-lang-dd summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.4rem 0.8rem; border: 1.5px solid var(--c-line); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-strong); cursor: pointer; list-style: none; white-space: nowrap; }
.sx-lang-dd summary::-webkit-details-marker { display: none; }
.sx-lang-dd summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg) translateY(-0.12rem); }
.sx-lang-dd summary:hover { background: var(--c-surface); }
.sx-lang-dd ul { position: absolute; inset-block-start: calc(100% + 0.35rem); inset-inline-end: 0; flex-direction: column; min-width: 10rem; padding: var(--space-2); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); z-index: 60; }
.sx-lang-dd ul a { width: 100%; border-radius: var(--radius-s); }
.sx-footer .sx-lang-switch a { color: var(--c-on-dark); }
.sx-footer .sx-lang-switch a:hover { background: rgb(255 255 255 / 0.12); }
.sx-footer .sx-lang-switch a[aria-current="true"] { background: var(--c-on-dark); color: var(--c-dark); }

@media (min-width: 1100px) {
  .sx-nav--desktop { display: block; }
  .sx-burger { display: none; }
  .sx-header__cta { display: inline-flex; }
  .sx-lang-switch--header { display: block; }
}
@media (min-width: 1280px) { .sx-header__phone { display: inline-flex; } }

/* ---------- Off-canvas menu ---------- */
.sx-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; transition: visibility 0s linear 0.32s; }
.sx-drawer.is-open { visibility: visible; transition-delay: 0s; }
.sx-drawer__backdrop { position: absolute; inset: 0; background: rgb(10 16 13 / 0.55); opacity: 0; transition: opacity 0.32s ease; }
.sx-drawer.is-open .sx-drawer__backdrop { opacity: 1; }
.sx-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; width: min(24rem, 88vw); background: var(--c-bg); box-shadow: var(--shadow-2); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); overflow-y: auto; overscroll-behavior: contain; }
[dir="rtl"] .sx-drawer__panel { transform: translateX(-100%); }
.sx-drawer.is-open .sx-drawer__panel { transform: none; }
.sx-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--c-line); position: sticky; inset-block-start: 0; background: var(--c-bg); z-index: 1; }
.sx-drawer__title { font-family: var(--font-ui); font-weight: var(--fw-heading); font-size: 1.25rem; }
.sx-drawer__close { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; background: transparent; border: 1.5px solid var(--c-ink-soft); border-radius: 50%; color: var(--c-ink); }
.sx-drawer__close:hover { background: var(--c-surface); }
.sx-nav--drawer { padding: var(--space-3) var(--space-5); }
.sx-nav--drawer .sx-nav__list { flex-direction: column; gap: 0; }
.sx-nav--drawer .sx-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--c-line); }
.sx-nav--drawer .sx-nav__link { flex: 1 1 auto; min-height: 3.25rem; padding-inline: 0; font-size: 1.125rem; border-radius: 0; }
.sx-nav--drawer .sx-nav__link:hover { background: transparent; }
.sx-nav--drawer .sx-nav__toggle { width: 3rem; height: 3rem; margin: 0; }
.sx-nav--drawer .sx-nav__sub { flex: 1 0 100%; padding: 0 0 var(--space-3) var(--space-4); }
.sx-nav--drawer .sx-nav__sublink { padding: 0.7rem 0.5rem; }
.sx-drawer__bottom { display: grid; gap: var(--space-4); margin-top: auto; padding: var(--space-5); }
.sx-drawer__phone { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: var(--fw-strong); color: var(--c-ink); text-decoration: none; }
body.sx-drawer-open { overflow: hidden; }

/* ---------- Sections ---------- */
.sx-main { display: block; min-height: 40vh; }
.sx-section { padding-block: var(--section-y); }
.sx-section + .sx-section { border-top: 0; }
.sx-section--cards, .sx-section--faq, .sx-section--stats, .sx-section--pricing, .sx-section--logos { background: var(--c-surface); }
.sx-heading { margin-bottom: var(--space-7); max-width: 44rem; }
.sx-heading--center { margin-inline: auto; text-align: center; }
.sx-heading__title { margin: 0; }
.sx-heading__intro { margin: var(--space-4) 0 0; font-size: var(--fs-lead); color: var(--c-ink-soft); }
.sx-heading--center .sx-heading__intro { margin-inline: auto; }

.sx-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sx-grid--2, .sx-grid--3, .sx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Hero */
.sx-section--hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); background: var(--c-surface); }
.sx-hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.sx-hero__title { font-size: var(--fs-display); font-weight: var(--fw-display); line-height: var(--lh-tight); margin: 0 0 var(--space-5); }
.sx-hero__media .sx-img, .sx-hero__media .sx-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); }
.sx-points { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.sx-points li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--fs-small); font-weight: var(--fw-strong); }
.sx-points .sx-icon { color: var(--c-brand); margin-top: 0.15em; }
.sx-points--stack { flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.sx-points--stack li { font-size: var(--fs-body); font-weight: var(--fw-body); }
@media (min-width: 1000px) { .sx-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); } }

/* Page banner */
.sx-section--page-header { position: relative; padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); background: var(--c-surface); }
.sx-section--page-header .sx-heading__title { font-size: var(--fs-h1); }
.sx-section--page-header .sx-lead { margin-top: var(--space-4); margin-bottom: 0; }
.sx-section--page-header.has-image { background: var(--c-dark); color: var(--c-on-dark); }
.sx-section--page-header.has-image h1, .sx-section--page-header.has-image .sx-lead, .sx-section--page-header.has-image .sx-eyebrow, .sx-section--page-header.has-image .sx-breadcrumbs a, .sx-section--page-header.has-image .sx-breadcrumbs span { color: var(--c-on-dark); }
.sx-pagehead__bg { position: absolute; inset: 0; }
.sx-pagehead__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.sx-pagehead__inner { position: relative; }
.sx-breadcrumbs { margin-bottom: var(--space-4); font-size: var(--fs-small); }
.sx-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.sx-breadcrumbs li + li::before { content: "/"; margin-inline-end: 0.4rem; color: var(--c-ink-soft); }
.sx-section--page-header.has-image .sx-breadcrumbs li + li::before { color: var(--c-on-dark-soft); }
.sx-breadcrumbs a { color: var(--c-ink-soft); }
.sx-breadcrumbs [aria-current] { color: var(--c-ink); font-weight: var(--fw-strong); }

/* Text with image */
.sx-split { display: grid; gap: var(--space-7); align-items: center; }
.sx-split__media .sx-img, .sx-split__media .sx-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); }
.sx-split .sx-heading { margin-bottom: var(--space-5); }
@media (min-width: 900px) {
  .sx-split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .is-reversed .sx-split__media { order: -1; }
}

/* Cards */
.sx-card { display: flex; flex-direction: column; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-m); overflow: hidden; }
.sx-card__media .sx-img, .sx-card__media img, .sx-card__media .sx-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; border-inline: 0; border-top: 0; }
.sx-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1 1 auto; }
.sx-card__body > * { margin: 0; }
.sx-card__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-m); background: color-mix(in srgb, var(--c-brand) 12%, var(--c-bg)); color: var(--c-brand); }
.sx-card__icon .sx-icon { width: 1.5rem; height: 1.5rem; }
.sx-card__title { font-size: var(--fs-h3); }
.sx-card__title a { color: inherit; text-decoration: none; }
.sx-card__title a:hover { color: var(--c-brand); text-decoration: underline; }
.sx-card__meta { font-size: var(--fs-small); color: var(--c-ink-soft); }
.sx-card__more { margin-top: auto !important; padding-top: var(--space-2); }

/* Steps */
.sx-steps { display: grid; gap: var(--space-6); counter-reset: step; }
.sx-step { position: relative; padding-inline-start: 4rem; }
.sx-step__num { position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); font-family: var(--font-ui); font-weight: var(--fw-heading); font-size: 1.125rem; }
.sx-step__title { font-size: var(--fs-h3); margin-bottom: 0.35em; }
.sx-step p { margin: 0; color: var(--c-ink-soft); }
@media (min-width: 900px) { .sx-steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .sx-step { padding-inline-start: 0; padding-block-start: 3.75rem; } }

/* Figures */
.sx-stats { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; }
.sx-stat { display: flex; flex-direction: column-reverse; padding: var(--space-5); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-m); text-align: center; }
.sx-stat dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-display); line-height: 1.1; color: var(--c-brand); }
.sx-stat dt { margin-top: 0.4rem; color: var(--c-ink-soft); font-size: var(--fs-small); }

/* Testimonials */
.sx-quote { position: relative; padding: var(--space-5); background: var(--c-surface); border-radius: var(--radius-m); }
.sx-quote figure { margin: 0; display: grid; gap: var(--space-4); }
.sx-quote blockquote { margin: 0; font-size: var(--fs-lead); }
.sx-quote blockquote p { margin: 0; }
.sx-quote figcaption { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); }
.sx-quote__photo { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.sx-quote__role { color: var(--c-ink-soft); }
.sx-quote__sample { display: inline-block; margin: 0 0 var(--space-3); padding: 0.2rem 0.6rem; background: var(--c-bg); border: 1.5px dashed var(--c-ink-soft); border-radius: var(--radius-s); font-size: var(--fs-eyebrow); font-weight: var(--fw-strong); }

/* FAQ */
.sx-faq { display: grid; gap: var(--space-3); }
.sx-faq__item { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.sx-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; border-radius: var(--radius-m); }
.sx-faq__item summary::-webkit-details-marker { display: none; }
.sx-faq__q { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.4; }
.sx-faq__item summary .sx-icon { color: var(--c-brand); transition: transform 0.2s ease; }
.sx-faq__item[open] summary .sx-icon { transform: rotate(45deg); }
.sx-faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--c-ink-soft); }
.sx-faq__a p { margin: 0; }

/* Call to action */
.sx-section--cta { padding-block: var(--space-8); background: var(--c-bg); }
.sx-cta { display: grid; gap: var(--space-5); align-items: center; padding: clamp(1.75rem, 1rem + 3.4vw, 3.5rem); background: var(--c-dark); color: var(--c-on-dark); border-radius: var(--radius-l); }
.sx-cta__title { margin: 0 0 0.35em; color: var(--c-on-dark); }
.sx-cta p { margin: 0; color: var(--c-on-dark-soft); font-size: var(--fs-lead); }
.sx-cta .sx-actions { margin-top: 0; }
@media (min-width: 900px) { .sx-cta { grid-template-columns: 1fr auto; } }

/* Contact */
.sx-contact { display: grid; gap: var(--space-7); }
.sx-contact .sx-heading { margin-bottom: var(--space-5); }
.sx-contact__details { display: grid; gap: var(--space-5); align-content: start; padding: var(--space-5); background: var(--c-surface); border-radius: var(--radius-l); }
.sx-contact-list { display: grid; gap: var(--space-3); }
.sx-contact-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.sx-contact-list .sx-icon { margin-top: 0.2em; color: var(--c-brand); }
.sx-contact-list--lg { gap: var(--space-5); }
.sx-contact-list address { margin: 0; }
.sx-hours { display: flex; justify-content: space-between; gap: var(--space-4); }
@media (min-width: 900px) { .sx-contact { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); } }

/* Gallery, team, logos */
.sx-gallery figure { margin: 0; }
.sx-gallery .sx-img, .sx-gallery .sx-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-m); }
.sx-gallery figcaption { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--c-ink-soft); }
.sx-person .sx-img, .sx-person .sx-ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); margin-bottom: var(--space-4); }
.sx-person__name { font-size: var(--fs-h4); margin: 0; }
.sx-person__role { margin: 0.15rem 0 0.6rem; color: var(--c-brand); font-weight: var(--fw-strong); font-size: var(--fs-small); }
.sx-person p:last-child { color: var(--c-ink-soft); font-size: var(--fs-small); margin: 0; }
.sx-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6) var(--space-7); }
.sx-logos li { flex: 0 1 9rem; }
.sx-logos .sx-img { max-height: 3.5rem; width: auto; margin-inline: auto; object-fit: contain; }

/* Pricing */
.sx-plan { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-l); }
.sx-plan.is-featured { border: 2px solid var(--c-brand); box-shadow: var(--shadow-2); }
.sx-plan__name { margin: 0; font-size: var(--fs-h3); }
.sx-plan__price { margin: 0; }
.sx-plan__price span { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-display); line-height: 1; }
.sx-plan__price small { color: var(--c-ink-soft); }
.sx-plan .sx-points { margin-top: 0; flex: 1 1 auto; }
.sx-plan p:last-child { margin: 0; }
.sx-pricing__note { margin: var(--space-5) auto 0; max-width: 44rem; text-align: center; font-size: var(--fs-small); color: var(--c-ink-soft); }

/* Legal, site map, blog */
.sx-section--legal { padding-block-start: var(--space-6); }
.sx-legal__date { color: var(--c-ink-soft); font-size: var(--fs-small); }
.sx-sitemap, .sx-sitemap ul, .sx-searchlist { list-style: disc; padding-inline-start: 1.4em; }
.sx-sitemap li, .sx-searchlist li { margin-bottom: 0.4em; }
.sx-postlist { margin-bottom: var(--space-6); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.6rem; border: 1px solid var(--c-line); border-radius: var(--radius-s); text-decoration: none; }
.nav-links .current { background: var(--c-ink); color: var(--c-bg); }

/* ---------- Footer ---------- */
.sx-footer { background: var(--c-dark); color: var(--c-on-dark-soft); }
.sx-footer a { color: var(--c-on-dark); }
.sx-footer a:hover { color: #fff; }
.sx-footer__grid { display: grid; gap: var(--space-7); padding-block: var(--space-8); }
.sx-footer .sx-logo { color: var(--c-on-dark); margin-bottom: var(--space-4); }
.sx-footer__about { max-width: 26rem; }
.sx-footer__title { margin: 0 0 var(--space-4); font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-strong); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-on-dark); }
.sx-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.sx-footer__link { display: inline-flex; align-items: center; min-height: 2.25rem; text-decoration: none; }
.sx-footer__link:hover { text-decoration: underline; }
.sx-footer .sx-contact-list .sx-icon { color: var(--c-on-dark); }
.sx-footer .sx-contact-list a { text-decoration: none; }
.sx-footer .sx-contact-list a:hover { text-decoration: underline; }
.sx-social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.sx-social__link { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid rgb(255 255 255 / 0.35); border-radius: 50%; }
.sx-social__link:hover { background: var(--c-on-dark); color: var(--c-dark) !important; }
.sx-social__link .sx-icon { width: 1.15rem; height: 1.15rem; }
.sx-footer__bar { border-top: 1px solid rgb(255 255 255 / 0.16); }
.sx-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding-block: var(--space-4); font-size: var(--fs-small); }
.sx-footer__copy { margin: 0; }
.sx-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); list-style: none; margin: 0; padding: 0; }
.sx-footer .sx-linkbtn { color: var(--c-on-dark); text-decoration: none; min-height: 2.25rem; }
.sx-footer .sx-linkbtn:hover { text-decoration: underline; }
@media (min-width: 700px) { .sx-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sx-footer__grid { grid-template-columns: 1.35fr 0.9fr 0.8fr 0.85fr 1.7fr; grid-auto-flow: column; } .sx-footer__bar-inner .sx-lang-switch { margin-inline-start: auto; } }

/* ---------- WooCommerce: inherit the site's type and buttons ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { min-height: 2.875rem; padding: 0.7rem 1.35rem; background: var(--c-brand); color: var(--c-on-brand); border-radius: var(--radius-pill); font-weight: var(--fw-strong); }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--c-brand-strong); color: var(--c-on-brand); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: var(--c-ink); font-weight: var(--fw-strong); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { min-height: 2.875rem; padding: 0.65rem 0.85rem; border: 1.5px solid var(--c-ink-soft); border-radius: var(--radius-s); }

/* =====================================================================
 * Dior's Jewelers — the approved design.
 * Everything below implements the artboards on top of the kit's base
 * rules. Tokens only: no hex, no pixel font sizes, no font names.
 * ===================================================================== */

/* ---------- Type: quiet sentence-case headings, tracked small caps ---------- */
h1, h2, h3, h4 { letter-spacing: 0.01em; }
h3, h4 { font-weight: var(--fw-strong); letter-spacing: 0; }
.sx-eyebrow { margin-bottom: var(--space-4); }
.sx-lead { max-width: 46ch; }

/* The rose-gold rule that opens almost every section: under the eyebrow,
   above the heading. */
.sx-heading__title::before,
.sx-hero__title::before {
  content: ""; display: block; width: 3.5rem; height: 1px;
  background: var(--c-accent); margin-block: 0 var(--space-5);
}
.sx-heading--center .sx-heading__title::before { margin-inline: auto; }
.sx-hero__title::before { margin-block-end: var(--space-4); }
@media (max-width: 640px) {
  .sx-heading__title::before, .sx-hero__title::before { width: 2.5rem; }
}

/* ---------- Buttons: rectangles with tracked uppercase labels ---------- */
.sx-btn {
  min-height: 2.75rem; padding-inline: 1.625rem; border-width: 1px;
  border-radius: var(--radius-m); font-family: var(--font-ui);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-strong);
  letter-spacing: 0.15em; text-transform: uppercase; line-height: 1;
}
.sx-btn--lg { min-height: 3.5rem; padding-inline: 2rem; font-size: var(--fs-eyebrow); }
.sx-btn--primary:hover, .sx-btn:not([class*="sx-btn--"]):hover { background: var(--c-dusty-rose); color: var(--c-ink); }
.sx-btn--ghost { color: var(--c-ink); border-color: var(--c-ink); }
.sx-btn--ghost:hover { background: var(--c-ink); color: var(--c-bg); }
.sx-btn--invert:hover { background: var(--c-blush); color: var(--c-ink); }
.sx-btn--outline-invert { border-color: rgb(251 247 243 / 0.7); }
.sx-actions { gap: var(--space-3); }

/* Icon-only utilities in the header. */
.sx-iconbtn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  color: var(--c-brand); background: transparent; text-decoration: none;
}
.sx-iconbtn:hover { background: var(--c-blush); color: var(--c-brand-strong); }
.sx-iconbtn .sx-icon { width: 1.2rem; height: 1.2rem; }

/* ---------- Header ---------- */
.sx-announce { color: var(--c-on-dark-soft); letter-spacing: 0.06em; }
.sx-announce p { padding-block: 0.625rem; }
.sx-header__inner { gap: var(--space-5); }
.sx-nav--desktop .sx-nav__list { gap: var(--space-5); }
.sx-nav--desktop .sx-nav__link {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em; text-transform: uppercase; padding-inline: 0;
  border-radius: 0; background: transparent;
}
.sx-nav--desktop .sx-nav__link:hover { background: transparent; color: var(--c-brand); }
.sx-nav--desktop .sx-nav__link[aria-current="page"] {
  text-decoration: none; border-bottom: 2px solid var(--c-brand);
}
.sx-header__actions { gap: var(--space-2); }
.sx-header__phone { display: none !important; }
.sx-burger { border-color: var(--c-line); border-width: 1px; border-radius: var(--radius-pill); width: 2.75rem; height: 2.75rem; padding: 0; color: var(--c-brand); }
.sx-burger:hover { background: var(--c-blush); }
.sx-burger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Off-canvas drawer: slides in from the start edge ---------- */
.sx-drawer__panel { inset-inline-start: 0; inset-inline-end: auto; transform: translateX(-100%); }
[dir="rtl"] .sx-drawer__panel { transform: translateX(100%); }
.sx-drawer.is-open .sx-drawer__panel { transform: none; }
.sx-drawer__backdrop { background: rgb(13 13 13 / 0.5); }
.sx-nav--drawer .sx-nav__link {
  font-family: var(--font-ui); font-size: var(--fs-small);
  letter-spacing: 0.15em; text-transform: uppercase;
}
.sx-drawer__bottom { background: var(--c-surface); border-top: 1px solid var(--c-line); }

/* ---------- Sections ---------- */
.sx-section { padding-block: var(--section-y); }
@media (min-width: 1000px) { .sx-section { padding-block: var(--space-9); } }
@media (min-width: 640px) and (max-width: 999px) { .sx-section { padding-block: var(--space-8); } }
.sx-section--cards, .sx-section--faq, .sx-section--stats, .sx-section--pricing, .sx-section--logos { background: var(--c-bg); }
.sx-section--tiles, .sx-section--gallery { background: var(--c-surface); }
.sx-heading { margin-bottom: var(--space-7); }

/* Hero: text beside a tall portrait image. */
.sx-hero__text { display: flex; flex-direction: column; }
.sx-hero__text .sx-eyebrow { order: 1; }
.sx-hero__title { order: 2; margin-bottom: var(--space-5); }
.sx-hero__text .sx-lead { order: 3; margin-bottom: var(--space-6); }
.sx-hero__text .sx-points { order: 4; margin-top: 0; }
.sx-hero__text .sx-actions { order: 5; margin-top: var(--space-6); }
.sx-hero__media .sx-img, .sx-hero__media .sx-ph { aspect-ratio: 4 / 5; }
@media (min-width: 1000px) { .sx-hero__grid { grid-template-columns: 1fr minmax(0, 32.5rem); } }
.sx-points--stack li, .sx-hero__text .sx-points li { font-weight: var(--fw-body); font-size: var(--fs-body); }
.sx-hero__text .sx-points { flex-direction: column; gap: var(--space-3); }

/* Page banner. */
.sx-section--page-header .sx-heading { margin-bottom: 0; }

/* Cards: white, hairline, plain brand glyph. */
.sx-card { background: var(--c-card); }
.sx-card__icon { width: auto; height: auto; background: transparent; border-radius: 0; }
.sx-card__icon .sx-icon { width: 2.125rem; height: 2.125rem; }
.sx-card__body { gap: var(--space-3); padding: var(--space-6) var(--space-5); }
.sx-card__title { font-size: var(--fs-h3); }
.sx-card p { color: var(--c-ink-soft); }
.sx-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.sx-card { transition: box-shadow 0.18s ease, transform 0.18s ease; }
@media (prefers-reduced-motion: reduce) { .sx-card:hover { transform: none; } }

/* ---------- Tiles: the portrait collection grids ---------- */
.sx-tiles { display: grid; gap: var(--space-5); }
.sx-tile { display: flex; flex-direction: column; }
.sx-tile__media .sx-img, .sx-tile__media .sx-ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-l); }
.sx-tile__title { margin: var(--space-4) 0 0.35rem; font-size: var(--fs-h4); letter-spacing: 0.02em; }
.sx-tile__text { margin: 0; font-size: var(--fs-small); color: var(--c-ink-soft); }
.sx-tile__more { margin: var(--space-3) 0 0; }
.sx-tiles__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); margin-top: var(--space-8); text-align: center; }
.sx-tiles__note { max-width: 45rem; margin: 0; color: var(--c-ink-soft); }
@media (min-width: 640px) { .sx-tiles { gap: var(--space-6); } }
@media (min-width: 1000px) { .sx-tiles { gap: var(--space-6); } }

/* "More" links share the button's tracked uppercase label. */
.sx-more {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-strong);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-brand);
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem;
  text-underline-offset: 0.35em;
}
.sx-more .sx-icon { width: 0.9rem; height: 0.9rem; }

/* ---------- Gallery ---------- */
.sx-gallery .sx-img, .sx-gallery .sx-ph { border-radius: var(--radius-l); }
.sx-gallery__foot { margin-top: var(--space-7); text-align: center; }

/* ---------- Steps ---------- */
.sx-step__num { background: transparent; color: var(--c-brand); border: 1px solid var(--c-line); font-size: var(--fs-h4); }
@media (min-width: 900px) { .sx-steps { grid-template-columns: 1fr; } .sx-step { padding-inline-start: 4rem; padding-block-start: 0; } }

/* ---------- Questions ---------- */
.sx-faq { gap: 0; }
.sx-faq__item { background: transparent; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; }
.sx-faq__item summary { padding-inline: 0; padding-block: var(--space-5); border-radius: 0; }
.sx-faq__q { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-strong); }
.sx-faq__a { padding-inline: 0; padding-block-end: var(--space-5); }

/* ---------- Call to action: a full-bleed dark band ---------- */
.sx-section--cta { padding-block: 0; background: var(--c-dark); }
.sx-cta { padding: var(--space-8) 0; border-radius: 0; background: transparent; }
@media (min-width: 1000px) { .sx-cta { padding-block: var(--space-9); } }
.sx-cta .sx-btn--outline-invert:hover { background: var(--c-on-dark); color: var(--c-dark); }

/* ---------- Contact ---------- */
.sx-contact__form { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: var(--space-6); }
.sx-contact--no-form .sx-contact__form { background: transparent; border: 0; padding: 0; }
.sx-contact__details { background: transparent; padding: 0; }
.sx-contact-list--lg li { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: var(--space-5); }
.sx-contact--no-form .sx-contact-list--lg li { background: transparent; border: 0; padding: 0; }
.sx-contact-list--lg strong { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-strong); letter-spacing: 0.15em; text-transform: uppercase; }
@media (min-width: 900px) { .sx-contact { grid-template-columns: 1.5fr 1fr; } .sx-contact--no-form { grid-template-columns: minmax(0, 24rem) 1fr; align-items: start; } }
/* The label is already a block; the template's line break would add a
   second empty line under it. */
.sx-contact-list--lg li > div > br { display: none; }

/* ---------- Forms ---------- */
.sx-field > label {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-strong);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink);
}
.sx-field__opt { font-family: var(--font-body); font-weight: var(--fw-body); letter-spacing: 0; text-transform: none; color: var(--c-ink-soft); }
.sx-form input:not([type="checkbox"]), .sx-form select, .sx-form textarea {
  min-height: 3rem; border-width: 1px; border-radius: var(--radius-s); background: var(--c-bg); font-size: 1rem;
}
.sx-check label {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-body);
  letter-spacing: 0; text-transform: none; color: var(--c-ink-soft);
}
.sx-check input[type="checkbox"] { accent-color: var(--c-brand); }
.sx-form__submit .sx-btn, .sx-form button[type="submit"] { width: 100%; min-height: 3.5rem; }

/* ---------- Click-to-load embeds (the map) ---------- */
.sx-embed { background: var(--c-surface-alt); border: 1px solid var(--c-line); border-radius: var(--radius-l); }
.sx-embed__ui { color: var(--c-ink); }
.sx-embed__note { color: var(--c-ink-soft); font-size: var(--fs-small); max-width: 32rem; margin-inline: auto; }
.sx-embed .sx-btn, .sx-embed .sx-embed__load { background: var(--c-brand); color: var(--c-on-brand); }
.sx-embed .sx-btn:hover, .sx-embed .sx-embed__load:hover { background: var(--c-dusty-rose); color: var(--c-ink); }

/* ---------- Section grounds the design alternates by hand ---------- */
#pandora, #diors, #gifting, #difference, #getting-here { background: var(--c-surface); }

/* ---------- Placeholders: a labelled block, not a hazard stripe ---------- */
.sx-ph { background: var(--c-surface-alt); border: 0; border-radius: var(--radius-l); min-height: 7rem; }
.sx-ph__text { background: transparent; font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-body); color: var(--c-ink-soft); }
.sx-ph__text strong, .sx-ph__text b { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-strong); letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-ink); }

/* ---------- Legal pages ---------- */
.sx-legal { display: grid; gap: var(--space-7); align-items: start; }
.sx-legal__toc { background: var(--c-surface); border-radius: var(--radius-m); padding: var(--space-5); }
.sx-legal__toc h2 { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-strong); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-soft); margin: 0 0 var(--space-4); }
.sx-legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.sx-legal__toc a { display: block; padding-block: 0.5rem; font-size: var(--fs-small); color: var(--c-brand); text-decoration: none; min-height: 1.5rem; }
.sx-legal__toc a:hover { text-decoration: underline; }
.sx-legal__draft { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--c-card); border: 1px solid var(--c-danger); border-radius: var(--radius-m); padding: var(--space-5); margin-bottom: var(--space-6); }
.sx-legal__draft .sx-icon { color: var(--c-danger); flex: 0 0 auto; margin-top: 0.2em; width: 1.4rem; height: 1.4rem; }
.sx-legal__draft p { margin: 0; color: var(--c-ink-soft); }
.sx-legal__draft strong { color: var(--c-ink); }
.sx-prose--legal h2 { font-size: var(--fs-h3); margin-top: var(--space-7); }
.sx-prose--legal h2:first-child { margin-top: 0; }
@media (min-width: 1000px) {
  .sx-legal { grid-template-columns: 15.625rem minmax(0, 1fr); gap: var(--space-8); }
  .sx-legal__toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); background: transparent; padding: 0; }
  .sx-legal__toc ol { gap: 0.35rem; }
}
@media (min-width: 640px) and (max-width: 999px) { .sx-legal__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem var(--space-6); } }

/* ---------- Site map ---------- */
.sx-sitemap { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.sx-sitemap a { display: block; padding-block: 0.65rem; text-decoration: none; }
.sx-sitemap a:hover { text-decoration: underline; }
@media (min-width: 900px) { .sx-sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.1rem var(--space-7); } }

/* ---------- Footer ---------- */
.sx-footer a:hover { color: var(--c-accent); }
.sx-footer__title { font-family: var(--font-ui); }
.sx-social__link { border-color: rgb(251 247 243 / 0.3); border-width: 1px; }

/* ---------- Pull quote (home welcome) ---------- */
#welcome { text-align: center; }
#welcome .sx-prose { max-width: 47.5rem; margin-inline: auto; }
#welcome .sx-prose blockquote { margin: 0; border: 0; padding: 0; background: transparent; }
#welcome .sx-prose blockquote::before { content: ""; display: block; width: 3.5rem; height: 1px; background: var(--c-accent); margin: 0 auto var(--space-5); }
#welcome .sx-prose blockquote p {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display);
  line-height: 1.5; letter-spacing: 0.01em; color: var(--c-ink); margin: 0;
}

/* Contact sidebar cards. */
.sx-contact-list--lg strong { display: block; margin-bottom: var(--space-3); }
.sx-contact-list__hours { margin-top: var(--space-3); display: grid; gap: 0.25rem; }
.sx-contact-list__hours .sx-hours { font-size: var(--fs-small); color: var(--c-ink-soft); }
.sx-contact-list__social .sx-social { margin-top: 0; }
.sx-contact-list__social .sx-social__link { border-color: var(--c-line); color: var(--c-brand); }
.sx-contact-list__social .sx-social__link:hover { background: var(--c-blush); color: var(--c-brand-strong) !important; }
.sx-contact-list--lg .sx-contact-list__visit { background: var(--c-blush); border-color: transparent; }
.sx-contact-list--lg .sx-contact-list__visit > div { width: 100%; }

/* Card icons hug the start edge. */
.sx-card__icon { place-items: start; }

/* Steps beside an image. */
.sx-steps-split { display: grid; gap: var(--space-7); align-items: center; }
.sx-steps--stack { grid-template-columns: 1fr; }
.sx-steps__media .sx-img, .sx-steps__media .sx-ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-l); }
@media (min-width: 900px) {
  .sx-steps-split { grid-template-columns: 1fr minmax(0, 26rem); gap: var(--space-8); }
  .sx-steps-split .sx-steps { grid-template-columns: 1fr; }
  .sx-steps-split .sx-step { padding-inline-start: 4rem; padding-block-start: 0; }
}

/* Contact: the map is its own column (no form) or a band below (with form). */
.sx-contact__map .sx-embed, .sx-contact__map .sx-ph { border-radius: var(--radius-l); }
@media (min-width: 900px) {
  .sx-contact { grid-template-areas: "form details" "map map"; }
  .sx-contact__form { grid-area: form; }
  .sx-contact__details { grid-area: details; }
  .sx-contact__map { grid-area: map; }
  /* With no form, the heading runs the full width and the details sit
     beside the map, so the two columns start and finish together. */
  .sx-contact--no-form { grid-template-areas: "form form" "details map"; align-items: start; }
  .sx-contact--no-form .sx-contact__map { align-self: start; }
}

/* Long tile grids pair up on a phone so six categories stay scannable. */
@media (max-width: 639px) {
  .sx-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .sx-tiles:has(> :nth-child(5)) .sx-tile__title { font-size: var(--fs-h4); }
}

/* Long addresses must not widen a grid track on a narrow phone. */
.sx-footer__grid > *, .sx-contact > *, .sx-grid > *, .sx-legal > *, .sx-steps-split > * { min-width: 0; }
a[href^="mailto:"], .sx-contact-list a, .sx-footer a, .sx-prose a { overflow-wrap: anywhere; }
.sx-footer__about, .sx-contact-list address { overflow-wrap: anywhere; }

/* =====================================================================
 * Dior's Jewelers — refinement layer.
 * A serif display face, depth, and restrained motion. Everything here is
 * additive: remove this block and the approved layout still stands.
 * Tokens only. Motion is opt-out through prefers-reduced-motion and
 * every hover state has a matching focus state.
 * ===================================================================== */

:root {
  /* Jost stays, but only for the tracked uppercase micro-type: nav,
     buttons, eyebrows and field labels. Headings are the serif. */
  --font-ui: "Jost", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--c-ink) 5%, transparent),
              0 2px 8px color-mix(in srgb, var(--c-ink) 4%, transparent);
  --shadow-2: 0 2px 4px color-mix(in srgb, var(--c-ink) 5%, transparent),
              0 16px 36px color-mix(in srgb, var(--c-ink) 10%, transparent);
  --shadow-3: 0 4px 10px color-mix(in srgb, var(--c-ink) 6%, transparent),
              0 30px 70px color-mix(in srgb, var(--c-ink) 14%, transparent);
}

/* ---------- Type: the serif does the talking ---------- */
h1, h2 { letter-spacing: -0.008em; }
h3 { letter-spacing: normal; font-weight: 500; }
h4 { letter-spacing: 0.04em; }
h1, h2, h3, .sx-hero__title, .sx-heading__title {
  font-kerning: normal; font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}
/* Cormorant's lowercase is small for its point size; the lead paragraph
   next to it needs a touch more air so the pair looks deliberate. */
.sx-lead { max-width: 44ch; color: var(--c-ink-soft); }
.sx-hero__title, .sx-heading__title { max-width: 18ch; }
.sx-heading--center .sx-heading__title { max-width: 22ch; margin-inline: auto; }
#welcome .sx-prose blockquote p { font-style: italic; letter-spacing: -0.004em; line-height: 1.45; }
::selection { background: var(--c-blush); color: var(--c-ink); }

/* ---------- The rose-gold rule becomes a jewel ---------- */
.sx-heading--center .sx-heading__title { position: relative; }
.sx-heading--center .sx-heading__title::before {
  width: 7.5rem; background: none;
  background-image: linear-gradient(90deg,
    transparent 0, var(--c-accent) 6%, var(--c-accent) 40%,
    transparent 41%, transparent 59%,
    var(--c-accent) 60%, var(--c-accent) 94%, transparent 100%);
}
.sx-heading--center .sx-heading__title::after {
  content: ""; position: absolute; inset-block-start: 1px;
  inset-inline-start: 50%; width: 0.375rem; height: 0.375rem;
  background: var(--c-accent); transform: translate(-50%, -50%) rotate(45deg);
}
@media (max-width: 640px) {
  .sx-heading--center .sx-heading__title::before { width: 6rem; }
}

/* ---------- Logo: give it room to be read ----------
   The wordmark is close to 2:1, so its height is what limits it. Sized by
   height, it has to clear the navigation's weight to read as the brand. */
.sx-logo { padding-block: var(--space-2); margin-inline-end: var(--space-3); }
.sx-logo__img {
  max-height: 4.25rem; max-width: min(16rem, 100%);
  transition: opacity var(--dur-2) var(--ease);
}
.sx-logo:hover .sx-logo__img { opacity: 0.78; }
@media (max-width: 1100px) { .sx-logo__img { max-height: 3.5rem; } }
@media (max-width: 640px) { .sx-logo__img { max-height: 2.875rem; max-width: 11.5rem; } }
.sx-footer__brand .sx-logo__img { max-height: 5.5rem; max-width: 18rem; }

/* ---------- Header: settles into a quieter bar once you scroll ---------- */
.sx-header {
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sx-header { background: var(--c-bg); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .sx-header {
      animation: sx-header-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 8rem;
    }
    @keyframes sx-header-settle {
      from { box-shadow: none; }
      to { box-shadow: var(--shadow-1); }
    }
  }
}
/* The navigation underline draws itself in. */
.sx-nav--desktop .sx-nav__link { position: relative; padding-block: 0.5rem; }
.sx-nav--desktop .sx-nav__link::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--c-brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease);
}
[dir="rtl"] .sx-nav--desktop .sx-nav__link::after { transform-origin: right center; }
.sx-nav--desktop .sx-nav__link:hover::after,
.sx-nav--desktop .sx-nav__link:focus-visible::after { transform: scaleX(1); }
.sx-nav--desktop .sx-nav__link[aria-current="page"] { border-bottom: 0; }
.sx-nav--desktop .sx-nav__link[aria-current="page"]::after { transform: scaleX(1); height: 2px; }
.sx-iconbtn, .sx-burger {
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.sx-iconbtn:hover, .sx-burger:hover { border-color: var(--c-accent); transform: translateY(-1px); }

/* ---------- Buttons: weight on hover, never a bounce ---------- */
.sx-btn {
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
}
.sx-btn--primary { box-shadow: var(--shadow-1); }
.sx-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sx-btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.sx-btn--ghost:hover { box-shadow: var(--shadow-1); }
.sx-more { transition: color var(--dur-1) var(--ease); }
.sx-more .sx-icon { transition: transform var(--dur-2) var(--ease); }
.sx-more:hover .sx-icon, .sx-more:focus-visible .sx-icon { transform: translateX(0.3rem); }
[dir="rtl"] .sx-more:hover .sx-icon { transform: translateX(-0.3rem); }

/* ---------- Images: a slow, shallow push-in ---------- */
.sx-tile__media, .sx-card__media, .sx-hero__media,
.sx-steps__media, .sx-gallery figure, .sx-media { overflow: hidden; }
.sx-tile__media .sx-img, .sx-tile__media .sx-ph,
.sx-card__media .sx-img, .sx-card__media .sx-ph,
.sx-gallery .sx-img, .sx-gallery .sx-ph {
  transition: transform var(--dur-3) var(--ease), filter var(--dur-3) var(--ease);
}
.sx-tile:hover .sx-tile__media .sx-img, .sx-tile:focus-within .sx-tile__media .sx-img,
.sx-tile:hover .sx-tile__media .sx-ph, .sx-tile:focus-within .sx-tile__media .sx-ph,
.sx-gallery li:hover .sx-img, .sx-gallery li:hover .sx-ph {
  transform: scale(1.045);
}

/* ---------- Hero: an offset rose-gold frame behind the picture ---------- */
/* The picture is matted like a framed print: a cream border inside a
   rose-gold hairline. It holds the composition whatever the photograph. */
.sx-hero__media {
  position: relative; overflow: visible;
  padding: var(--space-4); background: var(--c-bg);
  border: 1px solid var(--c-accent); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}
.sx-hero__media .sx-img, .sx-hero__media .sx-ph { border-radius: 0; }
@media (max-width: 900px) { .sx-hero__media { padding: var(--space-3); } }
/* A cream-to-blush wash so the opening screen is not one flat field. */
.sx-section--hero {
  background-image:
    radial-gradient(60rem 40rem at 88% 8%, color-mix(in srgb, var(--c-blush) 55%, transparent), transparent 70%),
    radial-gradient(44rem 32rem at 2% 92%, color-mix(in srgb, var(--c-surface-alt) 45%, transparent), transparent 72%);
  background-repeat: no-repeat;
}
.sx-points li { transition: color var(--dur-1) var(--ease); }

/* ---------- Cards: white, hairline, lifted on approach ---------- */
.sx-card {
  position: relative; border: 1px solid var(--c-line);
  box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.sx-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-3) var(--ease);
}
.sx-card:hover, .sx-card:focus-within {
  transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--c-accent);
}
.sx-card:hover::before, .sx-card:focus-within::before { transform: scaleX(1); }
.sx-card__icon {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--radius-pill); background: var(--c-blush); color: var(--c-brand);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.sx-card:hover .sx-card__icon { background: var(--c-brand); color: var(--c-on-brand); }
.sx-card__icon .sx-icon { width: 1.35rem; height: 1.35rem; }

/* ---------- Tiles: the title underlines itself ---------- */
.sx-tile__media { border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.sx-tile { transition: transform var(--dur-2) var(--ease); }
.sx-tile:hover, .sx-tile:focus-within { transform: translateY(-3px); }
/* With a serif, a 17px tile title reads as a caption. Give it the h3 size
   so the category names carry the grid. */
.sx-tile__title { position: relative; display: inline-block; font-size: var(--fs-h3); letter-spacing: normal; margin-block: var(--space-5) 0.25rem; }
.sx-tile__title::after {
  content: ""; position: absolute; inset-block-end: -0.2em; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease);
}
.sx-tile:hover .sx-tile__title::after, .sx-tile:focus-within .sx-tile__title::after { transform: scaleX(1); }

/* ---------- The boutique gallery: one wide view, then four ---------- */
.sx-gallery figure { border-radius: var(--radius-l); }
.sx-gallery .sx-img, .sx-gallery .sx-ph { display: block; box-shadow: var(--shadow-1); }
.sx-gallery figcaption {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-strong);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-soft);
  margin-top: var(--space-4);
}
@media (min-width: 1000px) {
  /* Twelve columns: the storefront runs the full width, the four interior
     shots sit under it in equal portrait frames. Every item keeps its own
     ratio, so nothing can overflow its row. */
  #boutique .sx-gallery {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: auto; align-items: start;
  }
  #boutique .sx-gallery li { display: block; grid-column: span 3; min-width: 0; }
  #boutique .sx-gallery li:first-child { grid-column: span 12; }
  #boutique .sx-gallery figure { display: block; height: auto; }
  #boutique .sx-gallery .sx-img, #boutique .sx-gallery .sx-ph { height: auto; }
  /* The template writes the ratio as an inline style so that the browser
     reserves the right box before the photograph loads; the wide opening
     frame is the one place that has to win against it. */
  #boutique .sx-gallery li:first-child .sx-img,
  #boutique .sx-gallery li:first-child .sx-ph { aspect-ratio: 21 / 9 !important; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  #boutique .sx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #boutique .sx-gallery li:first-child { grid-column: span 2; }
  #boutique .sx-gallery li:first-child .sx-img,
  #boutique .sx-gallery li:first-child .sx-ph { aspect-ratio: 16 / 9 !important; }
}

/* ---------- Sections: hairlines where two tints meet ---------- */
.sx-section + .sx-section { position: relative; }
#welcome { border-block: 1px solid var(--c-line); }
.sx-section--cta { position: relative; overflow: hidden; }
.sx-section--cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(42rem 26rem at 80% 120%,
    color-mix(in srgb, var(--c-brand) 38%, transparent), transparent 70%);
}
.sx-section--cta > * { position: relative; }

/* ---------- Forms ---------- */
.sx-field input, .sx-field textarea, .sx-field select {
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.sx-field input:hover, .sx-field textarea:hover, .sx-field select:hover { border-color: var(--c-brand); }
.sx-field input:focus, .sx-field textarea:focus, .sx-field select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent);
}

/* ---------- Footer ---------- */
.sx-footer { position: relative; }
.sx-footer::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--c-accent) 20%, var(--c-accent) 80%, transparent);
}
.sx-footer__link { position: relative; }
.sx-footer__link::after {
  content: ""; position: absolute; inset-block-end: -0.15em; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease);
}
.sx-footer__link:hover::after, .sx-footer__link:focus-visible::after { transform: scaleX(1); }
.sx-footer__title { font-size: var(--fs-eyebrow); font-weight: var(--fw-strong); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-on-dark-soft); }
.sx-footer__contact .sx-contact-list { font-size: var(--fs-small); }
.sx-footer__about { font-size: var(--fs-small); color: var(--c-on-dark-soft); max-width: 30ch; }
.sx-social__link { transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.sx-social__link:hover { transform: translateY(-2px); border-color: var(--c-accent); }

/* ---------- Placeholders read as frames, not as holes ---------- */
.sx-ph { border: 1px solid var(--c-line); }

/* ---------- Entrance: content rises into place as it is reached ----------
   Transform only, so no text is ever faded out and nothing is hidden from
   a scanner or a reader. Switched off entirely for reduced motion, and
   only ever applied where the browser supports scroll-driven animation. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sx-heading,
    .sx-hero__text > *,
    .sx-hero__media,
    .sx-card,
    .sx-tile,
    .sx-gallery li,
    .sx-step,
    .sx-steps__media,
    .sx-faq__item,
    .sx-prose > * {
      animation: sx-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
    @keyframes sx-rise {
      from { transform: translateY(1.25rem); }
      to { transform: none; }
    }
    /* Media gets a shallow curtain instead of a slide. */
    .sx-tile__media .sx-img, .sx-tile__media .sx-ph,
    .sx-gallery .sx-img, .sx-gallery .sx-ph {
      animation: sx-reveal linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
    }
    @keyframes sx-reveal {
      from { clip-path: inset(0 0 14% 0); transform: scale(1.05); }
      to { clip-path: inset(0 0 0 0); transform: none; }
    }
  }
}