/* Match local fallback metrics to the shipped Montserrat faces to stabilize font swap. */
@font-face { font-family:MontserratFallback; src:local("Arial"); font-weight:400; size-adjust:112.148%; ascent-override:86.314%; descent-override:22.381%; line-gap-override:0%; }
@font-face { font-family:MontserratFallback; src:local("Arial"); font-weight:500; size-adjust:113.888%; ascent-override:84.996%; descent-override:22.039%; line-gap-override:0%; }
@font-face { font-family:MontserratFallback; src:local("Arial Bold"); font-weight:600; size-adjust:107.954%; ascent-override:89.668%; descent-override:23.251%; line-gap-override:0%; }
@font-face { font-family:MontserratFallback; src:local("Arial Bold"); font-weight:700; size-adjust:109.869%; ascent-override:88.105%; descent-override:22.845%; line-gap-override:0%; }
@font-face { font-family:MontserratFallback; src:local("Arial Bold"); font-weight:800; size-adjust:111.912%; ascent-override:86.496%; descent-override:22.428%; line-gap-override:0%; }

@font-face {
  font-family: Montserrat;
  src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Montserrat;
  src: url('../fonts/montserrat-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Montserrat;
  src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: Montserrat;
  src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Montserrat;
  src: url('../fonts/montserrat-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: Plex;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Plex;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Plex;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #1c1b20;
  --deep: #131217;
  --void: #0d0c10;
  --surface: #232228;
  --raised: #2b2a31;
  --white: #fff;
  --silver: #ddd;
  --muted: #aaa7b0;
  --purple: #8b28e3;
  --line: rgba(255, 255, 255, .14);
  --line-bright: rgba(255, 255, 255, .24);
  --chrome: linear-gradient(176deg, #fff 0%, #ececed 30%, #a6a7ad 50%, #f6f6f8 66%, #c4c5cb 100%);
  --inset: clamp(20px, 5vw, 72px);
  --display: clamp(2.9rem, 7.4vw, 6.4rem);
  --heading: clamp(2.1rem, 4.4vw, 3.4rem);
  --header-height: 72px;
  --align: cubic-bezier(.22, 1, .36, 1);
  --transfer: cubic-bezier(.65, 0, .35, 1);
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --seam-progress: 0;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font: 400 1rem/1.65 Montserrat, MontserratFallback, Arial, sans-serif;
}

html[lang='ar'] body {
  font-family: Plex, Montserrat, MontserratFallback, Arial, sans-serif;
  line-height: 1.8;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-inline-size: 100%;
}

figure,
p,
h1,
h2,
h3 {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

svg {
  display: block;
}

a svg,
button svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--white);
  color: var(--void);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-block-size: 48px;
  padding: 12px 20px;
  border: 1px solid var(--white);
  border-radius: 12px;
  background: var(--white);
  color: var(--void);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  transition: transform 120ms var(--align), background-color 120ms var(--align);
}

.btn:active {
  transform: scale(.985);
}

.btn.secondary {
  border-color: var(--line-bright);
  background: rgba(255, 255, 255, .035);
  color: var(--white);
}

.btn.whatsapp-cta {
  border-color: #25d366;
  background: #0b743b;
  color: #fff;
}

.btn.whatsapp-cta:hover {
  border-color: #4be184;
  background: #075c2f;
}

.btn.whatsapp-cta .whatsapp {
  flex: none;
  fill: currentColor;
  stroke: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--silver);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow::before {
  content: none;
}

.chrome {
  background: var(--chrome);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Header and navigation */
#site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  block-size: calc(var(--header-height) + var(--safe-area-inset-top));
  padding-block-start: var(--safe-area-inset-top);
  border-block-end: 1px solid rgba(255, 255, 255, .08);
  background: rgba(13, 12, 16, .88);
  opacity: var(--host-header-opacity, 1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  block-size: 100%;
  padding-inline: var(--inset);
}

.brand {
  display: flex;
  align-items: center;
  gap: 20px;
  min-block-size: 48px;
  flex: none;
}

.brand img {
  inline-size: 176px;
  block-size: auto;
}

.brand span {
  max-inline-size: 132px;
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--line);
  color: #c6c4ce;
  font-size: .6rem;
  letter-spacing: .2em;
  line-height: 1.35;
  text-transform: uppercase;
}

[data-primary-nav] {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  font-size: .875rem;
  font-weight: 600;
}

[data-primary-nav] > a:not(.btn) {
  display: flex;
  align-items: center;
  min-block-size: 48px;
}

.locale-link {
  justify-content: center;
  min-inline-size: 44px;
  font-family: Plex, Montserrat, MontserratFallback, Arial, sans-serif;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--white);
}

#mobile-menu {
  position: fixed;
  inset: calc(var(--header-height) + var(--safe-area-inset-top)) 0 0;
  z-index: 40;
  background: rgba(0, 0, 0, .68);
}

.menu-sheet {
  display: grid;
  gap: 4px;
  max-block-size: calc(100dvh - var(--header-height));
  padding: 20px var(--inset) 30px;
  overflow: auto;
  border-block-end: 1px solid var(--line);
  background: var(--surface);
  animation: menu-enter 280ms var(--align);
}

.menu-sheet > a {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  padding: 12px;
  border-block-end: 1px solid var(--line);
}

.menu-sheet .btn {
  margin-block: 8px;
}

@keyframes menu-enter {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}

/* Stage: the live frame keeps its full footprint. The poster is the opaque
   loading scene and is removed only by the host after a verified ready state. */
.stage {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  block-size: 100vh;
  block-size: 100dvh;
  background: var(--void);
}

#frame-slot {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#frame-slot iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  opacity: 1;
}

#poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: auto;
  overscroll-behavior: auto;
  touch-action: pan-y;
  background: var(--void);
  opacity: 1;
  transition: opacity 280ms var(--align);
}

body[data-embed-state='ready'] #poster {
  opacity: 0;
  pointer-events: none;
}

.opening {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  min-block-size: 100%;
  padding: calc(var(--header-height) + 54px) var(--inset) 72px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 46%, rgba(139, 40, 227, .12), transparent 52%),
    linear-gradient(130deg, #0d0c10, #1b1a20 62%, #100f14);
}

.opening::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  content: '';
}

.opening-title {
  max-inline-size: 12ch;
  overflow-wrap: anywhere;
  font-size: var(--display);
  font-weight: 800;
}

.opening-title > .chrome {
  display: block;
}

.opening-intro {
  max-inline-size: 43ch;
  color: var(--silver);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
}

.opening > *,
.opening .button-row,
.split-copy > * {
  min-inline-size: 0;
}

.service-cues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-cues span {
  display: inline-flex;
  align-items: center;
  min-block-size: 30px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255, 255, 255, .035);
  color: #e7e5ee;
  font-size: .75rem;
  font-weight: 600;
}

