/* ============================================================
   DMG DISTRIBUTIONS — Service Catalog
   Modeled on digitalflagship.com:
   near-black (#060616), acid-lime accent (#BFFD38),
   massive stacked grotesk display, bold-word emphasis headings,
   roster grid, momentum stats. Fully responsive.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink:    #060616;   /* near-black background */
  --ink-2:  #0D0D1E;   /* raised surface */
  --ink-3:  #15152A;   /* card base */
  --paper:  #F7F6F9;   /* off-white text */
  --lime:   #BFFD38;   /* acid-lime accent */
  --lime-2: #CFFF5E;
  --grey:   #8A8893;   /* muted text */
  --grey-2: #5A5866;
  --line:   rgba(247,246,249,0.10);
  --maxw:   1320px;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--ink); color: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6; overflow-x: hidden;
}
::selection { background: var(--lime); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---------- Display type ---------- */
h1,h2,h3,h4,.display {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  line-height: 0.95; letter-spacing: -0.03em;
}
.display-xl {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: 0.84; letter-spacing: -0.04em;
  font-size: clamp(3.4rem, 15vw, 13rem);
}
.eyebrow {
  font-family: 'Space Grotesk'; font-size: clamp(11px,1.1vw,13px); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lime);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content:""; width: 30px; height: 1px; background: var(--lime); }
.muted { color: var(--grey); }
.lime { color: var(--lime); }
/* bold-word emphasis (DF heading style): light base, accented strong words */
.head-mix { font-weight: 400; }
.head-mix strong { font-weight: 700; }
.head-mix em { font-style: normal; color: var(--lime); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk'; font-weight: 600; font-size: 15px;
  padding: 16px 30px; border-radius: 100px; border: 1px solid transparent; cursor: pointer;
  transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-3px); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-2); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Nav ---------- */
header.nav { position: fixed; top:0; left:0; right:0; z-index: 200; transition: background .4s, backdrop-filter .4s, border-color .4s; border-bottom: 1px solid transparent; }
header.nav.scrolled { background: rgba(6,6,22,0.82); backdrop-filter: blur(18px); border-bottom-color: var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height: 78px; }
.brand { font-family:'Space Grotesk'; font-weight:700; font-size: 20px; letter-spacing:-0.02em; display:flex; align-items:center; gap:10px; }
.brand .dot { width:10px; height:10px; border-radius:50%; background: var(--lime); }
.brand small { font-weight:500; font-size:10px; letter-spacing:0.2em; color:var(--grey); text-transform:uppercase; font-family:'Space Grotesk'; }
.nav-links { display:flex; align-items:center; gap: 36px; }
.nav-links a { font-size:15px; font-weight:500; opacity:.82; transition: opacity .3s, color .3s; }
.nav-links a:hover, .nav-links a.active { opacity:1; }
.nav-links a.active { color: var(--lime); }
.nav-cta { display:flex; align-items:center; gap:16px; }
.burger { display:none; background:none; border:0; color:var(--paper); cursor:pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom: clamp(40px, 7vh, 90px); }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:115%; object-fit:cover; opacity:.40; }
.hero-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,6,22,0.55) 0%, rgba(6,6,22,0.35) 40%, var(--ink) 96%); }
.hero .wrap { position:relative; z-index:2; width:100%; padding-top: 120px; }
.hero .display-xl { margin: 10px 0 0; }
.hero .display-xl .out { -webkit-text-stroke: 1.5px var(--paper); color: transparent; }
.hero-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top: clamp(28px,5vh,56px); flex-wrap:wrap; }
.hero-foot p { max-width: 46ch; color: rgba(247,246,249,0.86); font-size: clamp(1rem,1.4vw,1.2rem); }
.hero-actions { display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }

