/* Review pass r14: coherent service journey, full-bleed editorial media and bounded device overlays. */
.service-directory{
  --journey-purple:#9d46d8;
  --journey-mint:#5de7b1;
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  margin:clamp(28px,5vw,72px) clamp(22px,7vw,110px)!important;
  padding:clamp(24px,4vw,44px)!important;
  border:1px solid color-mix(in srgb,var(--line) 72%,var(--journey-purple) 28%)!important;
  border-radius:28px!important;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--journey-purple) 18%,transparent),transparent 33%),
    radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--journey-mint) 17%,transparent),transparent 36%),
    color-mix(in srgb,var(--panel) 94%,transparent)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.13);
}
.service-directory::after{content:"";position:absolute;left:8%;right:8%;top:164px;height:2px;background:linear-gradient(90deg,var(--journey-purple),var(--journey-mint),var(--journey-purple));opacity:.55}
.directory-story{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;position:relative;z-index:2;margin-bottom:18px}
.directory-story small{display:block;color:var(--journey-mint);font-size:.68rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.directory-story strong{display:block;max-width:700px;margin-top:8px;font-size:clamp(1.7rem,3.2vw,3rem);line-height:1.02;letter-spacing:-.035em}
.directory-story p{max-width:420px;margin:0;color:var(--muted);font-size:.9rem}
.journey-pulse{position:absolute;z-index:3;top:160px;left:8%;width:10px;height:10px;border-radius:50%;background:var(--journey-mint);box-shadow:0 0 0 6px color-mix(in srgb,var(--journey-mint) 16%,transparent),0 0 18px var(--journey-mint);animation:journey-travel 9s ease-in-out infinite}
@keyframes journey-travel{0%,100%{left:8%}50%{left:91%}}
.service-directory>a{position:relative;z-index:2;display:grid!important;grid-template-columns:48px 1fr!important;grid-template-rows:auto auto auto!important;gap:5px 14px!important;min-height:158px!important;padding:22px!important;border:1px solid color-mix(in srgb,var(--line) 80%,var(--journey-mint) 20%)!important;border-radius:18px!important;background:color-mix(in srgb,var(--panel) 93%,transparent)!important;box-shadow:0 12px 30px rgba(0,0,0,.08);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
.service-directory>a:hover,.service-directory>a:focus-visible{transform:translateY(-5px);border-color:color-mix(in srgb,var(--journey-mint) 65%,var(--journey-purple) 35%)!important;box-shadow:0 18px 44px rgba(0,0,0,.15)!important}
.service-directory .journey-icon{grid-column:1;grid-row:1/4;align-self:start;width:48px;height:48px;padding:11px;border-radius:15px;color:var(--text);background:linear-gradient(145deg,color-mix(in srgb,var(--journey-purple) 75%,var(--panel)),color-mix(in srgb,var(--journey-mint) 58%,var(--panel)));box-shadow:inset 0 1px rgba(255,255,255,.3)}
.service-directory>a>span{grid-column:2!important;grid-row:1!important;color:var(--journey-mint)!important;font-size:.67rem!important;letter-spacing:.14em!important}
.service-directory>a>strong{grid-column:2!important;grid-row:2!important;font-size:1.08rem!important;line-height:1.2}
.service-directory>a>small{grid-column:2!important;grid-row:3!important;color:var(--muted)!important;font-size:.79rem!important;line-height:1.45}
.service-directory .journey-result{display:block;margin-top:5px;color:color-mix(in srgb,var(--text) 88%,var(--journey-mint));font-weight:700}

/* Primary editorial scenes span the viewport and crop only when there is enough width. */
.td-story>#probleme>.td-media,
.td-story>.td-future>.td-media,
.td-story>.td-contact>.td-media{
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  border-radius:0!important;
}
.td-story>#probleme>.td-media>picture,
.td-story>.td-future>.td-media>picture,
.td-story>.td-contact>.td-media>picture{display:block;width:100%;mask-image:none!important;-webkit-mask-image:none!important}
.td-story>#probleme>.td-media img,
.td-story>.td-future>.td-media img,
.td-story>.td-contact>.td-media img{display:block;width:100%!important;height:clamp(420px,52vw,760px)!important;max-width:none!important;object-fit:cover!important;object-position:center!important;border-radius:0!important}
.td-story>.td-future>.td-media{background:var(--bg)}
.td-story>.td-future>.td-media picture{position:relative;isolation:isolate}
html[data-theme="dark"] .td-story>.td-future>.td-media picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--bg),transparent 18%,transparent 82%,var(--bg))}