.photo-sign,
.studio-coordinate,
.object-label {
  color: rgba(255, 255, 255, .75);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.opening picture,
.image-frame picture {
  display: block;
}

.opening picture img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.opening-status {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(112px, .7fr) auto;
  align-items: center;
  gap: 20px;
  min-block-size: 94px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(43, 42, 49, .94), rgba(19, 18, 23, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 64px -28px rgba(0, 0, 0, .72);
}

.status-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}

.status-heading p {
  font-size: .8125rem;
  font-weight: 600;
}

.loading-mark {
  inline-size: 9px;
  block-size: 9px;
  flex: none;
  border-radius: 50%;
  background: #d1a6ff;
  box-shadow: 0 0 18px rgba(188, 113, 249, .8);
}

.loading-track {
  block-size: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
}

.loading-track i {
  display: block;
  inline-size: 42%;
  block-size: 100%;
  background: var(--chrome);
  animation: loading-travel 1200ms var(--transfer) infinite;
}

@keyframes loading-travel {
  from { transform: translateX(-160%); }
  to { transform: translateX(310%); }
}

.status-location {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#embed-recovery {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Option 1 ,  Chrome Studio */
.chrome-opening {
  align-items: end;
  padding-block-end: 48px;
}

.chrome-opening::before {
  position: absolute;
  inset: 19% 5% 0 36%;
  z-index: -1;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 52% 42%, rgba(255, 255, 255, .10), transparent 34%),
    linear-gradient(150deg, transparent 35%, rgba(197, 190, 209, .11) 47%, transparent 60%);
  transform: skewX(-10deg);
  content: '';
}

.chrome-copy {
  grid-column: 1 / 11;
  align-self: end;
}

.chrome-copy .opening-title {
  max-inline-size: 15ch;
  margin-block: 20px 30px;
  font-size: clamp(3.2rem, 8vw, 7.4rem);
}

.chrome-base {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  max-inline-size: 900px;
}

.chrome-base .service-cues {
  justify-content: end;
}

html[dir='ltr'] .chrome-copy {
  grid-column: 3 / -1;
  text-align: right;
}

html[dir='ltr'] .chrome-copy .opening-title,
html[dir='ltr'] .chrome-copy .opening-intro {
  inline-size: 100%;
}

html[dir='ltr'] .chrome-copy .opening-title,
html[dir='ltr'] .chrome-copy .opening-intro,
html[dir='ltr'] .chrome-base {
  margin-inline-start: auto;
}

html[dir='ltr'] .chrome-copy .eyebrow {
  justify-content: flex-end;
}

html[dir='ltr'] .chrome-base,
html[dir='ltr'] .chrome-copy .button-row,
html[dir='ltr'] .chrome-copy .service-cues {
  flex-direction: row-reverse;
}

.chrome-status {
  grid-column: 1 / -1;
  margin-block-start: 20px;
}

.chrome-orbit {
  position: absolute;
  inset-block-start: 18%;
  inset-inline-end: 11%;
  z-index: -1;
  inline-size: min(48vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.chrome-orbit::before,
.chrome-orbit::after,
.chrome-orbit i {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  content: '';
}

.chrome-orbit::before {
  inset: 12%;
}

.chrome-orbit::after {
  inset: 28%;
  border-color: rgba(202, 189, 223, .34);
}

.chrome-orbit i:nth-child(1) {
  inset: 43%;
  background: var(--chrome);
  box-shadow: 0 0 36px rgba(216, 206, 235, .24);
}

.chrome-orbit i:nth-child(2) {
  inset: 9% 49%;
  border-width: 0 1px;
  border-radius: 0;
}

.chrome-orbit i:nth-child(3) {
  inset: 49% 9%;
  border-width: 1px 0;
  border-radius: 0;
}

.studio-coordinate {
  position: absolute;
  inset-block-start: calc(var(--header-height) + 42px);
  inset-inline-end: var(--inset);
}

/* Option 2 ,  Studio Split */
.split-opening {
  align-items: center;
  padding-block-end: 54px;
}

.split-copy {
  grid-column: 1 / 6;
  display: grid;
  align-content: center;
  gap: 28px;
  min-block-size: 62%;
}

.split-copy .opening-title {
  margin-block: -8px 0;
}

.split-portrait {
  position: relative;
  grid-column: 6 / -1;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 64px -28px rgba(0, 0, 0, .72);
}

.split-portrait picture {
  block-size: 100%;
}

.split-portrait img {
  object-position: center;
}

.split-portrait::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 12, 16, .62));
  content: '';
}

.split-portrait .photo-sign {
  position: absolute;
  inset-inline-start: 20px;
  inset-block-end: 18px;
  z-index: 1;
}

.split-status {
  grid-column: 6 / -1;
  margin-block-start: -94px;
  z-index: 2;
  border-radius: 18px 18px 0 0;
}

/* Option 3 ,  Workshop Mosaic */
.mosaic-opening {
  grid-template-rows: minmax(140px, .85fr) minmax(220px, 1.3fr);
  align-content: center;
  padding-block-end: 56px;
}

.mosaic-copy {
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: center;
}

.mosaic-copy .opening-title {
  margin-block: 18px 28px;
}

.mosaic-install {
  position: relative;
  grid-column: 8 / -1;
  grid-row: 1 / span 2;
  overflow: hidden;
  min-block-size: 430px;
  border-radius: 18px;
  box-shadow: 0 24px 64px -28px rgba(0, 0, 0, .8);
}

.mosaic-install img {
  object-position: center;
}

.mosaic-install .photo-sign {
  position: absolute;
  inset-inline-start: 18px;
  inset-block-end: 18px;
  z-index: 1;
}

