/* D&S Group — 18-service CircularCarousel, isolated to /services only. */
.ds-services-circular {
  background: #111513;
  border-top: 1px solid rgba(255,255,255,.075);
  overflow: hidden;
  padding: clamp(42px,6vw,98px) 0 clamp(70px,8vw,130px);
}
.ds-services-circular .container { position: relative; }
.ds-cc-header {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.65fr);
  gap: 26px; align-items:end; margin-bottom: clamp(24px,4vw,48px);
}
.ds-cc-eyebrow { font: 500 10px/1.5 var(--mono,monospace); color: #c7ff81; letter-spacing:.12em; }
.ds-cc-header h2 {
  color:#f3f5f0; font-size: clamp(39px,5.4vw,80px); font-weight:600;
  letter-spacing:-.072em; line-height:1.03; margin:16px 0 0;
}
.ds-cc-header h2 em { color:#d2fb88; font-style:normal; }
.ds-cc-tagline {
  color:#b9c1b9; font-size:clamp(15px,1.35vw,20px); line-height:1.5;
  max-width:420px; margin:0 0 4px;
}
.ds-cc-tagline strong { display:block; font:500 10px var(--mono,monospace); color:#e9f0e5; margin-top:14px; letter-spacing:.12em; }
.ds-cc-gallery { position:relative; height:650px; width:100%; isolation:isolate; }
.ds-cc-react-root { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.ds-services-circular.ds-cc-ready .ds-cc-react-root { opacity:1; pointer-events:auto; }
.ds-cc-placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:20px; text-decoration:none; color:#fff;
}
.ds-cc-placeholder img {
  display:block; width:min(38%,300px); aspect-ratio:1; object-fit:cover;
  filter:saturate(.75); border:1px solid rgba(255,255,255,.14);
}
.ds-cc-placeholder span {font:500 11px var(--mono,monospace);color:#c8f18a;letter-spacing:.1em}
.ds-services-circular.ds-cc-ready .ds-cc-placeholder { display:none; }
.ds-cc-react-content { width:100%; height:100%; display:flex; flex-direction:column; }
.ds-cc-carousel-viewport { width:100%; height:560px; position:relative; flex:none; }
.ds-services-circular .circular-carousel { color:#fff; }
/* 1:1 tiles must be completely covered by the photo on ALL screen sizes.
   The source is also delivered as 1100x1100 from Unsplash, to avoid
   horizontal/vertical letterboxing even with the 3D cylinder's sliced tiles. */
.ds-services-circular .circular-carousel__photo {
  object-fit:cover !important;
  object-position:center center;
  image-rendering:auto;
  background:transparent !important;
}
.ds-services-circular .circular-carousel__frame {
  overflow:hidden;
}

.ds-services-circular .circular-carousel__title {
  color:#f2f6f0; font-size:clamp(20px,2vw,29px); font-weight:600;
  letter-spacing:-.045em; max-width:min(80%,780px);
  text-wrap:balance; overflow-wrap:anywhere;
}
.ds-services-circular .circular-carousel__subtitle {
  font:500 10px/1.3 var(--mono,monospace); letter-spacing:.08em;
  color:#d1f49a; margin-top:7px; opacity:1;
}
.ds-services-circular .circular-carousel__count { color:#d1f49a; opacity:.85; font-size:11px; }
.ds-services-circular .circular-carousel__caption { bottom:16px; gap:8px; }
.ds-cc-react-info {
  height:90px; max-width:850px; width:min(100%,850px); margin:auto auto 0;
  display:flex; align-items:center; justify-content:center; gap:25px;
  border-top:1px solid rgba(255,255,255,.16);
}
.ds-cc-mobile-current {display:none;}
.ds-cc-react-info-label {flex:none; font:500 10px var(--mono,monospace); color:#c7ff81; white-space:nowrap;}
.ds-cc-react-info p {color:#b7c0b8;font-size:13px;line-height:1.45;flex:1;min-width:0; margin:0;}
.ds-cc-react-link {padding:11px 12px;border:1px solid #697a64;background:transparent;color:#f4fff0;
 font:600 10px var(--mono,monospace); white-space:nowrap;cursor:pointer;transition:border-color .2s,color .2s;}
.ds-cc-react-link:hover {color:#d7ff94;border-color:#c7ff81;}
.ds-cc-react-link span {margin-left:8px;color:#c7ff81;font-size:17px;}
.ds-cc-divider { height:1px; width:100%; background:rgba(255,255,255,.17); margin:clamp(26px,4vw,60px) 0 22px; }
.ds-cc-directory-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:20px; }
.ds-cc-directory-heading h3 {margin:0;color:#f3f5ef;font-size:clamp(22px,2.7vw,34px);font-weight:580;letter-spacing:-.04em}
.ds-cc-directory-heading span {font:500 10px var(--mono,monospace);color:#b6c7b4;}
.ds-cc-directory { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.ds-cc-service-card {
  display:flex; flex-direction:column; min-height:155px; gap:13px;
  border:1px solid rgba(255,255,255,.14); background:#171b19;
  padding:19px 20px 18px; text-decoration:none; color:#e9f0e8;
  transition:background .2s,border-color .2s,transform .2s;
}
.ds-cc-service-card:hover,.ds-cc-service-card:focus-visible {background:#1c251e;border-color:#b6f280;transform:translateY(-2px)}
.ds-cc-service-card > span {font:500 10px var(--mono,monospace);color:#d0fb8c}
.ds-cc-service-card h4 {font-size:clamp(16px,1.4vw,20px);font-weight:620;line-height:1.18;letter-spacing:-.035em;margin:0;}
.ds-cc-service-card p {font-size:12px;line-height:1.55;color:#aab7ab;margin:0;flex:1;}
.ds-cc-service-card b {font-size:19px;font-weight:400;color:#c7ff81;align-self:end;}
/* Each service detail uses the source image at natural aspect ratio. */
.ds-cc-detail-photo {
  display:block; box-sizing:border-box; width:100%; max-width:100%;
  height:min(58vh,580px); max-height:580px;
  object-fit:contain; object-position:center; image-rendering:auto;
  background:#19201d; padding:clamp(10px,2vw,24px);
  border:1px solid rgba(255,255,255,.11);
}
/* Also keep the four pre-existing service detail photographs inside frames. */
.detail-visual .detail-mock.detail-image:not(.ds-has-devices) {
  overflow:hidden; background:#19201d;
}
.detail-visual .detail-mock.detail-image:not(.ds-has-devices) .art-picture {
  display:block; width:100%; height:100%; overflow:hidden;
}
.detail-visual .detail-mock.detail-image:not(.ds-has-devices) .art-picture img {
  display:block; width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:contain !important; object-position:center; image-rendering:auto;
}
.ds-cc-detail-note {color:#afbeaf;font:11px/1.5 var(--mono,monospace);padding:10px 0 2px}
.ds-cc-detail-features {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:24px;}
.ds-cc-detail-features article {padding:24px;min-height:145px;border:1px solid rgba(255,255,255,.14);background:#171b19;}
.ds-cc-detail-features article span {font:10px var(--mono,monospace);color:#b9e786}
.ds-cc-detail-features article h3 {font-size:20px;line-height:1.24;font-weight:570;letter-spacing:-.03em;margin:17px 0 0}
@media(max-width:1000px){
  .ds-cc-gallery {height:610px}
  .ds-cc-directory {grid-template-columns:repeat(2,minmax(0,1fr));}
  .ds-cc-react-info {max-width:96%;}
}
/* Mobile: the 18-panel 3D ring is otherwise scaled down too far by its
   geometry. Zoom the *view*, not each card; keep stage measurements intact. */
@media(max-width:680px){
  .ds-services-circular {padding:28px 0 55px;}
  .ds-cc-header {grid-template-columns:1fr;gap:8px;margin-bottom:0;}
  .ds-cc-eyebrow {font-size:9px;}
  .ds-cc-header h2 {font-size:clamp(37px,10vw,52px);margin:8px 0 0;line-height:1.05;}
  .ds-cc-tagline {font-size:clamp(13px,3.5vw,15px);line-height:1.43;margin:7px 0 0;max-width:34ch;}
  .ds-cc-tagline strong {margin-top:8px;font-size:9px;}
  .ds-cc-gallery {height:clamp(440px,115vw,530px);}
  .ds-cc-carousel-viewport {height:clamp(275px,83vw,350px);}
  .ds-cc-react-content {justify-content:flex-start;}
  .ds-services-circular .circular-carousel__view {
    transform:scale(2.1);transform-origin:center center;
  }
  .ds-services-circular .circular-carousel__photo {
    object-fit:cover !important;
    object-position:center center;
    background:transparent !important;
  }
  .ds-cc-react-info {
    box-sizing:border-box;height:auto;min-height:128px;width:100%;max-width:100%;
    margin:0 auto;padding:4px 0 10px;flex:none;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;row-gap:7px;align-content:start;align-items:center;
    border-top:0;text-align:left;
  }
  .ds-cc-mobile-current {
    display:block;grid-column:1/-1;margin:0 0 1px;
    font-size:clamp(19px,5.6vw,25px);font-weight:600;line-height:1.18;
    letter-spacing:-.045em;color:#f1f7ee;overflow-wrap:anywhere;
  }
  .ds-cc-react-info-label {grid-column:1/-1;font-size:10px;width:auto;}
  .ds-cc-react-info p {grid-column:1;grid-row:3;font-size:12px;line-height:1.42;min-width:0;}
  .ds-cc-react-link {
    grid-column:2;grid-row:3;justify-self:end;padding:10px 11px;
    font-size:9px;white-space:normal;max-width:134px;line-height:1.3;
  }
  .ds-cc-react-link span {margin-left:4px;}
  .ds-cc-placeholder img {width:min(66%,245px);object-fit:cover;}
  .ds-cc-directory {grid-template-columns:1fr;gap:9px;}
  .ds-cc-service-card {min-height:126px;padding:17px 18px;gap:7px;}
  .ds-cc-service-card h4 {font-size:20px;}
  .ds-cc-directory-heading {align-items:flex-start;}
  .ds-cc-detail-photo {height:clamp(270px,78vw,440px);padding:12px;}
  .detail-visual .detail-mock.detail-image:not(.ds-has-devices) {min-height:260px;}
  .ds-cc-detail-features {grid-template-columns:1fr;}
}
@media(max-width:360px){
  .ds-cc-gallery {height:455px;}
  .ds-services-circular .circular-carousel__view {transform:scale(1.88);}
  .ds-cc-react-info {column-gap:8px;}
  .ds-cc-react-link {max-width:112px;}
}
@media(min-width:520px) and (max-width:680px){
  .ds-services-circular .circular-carousel__view {transform:scale(1.62);}
  .ds-cc-react-info {max-width:560px;}
}
@media(prefers-reduced-motion:reduce){
  .ds-cc-react-root,.ds-cc-service-card {transition:none;}
}