/* ---------- Marquee ---------- */
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--ink-2); overflow:hidden; white-space:nowrap; display:flex; padding: 20px 0; }
.marquee .track { display:inline-flex; gap:48px; padding-left:48px; animation: scroll 32s linear infinite; }
.marquee.rev .track { animation-direction: reverse; }
.marquee span { font-family:'Space Grotesk'; font-weight:600; font-size: clamp(1.1rem,2.4vw,1.7rem); color: var(--grey); display:inline-flex; align-items:center; gap:48px; }
.marquee span::after { content:"/"; color: var(--lime); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section.block { padding: clamp(64px, 10vh, 150px) 0; position: relative; }
.section-head { max-width: 900px; margin-bottom: clamp(36px,5vw,64px); }
.section-head h2, h2.big { font-size: clamp(2rem, 6vw, 5.2rem); text-transform:none; }
.section-head p { margin-top: 22px; color: var(--grey); font-size: clamp(1rem,1.3vw,1.18rem); max-width: 62ch; }
.lead-row { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }

/* ---------- Roster / portfolio grid ---------- */
.roster { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.work { position:relative; border-radius: 16px; overflow:hidden; background: var(--ink-2); aspect-ratio: 1 / 1; display:block; }
.work img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease), opacity .5s; opacity:.92; }
.work::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(6,6,22,0.92) 0%, rgba(6,6,22,0.1) 55%); opacity:.85; transition: opacity .4s; }
.work:hover img { transform: scale(1.05); }
.work:hover::after { opacity:1; }
.work .meta { position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 26px; transform: translateY(8px); transition: transform .5s var(--ease); }
.work:hover .meta { transform:none; }
.work .meta .name { font-family:'Space Grotesk'; font-weight:700; font-size: 1.05rem; letter-spacing:0.04em; text-transform:uppercase; }
.work .meta .desc { color: rgba(247,246,249,0.78); font-size:.92rem; margin-top:6px; max-width: 32ch; opacity:0; transform: translateY(6px); transition: opacity .45s, transform .45s; }
.work:hover .meta .desc { opacity:1; transform:none; }
.work .tag { position:absolute; top:18px; left:18px; z-index:2; font-family:'Space Grotesk'; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink); background: var(--lime); padding: 5px 11px; border-radius:100px; }

/* ---------- Screen mosaic ---------- */
.mosaic { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.mosaic .cell { border-radius:14px; overflow:hidden; aspect-ratio: 4/5; background: var(--ink-2); }
.mosaic .cell img { width:100%; height:100%; object-fit:cover; opacity:.85; transition: transform .8s var(--ease); }
.mosaic .cell:hover img { transform: scale(1.06); }

/* ---------- Category cards ---------- */
.cat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.cat { border:1px solid var(--line); border-radius:18px; background: var(--ink-2); padding: 30px; transition: border-color .4s, transform .5s var(--ease); }
.cat:hover { border-color: rgba(191,253,56,0.4); transform: translateY(-5px); }
.cat .k { font-family:'Space Grotesk'; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color: var(--lime); }
.cat h4 { font-size: 1.5rem; margin: 14px 0 12px; }
.cat p { color: var(--grey); font-size: .96rem; }

/* ---------- Momentum stats ---------- */
.momentum { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.mstat { border-top: 2px solid var(--line); padding-top: 26px; transition: border-color .4s; }
.mstat:hover { border-color: var(--lime); }
.mstat .k { font-family:'Space Grotesk'; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color: var(--grey); }
.mstat .big { font-family:'Space Grotesk'; font-weight:700; font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--lime); letter-spacing:-0.04em; line-height:1; margin: 12px 0 8px; }
.mstat .lbl { font-family:'Space Grotesk'; font-weight:600; font-size:1.05rem; }

/* ---------- Split feature ---------- */
.split { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,64px); align-items:center; }
.split img { border-radius:18px; width:100%; height:100%; object-fit:cover; }
.split h2 { font-size: clamp(1.9rem,4.5vw,3.6rem); margin: 16px 0 20px; }
.split ul { list-style:none; margin-top:24px; display:grid; gap:14px; }
.split li { display:flex; gap:14px; align-items:flex-start; color: rgba(247,246,249,0.85); }
.split li::before { content:""; flex:none; width:8px; height:8px; margin-top:9px; background:var(--lime); border-radius:2px; }