.mosaic-sample {
  grid-column: 1 / 4;
  grid-row: 2;
  align-self: end;
  overflow: hidden;
  min-block-size: 208px;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.mosaic-sample img {
  object-position: center;
}

.mosaic-service {
  grid-column: 4 / 8;
  grid-row: 2;
  align-self: end;
  display: grid;
  gap: 18px;
}

.slab-line {
  display: block;
  block-size: 1px;
  background: linear-gradient(90deg, #a558f0, rgba(255, 255, 255, .08));
}

.mosaic-status {
  grid-template-columns: 1fr;
  gap: 12px;
  min-block-size: 0;
}

.mosaic-status .status-location {
  display: none;
}

/* Option 4 ,  Material Showcase */
.material-opening {
  align-items: center;
  justify-items: stretch;
  padding-block-end: 40px;
}

.material-eyebrow {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: center;
}

.material-title {
  grid-column: 1 / 6;
  grid-row: 2;
  align-self: center;
}

.material-title .opening-title {
  max-inline-size: 7ch;
}

.material-object {
  position: relative;
  grid-column: 5 / 9;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: center;
  inline-size: min(25vw, 320px);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 50%;
  background: linear-gradient(140deg, #77727c, #1a181f 19%, #322c3d 77%, #918b97);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35), 0 28px 70px -30px rgba(0, 0, 0, .9);
}

.material-object picture {
  overflow: hidden;
  block-size: 100%;
  border-radius: 50%;
}

.material-object img {
  object-position: center;
}

.material-rim {
  position: absolute;
  inset: -20px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}

.object-label {
  position: absolute;
  inset-block-end: -30px;
  inset-inline: 0;
  text-align: center;
}

.material-accent {
  grid-column: 9 / -1;
  grid-row: 2;
  align-self: center;
}

.material-accent .opening-title {
  max-inline-size: 6ch;
  font-size: clamp(2.8rem, 5.4vw, 5.5rem);
}

.material-copy {
  grid-column: 9 / -1;
  grid-row: 3;
  display: grid;
  gap: 26px;
  align-self: start;
  padding-block-start: 36px;
}

.material-status {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  margin-block-start: 46px;
  border-color: rgba(194, 164, 225, .3);
}

/* Option 5 ,  Build Editorial */
.editorial-opening {
  grid-template-rows: auto minmax(230px, 1fr);
  align-content: center;
  padding-block-end: 44px;
}

.editorial-title {
  grid-column: 1 / 9;
  grid-row: 1;
  align-self: end;
  padding-block-end: 30px;
  border-block-end: 1px solid var(--line);
}

.editorial-title .opening-title {
  max-inline-size: 13ch;
  margin-block-start: 18px;
}

.editorial-narrow,
.editorial-wide {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  border: 1px solid var(--line);
  background: var(--surface);
}

.editorial-narrow {
  grid-column: 1 / 5;
  grid-row: 2;
  margin-block-start: 24px;
  border-radius: 18px 18px 0 0;
}

.editorial-wide {
  grid-column: 6 / 11;
  grid-row: 2;
  margin-block-start: 72px;
  border-radius: 18px 18px 0 0;
}

.editorial-narrow img,
.editorial-wide img {
  object-position: center;
}

.editorial-narrow .photo-sign,
.editorial-wide .photo-sign {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-end: 14px;
  z-index: 1;
}

.editorial-side {
  grid-column: 11 / -1;
  grid-row: 1 / span 2;
  display: grid;
  align-content: end;
  gap: 22px;
  padding-block-start: 120px;
}

.editorial-side .button-row {
  flex-direction: column;
}

.editorial-status {
  grid-template-columns: 1fr;
  gap: 12px;
  min-inline-size: 190px;
}

.editorial-status .status-location {
  display: none;
}

/* Stage-to-work seam */
.handoff {
  position: relative;
  overflow: clip;
  padding: 32px var(--inset);
  background: var(--deep);
  scroll-margin-block-start: 96px;
}

.light-seam {
  position: absolute;
  inset: 0 0 auto;
  block-size: 1px;
  pointer-events: none;
  opacity: calc(.25 + var(--seam-progress) * .75);
  background: linear-gradient(90deg, transparent, #bf8df0 28%, #f0ebf8 50%, #bf8df0 72%, transparent);
  transform: translateX(calc((1 - var(--seam-progress)) * -100px));
}

.handoff-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-inline-size: 1280px;
  margin-inline: auto;
}

.handoff-inner p {
  color: var(--silver);
  font-size: .875rem;
  font-weight: 600;
}

/* Shared work details */
.builds {
  position: relative;
  padding: 96px var(--inset);
  overflow: hidden;
  background: var(--ink);
  scroll-margin-block-start: 96px;
}

.work-shell {
  max-inline-size: 1280px;
  margin-inline: auto;
}

.build-heading {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: end;
  gap: 34px;
  margin-block-end: 52px;
}

.build-heading .eyebrow {
  grid-column: 1;
}

.build-heading h2 {
  grid-column: 1;
  max-inline-size: 12ch;
  margin-block-start: -8px;
  font-size: var(--heading);
  font-weight: 800;
}

.build-heading > p:last-child {
  grid-column: 2;
  max-inline-size: 43ch;
  color: var(--silver);
}

.build-card {
  min-inline-size: 0;
}

.image-frame {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .015) 52%, rgba(139, 40, 227, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 64px -28px rgba(0, 0, 0, .8);
}

.image-frame::before {
  position: absolute;
  inset: 4px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 13px;
  pointer-events: none;
  content: '';
}

.image-frame picture {
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  background: var(--deep);
}

[data-build-image] {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  opacity: calc(.96 + var(--build-image-progress, 1) * .04);
  transform: translateY(var(--build-image-shift, 0px)) scale(var(--build-image-scale, 1));
  transform-origin: center;
  transition: transform 560ms var(--align);
}

.build-card figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding-block: 18px 8px;
}

.ordinal,
.chapter {
  color: #b9b3c4;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .08em;
}

.build-card h3,
.row-copy h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.build-card figcaption p,
.row-copy > p:not(.eyebrow) {
  margin-block-start: 6px;
  color: #c4c0cd;
  font-size: .875rem;
}

.closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-block-start: 72px;
  padding-block-start: 34px;
  border-block-start: 1px solid var(--line);
}

.closing h2 {
  font-size: var(--heading);
  font-weight: 800;
}

.closing p {
  margin-block-start: 8px;
  color: var(--silver);
  font-size: .875rem;
}

/* Option 1 continuation ,  lead photograph with two chrome insets */
.chrome-work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.chrome-work-grid .work-lead {
  grid-column: 1 / 8;
}

.chrome-work-grid .work-lead .image-frame picture {
  aspect-ratio: 1.13 / 1;
}

.chrome-work-grid .work-lead [data-build-image] {
  aspect-ratio: 1.13 / 1;
}

.work-side {
  grid-column: 9 / -1;
  display: grid;
  align-content: start;
  gap: 42px;
  padding-block-start: 58px;
}

.work-side .build-card:nth-child(2) {
  inline-size: 82%;
  justify-self: end;
}

.chrome-work .image-frame {
  border-radius: 0;
}

.chrome-work .image-frame::after {
  position: absolute;
  inset: auto 8% -1px;
  block-size: 1px;
  background: var(--chrome);
  content: '';
}

/* Option 2 continuation ,  alternating numbered studio rows */
.work-spine {
  position: relative;
  display: grid;
  gap: 68px;
}

.work-spine::before {
  position: absolute;
  inset: 0 auto 0 50%;
  inline-size: 1px;
  background: linear-gradient(180deg, transparent, rgba(191, 141, 240, .8) 12%, rgba(255, 255, 255, .12) 82%, transparent);
  content: '';
}

.work-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(34px, 7vw, 112px);
}

.work-row:nth-child(even) .build-card {
  grid-column: 2;
  grid-row: 1;
}

.work-row:nth-child(even) .row-copy {
  grid-column: 1;
  grid-row: 1;
  text-align: end;
}

.row-copy {
  position: relative;
  display: grid;
  gap: 14px;
  max-inline-size: 35ch;
}

.row-copy .chapter {
  color: #d9c3ee;
  font-size: 1rem;
}

.row-copy .eyebrow {
  font-size: .68rem;
}

.row-copy .btn {
  justify-self: start;
  margin-block-start: 6px;
}

.work-row:nth-child(even) .btn {
  justify-self: end;
}

.split-work .image-frame {
  border-radius: 2px;
}

/* Option 3 continuation ,  photographic bento */
.work-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(120px, auto);
  gap: 20px;
}

.work-mosaic .mosaic-lead {
  grid-column: 1 / 7;
  grid-row: span 2;
}

.work-mosaic .mosaic-lead .image-frame picture,
.work-mosaic .mosaic-lead [data-build-image] {
  aspect-ratio: 4 / 5;
}

.work-mosaic .mosaic-detail {
  grid-column: 7 / 10;
}

.work-mosaic .mosaic-car {
  grid-column: 10 / -1;
}

.work-mosaic .mosaic-car:last-child {
  grid-column: 7 / 10;
  margin-block-start: -42px;
}

.mosaic-work .image-frame {
  border-radius: 18px;
}

.mosaic-work .mosaic-detail .image-frame {
  border-radius: 50% 50% 18px 18px;
}

/* Option 4 continuation ,  numbered material chapters */
.material-work-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: end;
  margin-block-end: 56px;
}

.material-work-intro .build-heading {
  display: contents;
}

.material-work-intro .build-heading .eyebrow,
.material-work-intro .build-heading h2 {
  grid-column: 1;
}

.material-work-intro .build-heading > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
}

.material-statement {
  grid-column: 2;
  padding-inline-start: 22px;
  border-inline-start: 2px solid #a558f0;
  color: var(--silver);
  font-size: 1.05rem;
}

