/* Version-owned homepage styling. Shared and approved designs stay separate. */
.preview-footer {margin-top:auto; border-top:1px solid var(--color-line); background:var(--color-ink-2); color:var(--color-cream);}
.preview-footer-grid {display:grid; grid-template-columns:1.2fr 1fr 1.1fr; gap:48px; padding-block:40px 30px;}
.preview-footer-identity img {width:130px; height:auto; display:block; margin-bottom:20px;}
.preview-footer-identity > p {font-size:19px; line-height:1.5; max-width:290px; font-weight:500; margin:0 0 12px;}
.preview-footer-area {font-size:13px; line-height:1.6; color:var(--color-muted); display:block; max-width:260px;}
.preview-footer h2 {font-size:11px; line-height:1.5; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--color-muted); margin:0 0 22px;}
.preview-footer ul {list-style:none; padding:0; margin:0; display:grid; gap:2px;}
.preview-footer-services a {display:inline-block; padding-block:7px; font-size:14px; line-height:1.5;}
.preview-footer a {text-decoration:none; transition:color .15s;}
.preview-footer a:hover {text-decoration:underline; text-underline-offset:5px;}
.preview-footer a:focus-visible {outline:2px solid currentColor; outline-offset:5px; border-radius:2px;}
.preview-footer-phone {display:block; width:fit-content; font-size:clamp(20px,2vw,25px); font-weight:500; line-height:1.5; margin-bottom:8px;}
.preview-footer-email {display:block; width:fit-content; font-size:14px; overflow-wrap:anywhere;}
.preview-footer-address {font-size:13px; line-height:1.65; margin:22px 0 8px; color:var(--color-muted);}
.preview-footer-hours {font-size:12px; color:var(--color-muted); line-height:1.6; margin:0;}
.preview-footer-message {display:inline-flex; align-items:center; gap:12px; padding-block:12px; font-size:13px; margin-top:10px;}
.preview-footer-bottom {border-top:1px solid var(--color-line); padding-block:22px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.preview-footer-bottom p {font-size:11px; color:var(--color-muted); line-height:1.6; margin:0;}
.preview-footer-bottom nav,.preview-footer-socials {display:flex; flex-wrap:wrap; gap:8px 24px; font-size:12px;}
.preview-footer-bottom nav a {padding-block:8px;}
.preview-footer-socials {margin-top:18px;}
@media(max-width:900px) {.preview-footer-grid {gap:32px; grid-template-columns:1fr 1fr;} .preview-footer-identity {grid-column:1/-1; display:grid; grid-template-columns:130px 1fr; column-gap:28px; align-items:center;} .preview-footer-identity > a {grid-row:1/3;} .preview-footer-identity img {margin:0;} .preview-footer-identity > p {max-width:340px;} .preview-footer-bottom {align-items:flex-start; flex-direction:column; gap:8px;}}
@media(max-width:480px) {.preview-footer-grid {padding-block:32px 28px; grid-template-columns:1fr; gap:30px;} .preview-footer-identity {grid-template-columns:90px 1fr; gap:8px 20px;} .preview-footer-identity img {width:90px;} .preview-footer-identity > p {font-size:16px; margin:0;} .preview-footer-area {font-size:11px;} .preview-footer h2 {margin-bottom:12px;} .preview-footer-services ul {grid-template-columns:1fr 1fr; gap:0 18px;} .preview-footer-services a {font-size:13px; padding-block:10px;} .preview-footer-contact {border-top:1px solid var(--color-line); padding-top:24px;} .preview-footer-address {margin-top:16px;} .preview-footer-bottom nav {gap:4px 18px;} }

/* Platform colors stay visible in both themes, including on hover. */
.preview-social-row {display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; padding-block:24px; border-top:1px solid var(--color-line);}
.preview-social-icon {display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--color-cream); border-radius:50%; flex:none;}
a.preview-social-icon:hover {background:var(--color-line);}
.preview-social-icon svg {width:22px; height:22px; overflow:visible;}
@media(max-width:480px) {.preview-social-row {gap:4px; padding-block:18px;} .preview-social-icon {width:40px; height:44px;} .preview-social-icon svg {width:20px; height:20px;}}