/* ---------- Service rows (services page) ---------- */
.svc-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.svc { position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background: var(--ink-2); min-height: 400px; display:flex; flex-direction:column; justify-content:flex-end; transition: transform .55s var(--ease), border-color .4s; }
.svc:hover { transform: translateY(-6px); border-color: rgba(191,253,56,0.4); }
.svc-img { position:absolute; inset:0; z-index:0; }
.svc-img img { width:100%; height:100%; object-fit:cover; opacity:.42; transition: transform .8s var(--ease), opacity .5s; }
.svc:hover .svc-img img { transform: scale(1.06); opacity:.55; }
.svc-img::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, var(--ink) 12%, rgba(6,6,22,0.35) 70%); }
.svc-body { position:relative; z-index:2; padding: 32px; }
.svc-num { font-family:'Space Grotesk'; font-size:13px; color:var(--lime); letter-spacing:0.2em; }
.svc h3 { font-size: 1.9rem; text-transform:uppercase; margin: 14px 0 12px; }
.svc p { color: rgba(247,246,249,0.8); font-size:1rem; max-width:42ch; }
.svc .tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.svc .tags span { font-size:12px; color:var(--grey); border:1px solid var(--line); padding:5px 12px; border-radius:100px; }

/* ---------- Pricing ---------- */
.price-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; align-items:stretch; }
.plan { border:1px solid var(--line); border-radius:20px; background: var(--ink-2); padding: 36px 30px; display:flex; flex-direction:column; transition: transform .5s var(--ease), border-color .4s; }
.plan:hover { transform: translateY(-6px); }
.plan.featured { background: linear-gradient(180deg, rgba(191,253,56,0.10), var(--ink-2) 60%); border-color: rgba(191,253,56,0.5); }
.plan .tier { font-family:'Space Grotesk'; font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--grey); }
.plan.featured .tier { color: var(--lime); }
.plan .name { font-family:'Space Grotesk'; font-weight:700; font-size:1.9rem; text-transform:uppercase; margin:10px 0 6px; letter-spacing:-0.02em; }
.plan .price { font-family:'Space Grotesk'; font-size:2.5rem; font-weight:700; margin:18px 0 4px; letter-spacing:-0.03em; }
.plan .price small { font-size:1rem; color:var(--grey); font-weight:500; }
.plan .desc { color:var(--grey); font-size:.95rem; min-height:48px; }
.plan ul { list-style:none; margin:24px 0 30px; display:grid; gap:12px; }
.plan li { display:flex; gap:12px; font-size:.96rem; color: rgba(247,246,249,0.85); }
.plan li svg { flex:none; margin-top:3px; }
.plan .btn { width:100%; justify-content:center; margin-top:auto; }
.badge { display:inline-block; background:var(--lime); color:var(--ink); font-family:'Space Grotesk'; font-weight:600; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:14px; }

/* ---------- Steps ---------- */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.step { border-top:2px solid var(--line); padding-top:24px; transition: border-color .4s; }
.step:hover { border-color: var(--lime); }
.step .n { font-family:'Space Grotesk'; font-weight:700; font-size:2.6rem; color:var(--lime); letter-spacing:-0.03em; }
.step h4 { font-size:1.25rem; text-transform:uppercase; margin:12px 0 8px; }
.step p { color:var(--grey); font-size:.95rem; }

/* ---------- CTA banner ---------- */
.cta-banner { position:relative; border-radius:24px; overflow:hidden; padding: clamp(48px,8vw,110px) clamp(24px,5vw,48px); text-align:center; }
.cta-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; z-index:0; }
.cta-banner::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(6,6,22,0.88), rgba(6,6,22,0.5)); z-index:1; }
.cta-banner > * { position:relative; z-index:2; }
.cta-banner h2 { font-size: clamp(2.2rem,7vw,5.5rem); text-transform:none; max-width: 18ch; margin: 16px auto 24px; }
.cta-banner p { color: rgba(247,246,249,0.85); max-width:50ch; margin: 0 auto 34px; }