/* The cutout gallery must inherit the active theme instead of painting a black panel. */
.studio-scene.studio-cutout{background:transparent!important}
.studio-cutout img[src*="-cutout-r"]{object-fit:contain!important;background:transparent!important;mask-image:none!important;-webkit-mask-image:none!important}
html[data-theme="light"] .studio-cutout:not(:has(img[src*="-cutout-r"])){background:linear-gradient(145deg,#edf8f2,#f6effb)!important}
html[data-theme="dark"] .studio-cutout:not(:has(img[src*="-cutout-r"])){background:linear-gradient(145deg,#091310,#140d19)!important}

@media(max-width:900px){
  .service-directory{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .directory-story{grid-template-columns:1fr}.directory-story p{max-width:650px}
  .service-directory::after,.journey-pulse{display:none}
}


@media(max-width:700px){
  .service-directory{grid-template-columns:1fr!important;margin:24px 0!important;border-radius:0!important;padding:28px 18px!important}
  .service-directory>a{min-height:132px!important}
  .td-story>#probleme>.td-media img,.td-story>.td-future>.td-media img,.td-story>.td-contact>.td-media img{height:auto!important;min-height:0!important;object-fit:contain!important}
  .td-story>#probleme>.td-media,.td-story>.td-future>.td-media,.td-story>.td-contact>.td-media{margin-left:-18px!important;margin-right:-18px!important;width:calc(100% + 36px)!important}
}
@media(prefers-reduced-motion:reduce){.journey-pulse{animation:none!important}}

/* R15: complete editorial backgrounds replace the rejected automatic cutouts. */
.studio-scene.studio-cutout:has(img[src*="-r15.webp"]),
.studio-scene.studio-cutout:has(img[src*="-cutout-r17."]){
  display:flex!important;
  flex-direction:column;
  padding:0!important;
  background:transparent!important;
  overflow:hidden!important;
}
.td-story .studio-scene.studio-cutout>img[src*="-r15.webp"],
.td-story .editorial-photo>img[src*="-r15.webp"],
.studio-scene.studio-cutout>img[src*="-r15.webp"]{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  background:none!important;
  filter:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.studio-scene.studio-cutout:has(img[src*="-r15.webp"]) .studio-story-caption,
.studio-scene.studio-cutout:has(img[src*="-cutout-r17."]) .studio-story-caption{
  position:static!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:10px 14px!important;
  border:0!important;
  border-top:1px solid color-mix(in srgb,var(--line) 76%,var(--brand-purple) 24%)!important;
  border-radius:0!important;
  background:color-mix(in srgb,var(--panel) 94%,var(--brand-mint) 6%)!important;
  box-shadow:none!important;
  color:var(--text)!important;
  font-size:.75rem!important;
  line-height:1.25!important;
}
.td-story .editorial-photo>img.studio-ecr[src*="-r15.webp"]{
  width:100%!important;
  aspect-ratio:3/2!important;
  object-fit:contain!important;
  border-radius:16px!important;
}

@media(min-width:901px){
  .service-scenarios{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .service-scenarios>article{grid-column:span 2}
  .service-scenarios>article:nth-child(4){grid-column:2/span 2}
  .service-scenarios>article:nth-child(5){grid-column:4/span 2}
}

/* R15 shortcut gallery: complete scenes replace the remaining automatic cutouts. */
.td-proofline .shortcut-photo[src*="-r15.webp"]{
  width:calc(100% + 20px)!important;
  max-width:none!important;
  height:auto!important;
  margin:-10px -10px 2px!important;
  aspect-ratio:3/2!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:0!important;
  background:transparent!important;
  filter:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
@media(max-width:700px){
  .td-proofline .shortcut-photo[src*="-r15.webp"]{
    width:calc(100% + 16px)!important;
    margin:-8px -8px 2px!important;
  }
}

/* R16: the service directory tells a visual story with generated scenes. */
.service-directory>a{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  min-height:430px!important;
  padding:0 0 22px!important;
  overflow:hidden!important;
}
.service-directory .directory-photo{
  display:block!important;
  flex:0 0 auto;
  width:100%!important;
  aspect-ratio:1;
  margin:0 0 18px!important;
  background-image:url('assets/service-directory-r17.webp?v=8862e7b7a7050037');
  background-repeat:no-repeat;
  /* Each source tile is square; trim only the thin contact-sheet gutters. */
  background-size:304% 202.4%;
  background-color:#f1ede5;
}
.service-directory .directory-photo-1{background-position:0 0}
.service-directory .directory-photo-2{background-position:50% 0}
.service-directory .directory-photo-3{background-position:100% 0}
.service-directory .directory-photo-4{background-position:0 100%}
.service-directory .directory-photo-5{background-position:50% 100%}
.service-directory .directory-photo-6{background-position:100% 100%}
.service-directory>a>span:not(.directory-photo),
.service-directory>a>strong,
.service-directory>a>small{margin-left:20px!important;margin-right:20px!important}
.service-directory>a>span:not(.directory-photo){color:var(--journey-mint)!important;font-size:.67rem!important;letter-spacing:.14em!important}
.service-directory>a>strong{margin-top:7px!important;font-size:1.18rem!important;line-height:1.2}
.service-directory>a>small{display:block;margin-top:8px!important;color:var(--muted)!important;font-size:.79rem!important;line-height:1.45}
.service-directory .journey-detail{display:block;margin-top:9px;color:var(--text);font-size:.78rem;line-height:1.45}
.service-directory .journey-result{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:color-mix(in srgb,var(--text) 88%,var(--journey-mint));font-weight:750}
.service-directory::after,.journey-pulse{display:none!important}

/* R16: crisp, tightly framed shortcut scenes for the hero. */
.td-proofline .shortcut-photo-r16{
  display:block!important;
  width:calc(100% + 20px)!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:3/2!important;
  margin:-10px -10px 2px!important;
  border-radius:0!important;
  background-image:url('assets/hero-shortcuts-r17.webp?v=9da6701a246d8ca5')!important;
  background-size:200% 200%!important;
  background-repeat:no-repeat!important;
  filter:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
.td-proofline .shortcut-photo-1{background-position:0 0!important}
.td-proofline .shortcut-photo-2{background-position:100% 0!important}
.td-proofline .shortcut-photo-3{background-position:0 100%!important}
.service-directory .directory-photo-2,.td-proofline .shortcut-photo-3{background-image:url('assets/pontaj-pin-photo-evidence-v2-small.webp?v=52ddcf992db0461a')!important;background-size:cover!important;background-position:64% 50%!important}
.service-directory#servicii{scroll-margin-top:100px}
.td-proofline .shortcut-photo-4{background-position:100% 100%!important}

@media(max-width:700px){
 .service-directory>a{min-height:0!important}
 .td-proofline .shortcut-photo-r16{width:calc(100% + 16px)!important;margin:-8px -8px 2px!important}
}
.site-skip{position:fixed;top:12px;left:12px;z-index:1000;padding:12px 18px;background:var(--panel);color:var(--text);border:2px solid var(--accent);border-radius:8px;transform:translateY(-200%)}
.site-skip:focus{transform:none;outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:900px){.site-header #main-nav{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}}