:root {
  --djr-bg: #07090d;
  --djr-bg-soft: #0c0f15;
  --djr-panel: #10141c;
  --djr-line: rgba(255, 255, 255, 0.09);
  --djr-text: #e8ecf2;
  --djr-muted: rgba(232, 236, 242, 0.66);
  --djr-faint: rgba(232, 236, 242, 0.42);
  --djr-accent: #4da6ff;
  --djr-accent-soft: rgba(77, 166, 255, 0.14);
  --djr-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --djr-font-display: "Archivo Black", "Inter", sans-serif;
  --djr-radius: 14px;
  --djr-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.djr {
  margin: 0;
  background: var(--djr-bg);
  color: var(--djr-text);
  font-family: var(--djr-font-body);
  line-height: 1.7;
}
.djr a { color: inherit; }
.djr img { display: block; max-width: 100%; }
.djr-container { max-width: var(--djr-max); margin: 0 auto; padding: 0 1.25rem; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--djr-accent); color: #04111f; padding: .5rem 1rem; z-index: 200; }
.skip-link:focus { left: .5rem; top: .5rem; }

.djr-wordmark {
  font-family: var(--djr-font-display);
  font-style: italic;
  line-height: 1;
  background: linear-gradient(178deg, #fff 12%, #aeb9c8 38%, #5d6b7e 50%, #d7e0ec 64%, #8b99ac 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(77, 166, 255, .35));
}
.djr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid rgba(77, 166, 255, .55);
  border-radius: 8px;
  padding: .72rem 1.5rem;
  color: var(--djr-text);
  background: transparent;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.djr-btn:hover { background: var(--djr-accent-soft); transform: translateY(-1px); box-shadow: 0 0 24px rgba(77, 166, 255, .22); }
.djr-btn--solid { background: linear-gradient(135deg, #2f86e6, #4da6ff); border-color: transparent; color: #051120; }

.djr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 9, 13, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--djr-line);
}
.djr-header-inner { max-width: var(--djr-max); margin: 0 auto; padding: .8rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.djr-brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.05; }
.djr-brand .djr-wordmark { font-size: 1.55rem; }
.djr-brand-sub { margin-top: .18rem; color: var(--djr-muted); font-size: .56rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.djr-nav { display: flex; align-items: center; gap: 1.45rem; margin-left: auto; }
.djr-nav a { color: var(--djr-muted); border-bottom: 2px solid transparent; padding: .35rem 0; font-size: .73rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; }
.djr-nav a:hover, .djr-nav a.is-active { color: var(--djr-text); border-color: var(--djr-accent); }
.djr-header .djr-btn { padding: .55rem 1.15rem; }
.djr-nav-toggle { display: none; margin-left: auto; border: 1px solid var(--djr-line); border-radius: 8px; background: none; color: var(--djr-text); padding: .3rem .65rem; cursor: pointer; }
@media (max-width: 880px) {
  .djr-nav-toggle { display: block; }
  .djr-header-cta { display: none; }
  .djr-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(7, 9, 13, .98); padding: .5rem 1.25rem 1rem; }
  .djr-nav.is-open { display: flex; }
  .djr-nav a { padding: .8rem .25rem; border-bottom: 1px solid var(--djr-line); }
}

.djr-hero {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(ellipse at 20% 12%, rgba(77,166,255,.12), transparent 45%), linear-gradient(180deg, #0b0e14, #07090d 72%);
}
.djr-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .34; filter: saturate(.85); }
.djr-hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 25%, rgba(7,9,13,.92) 100%); }
.djr-hero-inner { position: relative; padding: 5rem 1.25rem 4rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.djr-hero-logo { width: min(620px, 86vw); display: grid; place-items: center; }
.djr-hero-logo img { width: 100%; max-height: 260px; object-fit: contain; filter: drop-shadow(0 18px 46px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(77,166,255,.28)); }
.djr-hero .djr-wordmark { font-size: clamp(4.2rem, 13vw, 8.5rem); }
.djr-hero-plate { display: inline-block; border: 1px solid var(--djr-line); border-radius: 10px; background: rgba(10, 13, 19, .9); padding: .55rem 1.8rem; box-shadow: 0 8px 30px rgba(0,0,0,.55); }
.djr-hero-plate strong { display: block; font-size: clamp(1.1rem, 3vw, 1.6rem); }
.djr-hero-plate span, .djr-hero-tagline { color: var(--djr-muted); letter-spacing: .28em; text-transform: uppercase; font-size: .82rem; }
.djr-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; margin-top: 1rem; }

