/* DWEBMEDIA V8 / DESKTOP WHITESPACE STUDY
   Original approved all-black SVG logo from V6/V7 retained without alteration.
   Major changes: whitespace, calmer density, editorial rhythm. */
:root { --ink: #101010; --paper: #fff; --soft: #fafafa; }
body { background: #fff; }

/* The white margins and more generous top give the massive wordmark room to breathe. */
@media (min-width: 1321px) {
  .wrap { width: min(1360px, calc(100% - 160px)); }
}
.header-layout { min-height: 116px; }
.brand-statement { margin-top: 40px; padding-top: 18px; padding-bottom: 88px; border-bottom: 0; overflow: visible; }
.brand-statement-top { margin-bottom: 28px; font-size: 10px; letter-spacing: .14em; }
.brand-statement img { display: block; width: 100%; height: auto; }

/* The hero retains the VELYR-like cutout and a web-development-related visual. */
.hero { padding-top: 33px; padding-bottom: 55px; }
.hero-grid { grid-template-columns: 36.5% 59%; gap: 4.5%; min-height: 760px; }
.hero-left { padding-top: 84px; padding-bottom: 0; }
.hero-kicker { margin-bottom: 42px; letter-spacing: .165em; }
.hero h1 { font-size: clamp(54px, 5.25vw, 82px); line-height: 1.065; }
.hero-lead { margin-top: 44px; max-width: 380px; font-size: 17px; line-height: 1.85; }
.hero-links { margin-top: 44px; gap: 36px; }
.hero-sidekick { padding-top: 78px; }
.mini-case-shell { width: min(240px, 72%); height: 242px; }
.mini-case img { height: 162px; }
.hero-image { height: 708px; min-height: 0; }
.hero-under-image { margin-top: 23px; }
.hero-corner-cta { bottom: 148px; }

/* Intro: avoid stacking the next section directly after the hero. */
.trust { padding-top: 232px; padding-bottom: 240px; }
.trust-grid { margin-top: 116px; grid-template-columns: 1fr .90fr; column-gap: 14%; }
.trust-titleline { gap: 36px; }
.trust-titleline strong { font-size: clamp(155px, 16.6vw, 239px); }
.trust-copy { max-width: 440px; }
.trust-copy h2 { margin-bottom: 38px; }
.trust-copy p { line-height: 1.9; margin-bottom: 42px; }

/* Projects: more space around intro and between cards (not more decoration). */
.projects { background: #f9f9f8; padding-top: 155px; padding-bottom: 195px; }
.project-intro { margin-top: 105px; margin-bottom: 106px; gap: 85px; }
.project-intro h2 { font-size: clamp(56px, 5.35vw, 86px); }
.project-intro p { line-height: 1.9; max-width: 290px; }
.project-filters { padding-top: 36px; margin-bottom: 58px; }
.filter-controls { gap: 14px; }
.filter { padding: 12px 21px; }
.work-grid { gap: 112px 45px; }
.card-thumb { border-radius: 16px; }
.card-info { padding-top: 25px; }
.card-info small { margin-top: 9px; }
.design-disclaimer { margin-top: 105px; opacity: .7; }

/* Airy monochrome identity wall in an honest two-row grid. */
.logos { padding-top: 210px; padding-bottom: 236px; }
.logo-title { margin-top: 112px; margin-bottom: 153px; }
.logo-title p { max-width: 280px; line-height: 1.85; }
.logo-wall { gap: 145px 65px; }
.logo-tile { min-height: 96px; }
.logo-disclaimer { margin-top: 145px; }

/* Restrained black services area with clear separation between service rows. */
.services { background: #0e0e0e; padding-top: 179px; padding-bottom: 194px; }
.service-heading { margin-top: 106px; margin-bottom: 92px; }
.service-heading p { line-height: 1.9; }
.service-rows > div { min-height: 172px; }

/* Large closing gesture: deliberate white space before the footer. */
.contact { padding-top: 207px; }
.contact-grid { padding-top: 135px; padding-bottom: 218px; gap: 16%; }
.contact-grid p:not(.eyebrow) { line-height: 1.9; margin-bottom: 46px; }
.footer { min-height: 146px; }

@media (min-width: 761px) and (max-width: 1320px) {
  .wrap { width: calc(100% - 100px); }
  .brand-statement { margin-top: 35px; padding-bottom: 75px; }
  .hero { padding-top: 20px; }
  .hero-grid { grid-template-columns: 36% 60%; gap: 4%; min-height: 668px; }
  .hero-left { padding-top: 55px; }
  .hero h1 { font-size: clamp(48px, 5vw, 70px); }
  .hero-lead { font-size: 15px; line-height: 1.8; margin-top: 34px; }
  .hero-links { margin-top: 32px; }
  .hero-sidekick { padding-top: 36px; }
  .hero-image { height: 645px; }
  .hero-corner-cta { bottom: 115px; }
  .trust { padding-top: 173px; padding-bottom: 181px; }
  .trust-grid { margin-top: 82px; gap: 8%; }
  .projects { padding-top: 136px; padding-bottom: 170px; }
  .project-intro { margin-top: 78px; margin-bottom: 78px; }
  .work-grid { gap: 95px 36px; }
  .logos { padding-top: 177px; padding-bottom: 197px; }
  .logo-title { margin-top: 95px; margin-bottom: 105px; }
  .logo-wall { gap: 110px 32px; }
  .services { padding-top: 139px; padding-bottom: 157px; }
  .service-heading { margin-top: 85px; margin-bottom: 77px; }
  .service-rows>div { min-height: 146px; }
  .contact { padding-top: 170px; }
  .contact-grid { padding-top: 112px; padding-bottom: 180px; }
}

/* Layout safety only; a full mobile art direction follows desktop approval. */
@media (max-width: 760px) {
  .brand-statement { margin-top: 30px; padding-top: 12px; padding-bottom: 38px; }
  .brand-statement-top { margin-bottom: 16px; font-size: 8px; }
  .hero { padding-top: 4px; padding-bottom: 22px; }
  .hero-grid { min-height: 0; }
  .hero-left { padding-top: 32px; }
  .hero h1 { font-size: clamp(37px, 9vw, 60px); }
  .hero-lead { margin-top: 28px; font-size: 15px; }
  .hero-links { margin-top: 30px; gap: 16px; }
  .hero-image { height: 405px; }
  .hero-sidekick { padding-top: 28px; }
  .trust { padding-top: 110px; padding-bottom: 130px; }
  .trust-grid { margin-top: 72px; }
  .projects { padding-top: 120px; padding-bottom: 135px; }
  .project-intro { margin-top: 75px; margin-bottom: 60px; }
  .project-filters { padding-top: 30px; margin-bottom: 40px; }
  .work-grid { gap: 69px; }
  .logos { padding-top: 131px; padding-bottom: 144px; }
  .logo-title { margin-top: 76px; margin-bottom: 95px; }
  .logo-wall { gap: 90px 20px; }
  .services { padding-top: 129px; padding-bottom: 148px; }
  .service-heading { margin-top: 80px; margin-bottom: 68px; }
  .service-rows>div { min-height: 140px; }
  .contact { padding-top: 142px; }
  .contact-grid { padding-top: 82px; padding-bottom: 152px; }
  .footer { min-height: 110px; }
}