/* ---------- FAQ ---------- */
.faq { display:grid; max-width:880px; }
.faq details { border-bottom:1px solid var(--line); padding:24px 0; }
.faq summary { font-family:'Space Grotesk'; font-weight:600; font-size: clamp(1.05rem,2vw,1.25rem); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--lime); font-size:1.6rem; line-height:1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color:var(--grey); margin-top:14px; max-width:70ch; }

/* ---------- Page hero (interior) ---------- */
.page-hero { padding: clamp(120px,18vh,180px) 0 clamp(30px,5vh,60px); }
.page-hero h1 { font-size: clamp(2.6rem,9vw,7rem); text-transform:uppercase; margin-top:18px; line-height:0.9; }
.page-hero p { color:var(--grey); max-width:58ch; margin-top:22px; font-size: clamp(1rem,1.4vw,1.15rem); }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px,5vw,60px); align-items:start; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label { font-family:'Space Grotesk'; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey); }
.field input,.field select,.field textarea { background: var(--ink-2); border:1px solid var(--line); border-radius:12px; color:var(--paper); padding:15px 16px; font-family:'Inter'; font-size:1rem; transition: border-color .3s; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color: var(--lime); }
.field textarea { resize:vertical; min-height:130px; }
.contact-info { display:grid; gap:24px; }
.contact-info .k { font-family:'Space Grotesk'; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--lime); margin-bottom:6px; }

/* ---------- Newsletter strip ---------- */
.news { border:1px solid var(--line); border-radius:22px; background: var(--ink-2); padding: clamp(32px,5vw,56px); display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; }
.news h3 { font-size: clamp(1.6rem,3.5vw,2.6rem); }
.news p { color: var(--grey); margin-top:12px; }
.news form { display:flex; gap:12px; flex-wrap:wrap; }
.news input { flex:1; min-width: 200px; background: var(--ink); border:1px solid var(--line); border-radius:100px; color:var(--paper); padding:15px 20px; font-family:'Inter'; }
.news input:focus { outline:none; border-color: var(--lime); }

/* ---------- Footer ---------- */
footer.site { border-top:1px solid var(--line); background: var(--ink-2); padding: clamp(48px,7vw,80px) 0 40px; margin-top: 40px; }
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; }
.foot-grid h5 { font-family:'Space Grotesk'; font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--grey); margin-bottom:18px; }
.foot-grid a { display:block; padding:7px 0; opacity:.8; font-size:.96rem; transition: opacity .3s, color .3s; }
.foot-grid a:hover { opacity:1; color:var(--lime); }
.foot-brand p { color:var(--grey); margin-top:16px; max-width:34ch; font-size:.96rem; }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:52px; padding-top:28px; border-top:1px solid var(--line); color:var(--grey); font-size:.88rem; flex-wrap:wrap; gap:12px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}.reveal[data-d="5"]{transition-delay:.40s}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} .marquee .track{animation:none} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .roster { grid-template-columns: repeat(2,1fr); }
  .mosaic { grid-template-columns: repeat(3,1fr); }
  .cat-grid { grid-template-columns: repeat(2,1fr); }
  .momentum { grid-template-columns: repeat(2,1fr); gap: 28px 18px; }
  .steps { grid-template-columns: repeat(2,1fr); gap:28px; }
  .work .meta .desc { opacity:1; transform:none; } /* show on touch */
}
@media (max-width: 880px) {
  .nav-links, .nav-cta .btn { display:none; }
  .burger { display:inline-flex; }
  .nav-links.open { display:flex; flex-direction:column; gap:4px; position:absolute; top:78px; left:0; right:0; background: rgba(6,6,22,0.98); backdrop-filter: blur(18px); padding: 18px 24px 28px; border-bottom:1px solid var(--line); }
  .nav-links.open a { padding:13px 0; font-size:1.15rem; }
  .split { grid-template-columns: 1fr; }
  .split .img-order { order: -1; }
  .svc-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .news { grid-template-columns: 1fr; gap:24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap:32px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .roster { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2,1fr); }
  .cat-grid { grid-template-columns: 1fr; }
  .momentum { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-foot { flex-direction: column; align-items:flex-start; }
  .work .meta .desc { font-size:.88rem; }
  .btn { padding: 14px 24px; }
}