/* One bottom bar: social, legal, locale. */
.preview-footer-bottom {display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding-block:24px;}
.preview-footer-bottom .preview-social-row {justify-content:flex-start; gap:2px; padding:0; border:0; flex-wrap:nowrap; direction:ltr;}
.preview-footer-bottom .preview-social-icon {width:36px; height:44px;}
.preview-footer-bottom .preview-social-icon svg {width:18px; height:18px;}
.preview-footer-legal {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; font-size:12px; line-height:1.6;}
.preview-footer-legal p {font-size:12px; color:var(--color-cream);}
.preview-footer-legal a {text-decoration:underline; text-underline-offset:3px;}
.preview-footer-locale {position:relative; justify-self:end; font-size:13px;}
.preview-footer-locale summary {display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; background:var(--color-line); cursor:pointer; list-style:none;}
.preview-footer-locale summary::-webkit-details-marker {display:none;}
.preview-footer-locale summary:focus-visible {outline:2px solid currentColor; outline-offset:4px;}
.preview-footer-region {color:var(--color-muted);}
.preview-footer-languages {position:absolute; bottom:calc(100% + 8px); inset-inline-end:0; width:180px; padding:6px; background:var(--color-ink-2); border:1px solid var(--color-line-strong); border-radius:12px; box-shadow:0 8px 24px #0003; z-index:5;}
.preview-footer-languages button {display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:10px 12px; border-radius:6px; cursor:pointer;}
.preview-footer-languages button:hover {background:var(--color-line);}
@media(max-width:1000px) {.preview-footer-bottom {grid-template-columns:1fr auto; gap:12px;} .preview-footer-legal {grid-row:2; grid-column:1/-1; justify-content:flex-start;} .preview-footer-locale {grid-row:1; grid-column:2;}}
@media(max-width:540px) {.preview-footer-bottom {grid-template-columns:1fr; justify-items:center; gap:18px;} .preview-footer-bottom .preview-social-row {justify-content:center;} .preview-footer-legal {grid-row:2; justify-content:center; font-size:11px;} .preview-footer-locale {grid-row:3; grid-column:1; justify-self:center;} .preview-footer-legal p {font-size:11px;}}

/* A shorter desktop footer with a wider service index. */
@media(min-width:1100px) {
  .preview-footer-grid {grid-template-columns:1fr 1.35fr 1fr;}
  .preview-footer-services ul {grid-template-columns:1fr 1fr; column-gap:24px; row-gap:6px;}
  .preview-footer-services a {min-height:44px; display:flex; align-items:center;}
}

/* Footer identity is text-only at every screen size. */
.preview-footer-identity {display:block;}

/* Legal left, social right, with open space between. */
.preview-footer-bottom {display:flex; flex-direction:row; justify-content:space-between; align-items:center; direction:ltr; flex-wrap:wrap; gap:16px 32px;}
.preview-footer-bottom .preview-footer-legal {order:0; justify-content:flex-start;}
.preview-footer-bottom .preview-social-row {order:1; justify-content:flex-end; margin-left:auto;}
[dir="rtl"] .preview-footer-legal {direction:rtl;}

/* Consistent footer typography: 14px copy, weight-only section headings. */
.preview-footer {font-size:14px; line-height:1.65; font-weight:400;}
.preview-footer .preview-footer-identity > p,
.preview-footer .preview-footer-area,
.preview-footer .preview-footer-services a,
.preview-footer .preview-footer-phone,
.preview-footer .preview-footer-email,
.preview-footer .preview-footer-address,
.preview-footer .preview-footer-hours,
.preview-footer .preview-footer-message,
.preview-footer .preview-footer-socials {font-size:14px; line-height:1.65; font-weight:400;}
.preview-footer h2 {font-size:14px; line-height:1.65; font-weight:600; text-transform:none; letter-spacing:normal; margin-bottom:16px; color:var(--color-cream);}
.preview-footer .preview-footer-identity > p {margin:0 0 12px;}
.preview-footer .preview-footer-legal,
.preview-footer .preview-footer-legal p {font-size:12px; line-height:1.65; font-weight:400;}

/* Contact preview: one clear action and quieter direct contact links. */
.preview-contact .cta-panel {border:0; border-radius:0; background:transparent; overflow:visible; gap:40px; align-items:center;}
.preview-contact .cta-main {padding:0;}
.preview-contact .cta-panel h2 {font-size:clamp(30px,3.2vw,44px); font-weight:600; line-height:1.15; letter-spacing:-.025em; max-width:none; margin-top:14px;}
[dir="rtl"] .preview-contact .cta-panel h2 {letter-spacing:0; line-height:1.4;}
.preview-contact .cta-lede {font-size:16px; line-height:1.75; margin-top:18px; max-width:49ch;}
.preview-contact .cta-actions {margin-top:24px;}
.preview-contact .cta-actions .btn {min-height:46px; padding-inline:24px; border-radius:8px; background:var(--color-cream); color:var(--color-ink); border:1px solid var(--color-cream); box-shadow:none;}
.preview-contact .cta-actions .btn:hover {opacity:.85;}
.preview-contact .cta-tiles {display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:28px; padding-top:20px; border-top:1px solid var(--color-line);}
.preview-contact .cta-tile {border:0; border-radius:0; background:transparent; padding:8px 0; gap:10px; min-height:44px;}
.preview-contact .cta-tile-icon {width:20px; height:20px; border:0; background:none; border-radius:0; color:var(--color-muted);}
.preview-contact .cta-tile-icon svg {width:18px; height:18px;}
.preview-contact .cta-tile-text {gap:2px;}
.preview-contact .cta-tile-label {font-size:12px; line-height:1.5;}
.preview-contact .cta-tile-value {font-size:14px; font-weight:400; line-height:1.6;}
.preview-contact .cta-tile-arrow {display:none;}
.preview-contact .cta-tile:hover .cta-tile-value {text-decoration:underline; text-underline-offset:4px;}
.preview-contact .cta-photo {order:0; min-height:0; height:240px; border:0; border-radius:16px; overflow:hidden;}
.preview-contact .cta-photo img {height:100%; width:100%; object-fit:cover;}
.preview-contact .cta-photo figcaption {font-size:11px;}
@media(min-width:1024px) {.preview-contact .cta-panel--photo {grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:80px;} .preview-contact .cta-photo {height:360px;}}
@media(max-width:480px) {.preview-contact .cta-tiles {gap:4px 24px;} .preview-contact .cta-photo {height:210px;} .preview-contact .cta-panel {gap:28px;}}

.c4-gallery {min-width:0; width:100%;}
.c4-gallery-stage {position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:16px; background:var(--color-ink-2);}
.c4-gallery-slide {position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s;}
.c4-gallery-slide.is-active {opacity:1; visibility:visible;}
.c4-gallery-slide img {display:block; width:100%; height:100%; object-fit:cover;}
.c4-gallery-slide figcaption {position:absolute; inset-inline:0; bottom:0; padding:42px 20px 16px; font-size:13px; line-height:1.6; color:white; background:linear-gradient(transparent,#000b);}
.c4-gallery-controls {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; padding-top:8px;}
.c4-gallery-controls[hidden] {display:none;}
.c4-gallery-credit {font-size:11px; color:var(--color-muted);}
.c4-gallery-buttons {display:flex; align-items:center;}
.c4-gallery-buttons button {display:grid; place-items:center; width:32px; height:44px; cursor:pointer; color:var(--color-cream);}
.c4-gallery-dot span {width:6px; height:6px; border-radius:50%; background:var(--color-muted);}
.c4-gallery-dot[aria-pressed="true"] span {width:18px; border-radius:6px; background:var(--color-cream);}
.c4-gallery-buttons button:focus-visible {outline:2px solid currentColor; outline-offset:1px; border-radius:4px;}
@media(prefers-reduced-motion:reduce) {.c4-gallery-slide {transition:none;}}

.c4-gallery-stage {cursor:grab; touch-action:pan-y; user-select:none; overscroll-behavior-inline:contain;}
.c4-gallery-stage.is-dragging {cursor:grabbing;}
.c4-gallery-stage.is-dragging .c4-gallery-slide.is-active,
.c4-gallery-stage.is-dragging .c4-gallery-slide.is-drag-neighbor {transition:none;}
.c4-gallery-slide.is-drag-neighbor {opacity:1; visibility:visible;}
.c4-gallery-slide.is-settling {transition:transform .25s cubic-bezier(.22,.8,.35,1); opacity:1; visibility:visible;}
.c4-gallery-slide.is-drag-outgoing {opacity:0; visibility:hidden; transition:none;}
.c4-gallery-slide img {-webkit-user-drag:none;}

/* Give the automatically rotating product images more room. */
@media(min-width:1024px) {.preview-contact .cta-panel--photo {grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr); gap:48px;}}
@media(max-width:480px) {.c4-gallery-stage {aspect-ratio:6/5;}}

/* Keep pagination centered and stable as the active slide changes. */
.c4-gallery-controls {position:relative; justify-content:center; padding:8px 44px 22px; min-height:74px;}
.c4-gallery-credit {position:absolute; bottom:0; inset-inline:0; text-align:center; font-size:10px; line-height:1.5;}
.c4-gallery-buttons {gap:0;}
.c4-gallery-buttons .c4-gallery-dot {width:24px; height:44px;}
.c4-gallery-dot span {width:7px; height:7px; background:transparent; border:1px solid var(--color-muted); transition:background .2s, border-color .2s;}
.c4-gallery-dot[aria-pressed="true"] span {width:7px; height:7px; border-radius:50%; border-color:var(--color-cream); background:var(--color-cream);}
.c4-gallery-buttons .c4-gallery-toggle {position:absolute; inset-inline-end:0; top:8px; width:44px; height:44px; font-size:14px; border-radius:50%;}
.c4-gallery-toggle:hover {background:var(--color-line);}

/* Keep the pause control available to keyboard users without a visible icon. */
.c4-gallery-buttons .c4-gallery-toggle:not(:focus-visible) {width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;}

/* A single physical track keeps both swipe directions continuous. */
.c4-gallery-track {display:flex; direction:ltr; width:100%; height:100%; transform:translate3d(-100%,0,0); will-change:transform; backface-visibility:hidden;}
.c4-gallery-track.is-animating {transition:transform .24s cubic-bezier(.2,.82,.2,1);}
.c4-gallery-track .c4-gallery-slide {position:relative; inset:auto; flex:0 0 100%; width:100%; height:100%; opacity:1; visibility:visible; transition:none;}
.c4-gallery-track .c4-gallery-slide,
.c4-gallery-track .c4-gallery-slide img {backface-visibility:hidden; transform:translateZ(0);}
[dir="rtl"] .c4-gallery-slide figcaption {direction:rtl; text-align:right;}
.c4-gallery-stage.is-dragging .c4-gallery-track {transition:none;}
@media(prefers-reduced-motion:reduce) {.c4-gallery-track.is-animating {transition:none;}}
@media(max-width:480px) {
  .c4-gallery-controls {overflow-x:clip;}
  .c4-gallery-buttons .c4-gallery-dot {width:16px;}
}

/* Match the homepage X4 demo to the width of the "Let's design yours" gallery. */
@media(min-width:1180px) {
  .home-service-panel:has(.x4-device-stage) {grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr); gap:48px;}
  .home-service-panel:has(.x4-device-stage) .hx-demo {width:100%; max-width:none; justify-self:stretch;}
}

/* A quiet, connected process that shares the hero's copper and type scale. */
.preview-process > .shell {
  padding-block:44px 12px;
  border-top:1px solid var(--color-line);
}
.preview-process .process-heading {margin-bottom:44px;}
.preview-process .process-heading h2 {
  max-width:24ch;
  font-size:clamp(28px,3.2vw,44px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.025em;
  text-wrap:balance;
}
#process.preview-process .home-label::before {content:""; display:block; background:var(--color-accent-500);}
.preview-process .process-timeline {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  list-style:none;
  padding:0;
  margin:0;
}
.preview-process .process-step {min-width:0;}
.preview-process .process-marker {display:flex; align-items:center;}
.preview-process .process-number {
  display:grid;
  place-items:center;
  flex:0 0 44px;
  height:44px;
  border:1px solid color-mix(in srgb,var(--color-accent-500) 45%,var(--color-line));
  border-radius:50%;
  background:color-mix(in srgb,var(--color-accent-600) 7%,var(--color-ink));
  color:var(--color-accent-300);
  font-size:13px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.preview-process .process-step:not(:last-child) .process-marker::after {
  content:"";
  flex:1;
  height:1px;
  margin-inline:14px;
  background:var(--color-line);
}
.preview-process .process-copy {padding-block-start:24px; padding-inline-end:36px;}
.preview-process .process-step:last-child .process-copy {padding-inline-end:0;}
.preview-process .process-copy h3 {
  margin:0 0 12px;
  color:var(--color-cream);
  font-size:21px;
  line-height:1.4;
  letter-spacing:-.02em;
  font-weight:500;
}
.preview-process .process-copy p {
  margin:0;
  max-width:36ch;
  color:var(--color-muted);
  font-size:15px;
  line-height:1.8;
  text-wrap:pretty;
}
[dir="rtl"] .preview-process .process-heading h2 {line-height:1.5; letter-spacing:0;}
[dir="rtl"] .preview-process .process-copy h3 {letter-spacing:0;}
[dir="rtl"] .preview-process .process-copy p {line-height:1.9;}
@media(max-width:899px) {
  .preview-process > .shell {padding-block:32px 0;}
  .preview-process .process-heading {margin-bottom:32px;}
  .preview-process .process-timeline {grid-template-columns:1fr; gap:28px;}
  .preview-process .process-step {position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:20px;}
  .preview-process .process-marker {align-self:start;}
  .preview-process .process-step:not(:last-child) .process-marker::after {display:none;}
  .preview-process .process-step:not(:last-child)::after {
    content:"";
    position:absolute;
    inset-inline-start:21.5px;
    top:54px;
    bottom:-18px;
    width:1px;
    background:var(--color-line);
  }
  .preview-process .process-copy,
  [dir="rtl"] .preview-process .process-copy {padding:7px 0 0;}
  .preview-process .process-copy h3 {font-size:19px; margin-bottom:8px;}
  .preview-process .process-copy p {max-width:48ch; font-size:14px;}
}

/* Homepage review: a consistent primary action and a more useful mobile hero. */
.preview-hero .hero-coverage {
  margin:0 0 12px;
  color:var(--color-muted);
  font-size:12px;
  line-height:1.6;
}
.preview-hero .home-service-heading h1 {text-wrap:balance;}
.preview-hero .hx-actions .btn-primary,
.preview-contact .cta-actions .btn-primary {
  min-height:46px;
  padding-inline:24px;
  border:1px solid transparent;
  border-radius:8px;
  background-color:var(--color-accent-600);
  background-image:var(--gradient-rose-gold);
  background-size:180% 180%;
  background-position:0% 50%;
  color:var(--color-on-accent);
  font-size:13px;
  font-weight:500;
  box-shadow:none;
}
.preview-contact .cta-actions .btn-primary {gap:24px;}
.preview-contact .cta-actions .btn-primary::after {content:"→"; font-size:18px; line-height:1;}
[dir="rtl"] .preview-contact .cta-actions .btn-primary::after {content:"←";}
.preview-contact .cta-actions .btn-primary:hover {opacity:1; background-position:100% 50%;}
.preview-hero .x4-demo-tools button:focus-visible {outline:2px solid var(--color-accent-400); outline-offset:3px;}

/* Short answers close the gap between the process and the footer. */
.technology-page .preview-faq {padding-block:0 80px;}
.preview-faq .faq-layout {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:48px;
  padding-top:48px;
  border-top:1px solid var(--color-line);
}
.preview-faq h2 {
  margin:14px 0 24px;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.18;
  font-weight:600;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.faq-contact-link {display:inline-flex; align-items:center; min-height:44px; gap:18px; color:var(--color-accent-300); font-size:14px;}
.faq-contact-link:hover {text-decoration:underline; text-underline-offset:5px;}
.faq-contact-link:focus-visible,
.faq-list summary:focus-visible {outline:2px solid var(--color-accent-400); outline-offset:4px; border-radius:4px;}
.faq-list details {border-bottom:1px solid var(--color-line);}
.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
  padding-block:22px;
  list-style:none;
  cursor:pointer;
  font-size:16px;
  font-weight:500;
  line-height:1.5;
}
.faq-list summary::-webkit-details-marker {display:none;}
.faq-list summary:hover {color:var(--color-accent-300);}
.faq-symbol {position:relative; flex:0 0 16px; height:16px; color:var(--color-accent-300);}
.faq-symbol::before,.faq-symbol::after {content:""; position:absolute; background:currentColor; border-radius:1px;}
.faq-symbol::before {inset:7px 1px auto; height:1px;}
.faq-symbol::after {inset:1px auto 1px 7px; width:1px;}
.faq-list details[open] .faq-symbol::after {display:none;}
.faq-answer {padding:0 40px 24px 0;}
[dir="rtl"] .faq-answer {padding:0 0 24px 40px;}
.faq-answer p {margin:0; max-width:60ch; font-size:15px; line-height:1.8; color:var(--color-muted);}
[dir="rtl"] .preview-faq h2 {letter-spacing:0; line-height:1.5;}

@media(max-width:767px) {
  .preview-hero .hero-coverage {font-size:11px; margin-bottom:10px;}
  .preview-hero .home-service-heading .service-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    overflow:visible;
    padding:0;
    margin-block:24px 28px;
  }
  .preview-hero .service-tab {min-height:44px; padding:8px 6px; border-radius:10px; gap:6px; font-size:11px; white-space:normal; line-height:1.35;}
  .preview-hero .service-tab-icon {flex-shrink:0;}
  .preview-hero .home-service-panel .hx-actions {display:flex; align-items:center; flex-wrap:wrap;}
  .preview-hero .home-service-panel .hx-actions .btn-primary {width:auto; min-width:0;}
  .preview-hero .home-service-panel .hx-actions .service-detail-link {min-height:44px; display:inline-flex; align-items:center;}
  .preview-hero .home-service-panel.hx-grid {gap:28px;}
  .preview-hero .x4-demo-tools {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    margin-bottom:16px;
    font-size:11px;
  }
  .preview-hero .x4-demo-tools > span {grid-column:1/-1; justify-content:center;}
  .preview-hero .x4-demo-tools .x4-device-picker {order:0; margin:0; gap:2px; align-self:center;}
  .preview-hero .x4-device-picker button {padding:8px 12px; min-height:38px;}
  .preview-hero .x4-demo-tools > div:last-child {justify-content:flex-end; gap:12px; align-items:center;}
  .preview-hero .x4-demo-tools > div:last-child button {min-height:44px;}
  .preview-hero .x4-demo-tools [data-x4-fullscreen] {padding:8px 10px; border:1px solid var(--color-line-strong); border-radius:8px; color:var(--color-cream);}
  .technology-page .preview-faq {padding-bottom:56px;}
  .preview-faq .faq-layout {grid-template-columns:1fr; gap:24px; padding-top:32px;}
  .preview-faq h2 {margin-bottom:12px;}
  .faq-list summary {font-size:15px; min-height:66px; gap:20px;}
  .faq-answer p {font-size:14px;}
}
@media(max-width:359px) {
  .preview-hero .home-service-heading .service-tabs {grid-template-columns:repeat(2,minmax(0,1fr));}
  .preview-hero .x4-demo-tools {grid-template-columns:1fr;}
  .preview-hero .x4-demo-tools .x4-device-picker {justify-self:center;}
  .preview-hero .x4-demo-tools > div:last-child {justify-content:center;}
}

/* Architecture first: a compact invitation above a wide, curated room view. */
.architectural-contact .contact-intro {display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:48px; margin-bottom:36px;}
.architectural-contact .contact-title h2 {margin:16px 0 0; max-width:12ch; font-size:clamp(36px,4.3vw,60px); line-height:1.05; letter-spacing:-.035em; font-weight:500; text-wrap:balance;}
.architectural-contact .contact-invitation {max-width:46ch; justify-self:end;}
.architectural-contact .contact-invitation > p {font-size:16px; line-height:1.75; color:var(--color-muted); margin:0;}
.architectural-contact .cta-actions {margin-top:20px;}
.architectural-gallery .c4-gallery-stage {aspect-ratio:2.1; border-radius:12px;}
.architectural-gallery .c4-gallery-slide img {object-position:50% 58%;}
.architectural-gallery .c4-gallery-controls {min-height:54px; padding:6px 0; justify-content:space-between; gap:12px;}
.architectural-gallery .c4-gallery-credit {position:static; text-align:start; font-size:11px; line-height:1.6;}
.architectural-gallery .c4-gallery-credit:hover {text-decoration:underline; text-underline-offset:4px;}
.architectural-gallery .c4-gallery-buttons {gap:4px;}
.architectural-gallery .c4-gallery-buttons .c4-gallery-dot {width:40px; height:44px;}
.architectural-gallery .c4-gallery-dot span {width:28px; height:2px; border:0; border-radius:0; background:var(--color-line-strong);}
.architectural-gallery .c4-gallery-dot[aria-pressed="true"] span {width:28px; height:2px; border-radius:0; background:var(--color-accent-400);}
.architectural-gallery .c4-gallery-toggle:focus-visible {position:absolute; top:-54px; inset-inline-end:12px; background:var(--color-surface); border:1px solid var(--color-line-strong);}
.architectural-gallery .c4-gallery-credit:focus-visible,.contact-direct-links a:focus-visible {outline:2px solid var(--color-accent-400); outline-offset:4px;}
.architectural-contact .contact-direct {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin-top:10px; padding-top:16px; border-top:1px solid var(--color-line);}
.architectural-contact .contact-direct > p {margin:0; color:var(--color-muted); font-size:13px;}
.contact-direct-links {display:flex; align-items:center; flex-wrap:wrap; gap:8px 32px;}
.contact-direct-links a {display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px;}
.contact-direct-links a:hover {text-decoration:underline; text-underline-offset:5px;}
.contact-direct-links svg {width:17px; height:17px; color:var(--color-muted);}
[dir="rtl"] .architectural-contact .contact-title h2 {line-height:1.4; letter-spacing:0;}
@media(max-width:767px) {
  .architectural-contact .contact-intro {grid-template-columns:1fr; gap:20px; margin-bottom:28px;}
  .architectural-contact .contact-title h2 {max-width:none; font-size:36px; margin-top:12px;}
  .architectural-contact .contact-invitation {justify-self:start; max-width:48ch;}
  .architectural-contact .contact-invitation > p {font-size:15px;}
  .architectural-gallery .c4-gallery-stage {aspect-ratio:3/2; border-radius:10px;}
  .architectural-gallery .c4-gallery-controls {gap:0 8px; flex-wrap:nowrap; padding-block:8px;}
  .architectural-gallery .c4-gallery-credit {font-size:10px; max-width:22ch;}
  .architectural-gallery .c4-gallery-buttons {gap:0;}
  .architectural-gallery .c4-gallery-buttons .c4-gallery-dot {width:32px;}
  .architectural-gallery .c4-gallery-dot span,.architectural-gallery .c4-gallery-dot[aria-pressed="true"] span {width:22px;}
  .architectural-contact .contact-direct {display:block; margin-top:4px; padding-top:20px;}
  .contact-direct-links {gap:0 24px; margin-top:6px;}
  .contact-direct-links a {font-size:13px; overflow-wrap:anywhere;}
}

/* A quieter type scale: keep hierarchy without making every section a display. */
.technology-page .preview-hero .home-service-heading h1 {
  font-size:clamp(29px,2.65vw,36px);
  font-weight:550;
  line-height:1.2;
  letter-spacing:-.025em;
}
.technology-page .home-service-panel .hx-copy h2 {
  font-size:clamp(26px,2.25vw,31px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.025em;
}
.technology-page .home-service-panel .hx-lede {
  max-width:44ch;
  font-size:15px;
  line-height:1.72;
}
.preview-process .process-heading h2,
.preview-faq h2 {
  font-size:clamp(25px,2.25vw,31px);
  font-weight:500;
  line-height:1.24;
  letter-spacing:-.02em;
}
.preview-process .process-copy h3 {
  font-size:18px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.015em;
}
.preview-process .process-copy p,
.faq-answer p {
  font-size:14px;
  line-height:1.72;
}
.faq-list summary {font-size:15px; line-height:1.55;}
.architectural-contact .contact-title h2 {
  font-size:clamp(30px,2.85vw,40px);
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.025em;
}
.architectural-contact .contact-invitation > p {font-size:15px; line-height:1.72;}
[dir="rtl"] .technology-page .preview-hero .home-service-heading h1,
[dir="rtl"] .technology-page .home-service-panel .hx-copy h2,
[dir="rtl"] .preview-process .process-heading h2,
[dir="rtl"] .preview-faq h2,
[dir="rtl"] .architectural-contact .contact-title h2 {letter-spacing:0; line-height:1.45;}
@media(max-width:767px) {
  .technology-page .preview-hero .home-service-heading h1 {font-size:clamp(26px,6.8vw,29px);}
  .technology-page .home-service-panel .hx-copy h2 {font-size:clamp(23px,6.2vw,26px);}
  .technology-page .home-service-panel .hx-lede {font-size:14px; line-height:1.68;}
  .preview-process .process-heading h2,
  .preview-faq h2 {font-size:clamp(24px,6.4vw,27px);}
  .preview-process .process-copy h3 {font-size:17px;}
  .architectural-contact .contact-title h2 {font-size:clamp(29px,7.5vw,33px);}
}