.material-chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  counter-reset: chapter;
}

.material-chapter {
  position: relative;
  padding-block-start: 42px;
  counter-increment: chapter;
}

.material-chapter::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  color: rgba(255, 255, 255, .36);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .12em;
  content: '0' counter(chapter);
}

.material-chapter:nth-child(2) {
  margin-block-start: 48px;
}

.material-chapter:nth-child(3) {
  margin-block-start: 18px;
}

.material-work .image-frame {
  border-radius: 50% 50% 14px 14px;
}

.material-work .image-frame picture {
  border-radius: 50% 50% 9px 9px;
}

/* Option 5 continuation ,  real horizontal filmstrip */
.editorial-work .rail-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
  margin-block-end: 40px;
}

.editorial-work .build-heading {
  margin: 0;
}

.rail-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--silver);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.round-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: var(--white);
}

.work-rail {
  display: grid;
  grid-auto-columns: minmax(300px, 38vw);
  grid-auto-flow: column;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 1px;
  scrollbar-color: #84718f var(--surface);
  scrollbar-width: thin;
}

[data-work-rail] {
  scroll-behavior: smooth;
}

.work-rail .build-card {
  scroll-snap-align: start;
}

.work-rail .image-frame {
  border-radius: 2px;
}

.work-rail picture,
.work-rail [data-build-image] {
  aspect-ratio: 4 / 5;
}

/* The common completion and service regions */
.help {
  padding: 32px var(--inset);
  border-block: 1px solid var(--line);
  background: var(--deep);
}

.help-inner {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 34px;
  max-inline-size: 1280px;
  margin-inline: auto;
}

.help details {
  flex: 1;
  max-inline-size: 66ch;
}

.help summary {
  min-block-size: 44px;
  padding-block: 10px;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 700;
}

.help details p {
  margin-block: 12px;
  color: #ccc7d4;
  font-size: .875rem;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px var(--inset);
  color: #c5becf;
  background: var(--void);
  font-size: .75rem;
}

.footer img {
  inline-size: 120px;
  block-size: auto;
}

/* Direction follows language while media remains physically unchanged. */
html[dir='rtl'] h1,
html[dir='rtl'] h2,
html[dir='rtl'] h3 {
  letter-spacing: 0;
  line-height: 1.22;
}

html[dir='rtl'] .opening-title,
html[dir='rtl'] .build-heading h2,
html[dir='rtl'] .closing h2 {
  font-family: Plex, Montserrat, MontserratFallback, Arial, sans-serif;
  font-weight: 600;
}

html[dir='rtl'] .material-title .opening-title,
html[dir='rtl'] .material-accent .opening-title {
  font-family: Plex, Montserrat, MontserratFallback, Arial, sans-serif;
  font-weight: 600;
}

html[dir='rtl'] .eyebrow,
html[dir='rtl'] .status-location,
html[dir='rtl'] .photo-sign,
html[dir='rtl'] .studio-coordinate,
html[dir='rtl'] .object-label,
html[dir='rtl'] .brand span {
  letter-spacing: 0;
  text-transform: none;
}

html[dir='rtl'] .work-spine::before {
  inset-inline: 50% auto;
}

html[dir='rtl'] .work-row:nth-child(even) .row-copy {
  text-align: start;
}

html[dir='rtl'] .light-seam {
  transform: translateX(calc((1 - var(--seam-progress)) * 100px));
}

html[dir='rtl'] .arrow,
html[dir='rtl'] .back {
  transform: scaleX(-1);
}