.djr-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.djr-eyebrow { margin: 0 0 .4rem; color: var(--djr-accent); font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.djr-h2 { margin: 0 0 1rem; font-size: clamp(1.75rem, 4.2vw, 2.55rem); font-weight: 800; line-height: 1.14; }

.djr-story { background: radial-gradient(ellipse at 18% 25%, rgba(77,166,255,.1), transparent 46%), linear-gradient(180deg, #080b11, var(--djr-bg-soft)); border-top: 1px solid var(--djr-line); }
.djr-story-grid, .djr-potw-grid, .djr-about-grid, .djr-creative-grid, .djr-contact-grid { display: grid; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
.djr-story-grid { grid-template-columns: .9fr 1.15fr; }
.djr-story-copy { max-width: 560px; }
.djr-story-lead { color: var(--djr-text); font-size: clamp(1.02rem, 2vw, 1.2rem); }
.djr-story-body, .djr-potw-body, .djr-creative-body, .djr-about-body p { color: var(--djr-muted); }
.djr-story-quote { margin: 1.5rem 0 0; padding-left: 1.2rem; border-left: 3px solid var(--djr-accent); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.djr-story-collage { min-height: 560px; position: relative; }
.djr-story-photo { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: var(--djr-radius); background: var(--djr-panel); box-shadow: 0 18px 46px rgba(0,0,0,.5); }
.djr-story-photo img { width: 100%; height: 100%; object-fit: cover; }
.djr-story-photo figcaption { position: absolute; left: .7rem; bottom: .7rem; border-radius: 100px; background: rgba(5,8,13,.72); padding: .25rem .65rem; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.djr-story-photo--1 { left: 4%; top: 0; width: 52%; height: 46%; }
.djr-story-photo--2 { right: 0; top: 12%; width: 46%; height: 36%; }
.djr-story-photo--3 { left: 0; bottom: 0; width: 43%; height: 38%; }
.djr-story-photo--4 { right: 7%; bottom: 4%; width: 50%; height: 43%; }

.djr-potw { background: linear-gradient(180deg, var(--djr-bg-soft), var(--djr-bg)); border-top: 1px solid var(--djr-line); border-bottom: 1px solid var(--djr-line); }
.djr-potw-grid { grid-template-columns: 1.25fr 1fr; }
.djr-potw-frame, .djr-about-photo { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--djr-radius); background: var(--djr-panel); box-shadow: 0 18px 50px rgba(0,0,0,.58); }
.djr-potw-frame { aspect-ratio: 4 / 3; }
.djr-potw-frame img, .djr-about-photo img { width: 100%; height: 100%; object-fit: cover; }
.djr-potw-title { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.1; }
.djr-potw-rule { width: 64px; height: 2px; border: 0; margin: 0 0 1.4rem; background: linear-gradient(90deg, var(--djr-accent), transparent); }

.djr-services-grid, .djr-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; margin-top: 2rem; }
.djr-service-card, .djr-gallery-card { overflow: hidden; border: 1px solid var(--djr-line); border-radius: var(--djr-radius); background: var(--djr-panel); text-decoration: none; transition: transform .22s, border-color .22s, box-shadow .22s; }
.djr-service-card:hover, .djr-gallery-card:hover { transform: translateY(-4px); border-color: rgba(77,166,255,.5); box-shadow: 0 16px 44px rgba(0,0,0,.55); }
.djr-service-media { aspect-ratio: 4 / 3; overflow: hidden; }
.djr-service-media img { width: 100%; height: 100%; object-fit: cover; }
.djr-service-body { padding: 1.1rem; }
.djr-service-icon, .djr-service-link { color: var(--djr-accent); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.djr-service-title { margin: .35rem 0; font-size: 1.05rem; }
.djr-service-text { color: var(--djr-muted); font-size: .86rem; }

.djr-creative-feature { background: radial-gradient(ellipse at 80% 25%, rgba(77,166,255,.14), transparent 44%), linear-gradient(180deg, var(--djr-bg), #080b12); }
.djr-creative-grid { grid-template-columns: .82fr 1.18fr; }
.djr-creative-images { display: grid; grid-template-columns: 1.35fr .8fr; gap: 1rem; }
.djr-creative-images img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border: 1px solid rgba(255,255,255,.13); border-radius: var(--djr-radius); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.djr-creative-images img:nth-child(2) { transform: translateY(2rem); }

.djr-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px; color: rgba(77,166,255,.65); background: radial-gradient(ellipse at 30% 25%, rgba(77,166,255,.16), transparent 55%), linear-gradient(160deg, #161c28, #0b0e15); }
.djr-about-grid { grid-template-columns: .85fr 1.15fr; }
.djr-about-photo { aspect-ratio: 4 / 5; }
.djr-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; border: 1px solid var(--djr-line); border-radius: var(--djr-radius); background: var(--djr-panel); padding: clamp(1.8rem, 5vw, 3rem); }
.djr-cta-title { margin: 0 0 .35rem; font-size: clamp(1.25rem, 3vw, 1.7rem); }
.djr-cta-sub { margin: 0; color: var(--djr-muted); }

.djr-page-hero { padding: clamp(3rem, 7vw, 4.5rem) 0 1.5rem; text-align: center; }
.djr-page-hero p { max-width: 60ch; margin: 0 auto; color: var(--djr-muted); }
.djr-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; padding: 1.5rem 0 .5rem; }
.djr-filter-chip { border: 1px solid var(--djr-line); border-radius: 100px; background: transparent; color: var(--djr-muted); padding: .5rem 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.djr-filter-chip.is-active { background: linear-gradient(135deg, #2f86e6, #4da6ff); border-color: transparent; color: #051120; }
.djr-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding: 1rem 0; }
.djr-gallery-card { position: relative; display: block; aspect-ratio: 4 / 3; }
.djr-gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.djr-gallery-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem; background: linear-gradient(180deg, transparent 35%, rgba(4,6,10,.92)); }
.djr-gallery-cat, .djr-gallery-meta { color: var(--djr-accent); font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.djr-gallery-name { margin: .15rem 0 0; font-size: 1.14rem; }
.djr-gallery-desc { color: var(--djr-muted); font-size: .8rem; }
.djr-gallery-status { text-align: center; color: var(--djr-faint); padding: 2.5rem 0; }

.djr-section-gallery-wrap { margin-top: clamp(1.5rem, 4vw, 2.4rem); }
.djr-section-gallery-card { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 1rem; max-width: 760px; overflow: hidden; border: 1px solid rgba(77,166,255,.22); border-radius: var(--djr-radius); background: rgba(16,20,28,.82); text-decoration: none; }
.djr-section-gallery-card.is-disabled { opacity: .72; }
.djr-section-gallery-media { min-height: 150px; background: var(--djr-panel); }
.djr-section-gallery-media img { width: 100%; height: 100%; object-fit: cover; }
.djr-section-gallery-copy { padding: 1rem 1.1rem 1.1rem 0; }
.djr-section-gallery-meta, .djr-section-gallery-button { color: var(--djr-accent); font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.djr-section-gallery-copy p { color: var(--djr-muted); font-size: .86rem; }

.djr-contact-grid { grid-template-columns: 1.2fr .8fr; align-items: start; }
.djr-form, .djr-info-card { border: 1px solid var(--djr-line); border-radius: var(--djr-radius); background: var(--djr-panel); padding: clamp(1.25rem, 3vw, 2rem); }
.djr-form { display: grid; gap: 1rem; }
.djr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.djr-field { display: flex; flex-direction: column; gap: .35rem; }
.djr-field label { color: var(--djr-muted); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.djr-field input, .djr-field select, .djr-field textarea { border: 1px solid var(--djr-line); border-radius: 8px; background: var(--djr-bg-soft); color: var(--djr-text); padding: .7rem .85rem; font: inherit; }
.djr-field textarea { min-height: 140px; resize: vertical; }
.djr-info-card { margin-bottom: 1rem; }
.djr-info-card h3 { margin-top: 0; color: var(--djr-accent); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; }
.djr-info-card p, .djr-info-card a { color: var(--djr-muted); text-decoration: none; }

.djr-service-page { padding: clamp(2.5rem, 6vw, 5rem) 0; background: radial-gradient(ellipse at 18% 10%, rgba(77,166,255,.12), transparent 42%), linear-gradient(180deg, var(--djr-bg-soft), var(--djr-bg)); }
.djr-service-back { display: inline-flex; margin-bottom: 1.4rem; color: var(--djr-muted); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.djr-service-back:hover { color: var(--djr-accent); }
.djr-service-hero { max-width: 760px; padding-bottom: clamp(1.5rem, 4vw, 2.4rem); }
.djr-service-heading { margin: 0 0 1rem; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .98; letter-spacing: 0; }
.djr-service-summary { max-width: 62ch; margin: 0; color: var(--djr-muted); font-size: clamp(1rem, 2vw, 1.18rem); }
.djr-service-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: .85rem; margin: 1rem 0 clamp(2rem, 5vw, 3.5rem); }
.djr-service-photo { position: relative; min-height: 240px; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--djr-radius); background: var(--djr-panel); box-shadow: 0 18px 46px rgba(0,0,0,.42); }
.djr-service-photo:nth-child(1) { grid-column: span 7; min-height: 430px; }
.djr-service-photo:nth-child(2) { grid-column: span 5; min-height: 430px; }
.djr-service-photo:nth-child(n+3) { grid-column: span 4; }
.djr-service-photo img { width: 100%; height: 100%; object-fit: cover; }
.djr-service-photo figcaption { position: absolute; left: .75rem; bottom: .75rem; max-width: calc(100% - 1.5rem); border-radius: 100px; background: rgba(5,8,13,.74); padding: .28rem .7rem; font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.djr-service-slideshow { position: relative; margin: 1rem 0 clamp(2rem, 5vw, 3.5rem); outline: none; }
.djr-service-slides { position: relative; min-height: clamp(360px, 66vw, 680px); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--djr-radius); background: var(--djr-panel); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
.djr-service-slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.djr-service-slide.is-active { opacity: 1; pointer-events: auto; }
.djr-service-slide img { width: 100%; height: 100%; object-fit: cover; }
.djr-service-slide figcaption { position: absolute; left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); border-radius: 100px; background: rgba(5,8,13,.78); padding: .35rem .75rem; color: var(--djr-text); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.djr-service-slideshow-btn { position: absolute; top: min(45%, 310px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(5,8,13,.72); color: var(--djr-text); cursor: pointer; font-size: 2rem; line-height: 1; }
.djr-service-slideshow-btn:hover { border-color: rgba(77,166,255,.7); background: rgba(77,166,255,.18); }
.djr-service-slideshow-btn--prev { left: .9rem; }
.djr-service-slideshow-btn--next { right: .9rem; }
.djr-service-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: .55rem; margin-top: .75rem; }
.djr-service-thumb { min-height: 64px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: var(--djr-panel); cursor: pointer; padding: 0; opacity: .64; }
.djr-service-thumb.is-active { border-color: var(--djr-accent); opacity: 1; }
.djr-service-thumb img { width: 100%; height: 100%; object-fit: cover; }
.djr-service-empty { border: 1px solid var(--djr-line); border-radius: var(--djr-radius); background: var(--djr-panel); color: var(--djr-muted); padding: 2rem; text-align: center; }
.djr-service-detail { display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: clamp(1.5rem, 5vw, 3rem); align-items: start; }
.djr-service-description { color: var(--djr-muted); font-size: 1.04rem; }
.djr-service-panel { border: 1px solid var(--djr-line); border-radius: var(--djr-radius); background: rgba(16,20,28,.88); padding: clamp(1.2rem, 3vw, 1.8rem); }
.djr-service-panel h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.djr-service-bullets { margin: 0 0 1.4rem; padding-left: 1.1rem; color: var(--djr-muted); }
.djr-service-bullets li + li { margin-top: .45rem; }

.djr-footer { margin-top: 3rem; border-top: 1px solid var(--djr-line); background: #05070a; padding: 3rem 0 1.5rem; }
.djr-footer-grid { display: grid; grid-template-columns: 1.1fr 1fr .8fr .9fr .9fr; gap: 2rem; }
.djr-footer .djr-wordmark { font-size: 2.2rem; }
.djr-footer-brandsub, .djr-footer a, .djr-footer li, .djr-footer-bottom { color: var(--djr-muted); font-size: .84rem; text-decoration: none; }
.djr-footer h4 { margin: 0 0 .8rem; color: var(--djr-accent); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.djr-footer ul { list-style: none; padding: 0; margin: 0; }
.djr-social { display: flex; gap: .6rem; }
.djr-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--djr-line); border-radius: 50%; }
.djr-footer-partner img { max-width: 130px; opacity: .9; }
.djr-footer-bottom { margin-top: 2rem; border-top: 1px solid var(--djr-line); padding-top: 1rem; text-align: center; }

@media (max-width: 900px) {
  .djr-story-grid, .djr-potw-grid, .djr-about-grid, .djr-creative-grid, .djr-contact-grid { grid-template-columns: 1fr; }
  .djr-service-detail { grid-template-columns: 1fr; }
  .djr-service-photo:nth-child(n) { grid-column: span 6; min-height: 280px; }
  .djr-story-collage { min-height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .djr-story-photo { position: relative; inset: auto; width: auto; height: auto; aspect-ratio: 4 / 3; }
  .djr-creative-images img:nth-child(2) { transform: none; }
  .djr-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .djr-story-collage, .djr-creative-images, .djr-form-row, .djr-footer-grid { grid-template-columns: 1fr; }
  .djr-service-gallery { grid-template-columns: 1fr; }
  .djr-service-photo:nth-child(n) { grid-column: auto; min-height: 240px; }
  .djr-service-slides { min-height: 320px; }
  .djr-service-slideshow-btn { top: 140px; width: 38px; height: 38px; }
  .djr-service-thumbs { grid-template-columns: repeat(4, 1fr); }
  .djr-section-gallery-card { grid-template-columns: 1fr; }
  .djr-section-gallery-copy { padding: 0 1rem 1.1rem; }
}