/* Approved light identity, phase one. Local preview only: hero photograph reuse clearance is pending. */
:root{--identity-paper:#F7F6F2;--identity-navy:#18243B;--identity-cyan:#28D8DC;--identity-fuchsia:#E942BE}
.hero.hero-light{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.45fr);align-items:center;gap:3%;min-height:0;height:auto;padding:24px 3.7% 38px;background:var(--identity-paper);color:var(--identity-navy);overflow:hidden}
.hero-light .hero-copy{padding:28px 0;max-width:none;min-width:0}
.hero-light h1{margin:0 0 24px;max-width:620px;font-size:clamp(36px,4.25vw,64px);font-weight:750;line-height:1.06;letter-spacing:-.045em;text-transform:none;text-wrap:balance;overflow-wrap:normal}
.hero-light .hero-lead{font-size:clamp(18px,1.65vw,25px);line-height:1.4;margin:0 0 30px;max-width:540px;color:var(--identity-navy)}
.hero-light .location{margin-top:24px;color:#606C82;font-size:15px}
.hero-light .location-icon{flex-basis:20px}
.hero-concept{position:relative;min-width:0;margin:0;aspect-ratio:989/819;isolation:isolate;border:2px solid transparent;border-radius:34px;background:linear-gradient(var(--identity-paper),var(--identity-paper)) padding-box,linear-gradient(120deg,var(--identity-cyan),#b9d9ed 55%,var(--identity-fuchsia)) border-box;box-shadow:-12px 0 35px #28d8dc12,12px 10px 35px #e942be0a;overflow:hidden}
/* A code-native viewport shows only the approved mockup's photographic panel.
   Source canvas 1672×941; panel bounds x=667, y=19, width=989, height=819.
   Headline, lead and CTA are real HTML outside this viewport. */
.hero-concept-crop{position:absolute;inset:0;overflow:hidden;border-radius:32px}
.hero-concept-crop img{display:block;position:absolute;width:169.059656%;max-width:none;height:114.896215%;left:-67.44186%;top:-2.319902%;object-fit:fill}
/* One readable live badge masks the raster badge completely. Source badge is
   within x=723..958, y=752..793 of the 989×819 photo viewport. The opaque live
   badge extends beyond those bounds, including at narrow mobile sizes. */
.hero-concept figcaption{position:absolute;right:2.2%;bottom:2.2%;min-width:26.5%;min-height:6.5%;max-width:calc(100% - 24px);display:flex;align-items:center;justify-content:center;padding:9px 18px;border-radius:999px;background:#fff;color:var(--identity-navy);text-align:center;font-size:clamp(12px,1.05vw,16px);line-height:1.25;font-weight:600;box-shadow:0 2px 10px #18243b0d}
/* The hero keeps one native link. Non-hero CTAs and messenger controls retain their existing styles. */
.hero-light .hero-services-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;max-width:100%;border:2px solid transparent;border-radius:999px;color:var(--identity-navy);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,var(--identity-cyan),var(--identity-fuchsia)) border-box;box-shadow:0 3px 14px #28d8dc12,4px 4px 15px #e942be0b;font-size:clamp(16px,1.35vw,20px);font-weight:600;line-height:1.4;text-transform:none;white-space:normal;text-align:center;padding:15px 34px;transform:none;transition:box-shadow .18s ease,transform .18s ease}
.hero-light .hero-services-cta:hover{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,var(--identity-cyan),var(--identity-fuchsia)) border-box;transform:none}
@media(hover:hover) and (pointer:fine){.hero-light .hero-services-cta:not(:disabled):hover{border-color:transparent;background:linear-gradient(#22344F,#22344F) padding-box,linear-gradient(110deg,var(--identity-cyan),var(--identity-fuchsia)) border-box;color:#fff;box-shadow:0 5px 18px #28d8dc25,5px 4px 18px #e942be16;transform:translateY(-1px)}}
.hero-light .hero-services-cta:not(:disabled):active{border-color:transparent;background:linear-gradient(var(--identity-navy),var(--identity-navy)) padding-box,linear-gradient(110deg,var(--identity-cyan),var(--identity-fuchsia)) border-box;color:#fff;transform:translateY(1px);box-shadow:0 1px 5px #18243b20}
.hero-light .hero-services-cta:focus-visible{outline:3px solid var(--identity-navy);outline-offset:5px}
@media(max-width:800px){.hero.hero-light{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 5% 32px}.hero-light .hero-copy{padding:0}.hero-light h1{max-width:650px;font-size:clamp(34px,7.7vw,54px);line-height:1.08;margin-bottom:20px}.hero-light .hero-lead{max-width:570px;font-size:19px;margin-bottom:24px}.hero-light .location{margin-top:20px;font-size:14px}.hero-concept{width:100%;max-width:700px;justify-self:center;border-radius:25px}.hero-concept-crop{border-radius:23px}.hero-light .hero-services-cta{font-size:17px;padding:14px 26px}}
@media(prefers-reduced-motion:reduce){.hero-light .hero-services-cta,.hero-light .hero-services-cta:not(:disabled):hover,.hero-light .hero-services-cta:not(:disabled):active{transition:none;transform:none}}

/* Smooth selected button B: one cyan-to-pink edge on a light surface.
   Only the four primary main-page CTAs change; footer and messengers keep their styles. */
:is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill{
 position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
 gap:12px;min-height:60px;min-width:44px;max-width:100%;padding:15px 24px;
 border:2px solid transparent;border-radius:14px;
 background:linear-gradient(#FDFDFB,#F2F2EE) padding-box,linear-gradient(110deg,#0B8E95 0%,#876FAD 53%,#CB2CA2 100%) border-box;color:#18243B;
 box-shadow:none;outline:none;
 font-size:1.0625rem;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;
 text-align:center;white-space:normal;overflow-wrap:anywhere;appearance:none;
 cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
 transform:none;transition:background .15s;
}
/* The edge is painted by the button itself, with no nested frame or shadow. */
:is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill::before{content:none;display:none}
/* Neutral hover prevents sticky desktop feedback after a touch. */
:is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:hover{
 background:linear-gradient(#FDFDFB,#F2F2EE) padding-box,linear-gradient(110deg,#0B8E95 0%,#876FAD 53%,#CB2CA2 100%) border-box;color:#18243B;
 border-color:transparent;box-shadow:none;transform:none;
}
@media(hover:hover) and (pointer:fine){
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):hover{
  background:linear-gradient(#FFF,#F9F9F6) padding-box,linear-gradient(110deg,#0B8E95 0%,#876FAD 53%,#CB2CA2 100%) border-box;
  color:#18243B;border-color:transparent;box-shadow:none;transform:none;
 }
}
/* Pressed follows hover. The darker face gives feedback without moving the control. */
:is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):active{
 background:linear-gradient(#EDEEEB,#EDEEEB) padding-box,linear-gradient(110deg,#0B8E95 0%,#876FAD 53%,#CB2CA2 100%) border-box;
 color:#18243B;border-color:transparent;box-shadow:none;transform:none;
}
/* A separate high-contrast focus ring appears only for keyboard-style focus. */
:is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:focus-visible{
 outline:3px solid #18243B;outline-offset:5px;
}
:is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:disabled{
 background:#E4E6E8;color:#5C6576;border-color:#8791A0;box-shadow:none;transform:none;cursor:not-allowed;
}
/* Keep the approved mobile dimensions and explicit cancel-safe touch feedback. */
@media(max-width:800px){
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill{
  box-sizing:border-box;width:100%;max-width:320px;min-width:0;min-height:56px;
  padding:14px 20px;border-radius:12px;font-size:1rem;line-height:1.375;
  word-break:normal;overflow-wrap:normal;
 }
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled),
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):active,
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):hover{
  background:linear-gradient(#FFFFFF,#F6F6F2) padding-box,linear-gradient(110deg,#0B8E95 0%,#876FAD 53%,#CB2CA2 100%) border-box;
  color:#18243B;border-color:transparent;box-shadow:none;transform:none;
 }
 /* The explicit touch class works without hover or Safari's native :active heuristic. */
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled).is-touch-pressed{
  background:linear-gradient(#E4E9EB,#E4E9EB) padding-box,linear-gradient(110deg,#0B8E95 0%,#876FAD 53%,#CB2CA2 100%) border-box;
  color:#18243B;border-color:transparent;box-shadow:none;transform:none;
 }
 @media(hover:hover) and (pointer:fine){
  :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):active{
   background:linear-gradient(#E4E9EB,#E4E9EB) padding-box,linear-gradient(110deg,#0B8E95 0%,#876FAD 53%,#CB2CA2 100%) border-box;
   color:#18243B;border-color:transparent;box-shadow:none;transform:none;
  }
 }
}
@media(prefers-reduced-motion:reduce){
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill,
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):hover,
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):active,
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled).is-touch-pressed{transition:none;transform:none}
}
@media(forced-colors:active){
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill,
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled),
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):hover,
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:disabled,
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled):active,
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:not(:disabled).is-touch-pressed{
  forced-color-adjust:auto;background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none;
 }
 :is(.hero-services-cta,#screens .brief-open,#solutions .brief-open,#detail-cta).pill:focus-visible{outline-color:Highlight}
}
/* The new visual belongs only to LED sales/installation and is identified as a concept. */
.service-grid .tile-photo img[src$="led-installed-lyubov-concept.webp"]{object-position:50% 35%}
.service-grid .led-illustration-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.service-grid .service-illustration-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
#detail-content .service-outdoor-examples{margin-top:22px}
#detail-content .service-outdoor-examples figure{margin:18px 0 0;min-width:0}
#detail-content .service-outdoor-examples img{display:block;width:100%;max-width:100%;height:auto;border-radius:6px}
#detail-content .service-outdoor-examples figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:#64635f}

/* Keep every approved product and label inside these two existing service-card frames. */
.service-grid .tile-photo img[src$="ra-xott-service-print-photographic-illustration.webp"],
.service-grid .tile-photo img[src$="ra-xott-service-marketplace-photographic-illustration.webp"]{object-fit:contain;object-position:50% 50%;background:#F7F6F2}

/* Keep the approved catalog and entire phone within their existing card frames. */
.service-grid .tile-photo img[src$="ra-xott-service-brochure-photographic-illustration.webp"],
.service-grid .tile-photo img[src$="ra-xott-service-smm-photographic-illustration.webp"]{object-fit:contain;object-position:50% 50%;background:#F7F6F2}

/* Center the two approved near-1.8:1 photo/video and event illustrations. */
.service-grid .tile-photo img[src$="ra-xott-service-photo-video-photographic-illustration.webp"],
.service-grid .tile-photo img[src$="ra-xott-service-events-photographic-illustration.webp"]{object-fit:cover;object-position:50% 50%}

/* Preserve the complete approved pump and all labels in the existing marketplace frame. */
.service-grid .tile-photo img[src$="ra-xott-service-marketplace-industrial-pump-illustration.webp"]{object-fit:contain;object-position:50% 50%;background:#F7F6F2}

/* Center the approved multimedia and landscaping illustrations in the existing 1.8:1 frames. */
.service-grid .tile-photo img[src$="ra-xott-service-multimedia-photographic-illustration.webp"],
.service-grid .tile-photo img[src$="ra-xott-service-landscape-photographic-illustration.webp"]{object-fit:cover;object-position:50% 50%}

/* Center the approved SLIM-panel and service-robot illustrations in the existing card frames. */
.service-grid .tile-photo img[src$="ra-xott-service-slim-photographic-illustration.webp"],
.service-grid .tile-photo img[src$="ra-xott-service-robot-photographic-illustration.webp"]{object-fit:cover;object-position:50% 50%}
/* Keep the original BellaBot photograph complete and clearly attributed in the service details. */
#detail-content .service-robot-example{margin:18px 0 0;min-width:0}
#detail-content .service-robot-example img{display:block;width:100%;max-width:100%;height:auto;border-radius:6px}
#detail-content .service-robot-example figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:#64635f}

/* Approved narrow dialog/readability fixes; service-grid geometry is unchanged. */
#detail,#brief{overscroll-behavior:contain}
#detail>.close,#brief>.close{position:sticky;top:0;right:auto;float:right;margin:-18px -20px 0 0;z-index:3;background:var(--paper);border:1px solid #d7d8d2;border-radius:50%;line-height:1}
#screens .eyebrow,#services .section-heading>p,#solutions .solution-intro>p,
.summit-highlight .agency-proof-note,#offices .agency-office-grid h3 span,
#detail>.eyebrow,#brief>.eyebrow,#brief>.brief-note,#detail .agency-proof-office-grid figcaption{color:#64635f}
.rx-footer #rx-footer-brief svg{display:block;width:19px;height:19px;flex:none}
.service-grid .tile-photo img[src$="ra-xott-service-media-photographic-illustration.webp"]{object-fit:cover;object-position:50% 50%}
#detail-content .media-village-example{margin:0;min-width:0}
#detail-content .media-village-example img{display:block;width:100%;height:auto;max-width:100%}
#detail-content .media-village-example img+img{margin-top:16px}
#detail-content .media-village-example figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:#64635f}