@media (max-width: 1099px) {
  [data-primary-nav] {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .brand span {
    display: none;
  }

  .opening {
    padding-block-start: calc(var(--header-height) + 36px);
  }

  .chrome-copy {
    grid-column: 1 / 12;
  }

  .chrome-orbit {
    inset-inline-end: -7%;
    inline-size: 56vw;
  }

  .split-copy {
    grid-column: 1 / 7;
  }

  .split-portrait {
    grid-column: 7 / -1;
  }

  .split-status {
    grid-column: 7 / -1;
  }

  .mosaic-copy {
    grid-column: 1 / 8;
  }

  .mosaic-install {
    grid-column: 8 / -1;
  }

  .mosaic-service {
    grid-column: 4 / 8;
  }

  .material-title {
    grid-column: 1 / 5;
  }

  .material-copy {
    grid-column: 9 / -1;
  }

  .editorial-side {
    grid-column: 10 / -1;
  }

  .work-side {
    grid-column: 8 / -1;
  }

}

@media (max-width: 699px) {
  :root {
    --header-height: 64px;
    --display: 2.875rem;
    --heading: 2.3rem;
  }

  .brand img {
    inline-size: 136px;
  }

  .header-inner {
    gap: 12px;
  }

  .opening {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-block-size: 100%;
    padding: calc(var(--header-height) + 30px) 20px 36px;
    overflow: visible;
  }

  .opening-title {
    font-size: clamp(2.875rem, 13vw, 3.7rem);
  }

  .opening-intro {
    font-size: 1rem;
  }

  .button-row {
    gap: 10px;
  }

  .button-row .btn {
    flex: 1;
    padding-inline: 14px;
  }

  .opening-status {
    grid-template-columns: 1fr;
    gap: 12px;
    min-block-size: 0;
    padding: 16px;
    border-radius: 14px;
  }

  .status-location {
    display: none;
  }

  .chrome-opening {
    align-content: end;
    min-block-size: max(100%, 620px);
  }

  .chrome-opening::before {
    inset: 8% -50% 43% 20%;
  }

  .chrome-copy {
    grid-column: 1 / -1;
    align-self: end;
  }

  html[dir='ltr'] .chrome-copy {
    grid-column: 1 / -1;
  }

  .chrome-copy .opening-title {
    margin-block: 16px 26px;
    font-size: clamp(3.1rem, 14vw, 4.4rem);
  }

  html[dir='ltr'] .chrome-copy .opening-title {
    max-inline-size: none;
    overflow-wrap: normal;
    font-size: clamp(3.1rem, 14vw, 3.5rem);
  }

  .chrome-base {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .chrome-base .service-cues {
    justify-content: start;
  }

  .chrome-status {
    grid-column: 1 / -1;
    margin-block-start: 16px;
  }

  .chrome-orbit {
    inset-block-start: 7%;
    inset-inline-end: -19%;
    inline-size: 88vw;
    opacity: .7;
  }

  .studio-coordinate {
    inset-block-start: calc(var(--header-height) + 16px);
    inset-inline-end: 20px;
  }

  /* Split: portrait occupies the upper 42%; copy panel overlaps its edge. */
  .split-opening {
    display: grid;
    grid-template-rows: 42svh auto auto;
    align-content: start;
    padding-block-end: 24px;
  }

  .split-portrait {
    grid-column: 1 / -1;
    grid-row: 1;
    min-block-size: 0;
    border-radius: 14px;
  }

  .split-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    gap: 20px;
    min-block-size: 0;
    margin-block-start: -24px;
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(28, 27, 32, .97);
    box-shadow: 0 20px 46px -28px #000;
  }

  .split-status {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-block: 12px 0;
    border-radius: 14px;
  }

  /* Mosaic: authored unequal two-column layout rather than a stack. */
  .mosaic-opening {
    grid-template-rows: auto 170px auto;
    align-content: start;
  }

  .mosaic-copy {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .mosaic-copy .opening-title {
    margin-block: 16px 24px;
  }

  .mosaic-install {
    grid-column: 3 / -1;
    grid-row: 2 / span 2;
    min-block-size: 0;
    border-radius: 14px;
  }

  .mosaic-sample {
    grid-column: 1 / 3;
    grid-row: 2;
    min-block-size: 0;
    border-radius: 14px;
  }

  .mosaic-service {
    grid-column: 1 / 3;
    grid-row: 3;
    align-self: end;
    margin-block-start: 12px;
  }

  .mosaic-status {
    padding: 12px;
    border-radius: 12px;
  }

  .mosaic-service .service-cues {
    display: none;
  }

  /* Material: title first, 180px physical object, accent at lower edge. */
  .material-opening {
    grid-template-rows: auto auto minmax(190px, auto) auto auto;
    align-content: start;
    padding-block-end: 28px;
  }

  .material-eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .material-title {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-block: 16px 8px;
  }

  .material-title .opening-title {
    max-inline-size: 11ch;
  }

  .material-object {
    grid-column: 2 / 4;
    grid-row: 3;
    inline-size: 180px;
    align-self: center;
  }

  .material-rim {
    inset: -12px;
  }

  .object-label {
    inset-block-end: -24px;
    font-size: .61rem;
  }

  .material-accent {
    grid-column: 3 / -1;
    grid-row: 3;
    align-self: end;
    margin-inline-start: 24px;
  }

  .material-accent .opening-title {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .material-copy {
    grid-column: 1 / -1;
    grid-row: 4;
    gap: 18px;
    padding-block-start: 20px;
  }

  .material-status {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-block-start: 16px;
  }

  /* Editorial: 36/64 paired views and a horizontal loading slab. */
  .editorial-opening {
    grid-template-rows: auto 240px auto;
    align-content: start;
    padding-block-end: 24px;
  }

  .editorial-title {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-block-end: 20px;
  }

  .editorial-title .opening-title {
    margin-block-start: 14px;
  }

  .editorial-narrow {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-block-start: 16px;
    border-radius: 14px 14px 0 0;
  }

  .editorial-wide {
    grid-column: 3 / -1;
    grid-row: 2;
    margin-block-start: 42px;
    border-radius: 14px 14px 0 0;
  }

  .editorial-side {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    gap: 16px;
    padding-block-start: 18px;
  }

  .editorial-side .button-row {
    flex-direction: row;
  }

  .editorial-status {
    grid-template-columns: 1fr minmax(80px, .6fr);
  }

  .editorial-status #embed-recovery {
    grid-column: 1 / -1;
  }

  .handoff {
    padding-block: 24px;
  }

  .handoff-inner {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .light-seam {
    transform: translateX(calc((1 - var(--seam-progress)) * -48px));
  }

  .builds {
    padding: 64px 20px;
  }

  .build-heading {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-block-end: 34px;
  }

  .build-heading h2,
  .build-heading > p:last-child {
    grid-column: 1;
  }

  .build-heading h2 {
    margin-block-start: 0;
  }

  .build-heading > p:last-child {
    font-size: .875rem;
  }

  .image-frame {
    padding: 7px;
    border-radius: 14px;
  }

  .image-frame::before {
    border-radius: 9px;
  }

  .build-card figcaption {
    gap: 12px;
    padding-block: 14px 4px;
  }

  .build-card figcaption p {
    font-size: .8125rem;
  }

  .closing {
    align-items: start;
    flex-direction: column;
    margin-block-start: 42px;
    padding-block-start: 24px;
  }

  /* Chrome continuation keeps an unequal paired-window rhythm. */
  .chrome-work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .chrome-work-grid .work-lead {
    grid-column: 1 / 4;
  }

  .work-side {
    grid-column: 3 / -1;
    gap: 22px;
    padding-block-start: 84px;
  }

  .work-side .build-card:nth-child(2) {
    inline-size: 88%;
  }

  /* Split continuation becomes image / caption pairs separated by lines. */
  .work-spine {
    gap: 34px;
  }

  .work-spine::before {
    display: none;
  }

  .work-row,
  .work-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--line);
  }

  .work-row:nth-child(even) .build-card,
  .work-row:nth-child(even) .row-copy {
    grid-column: 1;
    grid-row: auto;
    text-align: start;
  }

  .row-copy .btn,
  .work-row:nth-child(even) .btn {
    justify-self: start;
  }

  .work-row:nth-child(even) .build-card {
    inline-size: 88%;
    justify-self: end;
  }

  /* Mosaic maintains tall/short pairs. */
  .work-mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .work-mosaic .mosaic-lead {
    grid-column: 1 / 4;
  }

  .work-mosaic .mosaic-detail {
    grid-column: 3 / -1;
    margin-block-start: 58px;
  }

  .work-mosaic .mosaic-car {
    grid-column: 1 / 3;
  }

  .work-mosaic .mosaic-car:last-child {
    grid-column: 3 / -1;
    margin-block-start: 0;
  }

  .material-work-intro {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-block-end: 32px;
  }

  .material-work-intro .build-heading .eyebrow,
  .material-work-intro .build-heading h2,
  .material-work-intro .build-heading > p:last-child,
  .material-statement {
    grid-column: 1;
    grid-row: auto;
  }

  .material-statement {
    padding-inline-start: 16px;
  }

  .material-chapters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .material-chapter {
    grid-column: 1 / 4;
  }

  .material-chapter:nth-child(2) {
    grid-column: 2 / -1;
    margin-block-start: 28px;
  }

  .material-chapter:nth-child(3) {
    grid-column: 1 / 4;
    margin-block-start: 0;
  }

  .editorial-work .rail-heading {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-block-end: 28px;
  }

  .rail-controls {
    justify-content: start;
  }

  .work-rail {
    grid-auto-columns: 85vw;
    gap: 16px;
  }

  .help {
    padding: 24px 20px;
  }

  .help-inner,
  .footer {
    align-items: start;
    flex-direction: column;
    gap: 16px;
  }

  .footer {
    padding: 28px 20px;
  }

  html[dir='rtl'] .light-seam {
    transform: translateX(calc((1 - var(--seam-progress)) * 48px));
  }
}

@media (max-width: 349px) {
  :root {
    --display: 2.65rem;
  }

  .brand img {
    inline-size: 120px;
  }

  .opening {
    padding-inline: 16px;
  }

  .button-row {
    flex-direction: column;
  }

  html[dir='ltr'] .chrome-copy .button-row {
    flex-direction: column;
  }

  .button-row .btn {
    inline-size: 100%;
  }

  .chrome-copy .opening-title {
    font-size: 2.9rem;
  }

  .split-opening {
    grid-template-rows: 39svh auto auto;
  }

  .material-object {
    inline-size: 154px;
  }

  .material-accent {
    margin-inline-start: 10px;
  }

  .builds {
    padding-inline: 16px;
  }

  .round-control {
    inline-size: 48px;
    block-size: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  [data-build-image] {
    transform: none !important;
  }

  .light-seam {
    opacity: 1;
    transform: none !important;
  }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome {
    background: none;
    color: var(--white);
  }
}

/* Production refinements preserve the selected composition and host states. */
section[id], [id='warranty'], [id='location'], [id='gallery'], [id='materials'] {
  scroll-margin-block-start: calc(var(--header-height) + 28px);
}
.header-inner { max-inline-size:1600px; margin-inline:auto; }
#site-header { background:var(--void); }
[data-primary-nav] { gap:clamp(12px,1.2vw,24px); font-size:.75rem; }
.brand span { display:none; }
.help summary { min-block-size:44px; padding-block:8px; cursor:pointer; }
.status-heading > svg { inline-size:20px; block-size:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.chrome-opening .chrome-copy { animation:opening-light 840ms var(--align) both; }
@keyframes opening-light { from { transform:translateY(24px); } to { transform:translateY(0); } }
html[lang='ar'] [data-primary-nav] { font-size:.875rem; }
@font-face { font-family:Plex; src:url('../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; unicode-range:U+0000-00FF; }
@font-face { font-family:Plex; src:url('../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; unicode-range:U+0000-00FF; }
@font-face { font-family:Plex; src:url('../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; unicode-range:U+0000-00FF; }
@media(max-width:699px) {
  @keyframes opening-light { from { transform:translateY(16px); } to { transform:translateY(0); } }
}
@media(prefers-reduced-motion:reduce) { .chrome-opening .chrome-copy { animation:none; } }

/* The loading film is a backdrop to the existing composition and real status. */
.chrome-base { margin-block-start:32px; }
.chrome-opening { padding-block-start:calc(var(--header-height) + 80px); }
.chrome-opening::before { content:none; }
.studio-backdrop { position:absolute; inset:0; z-index:-2; pointer-events:none; background:var(--void); }
.studio-backdrop picture, .studio-backdrop img, .studio-backdrop video { display:block; position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; object-position:center; }
.studio-backdrop video { opacity:0; }
body[data-video-started='true'] .studio-backdrop video { opacity:1; }
.studio-backdrop::after { position:absolute; inset:0; content:''; background:linear-gradient(90deg,rgba(13,12,16,.55),rgba(13,12,16,.20)),linear-gradient(0deg,rgba(13,12,16,.60),transparent 80%); }
html[dir='rtl'] .studio-backdrop::after { background:linear-gradient(270deg,rgba(13,12,16,.55),rgba(13,12,16,.20)),linear-gradient(0deg,rgba(13,12,16,.60),transparent 80%); }
.studio-coordinate { display:none; }

/* Simulator help extends the graphite and chrome vocabulary into a control panel. */
.help { padding-block:48px; border:0; background:var(--deep); }
.help-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:32px; padding:32px; border:1px solid var(--line-bright); border-radius:18px; background:radial-gradient(ellipse at 100% 0,rgba(139,40,227,.12),transparent 65%),linear-gradient(135deg,rgba(255,255,255,.055),transparent 60%),var(--surface); box-shadow:inset 0 1px 0 #ffffff12; }
.help-copy { min-inline-size:0; }
.help-heading { display:flex; gap:16px; align-items:center; }
.help-emblem { display:grid; place-items:center; flex:none; inline-size:48px; block-size:48px; border:1px solid #ffffff38; border-radius:12px; background:linear-gradient(145deg,#ffffff18,#ffffff03); color:var(--silver); }
.help svg { inline-size:22px; block-size:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.help-heading h2 { font-size:1.5rem; line-height:1.3; }
.help-heading p { margin-block-start:6px; color:var(--silver); font-size:.875rem; }
.help details { max-inline-size:none; margin-block-start:20px; }
.help summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; border-block-start:1px solid var(--line); list-style:none; }
.help summary::-webkit-details-marker { display:none; }
.help details[open] summary .chevron { transform:rotate(180deg); }
.help-guides { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding-block:20px 8px; }
.help-guides h3 { margin-block-start:12px; font-size:.875rem; }
.help details p { margin:12px 0 20px; font-size:.875rem; line-height:1.8; }
.help .text-link { min-block-size:48px; }
.help-return { margin-block-start:4px; }
@media(max-width:1099px) {
  .help-inner { grid-template-columns:minmax(0,1fr); gap:24px; }
  .help-return { justify-self:start; }
}
@media(max-width:699px) {
  .stage { block-size:100vh; block-size:100svh; }
  .chrome-base { margin-block-start:24px; }
  .chrome-opening { padding-block-start:calc(var(--header-height) + 80px); }
  .studio-backdrop img,.studio-backdrop video { object-position:55% center; }
  .studio-backdrop::after,html[dir='rtl'] .studio-backdrop::after { background:linear-gradient(0deg,rgba(13,12,16,.65),rgba(13,12,16,.30) 85%); }
  .help { padding-block:32px; }
  .help-inner { padding:24px; gap:24px; }
  .help-heading { align-items:start; gap:12px; }
  .help-heading h2 { font-size:1.25rem; }
  .help-guides { grid-template-columns:minmax(0,1fr); gap:20px; }
  .help-guides > div + div { padding-block-start:20px; border-block-start:1px solid var(--line); }
  .help-return { inline-size:100%; justify-self:stretch; white-space:normal; }
}
@media(prefers-reduced-motion:reduce) {
  .studio-backdrop video { display:none!important; }
}

.ls-support-services,
.ls-support-why,
.ls-support-contact {
  padding: 96px var(--inset);
  background: var(--ink);
}

/* Let enlarged localized text wrap inside the grid instead of widening it. */
.ls-support-service-copy,
.ls-support-service-tab,
.ls-support-process-copy,
.ls-support-contact-copy,
.ls-support-contact-actions,
.ls-support-footer > * {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.ls-support-contact-copy,
.ls-support-map {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.ls-support-section-heading,
.ls-support-why-heading,
.ls-support-contact-copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px 24px;
  max-inline-size: 1280px;
  margin-inline: auto;
}

.ls-support-section-heading .eyebrow,
.ls-support-why-heading .eyebrow,
.ls-support-contact-copy .eyebrow {
  grid-column: 1 / -1;
}

.ls-support-section-heading h2,
.ls-support-why-heading h2,
.ls-support-contact-copy h2 {
  grid-column: 1 / 9;
  font-size: var(--heading);
}

.ls-support-section-heading > p:last-child,
.ls-support-why-heading > .ls-support-simulator-link,
.ls-support-contact-copy > p:last-child {
  grid-column: 9 / -1;
  align-self: end;
  color: var(--silver);
}

.ls-support-register {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  max-inline-size: 1280px;
  margin: 48px auto 0;
}

.ls-support-service-index {
  grid-column: 1 / 5;
  display: flex;
  flex-direction: column;
  align-self: start;
}

.ls-support-service-tablist {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--line-bright);
}

.ls-support-service-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 54px;
  padding: 10px 4px;
  border-block-end: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
  text-align: start;
  transition: color 120ms var(--align), padding-inline 120ms var(--align);
}

.ls-support-service-tab::after {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -1px;
  inline-size: 0;
  block-size: 2px;
  background: var(--chrome);
  content: '';
  transition: inline-size 120ms var(--align);
}

.ls-support-service-tab span,
.ls-support-panel-number {
  color: var(--silver);
  font: 600 .6875rem/1 Montserrat, Arial, sans-serif;
  letter-spacing: .12em;
}

.ls-support-service-tab.is-active,
.ls-support-service-tab[aria-selected='true'] {
  color: var(--white);
  padding-inline: 12px 4px;
}

.ls-support-service-tab.is-active::after,
.ls-support-service-tab[aria-selected='true']::after {
  inline-size: 44px;
}

.ls-support-service-panels {
  grid-column: 5 / -1;
}

.ls-support-service-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr);
  min-block-size: 440px;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 64px -28px #000b;
}

.ls-support-service-panel + .ls-support-service-panel {
  margin-block-start: 16px;
}

.ls-support-service-copy {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 4vw, 52px);
}

.ls-support-panel-number {
  margin-block-end: auto;
  opacity: .7;
}

.ls-support-service-copy .eyebrow {
  margin-block: 32px 12px;
}

.ls-support-service-copy h3 {
  font-size: clamp(1.75rem, 3vw, 2.7rem);
}

.ls-support-service-copy > p:not(.eyebrow):not(.ls-support-panel-number):not(.ls-support-terms) {
  margin-block-start: 16px;
  color: var(--silver);
}

.ls-support-service-copy ul {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--silver);
  font-size: .875rem;
}

.ls-support-service-copy li {
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--line-bright);
}

.ls-support-terms {
  margin: 0;
  color: var(--muted);
  font-size: .8125rem;
}

.ls-support-service-cta {
  display: grid;
  justify-items: start;
  gap: 20px;
  margin-block-start: 24px;
}

.ls-support-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ls-support-panel-quote {
  margin: 0;
}

.ls-support-simulator-link {
  justify-self: start;
}

.ls-support-service-media {
  position: relative;
  min-block-size: 100%;
  background: var(--deep);
}

.ls-support-service-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surface), transparent 55%), linear-gradient(0deg, rgba(13, 12, 16, .56), transparent 50%);
  content: '';
  pointer-events: none;
}

.ls-support-service-media--graphite {
  background: radial-gradient(circle at 24% 24%, rgba(255, 255, 255, .16) 0 1px, transparent 2px), radial-gradient(circle at 70% 62%, rgba(255, 255, 255, .12) 0 1px, transparent 2px), radial-gradient(circle at 43% 78%, rgba(139, 40, 227, .4) 0 1px, transparent 3px), linear-gradient(135deg, #0d0c10, #2b2a31 48%, #121117);
  background-size: 28px 28px, 42px 42px, 54px 54px, auto;
}

.ls-support-service-media--graphite > span {
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: inset 0 0 0 20px rgba(255, 255, 255, .025), 0 0 0 34px rgba(255, 255, 255, .018), 0 0 62px rgba(139, 40, 227, .15);
}

html[dir='rtl'] .ls-support-service-media::after {
  background: linear-gradient(270deg, var(--surface), transparent 55%), linear-gradient(0deg, rgba(13, 12, 16, .56), transparent 50%);
}

.ls-support-service-media picture,
.ls-support-service-media img {
  display: block;
  block-size: 100%;
  inline-size: 100%;
}

.ls-support-service-media img {
  object-fit: cover;
}

.ls-support-autoplay-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  gap: 8px;
  max-inline-size: 100%;
  min-block-size: 48px;
  margin-block-start: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: transparent;
  color: var(--silver);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: start;
}

.ls-support-autoplay-control svg,
.ls-support-contact-actions svg,
.ls-support-footer svg {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ls-support-contact-actions .whatsapp,
.ls-support-footer .whatsapp {
  fill: currentColor;
  stroke: none;
}

.ls-support-autoplay-control:hover,
.ls-support-autoplay-control:focus-visible {
  border-color: var(--chrome);
  color: var(--white);
}

[data-service-register]:not([data-ls-services-ready='true']) .ls-support-autoplay-control {
  display: none;
}

/* JS makes the panel a measured stage. The untouched source stays fully readable. */
.ls-support-measurement {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  contain: layout paint;
}

/* Reserve both labels so manual takeover cannot grow the register at text zoom. */
.ls-support-autoplay-labels { display:grid; min-inline-size:0; }
.ls-support-autoplay-labels > span { grid-area:1 / 1; }
.ls-support-autoplay-reserve { visibility:hidden; }
.ls-support-register .ls-support-measurement .ls-support-service-panel {
  position: relative;
  inset: auto;
  min-block-size: 440px;
  margin: 0;
  transform: none;
  transition: none;
}
@media (max-width: 699px) {
  .ls-support-register .ls-support-measurement .ls-support-service-panel { min-block-size: 640px; }
}

[data-ls-services-ready='true'] .ls-support-service-panels {
  position: relative;
  min-block-size: var(--ls-register-panel-height);
}

[data-ls-services-ready='true'] .ls-support-service-panel {
  position: absolute;
  inset: 0;
  min-block-size: var(--ls-register-panel-height);
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--ls-register-entry, 16px));
  transition: opacity 280ms var(--align), transform 280ms var(--align);
}

