/* Dijital Mode Agency | Final editorial layer */
:root{--dm-ink:#0b0d16;--dm-soft:#f5f4f6;--dm-accent:#c52ea9;--dm-blue:#08b9ff;--dm-radius:8px}
::selection{background:#d73bb0;color:#fff}
:focus-visible{outline:3px solid #00b8f9;outline-offset:3px}
.site-header{background:rgba(9,12,23,.965);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand img{object-fit:contain}
.hero{background:#090c17;min-height:min(850px,92svh)}
.hero .container{min-height:min(850px,92svh)}
.hero-art{inset:0 0 0 30%;background-image:linear-gradient(90deg,#090c17 3%,rgba(9,12,23,.2) 48%,rgba(9,12,23,.2) 100%),url('/assets/img/hero-editorial.webp');background-position:center,center;background-size:cover;opacity:.9}
.hero:after{background:linear-gradient(90deg,#090c17 0%,rgba(9,12,23,.93) 28%,rgba(9,12,23,.08) 80%)}
.hero .eyebrow{letter-spacing:.24em;color:#e0b6d9}
.hero h1{max-width:930px;line-height:.99}
.hero h1 .accent{background:linear-gradient(100deg,#f1a7ee 0%,#c747db 45%,#4cc8fa 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero .hero-copy{line-height:1.65}
.service-tile{background:#faf9fb;transition:background-color .3s,border-color .3s}
.service-tile .tile-media{margin-top:15px;margin-bottom:24px;aspect-ratio:1.56;border-radius:4px}
.service-tile .tile-media img{border-radius:4px}
.service-tile h3{font-size:clamp(1.22rem,1.6vw,1.65rem);line-height:1.18}
.service-tile:hover{background:#f1eff5}
.service-tile:hover h3{color:#7e229f}
.page-hero.dm-visual-hero{isolation:isolate;min-height:350px;display:flex;align-items:center;padding:74px 0 84px;background:#0c1020}
.page-hero.dm-visual-hero::before{content:'';z-index:-1;position:absolute;inset:0;width:auto;height:auto;top:0;right:0;border:0;border-radius:0;filter:none;background:linear-gradient(90deg,rgba(7,10,20,.98) 0%,rgba(7,10,20,.92) 31%,rgba(7,10,20,.68) 56%,rgba(7,10,20,.28) 100%),var(--dm-hero-image);background-size:cover;background-position:center center;opacity:1}
.page-hero.dm-visual-hero .container{position:relative}
.page-hero.dm-visual-hero .eyebrow{color:#d9abed}
.page-hero.dm-visual-hero h1{font-size:clamp(2.7rem,6vw,5.9rem);letter-spacing:-.065em;max-width:930px}
.page-hero.dm-visual-hero p{max-width:620px;color:#dcdbe7;line-height:1.7}
.blog-index .page-hero.dm-visual-hero{min-height:460px}
.blog-index .catalog-grid{grid-auto-flow:row}
.blog-index .catalog-card{border:1px solid #e4e2e8;border-radius:3px;box-shadow:none;background:#fff}
.blog-index .catalog-card:hover{box-shadow:0 20px 55px rgba(11,13,22,.09)}
.blog-index .catalog-card img{display:block;aspect-ratio:1.65;object-fit:cover;transition:transform .45s ease}
.blog-index .catalog-card:hover img{transform:scale(1.025)}
.blog-index .catalog-card .body{padding:24px 25px 27px}
.blog-index .catalog-card h3{font-size:clamp(1.2rem,1.55vw,1.55rem);line-height:1.18}
.blog-index .catalog-card .tag{color:#8b458a;letter-spacing:.11em}
.blog-index .catalog-card:first-child{grid-column:span 2;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;background:#111726;color:#fff;border:0;min-height:375px}
.blog-index .catalog-card:first-child img{width:100%;height:100%;max-height:100%;aspect-ratio:auto;min-height:375px;object-fit:cover}
.blog-index .catalog-card:first-child .body{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;align-items:start;justify-content:center}
.blog-index .catalog-card:first-child .tag{color:#cfa7f3}
.blog-index .catalog-card:first-child h3{font-size:clamp(2rem,3.2vw,3.5rem);line-height:1.06}
.blog-index .catalog-card:first-child p{color:#d5d9e1;font-size:1rem;line-height:1.7}
.blog-index .catalog-card:first-child .more{color:#efadee}
.services-index .service-grid{gap:18px;border:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.services-index .service-tile{border:1px solid #e3e0e9;min-width:0;padding:19px 19px 23px;background:#fff}
.services-index .service-tile .tile-media{order:0;margin:0 0 21px;aspect-ratio:16/10}
.services-index .service-tile .tile-no{order:1;font-size:.67rem;letter-spacing:.08em}
.services-index .service-tile h3{order:2;margin-top:12px}
.services-index .service-tile p{order:3;color:#696976}
.services-index .service-tile .tile-arrow{order:4}
.blog-article .detail-art,.service-detail .detail-art{border-radius:4px;box-shadow:0 20px 65px rgba(12,15,28,.1)}
.article-body{line-height:1.8}
.article-body h2{letter-spacing:-.035em}
.dm-sectors{background:#eeeef1}
.dm-sector-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.dm-sector-item{background:#0b0f1e;color:white;display:flex;flex-direction:column;padding-bottom:23px;overflow:hidden;transition:transform .25s ease}
.dm-sector-item:hover{transform:translateY(-4px)}
.dm-sector-item img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover;transition:transform .5s ease}
.dm-sector-item:hover img{transform:scale(1.04)}
.dm-sector-meta{font-size:.64rem;letter-spacing:.14em;color:#d993d8;font-weight:800;margin:25px 23px 12px}
.dm-sector-item strong{font-size:clamp(1.45rem,2.2vw,2.35rem);line-height:1.07;letter-spacing:-.04em;margin:0 23px 11px}
.dm-sector-item>span:last-child{font-size:.82rem;color:#c8c9d8;line-height:1.55;margin:0 23px}
.dm-sector-item>span:last-child b{color:#ec8edc}
.dm-sector-disclaimer{font-size:.73rem;max-width:780px;margin-top:25px;color:#747681}
@media(max-width:1050px){.services-index .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-index .catalog-card:first-child{grid-column:span 2}}
@media(max-width:720px){
.hero,.hero .container{min-height:690px}.hero-art{inset:12% -37% 0 0;opacity:.43;background-position:center}.hero::after{background:linear-gradient(90deg,#090c17 0%,rgba(9,12,23,.76) 46%,rgba(9,12,23,.2))}
.hero h1{font-size:clamp(3rem,12.8vw,5.3rem)}
.page-hero.dm-visual-hero{min-height:350px;padding:68px 0}
.page-hero.dm-visual-hero::before{background-image:linear-gradient(90deg,rgba(8,10,21,.94),rgba(8,10,21,.78)),var(--dm-hero-image);background-position:center}
.services-index .service-grid{grid-template-columns:1fr;gap:12px}
.blog-index .catalog-grid{grid-template-columns:1fr}
.blog-index .catalog-card:first-child{grid-column:auto;grid-template-columns:1fr;min-height:auto}
.blog-index .catalog-card:first-child img{height:auto;min-height:auto;aspect-ratio:16/9}
.blog-index .catalog-card:first-child h3{font-size:clamp(1.8rem,8vw,2.6rem)}
.dm-sector-grid{grid-template-columns:1fr;gap:14px}
.dm-sector-item img{aspect-ratio:16/10}
}
@media(prefers-reduced-motion:reduce){.dm-sector-item,.dm-sector-item img,.blog-index .catalog-card img,.service-tile .tile-media img{transition:none!important;transform:none!important}}

/* Make visual headers robust across IIS/browser stacking implementations */
.page-hero.dm-visual-hero{background-image:linear-gradient(90deg,rgba(7,10,20,.98) 0%,rgba(7,10,20,.92) 31%,rgba(7,10,20,.68) 56%,rgba(7,10,20,.25) 100%),var(--dm-hero-image);background-size:cover;background-position:center center}
.page-hero.dm-visual-hero::before{display:none}
.catalog-card[hidden],.service-tile[hidden]{display:none!important}
@media(max-width:720px){.page-hero.dm-visual-hero{background-image:linear-gradient(90deg,rgba(8,10,21,.95),rgba(8,10,21,.78)),var(--dm-hero-image)}}

/* 2026-10-30: Dark header contrast correction — menu labels remain white. */
.site-header .brand-name { color: #ffffff; }
.site-header .brand-name > span { color: #c8c7db; }
.site-header .nav-links > a,
.site-header .nav-links > a:hover,
.site-header .nav-links > a:focus-visible,
.site-header .nav-links > a[aria-current="page"] { color: #ffffff; }
.site-header .nav-links > a:hover,
.site-header .nav-links > a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: #ea64ca;
  text-decoration-thickness: 2px;
}
.site-header .mobile-toggle { color: #ffffff; border-color: rgba(255,255,255,.33); }
.site-header .mobile-toggle:hover { background: rgba(255,255,255,.09); }
@media (max-width:900px) {
  .site-header .nav-links {
    background: #0b0e19;
    box-shadow: 0 18px 32px rgba(0,0,0,.28);
    border-top: 1px solid rgba(255,255,255,.15);
  }
  .site-header .nav-links > a {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.14);
  }
  .site-header .nav-links > a:hover,
  .site-header .nav-links > a:focus-visible {
    background: rgba(255,255,255,.07);
  }
}