/* CORAFTER Phase 3 — service navigation, overview cards and detail-page image handling.
   Loaded after existing styles so the original layout and behavior remain the foundation. */
:root{--service-card-ink:#0b1736;--service-card-muted:#687895;--service-card-line:#dce6f5;--service-card-blue:#155eef;--service-card-violet:#6c4dff}

/* Desktop services mega-menu: two-column, readable card menu */
.site-header .nav-dropdown{position:relative;isolation:isolate}
.site-header .nav-drop-button{display:inline-flex;align-items:center;gap:7px}
.site-header .nav-drop-button span{display:inline-block;transition:transform .2s ease}
.site-header .nav-dropdown.open .nav-drop-button span{transform:rotate(180deg)}
.site-header .dropdown-menu{
  width:min(700px,calc(100vw - 36px));max-height:min(76vh,590px);overflow:auto;
  padding:15px;left:50%;top:calc(100% + 13px);gap:9px;
  grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;
  border:1px solid #dce7fa;border-radius:22px;background:rgba(255,255,255,.985);
  box-shadow:0 24px 70px rgba(9,32,78,.2);backdrop-filter:blur(18px);z-index:1300;
}
.site-header .nav-dropdown:hover .dropdown-menu,.site-header .nav-dropdown:focus-within .dropdown-menu,.site-header .nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.site-header .dropdown-menu a.service-menu-card{
  min-width:0;min-height:82px;display:grid;grid-template-columns:42px minmax(0,1fr) 15px;
  align-items:center;gap:11px;padding:12px;border:1px solid #edf1f9;border-radius:15px;
  background:#fff;text-decoration:none;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.site-header .dropdown-menu a.service-menu-card:hover,.site-header .dropdown-menu a.service-menu-card:focus-visible{
  background:#f3f7ff;border-color:#cbdcff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(21,94,239,.08);outline:none
}
.service-menu-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#e3efff,#eee8ff);color:#155eef;font-size:21px;box-shadow:inset 0 0 0 1px rgba(21,94,239,.08)}
.service-menu-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.service-menu-copy strong{font-size:13px;line-height:1.35;color:#0b1736;font-weight:800}
.service-menu-copy small{font-size:10px;line-height:1.45;color:#71809b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.service-menu-arrow{color:#155eef;font-size:16px;opacity:.7}
.site-header .dropdown-menu a.service-menu-all{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:13px 15px;margin-top:2px;border-radius:12px;background:#0b1c49;color:#fff;font-size:12px;font-weight:800;text-decoration:none}
.site-header .dropdown-menu a.service-menu-all:hover{background:#155eef;color:#fff}

/* Services overview: equal-height cards with a reliable media window. */
.service-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:24px}
.service-overview .service-card.rd-card-wide{
  min-width:0;min-height:100%;padding:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #dce6f5;border-radius:23px;background:#fff;
  box-shadow:0 12px 34px rgba(12,37,82,.055);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
.service-overview .service-card.rd-card-wide:hover{transform:translateY(-5px);border-color:#c5d8ff;box-shadow:0 22px 46px rgba(12,37,82,.12)}
.service-overview .rd-card-wide .rd-card-media{
  position:relative;flex:none;display:grid;place-items:center;width:100%;height:auto;min-height:0;aspect-ratio:16/10;
  overflow:hidden;background:radial-gradient(circle at 70% 25%,#dceaff 0,transparent 43%),linear-gradient(135deg,#edf5ff,#f2edff)
}
.service-overview .rd-card-wide .rd-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease}
.service-overview .rd-card-wide:hover .rd-card-media img{transform:scale(1.035)}
.service-overview .rd-card-wide .rd-card-media img.fallback-art{width:100%;height:100%;padding:8%;object-fit:contain}
.service-overview .rd-card-wide .rd-card-media:after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(to top,rgba(7,27,69,.28),transparent);pointer-events:none}
.service-overview .rd-card-wide .rd-card-icon{left:16px;bottom:14px;width:43px;height:43px;border:1px solid rgba(220,230,245,.9);border-radius:14px;box-shadow:0 8px 22px rgba(7,27,69,.14)}
.service-overview .rd-card-wide .rd-card-body{display:flex;flex:1;flex-direction:column;justify-content:flex-start;gap:0;padding:22px 22px 24px}
.service-overview .rd-card-wide .rd-card-body h3{margin:0 0 10px;color:#0b1736;font:800 clamp(17px,1.5vw,20px)/1.3 Manrope,Inter,sans-serif;letter-spacing:-.025em}
.service-overview .rd-card-wide .rd-card-body p{flex:1;margin:0 0 19px;color:#687895;font-size:13px;line-height:1.75}
.service-overview .rd-card-wide .rd-card-body>a{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;color:#155eef;font-size:12px;font-weight:800;text-decoration:none}
.service-overview .rd-card-wide .rd-card-body>a:hover{text-decoration:underline;text-underline-offset:4px}

/* Service-detail art: use contain for 3D SVGs so the complete illustration remains visible. */
.service-page .service-hero-visual-enhanced{min-width:0;overflow:visible}
.service-page .service-hero-3d-stack{min-width:0;isolation:isolate}
.service-page .service-main-3d{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
.service-page .hero-mini-3d{max-width:18%;max-height:18%;object-fit:contain}
.service-page .service-visual-art{min-width:0;aspect-ratio:4/3;height:auto;min-height:170px;padding:14px}
.service-page .service-visual-art img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
.service-page .service-visual-grid{align-items:stretch}
.service-page .service-visual-card{height:100%;min-width:0;overflow:hidden}
.service-page .service-visual-card>div:last-child{min-width:0}
.service-page .service-feature-grid,.service-page .service-process-grid,.service-page .use-case-grid,.service-page .related-services-grid{align-items:stretch}
.service-page .service-feature-card,.service-page .service-process-card,.service-page .use-case-card,.service-page .related-service-card{min-width:0;height:100%}
.page-hero-art-3d{display:grid;place-items:center;min-width:0}
.page-hero-art-3d img{width:min(100%,480px);height:auto;max-height:380px;aspect-ratio:4/3;object-fit:contain;object-position:center}

@media(max-width:1100px){
  .service-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .site-header .dropdown-menu{width:min(660px,calc(100vw - 32px))}
}
@media(max-width:760px){
  .site-header .dropdown-menu{width:100%;max-height:none;overflow:visible;left:auto;top:auto;transform:none;padding:8px 0 10px;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;grid-template-columns:1fr;gap:7px}
  .site-header .nav-dropdown:hover .dropdown-menu,.site-header .nav-dropdown:focus-within .dropdown-menu{transform:none}
  .site-header .dropdown-menu a.service-menu-card{min-height:68px;grid-template-columns:38px minmax(0,1fr) 14px;padding:10px;border-radius:13px;background:#fff}
  .service-menu-icon{width:38px;height:38px}
  .service-menu-copy strong{font-size:12px}
  .service-menu-copy small{font-size:10px}
  .service-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .service-overview .rd-card-wide .rd-card-body{padding:17px 16px 19px}
  .service-overview .rd-card-wide .rd-card-body h3{font-size:16px}
  .service-overview .rd-card-wide .rd-card-body p{font-size:12px;line-height:1.6}
}
@media(max-width:520px){
  .service-overview{grid-template-columns:1fr;gap:18px}
  .service-overview .rd-card-wide .rd-card-media{aspect-ratio:16/9}
  .service-overview .rd-card-wide .rd-card-body{padding:20px 20px 22px}
  .service-overview .rd-card-wide .rd-card-body h3{font-size:19px}
  .service-overview .rd-card-wide .rd-card-body p{font-size:13px}
  .service-page .service-hero-3d-stack{height:300px}
  .service-page .service-visual-art{min-height:150px}
}
@media(prefers-reduced-motion:reduce){
  .service-overview .service-card.rd-card-wide,.service-overview .rd-card-wide .rd-card-media img,.site-header .dropdown-menu a.service-menu-card{transition:none}
}