html[dir='rtl'] [data-ls-services-ready='true'] .ls-support-service-panel {
  --ls-register-entry: -16px;
}

[data-ls-services-ready='true'] .ls-support-service-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

[data-ls-services-ready='true'] .ls-support-service-panel.is-exiting {
  opacity: 0;
  transform: translateX(calc(var(--ls-register-entry, 16px) * -1));
  transition-duration: 120ms;
}

.ls-support-why {
  position: relative;
  overflow: hidden;
  border-block-start: 1px solid var(--line);
  background: var(--deep);
}

.ls-support-why::before {
  position: absolute;
  inset: -30% 45% auto -20%;
  block-size: 420px;
  background: radial-gradient(circle, rgba(139, 40, 227, .13), transparent 67%);
  content: '';
  pointer-events: none;
}

.ls-support-why-heading,
.ls-support-medallions,
.ls-support-process {
  position: relative;
  z-index: 1;
  max-inline-size: 1280px;
  margin-inline: auto;
}

.ls-support-medallions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-block: 48px 64px;
}

.ls-support-medallion {
  display: flex;
  align-items: center;
  gap: 20px;
  min-block-size: 148px;
  padding: 18px;
  border: 1px solid var(--line-bright);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 46%, rgba(139, 40, 227, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 44px rgba(255, 255, 255, .035);
}

.ls-support-medallion bdi {
  display: grid;
  flex: 0 0 90px;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  background: conic-gradient(from 220deg, #92939a, #fff, #73747c, #f6f6f8, #a5a6ad, #92939a);
  box-shadow: inset 0 0 0 7px var(--surface), 0 0 0 1px rgba(255, 255, 255, .16), 0 0 28px rgba(255, 255, 255, .08);
  color: var(--void);
  font: 800 1.45rem/.95 Montserrat, Arial, sans-serif;
  letter-spacing: -.06em;
}

.ls-support-medallion h3 {
  font-size: 1rem;
}

.ls-support-medallion p {
  margin-block-start: 6px;
  color: var(--muted);
  font-size: .8125rem;
}

.ls-support-process {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}

.ls-support-process.ls-support-enter {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 280ms var(--align), transform 280ms var(--align);
}

.ls-support-process.ls-support-enter.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.ls-support-process-media,
.ls-support-process-install {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--void);
}

.ls-support-process-media {
  grid-column: 1 / 4;
  align-self: end;
  margin-block-end: 34px;
}

.ls-support-process-install {
  grid-column: 10 / -1;
  align-self: start;
  margin-block-start: 54px;
}

.ls-support-process-media picture,
.ls-support-process-install picture,
.ls-support-process-media img,
.ls-support-process-install img {
  display: block;
  inline-size: 100%;
}

.ls-support-process-media img,
.ls-support-process-install img {
  aspect-ratio: 9 / 13;
  object-fit: cover;
}

.ls-support-process-media p {
  padding: 12px;
  color: var(--silver);
  font-size: .75rem;
}

.ls-support-process-copy {
  grid-column: 4 / 10;
  padding: 32px 0;
}

.ls-support-process-copy h3 {
  margin-block-start: 12px;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
}

.ls-support-process-copy ol {
  position: relative;
  display: grid;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.ls-support-process-copy ol::before {
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 17px;
  inline-size: 1px;
  background: linear-gradient(var(--line-bright), rgba(255, 255, 255, .03));
  content: '';
}

.ls-support-process-copy li {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
}

.ls-support-process-copy li > span {
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--raised);
  color: var(--silver);
  font: 600 .6875rem/1 Montserrat, Arial, sans-serif;
}

.ls-support-process-copy h4 {
  font-size: .9375rem;
}

.ls-support-process-copy li p {
  margin-block-start: 2px;
  color: var(--muted);
  font-size: .8125rem;
}

.ls-support-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 48px;
  align-items: stretch;
  background: var(--ink);
}

.ls-support-contact-copy {
  display: block;
  margin: 0;
}

.ls-support-contact-copy h2 {
  margin-block: 12px 16px;
}

.ls-support-contact-copy > p:last-child,
.ls-support-contact-copy address,
.ls-support-contact-actions {
  max-inline-size: 460px;
}

.ls-support-contact-copy > p:last-child {
  color: var(--silver);
}

.ls-support-contact-copy address {
  margin: 28px 0 0;
  padding: 18px 0;
  border-block: 1px solid var(--line);
  color: var(--silver);
  font-style: normal;
}

.ls-support-contact-copy address p + p {
  margin-block-start: 8px;
  color: var(--muted);
  font-size: .875rem;
}

.ls-support-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-block-start: 24px;
}

.ls-support-contact-actions > .btn {
  grid-column: 1 / -1;
  inline-size: 100%;
}

.ls-support-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  min-block-size: 48px;
  padding: 10px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  color: var(--silver);
  font-size: .875rem;
}

.ls-support-map {
  position: relative;
  min-block-size: 520px;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 18px;
  background: var(--surface);
}

.ls-support-map iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 520px;
  border: 0;
  filter: grayscale(.82) contrast(1.15) brightness(.72);
}

.ls-support-map .text-link {
  position: absolute;
  inset-inline-start: 20px;
  inset-block-end: 20px;
  padding: 12px 14px;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  background: rgba(19, 18, 23, .92);
}

.ls-support-footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
  padding: 48px var(--inset);
  border-block-start: 1px solid var(--line);
  background: var(--void);
}

.ls-support-footer-brand img {
  inline-size: 158px;
  block-size: auto;
}

.ls-support-footer p {
  max-inline-size: 280px;
  margin-block-start: 14px;
  color: var(--muted);
  font-size: .8125rem;
}

.ls-support-footer nav,
.ls-support-footer-actions {
  display: grid;
  align-content: start;
  gap: 9px;
}

.ls-support-footer a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--silver);
  font-size: .8125rem;
}

.ls-support-footer-language {
  display: grid;
  gap: 6px;
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
}

.ls-support-footer-language-label,
.ls-support-footer-language-choices {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .75rem;
}

.ls-support-footer-language-choices a,
.ls-support-footer-language-choices span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  min-block-size: 44px;
  border-radius: 8px;
}

.ls-support-footer-language-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-inline-size: 240px;
  padding: 4px;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
}

.ls-support-footer-language-label svg {
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ls-support-footer-language-choices [aria-current='true'] {
  color: var(--white);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px #ffffff30;
}

.ls-support-footer-actions > a { gap: 8px; }

.ls-support-footer-credit {
  grid-column: 1 / -1;
  margin-block-start: 18px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 699px) {
  .ls-support-services,
  .ls-support-why,
  .ls-support-contact {
    padding-block: 64px;
  }

  .ls-support-section-heading,
  .ls-support-why-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ls-support-section-heading h2,
  .ls-support-why-heading h2,
  .ls-support-section-heading > p:last-child,
  .ls-support-why-heading > .ls-support-simulator-link {
    grid-column: 1;
  }

  .ls-support-service-actions {
    inline-size: 100%;
  }

  .ls-support-service-actions .btn {
    flex: 1 1 190px;
  }

  .ls-support-register {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-block-start: 32px;
  }

  .ls-support-service-index,
  .ls-support-service-panels {
    grid-column: 1;
  }

  .ls-support-service-index {
    display: block;
  }

  .ls-support-service-tablist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-inline-start: 1px solid var(--line);
  }

  .ls-support-service-tab {
    min-block-size: 58px;
    gap: 8px;
    padding: 9px 10px;
    border-inline-end: 1px solid var(--line);
    font-size: .75rem;
  }

  .ls-support-service-tab.is-active,
  .ls-support-service-tab[aria-selected='true'] {
    padding-inline: 10px;
  }

  .ls-support-service-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 210px;
    min-block-size: 640px;
  }

  .ls-support-service-copy {
    min-block-size: 0;
    padding: 24px;
  }

  .ls-support-service-copy .eyebrow {
    margin-block: 22px 10px;
  }

  .ls-support-service-media {
    min-block-size: 210px;
    block-size: 210px;
  }

  .ls-support-service-media img {
    object-position: center 58%;
  }

  .ls-support-autoplay-control {
    margin-block-start: 12px;
  }

  [data-ls-services-ready='true'] .ls-support-service-panel {
    --ls-register-entry: 12px;
  }

  html[dir='rtl'] [data-ls-services-ready='true'] .ls-support-service-panel {
    --ls-register-entry: -12px;
  }

  .ls-support-medallions {
    gap: 12px;
    margin-block: 32px 48px;
  }

  .ls-support-medallion {
    display: block;
    min-block-size: 184px;
    padding: 14px;
  }

  .ls-support-medallion bdi {
    inline-size: 62px;
    font-size: 1rem;
  }

  .ls-support-medallion h3 {
    margin-block-start: 13px;
    font-size: .8125rem;
  }

  .ls-support-medallion p {
    font-size: .6875rem;
  }

  .ls-support-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .ls-support-process-media {
    grid-column: 1 / 3;
    margin-block-end: 28px;
  }

  .ls-support-process-install {
    grid-column: 3 / -1;
    margin-block-start: 40px;
  }

  .ls-support-process-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 12px 0;
  }

  .ls-support-process-copy h3 {
    font-size: 1.7rem;
  }

  .ls-support-process-copy ol {
    gap: 16px;
    margin-block-start: 24px;
  }

  .ls-support-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .ls-support-map,
  .ls-support-map iframe {
    min-block-size: 390px;
  }

  .ls-support-footer {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    padding-block: 36px;
  }

  .ls-support-footer-brand {
    grid-column: 1 / -1;
  }

  .ls-support-contact-actions .btn,
  .ls-support-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    box-sizing: border-box;
  }

  .ls-support-contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ls-support-contact-actions .btn {
    grid-column: 1 / -1;
    inline-size: 100%;
  }

  .ls-support-contact-link {
    inline-size: 100%;
    padding: 10px;
    border: 1px solid var(--line-bright);
    border-radius: 10px;
  }
}

@media (max-width: 349px) {
  .ls-support-medallion {
    min-block-size: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-support-autoplay-control { display: none; }
  [data-ls-services-ready='true'] .ls-support-service-panel,
  [data-ls-services-ready='true'] .ls-support-service-panel.is-exiting,
  .ls-support-service-tab,
  .ls-support-service-tab::after {
    transition: none;
    transform: none;
  }

  .ls-support-process.ls-support-enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}